var d3 = Plotly.d3;

var gd = document.getElementById('graph');
var currentLocation = null;
var padding = 20;

var csvStates = null;
var csvCities = null;

getStates(getCities(createMap));

function getStates(cb) {
  var url = 'https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv';
  
  d3.csv(url, function(err, csv) {
    if(err) throw err;
    csvStates = csv;
    
    cb();
  });  
}

function getCities(cb) {
  var url = 'https://raw.githubusercontent.com/plotly/datasets/master/2014_us_cities.csv';
  
  d3.csv(url, function(err, csv) {
    if(err) throw err;
    csvCities = csv;
    
    cb();
  })
}

function createMap() {
    var data = [
        makeChoropleth(csvStates),
        makeBubbles(csvCities)
    ];

    var layout = {
        title: [
          '2014 US population by states',
          '(Click on state to see population by cities)'
        ].join('<br>'),
        geo: {
            scope: 'usa',
            countrycolor: 'rgb(255, 255, 255)',
            showland: true,
            landcolor: 'rgb(217, 217, 217)',
            showlakes: true,
            lakecolor: 'rgb(255, 255, 255)',
            subunitcolor: 'rgb(255, 255, 255)',
            lonaxis: {},
            lataxis: {}
        }
    };
  
  	gd.on('plotly_click', handleClick);

    Plotly.plot(gd, data, layout);
}

function makeChoropleth(csv) {
    var trace = {
        type: 'choropleth',
        locationmode: 'USA-states',
        locations: [],
        z: [],
        text: []
    };

    csv.forEach(function(datum) {
        trace.locations.push(datum.postal);
        trace.z.push(datum.pop);
        trace.text.push(datum.state);
    });

    return trace;
}

function makeBubbles(csv) {
    var trace = {
        type: 'scattergeo',
        lon: [],
        lat: [],
        text: [],
        name: '',
        marker: {
            size: [],
            sizemode: 'area',
            sizeref: 5e3,
            sizemin: 4
        },
        visible: false
    };

    csv.forEach(function(datum) {
        trace.lon.push(datum.lon);
        trace.lat.push(datum.lat);
        trace.text.push([
            datum.name, '<br>',
            '<b>Population:</b> ', datum.pop
        ].join(''));
        trace.marker.size.push(datum.pop);
    });

    return trace;
}

function handleClick(d) {
    if(d3.event.defaultPrevented) return;

    var geoLayout = gd._fullLayout.geo,
        geo = geoLayout._geo,
        projection = geo.projection,
        bb = d3.geo.path().projection(projection).bounds(d);

    var lonlat0, lonlat1;

    function invert(p) {
        return projection.invert(p);
    }

    if(currentLocation === d.id) {
        currentLocation = null;

        gd.layout.geo.lonaxis.range = geoLayout.lonaxis._fullRange;
        gd.layout.geo.lataxis.range = geoLayout.lataxis._fullRange;
        Plotly.restyle(gd, 'visible', false, 1);
    }
    else {
        currentLocation = d.id;
        lonlat0 = invert([bb[0][0] - padding, bb[0][1] - padding]);
        lonlat1 = invert([bb[1][0] + padding, bb[1][1] + padding]);

        gd.layout.geo.lonaxis.range = [lonlat0[0], lonlat1[0]];
        gd.layout.geo.lataxis.range = [lonlat1[1], lonlat0[1]];
        Plotly.restyle(gd, 'visible', true, 1);
    }

    Plotly.Fx.loneUnhover(gd);
}