// select "#mapContainer" div already set up in index.html
var svg = d3.select("#mapContainer")
    // add on an svg element
    .append("svg")
    // Set the svg to the width and height we already defined - otherwise it won't show up!
    .attr("width", width)
    .attr("height", height)
    // add on a "g" to hold a group of state shapes
    .append('g')
    // and give it the class we define in our css
    .attr('class', 'map');

// TODO: replace when we add poverty data
// promises ensure the data is loaded before we try to use it
d3.json(geoShapesJson)
    .then(ready, function(error) {
      console.log(error); // we could have ended with .then(ready) but you might like to know about the error argument for debugging
});

// TODO: Update to accept an array of data
function ready(geoShapes){
  // TODO: Set up poverty data objects

  // TODO: set up color scale

  // TODO: create HTML tooltip/selection

  // join our shape data to the selection and add it to the DOM via `enter()`
  svg.append("g")
      .attr("class", "states")
      .selectAll("path")
      .data(topojson.feature(geoShapes, geoShapes.objects.states).features)
      .enter().append("path")
      // convert lat/lon coordinates into screen coordinates
      // https://github.com/d3/d3-geo/blob/v1.11.9/README.md#geoPath
      .attr("d", d3.geoPath())
      // TODO: assign fill color to states
      // TODO: add event listener for tooltips

  // TODO: add borders to state shapes
} // end ready()

// promises ensure the data are loaded before we try to use them
Promise.all([
  d3.json(geoShapesJson),
  d3.csv(censusCsv)
]).then(ready, function(error) {
  console.log(error); // we could have ended with .then(ready) but you might like to know about the error argument for debugging
});

function ready([geoShapes, censusData]) {...}

// create empty lookup object to fill with our data in a moment
var censusPcts = {};

// Loop through each row in censusData
censusData.forEach(function(d) {
  // d represents a row in censusData
  // use the 'NAME' property in our census data to associate our value with the state name
     // because our state shapes have a corresponding value, we can use that later to match them
  censusPcts[d["NAME"]] = +d[fieldname]; // the '+' prefix is a shortcut for converting text strings to numbers so we can compare them mathematically
});
// let's see what it looks like
console.log("censusPcts: ", censusPcts);

var colorScale = d3.scaleThreshold()
    .domain(colorDomain)
    .range(colorArray);

.style("fill", function(d) {
  // d here is an individual state shape's data
  // d.properties.name is the state's name, which has a twin in censusPcts
  // so if d.properties.name == 'Alabama', we'll set the colorScale using censusPcts['Alabama']
  return colorScale(censusPcts[d.properties.name]);
})

/**** append a new tooltip to #tooltip div already set up in index.html ****/
      // this will be shared by all of our state shapes
      // note this is a regular HTML element, which is easier to style than SVG text
var tip = d3.select("#tooltip")
    .append("div")
      .attr("class", "tooltip") // styles already defined in index
      .style("opacity", 0);

//add an event listener and set up the tooltips
.on("mouseover", function(d) {
    tip.transition()
        .duration(200)
        .style("opacity", .9);
    tip.html("<h3>" + d.properties.name + "</h3>" + censusPcts[d.properties.name] + "%")
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
    tip.transition()
        .duration(500)
        .style("opacity", 0);
});

svg.append("path")
  .attr("class", "state-borders") // styles already defined in index
  .attr("d", d3.geoPath()(
    // topojson.mesh basically simplifies the borders so that identical boundaries shared by two shapes will be treated as one
    topojson.mesh(geoShapes, geoShapes.objects.states, function(a, b) {
      return a !== b;
    })
  ));