(function() {

  /*--------------------------------------------------------------------------
  Setup vars
  --------------------------------------------------------------------------*/

  var margin = {
    top: 10,
    right: 10,
    bottom: 30,
    left: 30
  },
    width = 600 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom;


  var dataHom;
  var svg;
  var dateFormat = d3.time.format("%Y");


  var dotRadius = 6;
  var dotOpacity = .7;
  var startYear = 2005,
      filterValue = 2005;

  /*--------------------------------------------------------------------------
  Scale, Axis Variables & Setup
  --------------------------------------------------------------------------*/

  var xMax = 100;
  var yMax = 0;

  var xScale = d3.scale.linear()
      .range([margin.left, width]);
  var yScale = d3.scale.linear()
      .range([margin.top, height - margin.bottom]);

  var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom")
      .ticks(10);

  var yAxis = d3.svg.axis()
      .scale(yScale)
      .ticks(10)
      .orient("left");

  xScale.domain([0, xMax]);
  yScale.domain([yMax, 0]);

  svg = d3.select("#vis").append("svg")
      .attr("width", width)
      .attr("height", height);

  var sliderOkay = false;

  /*--------------------------------------------------------------------------
     Color Scale
    --------------------------------------------------------------------------*/

  var colorScale = d3.scale.linear().range(["#0099FF", "#FF0000"]).interpolate(d3.interpolateLab);

  function setColorDomain() {
    colorScale.domain([0, 400]);
  }

  /*--------------------------------------------------------------------------
     Slider
    --------------------------------------------------------------------------*/
  // see examples in http://www.macwright.org/chroniton/example/
  /*var slider = chroniton()
      .domain([dateFormat.parse("2005"), dateFormat.parse("2013")])
      .labelFormat(d3.time.format('%Y'))
      .width(500)
      .height(50)
      .playButton(true)
      .playbackRate(.85) // can also be set to loop
      .on("change", function (d) {
          filterValue = dateFormat(d3.time.year(d));
          console.log("filterValue", filterValue);
          if (filterValue <= 2013) {
              redraw(filterValue);
              end();
          }
      })
      .play();

  function drawSlider() {
      d3.select("#slider")
          .call(slider);
      sliderOkay = true;
  }

  function end() {
      console.log(slider.isAtEnd());
      if (slider.isAtEnd()) {
          slider.pause();
      }
  }*/

  d3.csv("datasetHom.csv", function(error, data) {

    console.log("datos", data);

  var year = ["2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"];

  console.log("year", year)
					//Loop once for each row in data
	var nest = d3.nest().key(function (d) {
                      return d.year;
                                      })
                      .entries(data);
				console.log(data)
				console.log("nested data", nest)


    /*---------------------------------------------------------------------
     drawAxes()
    ---------------------------------------------------------------------*/
    function drawAxes() {
        yAxis.scale(yScale);
        xAxis.scale(xScale);

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + (height - margin.bottom) + ")")
            .call(xAxis)
            .append("text")
            .attr("x", width)
            .attr("y", -20)
            .attr("dy", "1em")
            .style("text-anchor", "end")
            .attr("class", "label")
            .text("Under-5 Mortality Rate (U5MR)");

        svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + (margin.left) + ",0)")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("x", -margin.top)
            .attr("y", 5)
            .attr("dy", "1em")
            .style("text-anchor", "end")
            .attr("class", "label")
            .text("Fertility Rate");
    }

    /*--------------------------------------------------------------------------
       Change Functions
      --------------------------------------------------------------------------*/
    /*function getData(d) {
        var dataRow = countryById.get(d.properties.adm0_a3_is); // best match
        var dataVal = null;
        // must be a more elegant way to do this with all the checks, but i'm tired
        if (dataRow) {
            dataVal = data.get(dataRow.ShortName);
        }
        if (dataVal) {
            console.log("dataVal shortname", dataVal[0].Country);
            dataVal = dataVal.filter(function (d) {
                return d.Year == filterValue;
            });
        }
        if (dataVal) {
            dataVal = dataVal[0];
        }
        return dataVal;
    }

    function getColor(d) {
        var dataVal = getData(d);
        if (dataVal) {
            return colorScale(dataVal.fertility);
        }
        // if we fall through, i.e., no match
        //console.log("no dataRow", d);
        return "#ccc";
    }

    function getText(d) {
        var dataVal = getData(d);
        if (dataVal) {
            return dataVal.country + ": " + dataVal.fertility;
        } else {
            return d.properties.name + ": No data.";
        }
    }*/


    /*--------------------------------------------------------------------------
       drawScatter()
      --------------------------------------------------------------------------*/
    function drawScatter(year) {
        var year = year;
        console.log(year);
        ayearData = nest.get(year);
        console.log(yearData);

        /*---------------------------------------------------------------------
                  Circles
          ---------------------------------------------------------------------*/
        var circles = svg.selectAll("circle")
            .data(function(d) { // because there's a group with data already...
 													return d.values; // NOT an array here.
 										})
            .enter()
            .append("circle")
            .attr("class", "dots");

        circles.attr("cx", function (d) {
                if (!isNaN(d.homeless_rate)) {
                    return xScale(+d.homeless_rate);
                }
            })
            .attr("cy", function (d) {
                if (!isNaN(d.under_18_black)) {
                    return yScale(+d.under_18_black);
                }
            })
            .attr("r", dotRadius) // you might want to increase your dotRadius
            .attr("fill", function (d) {
                return colorScale(d.under_18_black);
            })
            .attr("opacity", function (d) {
                if ((d.homeless_rate) && (d.under_18_black)) {
                    return dotOpacity;
                } else {
                    return 0;
                }
            });

        /*circles.on("mouseover", mouseoverFunc)
            .on("mouseout", mouseoutFunc)
            .on("mousemove", mousemoveFunc);*/
    }

    /*--------------------------------------------------------------------------
       redraw()
      --------------------------------------------------------------------------*/
    function redraw(year) {

        var year = year;
        console.log(nest.get(year));
        var circles = svg.selectAll("circle.dots")
            .data(nest.get(year));
        console.log(svg);

        console.log(circles);

        circles.attr("fill", function (d) {
            if (!(d.homeless_rate) || !(d.under_18_black)) {
                return "rgba(0, 0, 0, 0)";
            } else {
                return colorScale(d.under_18_black);
            }
        });

        circles.exit()
            .transition()
            .duration(100)
            .ease("exp")
            .attr("r", 0)
            .remove();
        // transition -- move to proper widths and location
        circles.transition()
            .duration(100)
            .ease("quad")
            .attr("cx", function (d) {
                if (!isNaN(d.homeless_rate)) {
                    return xScale(+d.homeless_rate);
                }
            })
            .attr("cy", function (d) {
                if (!isNaN(d.under_18_black)) {
                    return yScale(+d.under_18_black);
                }
            })
            .attr("r", dotRadius) // you might want to increase your dotRadius
            .attr("fill", function (d) {
                return colorScale(d.under_18_black);
            })
            .attr("opacity", function (d) {
                if ((d.homeless_rate) && (d.under_18_black)) {
                    return dotOpacity;
                } else {
                    return 0;
                }
            });

    } // end of draw function

    /*--------------------------------------------------------------------------
           Call the functions
    --------------------------------------------------------------------------*/

drawAxes();
drawScatter(startYear);

  });

  setColorDomain();
  /*drawSlider();*/



})();