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

// 描画エリアサイズ
var width = 900;
var height = 600;

// <svg>生成
var svgContainer = d3.select('#main').append('svg')
    .attr('width', width)
    .attr('height', height);

// SVG内にグループ<g>生成
var mapContainer = svgContainer.append('g').attr('class', 'mapBlock');
var dataContainer = svgContainer.append('g').attr('class', 'dataBlock');
var legendContainer = svgContainer.append('g').attr('class', 'ledendBlock')
    .attr('transform', 'translate(' + 800 + ',' + 60 + ')')
    .attr('width', 300).attr('height', 60).attr('stroke-width', 5);

// 地図表示
var projection = d3.geo.mercator().scale(1200).center([140,38]); //投影法
var path = d3.geo.path().projection(projection); //地形データをSVGに変換

// データのスケール：0が白、14000が青になるようにしている
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) {

    if (_error){ console.log(_error); }
    //console.log('hogeghogheohgeo');

    // 
    var menu;
    var yearArray = [];
    var indexYear = -1;
    var selectedPopulation;
  
    //日本地図
    function renderMap() {
        var _prev = new Array();
      
        mapContainer.selectAll('path')
            .data(topojson.feature(_topojson, _topojson.objects.japan).features)
            .enter()
            .append('path')  // selectAllとappendで同じ要素を指定
            .attr('id', function(d){return d.properties.nam_ja})
            .attr('d', path)
            .style('stroke', '#333')
            .style('stroke-width', '.1px')
            .style('fill', '#fff');
      
        mapContainer.selectAll('path')
            .style('fill', function(d, i){
                return rScale(parseInt(_prev[i]));
            })
            .transition()
            .duration(200)
            .style('fill', function(d, i){
                //プルダウン処理
                var _value = selectedPopulation[0][d.properties.nam_ja];
                _prev[i] = _value;
                return rScale(parseInt(_value));
                //return '#3cc';
            });
    }

    
    // 都道府県庁所在地的なやつ
    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', 1)
            .style('fill', '#000');
    }
  
    renderCircle();
  
  
    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+'年'; });
    }
    initMenu();
  
    function changeYear(){
        //console.log('changed year');
        
        if (indexYear = -1){
            indexYear = parseInt(menu.property('value'));
        } else {
            indexYear = 0;
        }
        
        selectedPopulation = _population.filter(function(d){
            return d.date == yearArray[indexYear];
        });
        //console.log(selectedPopulation);
      
        renderMap();
    };
  
    changeYear();
  
    //凡例
    function drawLegend(){
        var legendObj = d3.legend.color()
            .cells(14)
            .shapeWidth(15).shapeHeight(15)
            .labelFormat(d3.format('.0f'))
            .orient('vertical')
            .scale(rScale);
      
        legendContainer.call(legendObj); 
    }
    
    drawLegend();

};