(function() {
  var parseDate = d3.time.format("%b %Y").parse,
      formatYear = d3.format("02d"),
      formatDate = function(d) { return formatYear(d.getFullYear()); };

  var margin = {top: 20, right: 20, bottom: 40, left: 60},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

  var yScaleStacked = d3.scale.ordinal().rangeRoundBands([height, 0], .2),
      yScaleMultiples = d3.scale.linear(),
      xScale = d3.scale.ordinal().rangePoints([0, width]),
      timeScale = d3.time.scale().range([0, width]),
      colorScale = d3.scale.ordinal().range(colorbrewer.Blues[5].reverse());

  var xAxis = d3.svg.axis()
      .scale(timeScale)
      .orient("bottom")
      .ticks(d3.time.years)
      .tickFormat(formatDate);

  var nest = d3.nest()
      .key(function(d) { return d.group; });

  var stack = d3.layout.stack()
      .values(function(d) { return d.values; })
      .x(function(d) { return d.date; })
      .y(function(d) { return d.value; })
      .out(function(d, y0) { d.valueOffset = y0; });

  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

    data.forEach(function(d) {
      d.group = d.symbol
      d.date = parseDate(d.date);
      d.value = +d.price;
    });
    
    data.sort(function(a, b) {
      return a.date - b.date;
    });

    var nested = nest.entries(data);
    var monthsCount = nested[0].values.length;
    var monthsWidth = Math.floor(width / (monthsCount - 1));
    
    stack(nested);
    
    xScale.domain(nested[0].values.map(function(d) { return d.date; })).rangePoints([0, monthsWidth * (monthsCount - 1)]);
    timeScale.domain(d3.extent(data, function(d) { return d.date; })).range([0, monthsWidth * (monthsCount - 1)]);
    yScaleStacked.domain(nested.map(function(d) { return d.key; }));
    yScaleMultiples.domain([0, d3.max(data, function(d) { return d.value; })]).range([yScaleStacked.rangeBand(), 0]);

    var group = svg.selectAll(".group")
        .data(nested)
      .enter().append("g")
        .attr("class", "group")
        .attr("transform", function(d) { return "translate(0," + yScaleStacked(d.key) + ")"; });

    group.append("text")
        .attr("class", "group-label")
        .attr("x", -10)
        .attr("y", function(d) { return yScaleStacked.rangeBand(); })
        .text(function(d) { return d.key; });

    group.selectAll("rect")
        .data(function(d) { return d.values; })
      .enter().append("rect")
        .style("fill", function(d) { return colorScale(d.group); })
        .attr("x", function(d) { return xScale(d.date); })
        .attr("y", function(d) { return yScaleMultiples(d.value); })
        .attr("width", monthsWidth - 1)
        .attr("height", function(d) { return yScaleStacked.rangeBand() - yScaleMultiples(d.value); });

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height - 10) + ")")
        .call(xAxis);

    d3.selectAll("input").on("change", change);

    function change() {
      if (this.value === "multiples") transitionToMultiples();
      else transitionToStacked();
    }

    function transitionToMultiples() {
      var t = svg.transition().duration(750),
          g = t.selectAll(".group").attr("transform", function(d) { return "translate(0," + yScaleStacked(d.key) + ")"; });
      g.selectAll("rect").attr("y", function(d) { return yScaleMultiples(d.value); });
      g.select(".group-label").attr("y", function(d) { return yScaleStacked.rangeBand(); });
    }

    function transitionToStacked() {
      var t = svg.transition().duration(750),
          g = t.selectAll(".group").attr("transform", "translate(0," + yScaleStacked(yScaleStacked.domain()[0]) + ")");
      g.selectAll("rect").attr("y", function(d) { return yScaleMultiples(d.value + d.valueOffset); });
      g.select(".group-label").attr("y", function(d) { console.log(d); return yScaleMultiples(d.values[0].valueOffset); })
    }
  });

})()