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

/* 描画エリアのサイズ */
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 dateContainer　= svgContainer.append("g").attr("class","dateBlock");
var legendContainer　= svgContainer.append("g").attr("class","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 = newArray();
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")
   	 .date(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")
   .date(topojson.feature(_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(parselnt(_prev[i]))   
  })
  .translation()
  .duration(2000)
  .style("fill",function(d,i){
    
    //変化させた後の色
    //var_value = selectedPopulation[0][d.properties.nam_ja];
    //_prev[i] = _value;
    //return rScale(parselnt(_value))
    return"#CCC";
  　　});
  };

  /*データcapitalの描画 */
function renderCircle(){
  
  dateContainer.selectAll("circle")
  .date(_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";
  })；
  };
     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();

};