//this map function was created
//so points may be passed as a
//delimited string value by way of
//the ajax loading panel
var locationImageHtml = '<a href="#" onMouseOver="document.locationImage.src=\'/search/Content/Images/location_roll.gif\';" onMouseOut="document.locationImage.src=\'/search/Content/Images/location.gif\';"><image name="locationImage" src="/search/Content/Images/location.gif" border="0"/></a>';
var ratesImageHtml = '<a href="#" onMouseOver="document.ratesImage.src=\'/search/Content/Images/rates_roll.gif\';" onMouseOut="document.ratesImage.src=\'/search/Content/Images/rates.gif\';"><image name="ratesImage" src="/search/Content/Images/rates.gif" border="0" alt="Rates"/></a>';
var hoursImageHtml = '<a href="#" onMouseOver="document.hoursImage.src=\'/search/Content/Images/hours_roll.gif\';" onMouseOut="document.hoursImage.src=\'/search/Content/Images/hours.gif\';"><image name="hoursImage" src="/search/Content/Images/hours.gif" border="0"/></a>';

var htmlBody = '<div class="infooverlay" style="text-align:left;"><b>Central Parking Systems</b>';
htmlBody += '<ul><li onclick="showTab(\'location\', this)" class="selected">' + locationImageHtml + '</li>';
htmlBody += '<li onclick="showTab(\'rates\', this)">' + ratesImageHtml + '</li><li onclick="showTab(\'hours\', this)">' + hoursImageHtml + '</li></ul>';
htmlBody += '<p id="plocation" style="display: block;padding:0 0 0 0;border-top: solid 1px black;border-right: solid 1px black;border-left: solid 1px black;border-bottom: solid 1px black;"><span id="lblLotDescription">LOTDESCRIPTION</span><br /><span id="lblCity">LOTCITY</span>, <span id="lblState">LOTSTATE</span></p>';
htmlBody += '<p id="prates" style="padding:0 0 0 0;border-top: solid 1px black;border-right: solid 1px black;border-left: solid 1px black;border-bottom: solid 1px black;">LOTRATES</p>';
htmlBody += '<p id="phours" style="padding:0 0 0 0;border-top: solid 1px black;border-right: solid 1px black;border-left: solid 1px black;border-bottom: solid 1px black;">LOTHOURS</p>';
htmlBody += '<a class="infolink" href="https://parkcentral.parking.com/CreateAccount.aspx?lot=LOTFACILITYID" target="_blank">Request Monthly Parking</a> | ';
//htmlBody += '<a class="infolink" href="Questions.aspx?lot=LOTINQUIREID">Inquire</a> - <a class="infolink" href="http://maps.google.com/maps?daddr=LOTLATITUDE,LOTLONGITUDE&hl=en" target=_blank>Directions</a></div>';
htmlBody += '<a class="infolink" href="http://maps.google.com/maps?daddr=LOTLATITUDE,LOTLONGITUDE&hl=en" target=_blank>Directions</a></div>';

var markers;    //keep a list of the markers

function createGoogleMap(lat, lng, distance, zoom, points) {
    if (GBrowserIsCompatible()) {
        var map;
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(lat, lng), zoom);

        map.setUIToDefault();

        //create the blue marker in the center
        // Create our "tiny" marker icon
        var greenIcon = new GIcon(G_DEFAULT_ICON);
        greenIcon.image = "/search/Content/Images/marker_green.png";

        // Set up our GMarkerOptions object
        markerOptions = { icon: greenIcon };

        var latlng = new GLatLng(lat, lng);
        map.addOverlay(new GMarker(latlng, markerOptions));

        points = trim(points);
        markers = new Array();

        if (points.length > 0)
        {
            //collect all of the points
            var pointsArray = new Array();
            pointsArray = points.split("|");

            for (var x = 0; x < pointsArray.length; x++) {
                //points will have this info
                //0 = latitude
                //1 = longitude
                //2 = location
                //3 = rates
                //4 = hours
                //5 = facility id (link)
                //6 = city
                //7 = state
                var pointSpecificsArray = new Array();
                pointSpecificsArray = pointsArray[x].split("_");

                var point = new GLatLng(pointSpecificsArray[0], pointSpecificsArray[1]);
                map.addOverlay(new GMarker(point));
                var mkr = createMarker(point, x, pointSpecificsArray[2], pointSpecificsArray[3],
                         pointSpecificsArray[4], pointSpecificsArray[5], pointSpecificsArray[6],
                         pointSpecificsArray[7], pointSpecificsArray[0], pointSpecificsArray[1])
                map.addOverlay(mkr);
                markers[x] = mkr;
            }
        }

    }


}

// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, index, location, rates, hours, facilityId, city, state, lat, lng) {
    // Create a base icon for all of our markers that specifies the
    // shadow, icon dimensions, etc.
    var baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.shadow = "/search/Content/Images/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);

    // Create a lettered icon for this point using our icon class
    //var letter = String.fromCharCode("A".charCodeAt(0) + index);
    var gifIndex = index + 1;
    var letteredIcon = new GIcon(baseIcon);
    letteredIcon.image = "/search/Content/Images/flag_" + gifIndex + ".gif";

    // Set up our GMarkerOptions object
    markerOptions = { icon: letteredIcon };
    var marker = new GMarker(point, markerOptions);
    GEvent.addListener(marker, "click", function() {

        var myHtml = htmlBody;
        myHtml = myHtml.replace('LOTDESCRIPTION', location);
        myHtml = myHtml.replace('LOTRATES', rates);
        myHtml = myHtml.replace('LOTHOURS', hours);
        myHtml = myHtml.replace('LOTCITY', city);
        myHtml = myHtml.replace('LOTSTATE', state);
        myHtml = myHtml.replace('LOTFACILITYID', facilityId);
        myHtml = myHtml.replace('LOTINQUIREID', facilityId);
        myHtml = myHtml.replace('LOTLATITUDE', location);
        myHtml = myHtml.replace('LOTLONGITUDE',city + "," + state );
        marker.openInfoWindowHtml(myHtml);

    });
    return marker;
}

function showDetail(lat, lng) {

    var x;
    for (x in markers) {
        if (markers[x].getLatLng().lat() == lat && markers[x].getLatLng().lng() == lng) {

            GEvent.trigger(markers[x], 'click');
        }
    }

    return false;
}

// Removes leading and ending whitespaces, nbsps
function trim(str) {
    return str.replace(/(^[\s\xA0]+|[\s\xA0]+$)/g, '');
}

function showTab(tabName, tab) {

    $('.infooverlay p').hide();
    $('#p' + tabName).show();
    $('#p' + tabName).show();

    $('.infooverlay li').attr("class", "");
    $(tab).attr("class", "selected");
}