var d3 = require('d3');
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];

var formatDate = d3.time.format("%Y-%m-%d");

d3.csv('data/eq-data.csv', function(csvData) {

  // Set up our root element
  var container = d3.select("#dates-container"),

      // Determine the extent of the dates represented
      datesExtent = d3.extent(csvData, function(d){ return new Date(d['UTC Date']); }),

      // Create all dates between the min/max dates
      datesRange = d3.time.day.range(datesExtent[0], datesExtent[1]),

      // Group the Dates into Months
      nested = d3.nest()
        .key(function(d){ return d3.time.month(d); })
        .entries(datesRange);


  // Create a color scale from 0-10
  var scale = d3.scale.ordinal()
                .domain([0, 10])
                .range([
                  "#fff", "#ffe2e0", "#ffc1be", "#ffa19c", "#ff817a",
                  "#ff4136", "#ff2114", "#f10d00", "#f10d00", "#cf0b00",
                  "#ad0900"].reverse());

  // Build Calendar
  nested.forEach(function(month) {
    var date = new Date(month.key),
        monthTitle = monthNames[date.getMonth()] + " " + date.getFullYear(),
        monthDiv = container
                    .append("div")
                    .attr("class", "month"),
        monthHeader = monthDiv.append("span")
                        .attr("class", "month-header")
                        .html(monthTitle);



    // create the month representation
    monthDiv
      .selectAll('div')
      .data(month.values)
      .enter()
      .append("div")
        .attr("class", "eq-date")
        .style("background-color", function(d) {
          var id = formatDate(d);
          var num = csvData.filter(function(item) { return id == item['UTC Date']; }).length;
          return scale(num ? num : 0);
        })
        .attr("data-num-quakes", function(d) {
          var id = formatDate(d);
          var num = csvData.filter(function(item) { return id == item['UTC Date']; }).length;
          return num ? num : 0
        })
        .attr("id", function(d, i) { return formatDate(d); } )
        .on('mouseover', function(d){
            console.log(this.dataset.numQuakes);
        });
  });
});
@@ -170,16 +170,375 @@
 -%25d%22);%0A%0A
+// use when cals are on white bg%0Avar colorsWhite = %5B%22#fff%22, %22#ffe2e0%22, %22#ffc1be%22, %22#ffa19c%22, %22#ff817a%22,%0A                    %22#ff4136%22, %22#ff2114%22, %22#f10d00%22, %22#f10d00%22, %22#cf0b00%22,%0A                    %22#ad0900%22%5D;%0A%0Avar colorsRed = %5B%22#ff817a%22, %22#ff6158%22, %22#ff6158%22, %22#ff4136%22, %22#ff2014%22,%0A                  %22#f10d00%22, %22#cf0b00%22, %22#ad0900%22, %22#8b0700%22, %22#690600%22%5D;%0A%0A
 d3.csv('
@@ -1200,191 +1200,17 @@
 nge(
-%5B%0A                  %22#fff%22, %22#ffe2e0%22, %22#ffc1be%22, %22#ffa19c%22, %22#ff817a%22,%0A                  %22#ff4136%22, %22#ff2114%22, %22#f10d00%22, %22#f10d00%22, %22#cf0b00%22,%0A                  %22#ad0900%22%5D.reverse()
+colorsRed
 );%0A%0A

add alt colorschemes