var width = 960,
    τ = 2 * Math.PI,
    ε = 1e-4,
    height = 0.5 * width * Math.sin(τ/6);

var speed = 0.5 * 1e-2,
    start = Date.now();


// ############### scaling and translating ###############
// from http://stackoverflow.com/questions/14492284/#answer-14691788
  // var bb = { "type": "Sphere"};

  // // find proper scale and translation from bounds of bb polygon
  // var projection = d3.geo.polyhedron.cahillKeyes().scale(1).translate([0,0]);
  // var path = d3.geo.path().projection(projection);
  // var b = path.bounds(bb),
  //     s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
  //     t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];

  // console.log("width = "+ width);
  // console.log("height = "+ height);
  // console.log("s = "+s);
  // console.log("t = ["+t[0]+","+t[1]+"]");

// as found via the code above with width = 2000 and height = 866.0254037844387
var s = 0.022800007103973046
t = [596.1218699502498,74.9851528386647];
// #######################################################

var graticule = d3.geo.graticule();

var sphere = {type: "Sphere"};

var projection = d3.geo.polyhedron.cahillKeyes()
    .scale(s)
    .translate(t)
    .precision(.5);

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var path = d3.geo.path()
    .projection(projection)
    .context(context);

d3.json("/mbostock/raw/4090846/world-110m.json", function(error, topo) {
  var land = topojson.feature(topo, topo.objects.land),
      borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; }),
      grid = graticule();

  d3.timer(function() {
    projection.rotate([speed * (Date.now() - start), 0]);

    context.clearRect(0, 0, width, height);

    context.beginPath();
    path(sphere);
    context.lineWidth = 2;
    context.strokeStyle = "#000";
    context.stroke();

    context.beginPath();
    path(sphere);
    context.fillStyle = "#fff";
    context.fill();

    context.beginPath();
    path(land);
    context.fillStyle = "#222";
    context.fill();

    context.beginPath();
    path(borders);
    context.lineWidth = .4;
    context.strokeStyle = "#fff";
    context.stroke();

    context.beginPath();
    path(grid);
    context.lineWidth = .5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();
  });

});

d3.select(self.frameElement).style("height", height + "px");