var ctx;
var map;
var markerStart, markerEnd;
var areaFrame;

function $(e) { return document.getElementById(e); }

function body_onload()
{
    if (GBrowserIsCompatible())
    {
        map = new GMap2($("gmap"));
        map.enableDoubleClickZoom();
        map.enableScrollWheelZoom();
        map.enableContinuousZoom();
        map.setCenter(new GLatLng(0, 0), 0);
        map.enableGoogleBar();
        map.addControl(new GSmallMapControl());

        // Start Marker
        markerStart = new GMarker(new GLatLng(63, -19), {"title":"Start point", "draggable":true, "bouncy":true})
        GEvent.addDomListener(markerStart, "drag", markersUpdated);
        map.addOverlay(markerStart);

        markerEnd = new GMarker(new GLatLng(23, 43), {"title":"End point", "draggable":true, "bouncy":true})
        GEvent.addDomListener(markerEnd, "drag", markersUpdated);
        map.addOverlay(markerEnd);

        markersUpdated();
    }
}

function markersUpdated()
{
    var p1 = markerStart.getLatLng();
    var p2 = markerEnd.getLatLng();
    if (areaFrame)
    {
        map.removeOverlay(areaFrame);
    }
    areaFrame = new GPolyline([p1, new GLatLng(p1.lat(), p2.lng()), p2, new GLatLng(p2.lat(), p1.lng()), p1], "#000", 1)
    map.addOverlay(areaFrame);
    $("lat1").value = p1.lat();
    $("lng1").value = p1.lng();
    $("lat2").value = p2.lat();
    $("lng2").value = p2.lng();
}

function getTileX(lon, zoom)
{
    return Math.pow(2,(17-zoom)) * ((1 + lon/180) / 2);
}

function getTileY(lat, zoom)
{
    var sin = Math.sin(lat * Math.PI / 180);
    var y = (0.5 * Math.log((1 + sin) / (1 - sin))) / Math.PI;
    return Math.pow(2,(17-zoom)) * ((1 - y) / 2);
}

function go()
{
    var lat1 = parseFloat($("lat1").value);
    var lng1 = parseFloat($("lng1").value);
    var lat2 = parseFloat($("lat2").value);
    var lng2 = parseFloat($("lng2").value);
    var zoom = 18 - parseInt($("zoom").value);

    if (lat1 < lat2)
    {
        var lat = lat1;
        lat1 = lat2;
        lat2 = lat;
    }
    if (lng1 > lng2)
    {
        var lng = lng1;
        lng1 = lng2;
        lng2 = lng;
    }

    var x1 = Math.floor(getTileX(lng1, zoom));
    var y1 = Math.floor(getTileY(lat1, zoom));
    var x2 = Math.ceil(getTileX(lng2, zoom));
    var y2 = Math.ceil(getTileY(lat2, zoom));

    // no more than 100 tiles at a time
    if ((x2-x1)*(y2-y1) > 100)
    {
        alert("Image size limit exceeded.\nYou may reduce either the selected area or the zoom level.");
        return;
    }

    //$('log').innerHTML += "x1=" + x1 + "\ny1=" + y1 + "\nx2=" + x2 + "\ny2=" + y2 + "<br>";

    $("map").setAttribute("width", (x2-x1)*256);
    $("map").setAttribute("height", (y2-y1)*256);

    if (!ctx)
    {
        ctx = $("map").getContext('2d');
    }

    var mapx = 0;
    var mapy = 0;
    var mt = 0;
    for (var y = y1; y <= y2; y++)
    {
        for (var x = x1; x <= x2; x++)
        {
            var img = new Image();
            img.mapx = mapx;
            img.mapy = mapy;
            img.onload = function()
            {
                ctx.drawImage(this, this.mapx, this.mapy);
                //$('log').innerHTML += this.mapx + "<br>"
            }
            img.src = 'http://mt' + mt + '.google.com/mt/x=' + x + '&y=' + y + '&zoom=' + zoom;

            mt++;
            if (mt > 3) mt = 0;
            mapx += 256;
        }
        mapy += 256;
        mapx = 0;
    }
}