// Create the Google Map…
var map = new google.maps.Map
  ( d3.select("#map").node()
  , { zoom: 8
    , center: new google.maps.LatLng(37.76487, -122.41948)
    , mapTypeId: google.maps.MapTypeId.TERRAIN
    }
  );

var data // populated once we've loaded the csv

  , time_now = new Date
  , week_ago = new Date(time_now - 864e5 * 7)
  , colour   = d3.time.scale()
    .domain([time_now, week_ago])
    .interpolate(d3.interpolateRgb)
    .range(['red', 'steelblue'])
  ;

// Src, Eqid, Version, Datetime, Lat, Lon,
//   Magnitude, Depth, NST, Region
// nc,71676251,6,"Saturday, November  5, 2011 21:52:18 UTC",37.8460,-122.2407,
//   3.1,6.00,175,"San Francisco Bay area, California"
d3.csv("/d/1356889/earthquakes.csv", function(d) {
  function parse(d) {
    return { id:    d.Eqid, region: d.Region //, v: d.Version
           , time:  new Date(d.Datetime), nst: d.NST
           , depth: +d.Depth, magnitude: d.Magnitude
           , lat:   +d.Lat
           , lng:   +d.Lon
           };
  }

  data = d.filter(function(d) { return d.Src === 'nc'; }).map(parse);
  var overlay = new google.maps.OverlayView();

  // Add the container when the overlay is added to the map.
  overlay.onAdd = function() {
    var layer = d3.select(this.getPanes().overlayLayer).append("div")
        .attr("class", "quakes");

    // Draw each marker as a separate SVG element.
    // We could use a single SVG, but what size would it have?
    overlay.draw = function() {
      var projection = this.getProjection(),
          padding = 10;

      var marker = layer.selectAll("svg")
          .data(data)
          .each(transform) // update existing markers
        .enter().append("svg:svg")
          .each(transform)
          .attr("class", "marker")
        .append('svg:g');

      marker.append('svg:title').text(function(d) {
        return 'Magnitude '+ d.magnitude +' in '+ d3.region;
      });

      // Add a circle.
      marker.append("svg:circle")
          .attr("r", function(d) { return 1 + 3 * Math.sqrt(+d.magnitude); })
          .attr("cx", padding)
          .attr("cy", padding)
          .attr('fill', function(d) { return colour(d.time); });

      // Add a label.
      marker.append("svg:text")
          .attr("x", padding + 7)
          .attr("y", padding)
          .attr("dy", ".31em")
          .text(function(d) { return d.magnitude; });

      function transform(d) {
        d = new google.maps.LatLng(d.lat, d.lng);
        d = projection.fromLatLngToDivPixel(d);
        return d3.select(this)
            .style("left", (d.x - padding) + "px")
            .style("top", (d.y - padding) + "px");
      }
    };
  };

  // Bind our overlay to the map…
  overlay.setMap(map);
});