$(function () {
    $(".OpenMap").click(function () {
        var h = $("<div></div>").append($("<div></div>").attr("id", "GoogleMap").css("height", "500px"));
		
        ShowHTMLInColorBox(h, 700);
        var myLocation = new google.maps.LatLng(51.51423, -0.10519);
		
        var myOptions = {
            zoom: 16,
            center: myLocation,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("GoogleMap"), myOptions);
	
        var image = new google.maps.MarkerImage('http://maps.gstatic.com/mapfiles/red_icons_A_J.png',
                    new google.maps.Size(20, 32),
                    new google.maps.Point(0, 0),
                    new google.maps.Point(0, 32));
        var shadow = new google.maps.MarkerImage('http://maps.gstatic.com/intl/en_ALL/mapfiles/shadow50.png',
                     new google.maps.Size(37, 32),
                     new google.maps.Point(0, 0),
                     new google.maps.Point(0, 32));


        var marker = new google.maps.Marker({
            position: myLocation,
            map: map,
            shadow: shadow,
            icon: image
        });
        var infowindow = new google.maps.InfoWindow({
            content: "<h3 style='margin-top:0px;padding-top:0px;'>Address:</h3>107 Fleet Street, London EC4A 2AB UK"
        });
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
        infowindow.open(map, marker);
        return false;
    });
});


function EnableOverlay() {
    if ($("#Overlay").length > 0) return;
    $("body").prepend($("<div></div>").attr("id", "Overlay").css({
        position: "absolute",
        left: "0px",
        top: "0px",
        zIndex: 10000,
        width: "0px",
        height: "0px"
    }).animate({
        left: "0px",
        top: "0px",
        width: "100%",
        height: $(document).height() + "px"
    }, 0));

    if ($.browser.version == "6.0")
        $("#Overlay").css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/blank.png,sizingmethod=scale)" });
    else
        $("#Overlay").css({ backgroundImage: "url(images/blank.png)" });
}

function DisableOverlay() {
    $("#Overlay").animate({
        width: "0px",
        height: "0px"
    }, 100, function () {
        $(this).remove();
    });
}


function ShowHTMLOnOverlay(html, w) {
    EnableOverlay();
    var OverlayBox = $("<div></div>").addClass("OverlayBox").css({
        left: ($(document).width() - w) / 2 + "px",
        top: "100px",
        zIndex: 10001,
        width: w + "px"
    }).hide().html(html);

    if ($.browser.version == "6.0")
        OverlayBox.css({ position: "absolute" });
    else
        OverlayBox.css({ position: "fixed" });

    $("#Overlay").append(OverlayBox);
    OverlayBox.css({ top: ($(window).height() - OverlayBox.height()) / 2 + "px" });
    OverlayBox.fadeIn("slow");
    OverlayBox.find("h2 span,#CloseOverlay").click(function () {
        $(this).parent().parent().remove();
        if ($(".OverlayBox").length == 0) DisableOverlay();
    });
    return false;
}

function ShowHTMLInColorBox(h, w) {
    html = $(h).wrap("<div></div>").css({
        padding: "5px 10px 10px 10px",
        border: "solid 2px black",
        background: "#ffffff"
    }).prepend($("<span></span>").attr("id", "CloseOverlay"));
    return ShowHTMLOnOverlay(html, w);
}