/* --------------------
  初期の設定
-------------------- */

/* 表示領域のサイズ */
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"]);

/* プルダウン用変数 */
var menu;
var indexYear = -1;
var yearArray = new Array();
var selectedPopulation;


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

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


/* --------------------
  ファイル読み込み後に実行するメインの処理
-------------------- */
function mainFunc(_error, _topojson, _population, _capital) {

    if (_error){ console.log(_error); }

  
  /*プルダウンの初期化*/
  function initMenu(){
    for(var i=0; i<_population.length; i++){
      yearArray[i] = _population[i].date;
    }
    
    menu = d3.select("#menuBlock select").on("change", changeYear);
    menu.selectAll("option")
      .data(yearArray)
      .enter().append("option")
      .attr("value",function(d,i){return i;})
      .text(function(d){return d+"年";});
  }
  
  function changeYear(){
    if(indexYear != -1){
      indexYear = parseInt(menu.property("value"));
    }else{
      indexYear = 0;
    }
    
    selectedPopulation = _population.filter(function(d){return d.date == yearArray[indexYear]});
    renderMap();
  }
  
 /*地図とデータ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));
    });
  }
}
  
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";
    });
}


  initMenu();
  changeYear();
  renderCircle();
  
};