/// <reference path="jquery-1.3.2-vsdoc.js" />
google.load("maps", "2.x");

$(function() {

    if (google.maps.BrowserIsCompatible()) {
        initialize();
    }

});

function initialize() {

    var map = new google.maps.Map2($("#map")[0]);
    map.addControl(new google.maps.LargeMapControl());
    map.addControl(new google.maps.MapTypeControl());

    map.setCenter(new google.maps.LatLng(51.50002, -0.12618), 13);

    var bounds = new google.maps.LatLngBounds();

    var marker = setupLocationMarker(map, rawJSON);
    bounds.extend(marker.getLatLng());

    map.setZoom(16);
    map.setCenter(bounds.getCenter());
}

function setupLocationMarker(map, location) {

    var icon = new GIcon(G_DEFAULT_ICON);
    icon.image = "/content/images/mapmarkers/pointer.png";

    var options = { icon: icon };

    var point = new google.maps.LatLng(location.Latitude, location.Longitude);
    var marker = new google.maps.Marker(point, options);

    map.addOverlay(marker);

    var html = "";

    $.each(location.Categories, function(i, cat) {
        html += "<img src='/content/images/" + cat + ".jpg' />&nbsp;";
    });

    html += "<div><strong>" + location.Title + "</strong></div>";
    html += "<div><a href='/activity/details/" + location.Id + "/'>more information...</a></div>"

    google.maps.Event.addListener(marker, "click", function(latlng) {

        $(".listing-block").hide();
        $("#" + location.Id).show();

        map.openInfoWindow(latlng, html);

    });

    $(".listing-block").hide();
    $("#" + location.Id).show();
    map.openInfoWindow(point, html);
    
    return marker; 
}