// Generated by CoffeeScript 1.8.0
(function() {
  var SmallMultiples, plotData, setupIsoytpe, transformData;

  SmallMultiples = function() {
    var area, bisect, caption, chart, circle, curYear, data, format, height, line, margin, mousemove, mouseout, mouseover, setupScales, width, xScale, xValue, yAxis, yScale, yValue;
    width = 150;
    height = 120;
    margin = {
      top: 15,
      right: 10,
      bottom: 40,
      left: 35
    };
    data = [];
    circle = null;
    caption = null;
    curYear = null;
    bisect = d3.bisector(function(d) {
      return d.date;
    }).left;
    format = d3.time.format("%Y");
    xScale = d3.scale.ordinal().domain(["Men", "Women"]).range([0, width]);
    yScale = d3.scale.linear().range([height, 0]);
    xValue = function(d) {
      return ["Men", "Women"];
    };
    yValue = function(d) {
      return [d.Men, d.Women];
    };
    yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(4).outerTickSize(0).tickSubdivide(1).tickSize(-width);
    
    setupScales = function(data) {
      var extentX, maxY;
      maxY = d3.max(data, function(c) {
        return d3.max(c.values, function(d) {
          return d3.max(yValue(d));
        });
      });
      maxY = maxY + (maxY * 1 / 4);
      yScale.domain([0, maxY]);
      // extentX = d3.extent(data[0].values, function(d) {
      //   return xValue(d);
      // });
      // return xScale.domain(extentX);
    };
    chart = function(selection) {
      return selection.each(function(rawData) {
        var div, g, lines, svg;
        data = rawData;
        setupScales(data);
        div = d3.select(this).selectAll(".chart").data(data);
        div.enter().append("div").attr("class", "chart").append("svg").append("g");
        svg = div.select("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom);
        g = svg.select("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        g.append("rect").attr("class", "background").style("pointer-events", "all").attr("width", width + margin.right).attr("height", height)
        lines = g.append("g");
        
        lines.append("text").attr("class", "title").attr("text-anchor", "middle").attr("y", height).attr("dy", margin.bottom / 2 + 5).attr("x", width / 2).text(function(c) {
          return c.values[0].Country + " (" + c.values[0].Year + ")";
        });
        lines.append("text").attr("class", "static_year").attr("text-anchor", "start").style("pointer-events", "none").attr("dy", 13).attr("y", height).attr("x", 30).text(function(c) {
          return "Men";
        });
        lines.append("rect").style("fill", "steelblue").attr("id", "menbar")
          .attr("y", function(c) {
            return yScale(yValue(c.values[0])[0]);
          })
          .attr("height", function(c){
            return height - yScale(yValue(c.values[0])[0]);
          })
          .attr("x", 30)
          .attr("width", function(c) {
                return 20 + "px";
          }).on("mouseover", mouseover).on("mouseout", mouseout);
        lines.append("text").attr("class", "static_year").attr("text-anchor", "end").style("pointer-events", "none").attr("dy", 13).attr("y", height).attr("x", width - 30).text(function(c) {
          return "Women";
        });
        lines.append("rect").style("fill", "#ce1620").attr("id", "womenbar")
          .attr("y", function(c) {
            return yScale(yValue(c.values[0])[1]);
          })
          .attr("height", function(c){
            return height - yScale(yValue(c.values[0])[1]);
          })
          .attr("x", width - 60)
          .attr("width", function(c) {
                return 20 + "px";
          }).on("mouseover", mouseover).on("mouseout", mouseout);
        circle = lines.append("circle").attr("r", 2.2).attr("opacity", 0).style("pointer-events", "none");
        caption = lines.append("text").attr("class", "caption").attr("text-anchor", "middle").style("pointer-events", "none").attr("dy", -8);
        curYear = lines.append("text").attr("class", "year").attr("text-anchor", "middle").style("pointer-events", "none").attr("dy", 13).attr("y", height);
        return g.append("g").attr("class", "y axis").call(yAxis);
      });
    };
    mouseover = function() {
      circle.attr("opacity", 1.0);
      var elId = d3.select(this).attr("id"), index = 0, cx = 40;
      if(elId == "menbar") {
          index = 0;
          cx = 40;
      } else if(elId == "womenbar"){
          index = 1;
          cx = width - 50;
      }
      circle.attr("cx", cx).attr("cy", function(c) {
        return yScale(yValue(c.values[0])[index]);
      });
      caption.attr("x", cx).attr("y", function(c) {
        return yScale(yValue(c.values[0])[index]);
      }).text(function(c) {
        return yValue(c.values[0])[index];
      });
      //return curYear.attr("x", xScale(date)).text(year);
      //d3.selectAll(".static_year").classed("hidden", true);
    };
    mouseout = function() {
      //d3.selectAll(".static_year").classed("hidden", false);
      circle.attr("opacity", 0);
      caption.text("");
      return curYear.text("");
    };
    chart.x = function(_) {
      if (!arguments.length) {
        return xValue;
      }
      xValue = _;
      return chart;
    };
    chart.y = function(_) {
      if (!arguments.length) {
        return yValue;
      }
      yValue = _;
      return chart;
    };
    return chart;
  };

  transformData = function(rawData) {
    var format, nest;
    format = d3.time.format("%Y");
    rawData.forEach(function(d) {
      d.date = format.parse(d.Year);
      d.Women = +d.Women;
      return d.Men = +d.Men;
    });
    nest = d3.nest().key(function(d) {
      return d.date;
    }).sortValues(function(a, b) {
      return d3.ascending(a.date, b.date);
    }).entries(rawData);
    console.log(nest);
    return nest;
  };

  plotData = function(selector, data, plot) {
    return d3.select(selector).datum(data).call(plot);
  };

  setupIsoytpe = function() {
    $("#vis").isotope({
      itemSelector: '.chart',
      layoutMode: 'fitRows',
      getSortData: {
        men: function(e) {
          var d, sum;
          d = d3.select(e).datum();
          sum = d3.sum(d.values, function(d) {
            return d.Men;
          });
          return sum * -1;
        },
        women: function(e) {
          var d, sum;
          d = d3.select(e).datum();
          sum = d3.sum(d.values, function(d) {
            return d.Women;
          });
          return sum * -1;
        }
      }
    });
    return $("#vis").isotope({
      sortBy: 'men'
    });
  };

  $(function() {
    var display, plot;
    plot = SmallMultiples();
    display = function(error, rawData) {
      var data;
      if (error) {
        console.log(error);
      }
      data = transformData(rawData);
      plotData("#vis", data, plot);
      return setupIsoytpe();
    };
    queue().defer(d3.csv, "olympics-data.csv").await(display);
    return d3.select("#button-wrap").selectAll("div").on("click", function() {
      var id;
      id = d3.select(this).attr("id");
      d3.select("#button-wrap").selectAll("div").classed("active", false);
      d3.select("#" + id).classed("active", true);
      return $("#vis").isotope({
        sortBy: id
      });
    });
  });

}).call(this);