/* --------------------
  初期の設定
-------------------- */
/*描画エリアのサイズ*/
var width = 900;
var height = 600;

/*表示領域の用意*/
var svgContainer = d3.select("#main").append("svg")
    .attr("width",width).attr("height",height);

var mapContainer = svgContainer.append("g").attr("class","mapBlock");
var dataContainer = svgContainer.append("g").attr("class","dataBlock");
var legendContainer = svgContainer.append("g").attr("id","legendBlock")
          .attr('transform','translate('+800+","+60+')')
          .attr("width",300).attr("height",60);

/*地図投影法*/
var projection = d3.geo.mercator()
      .scale(1200)
      .center([140.467551,37.750299]);//中心の座標。経度緯度の順。

/*地形データをSVGに変換するときに呼び出す*/
var path = d3.geo.path().projection(projection);

/*スケール*/
var rScale = d3.scale.linear().domain([0,14000]).range(["#FFF","#00F"]);


/* --------------------
  外部ファイルの読み込み
-------------------- */

queue()
    .defer(d3.json, "japan.json")
    .defer(d3.tsv,  "population.tsv")
    .defer(d3.tsv,  "capital.tsv")
    .await(mainFunc);


/* --------------------
  ファイル読み込み後に実行するメインの処理
-------------------- */

function mainFunc(_error, _topojson, _population, _capital) {


/*地図データpopulationの描画の描画*/
function renderMap(){
  
  var_prev = new Array();
  
  //初回のみ実行
  mapContainer.selectAll("path")
     .data(topojson.feature(_topojson,_topojson.objects.japan).features)
     .enter()
     .append("path")
     .attr("id",function(d){
           return d.properties.nam_ja;
           })
     .attr("d",path)
     .style("stroke","#333")
     .style("stroke-width","0.2px")
     .style("fill","#FFF");
  
  //プルダウンの変更がある度に実行
  mapContainer.selectAll("path")
  .style("fill",function(d,i){
    //変化させる前の色
    return rScale(parseInt(_prev[i]))
  })
  .transition()
  .duration(2000)
  .style("fill",function(d,i){
    //変化させた後の色
    // var _value = selectedPopulation[0][d.properties.nam_ja];
    // _prev[i] = _value;
    // return rScale(parseInt(_value))
    return "#CCC";
  });
};

renderMap();//一時的に記述しておく

//renderCircle();	
};


/*データcapitalの描画*/
function renderCircle(){
  
  dataContainer.selectAll("circle")
  .data(_capital)
  .enter()
  .append('circle')
  .attr('class',"pref")
  .attr('id',function(d){
        return d.nam_ja;
  })
  .attr('cx',function(d){
  return projection([d.lon,d.lat])[0];
  })
  .attr('cy',function(d){
  return projection([d.lon,d.lat])[1];
  })
  .attr('r',2)
  .style('fill,function(d)'){
    return "#000"
  };
};