var width = 960,
    height = 800;

var projection = d3.geo.orthographic()
    .scale(250)
    .translate([width / 2, height / 2])
    .clipAngle(90)
    .rotate([0, 0]);

var orbit_projection = d3.geo.orthographic()
    .scale(290)
    .translate([width / 2, height / 2])
    .clipAngle(90)
    .rotate([0, 0]);

var orbit_projection_behind = d3.geo.orthographic()
    .scale(290)
    .translate([width / 2, height / 2])
    .rotate([0, 0]);

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

var orbit_path = d3.geo.path()
    .pointRadius(20)
    .projection(orbit_projection);

var orbit_path_behind = d3.geo.path()
    .projection(orbit_projection_behind);

var λ = d3.scale.linear()
    .domain([0, width])
    .range([-180, 180]);

var φ = d3.scale.linear()
    .domain([0, height])
    .range([90, -90]);

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

d3.json("path.json", function(error, orbit) {
d3.json("world-110m.json", function(error, world) {

  svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

  svg.append("path")
      .datum([0,0])
      .attr("class", "orbit-behind");


  svg.append("use")
    .attr("class", "stroke-round")
    .attr("xlink:href", "#sphere");


  svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

  svg.append("path")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);

  svg.append("path")
      .datum([0,0])
      .attr("class", "orbit");

  svg.append("path")
      .datum([0,0])
      .attr("class", "orbit-glow");
 
  svg.append("path")
      .datum([0,0])
      .attr("class", "landsat");

  var n = 0;

  function inv(x) {
      return [-x[0], -x[1]];
  }

  function tick() {
      if (++n > orbit.length - 10) n = 0;
      projection.rotate([-n, 0]);
      orbit_projection.rotate([-n, 0]);
      orbit_projection_behind.rotate([-n, 0]);
      svg.selectAll("path.land").attr("d", path);

      var orbit_object = {
          type: 'Feature',
          geometry: {
              coordinates: orbit.slice(n, n + 10),
              type: 'LineString'
          }
      };

      var sat_object = {
          type: 'Feature',
          geometry: {
              coordinates: orbit[n + 9],
              type: 'Point'
          }
      };

      svg.selectAll("path.orbit")
        .datum(orbit_object)
        .attr("d", orbit_path);

      svg.selectAll("path.orbit-glow")
        .datum(orbit_object)
        .attr("d", orbit_path);

      svg.selectAll("path.orbit-behind")
        .datum(orbit_object)
        .attr("d", orbit_path_behind);

      svg.selectAll("path.landsat")
        .datum(sat_object)
        .attr("d", orbit_path);

      d3.timer(tick, 50);
      return true;
  }

  tick();
});
});