var svg = d3.select("#canvas"),
    globe = svg.selectAll(".country"),
    sens = .25, //sensitivity
    circle,
    zoomed = false;

width = window.innerWidth;
height = window.innerHeight;

svg
    .attr("width", width)
    .attr("height", height)

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


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


d3.json("world.json", function(error, world) {

    circle = svg.append("circle")
        .attr('cx', width / 2)
        .attr('cy', height / 2)
        .attr('r', projection.scale())
        .attr("stroke", "#aaaaaa")
        .attr("stroke-width", "1")
        .attr("fill", "white");


    countries = topojson.feature(world, world.objects.countries).features;

    globe = globe.data(countries)
        .enter()
            .append("path")
            .attr("d", path)
            .attr("class", "country")
            .attr("id", function(d){return d.properties.id})
            .on("dblclick", zoomIn)
            .on("click", panTo)
            .append('title').text('This is a line.');