var myMap;
var myMarkers = [];
var myDirections;


function loadMap() {
    if (GBrowserIsCompatible()) {
        // create map
        var map = new GMap2(document.getElementById("divMap"));

        // set center and zoom level
        map.setCenter(MapCenter, ZoomLevel);

        // add controls
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());

        // display properties on the map
        displayProperties(map);

        // set the global map
        myMap = map;
    }
}

function displayProperties(map) {

    // enumerate properties
    for (var i=0; i < Properties.Items.length; i++) {

        // grab the property
        var Property = Properties.Items[i];

        // add marker to map
        var m = createMarker(Properties.Items[i], i);
        map.addOverlay(m);
        myMarkers.push(m);
    }
}

function createMarker(property, index) {
    var propertyName = property.name.replace(/&/g, "&amp;");
    var objMarker = new GMarker(property.latLon, {title: property.name});
        // add popup bubble to marker
        GEvent.addListener(objMarker, "click", function(){
            objMarker.openInfoWindowHtml('<div style="text-align:left"><table cellpadding="1" cellspacing="0"><tr><td valign="top" width="75" style="width:75px;"><div class="OfficeListingImage" style="margin-top: 0px;margin-bottom: 0px;"><img src="' + property.imageUrl + '" alt=""/></div></td><td align="left" valign="top"><div class="OfficeListingColumn1"  style="margin-top: 0px;margin-bottom: 0px;min-height:77px;"><span class="OfficeName">' + propertyName + '</span><br /><div class="OfficeListingText" style=""><a class="OfficeListingMenuLink" href="' + property.brochureUrl + '">Brochure</a> | <a class="OfficeListingMenuLink" href="' + property.availableUrl + '">Available Units</a> | <a href="' + property.requestUrl + '" class="OfficeListingLink" onclick="openSendMsg()">Request Space</a><br />' + property.address1 + '<br />' + property.address2 + '<br />Phone: ' + property.phone + '<br /></div></div></td></tr><tr><td colspan="2"><span style="font-weight:bold;font-size:0.7em;"><b>Get Directions From...</b></span></td></tr><tr><td valign="bottom" colspan="2"><input type="text" id="txtStart" style="width:205px;"/>&nbsp;<input style="width:45px;" type="button" onclick="displayDirections(' + index + ')" value="Go"/></td></tr><tr><td colspan="2"></td></tr></table><div id="divDirectionError" style="color:#ff0000;font-size: 0.7em;"></div></div>');
            });
    return objMarker;
}

function popupMarker(index)
{
    // get the marker
    var marker = myMarkers[index];
    setTimeout('GEvent.trigger(myMarkers[' + index + '], "click");', 100);
}

function displayDirections(index)
{
    var property = Properties.Items[index];
    var input = d("txtStart").value;
    if (input == "")
    {
        alert("Please enter your starting location.");
        d("txtStart").focus();
        return;
    }

    // clear the directions
    if (myDirections != null)
    {
        myDirections.clear();
    }
    else
    {
        // initialize the directions
        myDirections = new GDirections(myMap, d("divDirections"));
        GEvent.addListener(myDirections, "error", handleDirectionError);
        GEvent.addListener(myDirections, "addoverlay", handleDirectionComplete);
    }

    // load the directions
    myDirections.load(input + ' to ' + property.address1 + ' ' + property.address2);
}
function handleDirectionError()
{
    d("divDirectionError").innerHTML = 'Unable to resolve the address.  Please try again.';
}
function handleDirectionComplete()
{
    // get the directions div
    showDirections();
}
function hideDirections()
{
    // get the directions div
    var divDirections = d("divMapFooter");
    divDirections.style.visibility = 'hidden';
    divDirections.style.display = 'none';
    myDirections.clear();
    myMap.setCenter(MapCenter, ZoomLevel);
}
function showDirections()
{
    // close the pop up bubble
    myMap.closeInfoWindow();

    // hide any error text
    d("divDirectionError").innerHTML = "";

    // get the directions div
    var divDirections = d("divMapFooter");
    divDirections.style.visibility = 'visible';
    divDirections.style.display = 'block';
}
function d(e) {
    var i = document.getElementById(e);
    if (i == null || i == 'undefined')
    {
        return(false);
    }
    else
    {
        return i;
    }
}