var map;
var tempLat = 0;
var tempLong = 0;
var responseTextXML = '';
function initializeMap() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        var center = new GLatLng(37.4419, -122.1419);
        //document.getElementById("map_canvas").style.display = '';
        map.setCenter(center, 10);
    }
}

function initListingPoint(ResponseXML) {

    if (ResponseXML == '') {
       ResponseXML = responseTextXML;
   }

    map.clearOverlays();
    if (ResponseXML != "") {
        var oXmlDoc = LoadXML(ResponseXML);
        var oRoot = oXmlDoc.documentElement; // Result
        var thumbnail = "";
        var address = "";
        var price = "";
        var beds = "";
        var baths = "";
        var latitude = "";
        var longitude = "";
        var mlslistingId = "";
        var html = "";
       

        for (i = 0; i < oRoot.childNodes.length; i++) {

            thumbnail = oRoot.childNodes[i].attributes[0].nodeValue;
            address = oRoot.childNodes[i].attributes[1].nodeValue;
            price = oRoot.childNodes[i].attributes[2].nodeValue;
            beds = oRoot.childNodes[i].attributes[3].nodeValue;
            baths = oRoot.childNodes[i].attributes[4].nodeValue;
            latitude = oRoot.childNodes[i].attributes[5].nodeValue;
            longitude = oRoot.childNodes[i].attributes[6].nodeValue;
            mlslistingId = oRoot.childNodes[i].attributes[7].nodeValue;
            addressTemp = address.replace("<br />","");
            
            if (latitude != "" && longitude != "") {
                tempLat = latitude;
                tempLong = longitude;

                html = getHTMLInfo(1, thumbnail, address, price, beds, baths, mlslistingId);

                // Create our "tiny" marker icon
                var blueIcon = new GIcon(G_DEFAULT_ICON);
                blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";

                // Set up our GMarkerOptions object
                markerOptions = { icon: blueIcon, draggable: false };

                var point = new GLatLng(latitude, longitude);
                var marker = new GMarker(point, {});

                GEvent.addListener(marker, "mouseout", closeInfo(marker));
                GEvent.addListener(marker, "mouseover", openInfo(marker, html));
                map.addOverlay(marker);
            }
        }

        
    }
    //map.checkResize();
}

function center(tempLat, tempLong) {
    var center = new GLatLng(parseFloat(tempLat), parseFloat(tempLong));
    map.setCenter(center, 10);
}


function closeInfo(marker) {
    GEvent.addListener(marker, "mouseout", function() {
        marker.closeInfoWindow();
    });
}

function openInfo(marker, html) {
    GEvent.addListener(marker, "mouseover", function() {
        marker.openInfoWindowHtml(html);
    });
}


function getHTMLInfo(OB_ID_PROP, thumbnail, address, price, beds, baths, MlsListingId) {
    if (beds == 0)
    { beds = 'n/a'; } else { beds = beds + ' BR'; }
    if (baths == 0)
    { baths = 'n/a'; } else { baths = baths + ' BTHS'; }
    
   
    var sHTML = '' +
	 '<table cellspacing="5" cellpadding="5" width="150px" border="0">' + 
         '<tr>' +
             '<td colspan="3"></td>' +
         '</tr>' +
         '<tr>' +
             '<td class="PropSumIMG" style="WIDTH: 25%" valign="top" align="center" rowspan="2">' +
                     '<a href="#Detail" onclick="javascript:GetListingDetail(\'' + OB_ID_PROP + '\',' + MlsListingId + '\');showTab(\'Detail\');">' +
                     '<img src="' + thumbnail + '" style="width:50px;border-width:0px;" />' +
                     '</a>' +
             '</td>' +
             '<td class="REMSListingHeader2" valign="top" align="left" colspan="2">' +
                     '<span class="REMSListingHeader2">' + address + '</span>' +
             '</td>' +
          '</tr>' +
          '<tr valign="top">' +
              '<td valign="top" align="left" width="40%">' +
                 '<table cellspacing="0" cellpadding="0" width="100%" border="0" class="PropDetailsList">' +
                    '<tr>' +
                         '<td class="REMSListingCaption" align="left" nowrap width="50%"><B>Sale Price</B></td>' +
                         '<td class="REMSListingCaption" align="left" width="50%">$' + price + '</td>' +
                     '</tr>' +
                     '<tr>' +
                         '<td class="REMSListingCaption" align="left" nowrap width="50%"><B>Bedrooms</B></td>' +
                         '<td class="REMSListingCaption" align="left" width="50%">' + beds + '</td>' +
                     '</tr>' +
                     '<tr>' +
                         '<td class="REMSListingCaption" align="left" nowrap width="50%"><B>Baths</B></td>' +
                         '<td class="REMSListingCaption" align="left" width="50%">' + baths + '</td>' +
                     '</tr>' +
                 '</table>' +
            '</td>' +
         '</tr>' +
        '</table>' 

    return sHTML;
}

function mapResize() {
    map.checkResize();
    if (tempLat != 0 && tempLong != 0) {
        var center = new GLatLng(parseFloat(tempLat), parseFloat(tempLong));
        map.setCenter(center, 10);
    }

}