(function() {

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

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


  var data;
  var svg;
  var dateFormat = d3.time.format("%Y");
  var year = [];
  var nest = [];

  var dotRadius = d3.scale.sqrt()
      .domain([0, 7300])
      .range([0, 20]);

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

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

  var xMax = 250;
  var yMax = 100;

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

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

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

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

  svg = d3.select("#vis").append("svg")
      /*.attr("viewBox", "0 0 " + width + " " + height )
      .attr("preserveAspectRatio", "xMinYMin slice")*/
      .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, 100]);
  }*/

  /*--------------------------------------------------------------------------
     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(.5) // 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);

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

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

    console.log("NEST", 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-margin.right)
            .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) {
        year = year;
        console.log(year);
        var yearData = nest.get(year);
        console.log(yearData);

        /*---------------------------------------------------------------------
                  Circles
          ---------------------------------------------------------------------*/
        var circles = svg.selectAll("circle")
            .data(yearData)
            .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", function (d) {
              if (!isNaN(d.homeless_pop)) {
                  return dotRadius(d.homeless_pop);
              }
            }) // you might want to increase your dotRadius
            .attr("fill", function (d) {
              if (d.selection == "Top") {
                return "rgb(184,92,87)";
              }
                else {
                  return "#BFBFBF";
                }
            })
            .attr("opacity", function (d) {
                if ((d.under_18_black) && (d.homeless_rate)) {
                    return dotOpacity;
                } else {
                    return 0;
                }
            });

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

    /*--------------------------------------------------------------------------
       redraw()
      --------------------------------------------------------------------------*/

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

    drawAxes();
    drawScatter(startYear);
    /*setColorDomain();*/
    drawSlider();

  });

  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 {
            if (d.selection == "Top") {
              return "rgb(184,92,87)";
            }
            else {
              return "#BFBFBF";
            }
          }
      });

      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", function (d) {
            if (!isNaN(d.homeless_pop)) {
                return dotRadius(d.homeless_pop);
            }
          }) // you might want to increase your dotRadius
          .attr("fill", function (d) {
              if (d.selection == "Top") {
                return "rgb(184,92,87)";
              }
              else {
                return "#BFBFBF";
              }
          })
          .attr("opacity", function (d) {
              if ((d.homeless_rate) && (d.under_18_black)) {
                  return dotOpacity;
              } else {
                  return 0;
              }
          });

  } // end of draw function



})();