Ox.documentReady(function() {
    var image = new Image();
    image.onload = function() {
        var c = Ox.canvas(image),
            point = {lat: 40.725342, lng: -73.996824}, // Broadway & Houston, NY
            circles = Ox.range(1, 16).map(function(i) {
                return Ox.getCircle(
                    point,
                    i * Ox.EARTH_CIRCUMFERENCE / 2 / 16,
                    8
                );
            }),
            lines = Ox.range(16).map(function(i) {
                return Ox.getLine(
                    point,
                    Ox.getPoint(point, Ox.EARTH_CIRCUMFERENCE / 2 - 1000, i * 360 / 16),
                    8
                );
            });
        function drawLine(pointA, pointB) {
            var xyA, xyB;
            if (Math.abs(pointA.lng - pointB.lng) < 180) {
                xyA = getXY(pointA);
                xyB = getXY(pointB);
                c.context.moveTo(xyA.x, xyA.y);
                c.context.lineTo(xyB.x, xyB.y);
                c.context.stroke();
            }
        }
        function drawPath(points, close) {
            points.forEach(function(point, i) {
                i && drawLine(points[i - 1], point);
            });
            close && drawLine(points[points.length - 1], points[0])
        }
        function getXY(point) {
            return Ox.map(Ox.getXYByLatLng(point), function(v) {
                return v * 1024;
            });
        }
        document.body.appendChild(c.canvas);
        c.context.strokeStyle = 'rgb(255, 0, 0)';
        circles.forEach(function(points) {
            drawPath(points, true);
        });
        lines.forEach(function(points) {
            drawPath(points);         
        });
    }
    image.src = 'png/earth1024.png';
});