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

/* 描画エリアのサイズ */
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", "#ff0000"]);

/* プルダウン用変数 */
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) )
                      //return "#CCC";
                  });
    };

    /* データcapitalの描画 */
    function renderCircle() {

        dataContainer.selectAll("chara")
            .data(_capital)
            .enter()
            .append('image')
            .attr('class', "chara")
            .attr('id', function(d){
                return d.nam_ja;
            })
        		.attr("xlink:href", "http://gist.githubusercontent.com/n1n9-jp/0edd64c473e435245ace7946a8ffa268/raw/ced65458a2e3351c6c58f339e6c15c1931bc248e/maki-animal.png")
            .attr('x', function(d){
                return projection([d.lon, d.lat])[0];
            })
            .attr('y', function(d){
                return projection([d.lon, d.lat])[1];
            })
            .attr("width", 20)
            .attr("height", 16);
    };

    function drawLegend() {
        var legendObj = d3.legend.color()
          .shapeWidth(15).shapeHeight(15)
          .labelFormat(d3.format(".0f"))
          .cells([0, 2000, 4000, 6000, 8000, 10000, 12000, 14000])
          .orient('vertical')
          .scale(rScale);

        legendContainer.call(legendObj);
    };

    initMenu();
    changeYear();
    renderCircle();
    drawLegend();

};