$(document).ready(function () {
    initialize();
});

var markers = [];
var map = null;
var initd = false;
function initialize() {       

    if (markers) {
        for (i in markers) {
            markers[i].setMap(null);
        }
        markers.length = 0;
    }

    var myOptions = {
        zoom: 6,
        center: new google.maps.LatLng(57.481416, -4.183168),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var canvas = document.getElementById("map_canvas");
    if (canvas != null) {
        
        if (!initd) {
            map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
            initd = true;
        }               
        
        if ($("#hfProperties").val() != "[]" && $("#hfProperties").val() != "") {
            setMarkers(map, eval($("#hfProperties").val()));
            AutoCenter();
        }
    }
}

function showProperty(id) {

    var uri = "/common/handlers/property.ashx?id=" + id;

    $.get(uri, function (data) {
        $("#hfProperties").val(data);
        if (!initd) {
            $('#the-content').html("<h2 id=\"property-title\">" + eval(data)[0].Name + "</h2><div id=\"map_canvas\" style=\"top: -10px; width: 643px; height: 412px;\"></div>");
            setTimeout(initialize, 500);
        }
        else {
            $("#property-title").html(eval(data)[0].Name);
            initialize();
        }


        showPop();

    }, "json");

}

function showBusiness(id) {

    var uri = "/common/handlers/business.ashx?id=" + id;

    $.get(uri, function (data) {
        $("#hfProperties").val(data);

        if (!initd) {
            $('#the-content').html("<h2 id=\"business-title\">" + eval(data)[0].Name + "</h2><div id=\"map_canvas\" style=\"top: -10px; width: 643px; height: 412px;\"></div>");
            setTimeout(initialize, 500);
        }
        else {
            $("#business-title").html(eval(data)[0].Name);
            initialize();
        }


        showPop();

    }, "json");

}

function AutoCenter() {

    //  Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds();

    //  Go through each...
    $.each(markers, function (index, marker) {
        bounds.extend(marker.position);
    });

    if (markers.length > 4) {
        //  Fit these bounds to the map
        map.fitBounds(bounds);
    }
    else {
        //  Fit these bounds to the map
        map.setCenter(bounds.getCenter());
        map.setZoom(7);
    }

}

function showInfoWindow(markerIndex) {
    infowindow.setContent(markers[markerIndex].html);
    infowindow.open(map, markers[markerIndex]);
}

/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/

var infowindow = new google.maps.InfoWindow({
    content: "holding..."
});

function setMarkers(map, properties) {
    
     

    for (var i = 0; i < properties.length; i++) {

        var property = properties[i];
        var myLatLng = new google.maps.LatLng(property.Lat, property.Lng);
        var image = new google.maps.MarkerImage('/themes/default/images/icons/office.png',
        // This marker is 20 pixels wide by 32 pixels tall.
                new google.maps.Size(32, 37),
        // The origin for this image is 0,0.
                new google.maps.Point(0, 0),
        // The anchor for this image is the base of the flagpole at 0,32.
                new google.maps.Point(16, 37));

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: property.Name,
            zIndex: 0,
            html: property.Html,
            id: property.AddressId
        });

        markers[markers.length] = marker;
    }

    for (var i = 0; i < markers.length; i++) {
        var marker = markers[i];
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }
}