// code adapted from amazing d3 sample: http://mbostock.github.com/d3/talk/20111018/azimuthal.html
$(document).ready(function () {
    var m0, o0, features,
        // see: https://github.com/mbostock/d3/wiki/Geo-Projections
        projection = d3.geo.azimuthal()
            .scale(200000)
            .origin([-74.00, 40.70])
            .mode('orthographic')
            .translate([250, 650]),
        circle = d3.geo.circle()
            .origin(projection.origin()),
        path = d3.geo.path()
            .projection(projection),
        svg = d3.select('#map').append('svg:svg')
            .attr('width', 1280)
            .attr('height', 800)
            .on("mousedown", function () {
                m0 = [d3.event.pageX, d3.event.pageY];
                o0 = projection.origin();
                d3.event.preventDefault();
            }),
        clip, mousemove;

    d3.json('/json.ashx?MAP_TYPE=DEF&LAYERS=poly_landmarks&BBOX=40,-74,41,-73', function (coll) {
        features = svg.selectAll('path')
            .data(coll.features)
            .enter()
            .append('svg:path')
            .attr('d', clip);
        features
            .append('svg:title')
            .text(function (d) {
                return d.properties.LANAME;
            });
    });

    clip = function (d) {
        var c = circle.clip(d);
        return path(c);
    };
    mousemove = function () {
        if (!m0) {
            return;
        }

        var m1 = [d3.event.pageX, d3.event.pageY],
            o1 = [o0[0] + (m0[0] - m1[0]) / 4000, o0[1] + (m1[1] - m0[1]) / 4000];
        projection.origin(o1);
        circle.origin(o1);
        features.attr('d', clip);
    };
    
    d3.select(window)
        .on("mousemove", mousemove)
        .on("mouseup", function () {
            if (m0) {
                mousemove();
                m0 = null;    
            }
        });
});