//const chartHeight = 600;
const margin = {top: 0 , bottom: 0, left: 0, right: 0};
var year = 2007;
const chartWidthHeight = 100;
const heartPath = "m-1.249995,-26.393731c19.790171,-56.111793 97.328709,0 0,72.143734c-97.328709,-72.143734 -19.790171,-128.255527 0,-72.143734z";

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

  if (error) error ;

  var n = data.length;

  var heartDiv = d3.select(".hearts").selectAll(".heart")
  .data(data)
  .enter()
  .append("div");

  heartDiv.append("h2")
  .attr("class", "heading")
  .text(heading);

  var heartSVG = heartDiv.append("svg")
  .attr("width", chartWidthHeight)
  .attr("height", chartWidthHeight)
  .attr("viewBox", viewBox)
  .attr("preserveAspectRatio", "xMidYMid meet")
  .call(beat, 1000);

  heartSVG.append("path")
  .attr("id", function(d){ return d.objectOfAffection; })
  .attr("d", heartPath)
  .style("fill", "IndianRed")
  .style("stroke", "Crimson")
  .style("stroke-width", "3px")
  .style("opacity", opacity);

});

// https://bl.ocks.org/mbostock/6081914
function beat(selection, duration) {

  year = year === 2016 ? 2008 : year + 1;
  var amp = 1;
  var period = 0.2;

  selection.transition()
     .duration(duration)
     .ease(d3.easeElasticOut.amplitude(amp).period(period))
     .attr("viewBox", viewBox);

  selection.selectAll("path")
    .transition()
    .duration(duration)
    .ease(d3.easeElasticOut.amplitude(amp).period(period))
    .style("opacity", opacity);

  d3.selectAll(".heading").text(heading);

  var yearHeading = "The average spend in " + year;
  d3.select(".year-heading").text(yearHeading);

 setTimeout(function() { beat(selection, duration); }, duration);

};

function opacity(d) {
  return 1 - (2017-year)/10;
}

function viewBox(d) {
  var viewBoxWH = svgDimension(d);
  var viewBoxXY = -(svgDimension(d) / 2);
  return viewBoxXY + " " + viewBoxXY + " " + viewBoxWH + " " + viewBoxWH;
};

function svgDimension(d) {
  var yearCol = "y" + year;
  var proportion = chartWidthHeight / d[yearCol];
  var sqrtProp = Math.sqrt(proportion);
  return chartWidthHeight * sqrtProp;
  //return Math.sqrt(chartWidthHeight - d[yearCol]);
  //console.log(d[yearCol]/maxSpend);
  //return chartWidthHeight + (chartWidthHeight * (1/(chartWidthHeight - d[yearCol])));
}

function heading(d) {
  var yearCol = "y" + year;
  return d.objectOfAffection + " $" + d[yearCol];
};

function convertTextToNumbers(d) {
  d.y2008 = +d.y2008;
  d.y2009 = +d.y2009;
  d.y2010 = +d.y2010;
  d.y2011 = +d.y2011;
  d.y2012 = +d.y2012;
  d.y2013 = +d.y2013;
  d.y2014 = +d.y2014;
  d.y2015 = +d.y2015;
  d.y2016 = +d.y2016;
  return d;
};