var width = 960;
var height = 600;

var max = 536859;

var locations = d3.map();

var div = d3.select("body").append("div").attr("class", "toolTip").style("opacity", 0);

var filter = "";

d3.csv("Patients.csv", function(data) {

    d3.json("us-states.json", function(json) {

        for (var j = 0; j < json.features.length; j++) {
            json.features[j].properties.count = 0;
        }

        for (var i = 0; i < data.length; i++) {
            var dataState = data[i].State;

            for (var j = 0; j < json.features.length; j++) {
                var jsonState = json.features[j].properties.name;

                if (dataState == jsonState) {
                    json.features[j].properties.count = data[i].TotalDischarges;
                }
            }
        }
      	
        drawMap("US", json, data, 600, 400);
    });

});



//inspiration from http://bl.ocks.org/michellechandra/0b2ce4923dc9b5809922
function drawMap(id, json, data, mapWidth, mapHeight) {
    var projection = d3.geoAlbersUsa()
        .translate([mapWidth / 2, mapHeight / 2]) // translate to center of screen
        .scale([mapWidth]); // scale things down so see entire US

    // Define path generator
    var path = d3.geoPath() // path generator that will convert GeoJSON to SVG paths
        .projection(projection); // tell path generator to use albersUsa projection

    var svg = d3.select("body")
        .select("#" + id);

    svg.selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path)
        .style("stroke", "#d8d8d8")
        .style("stroke-width", "1")
        .style("fill", function(d) {
            return d3.interpolateBlues(d.properties.count/ max);
        })
    		.on("mouseover", function(d) {      
            div.transition()        
                 .duration(200)      
                 .style("opacity", .9);
				})   
        .on("mousemove", function(d){
            div
              .style("left", d3.event.pageX + 10 + "px")
              .style("top", d3.event.pageY - 30 + "px")
              .style("display", "inline-block")
              .html(d.properties.name + "<br>" + (d.properties.count));
        })
    		.on("mouseout", function(d){
      			div.transition()        
               .duration(500)      
               .style("opacity", 0);
      			div
              .style("display", "none");
    		});               

    // d3.legend http://d3-legend.susielu.com/

    var linear = d3.scaleLinear()
        .domain([0, max])
        .range(["#e5f5e0", "#134752"]);

    var svg = d3.select("svg");

    svg.append("g")
        .attr("class", "legendLinear")
        .attr("transform", "translate(490,250)");

    var legendLinear = d3.legendColor()
        .labelFormat(d3.format(".0f"))
        .shapeWidth(20)
    		.title("Discharge Count")
        .cells(4)
        .orient('vertical')
        .scale(linear);

    svg.select(".legendLinear")
        .call(legendLinear);
}