// JScript File

// Declare Variables
var map, cluster;
var geocoder = null;

var directionsPanel;
var directions;

var markerArray = [];
var resortArray = [];
var diveArray = [];
var surfArray = [];

var ResortData = "";
var SurfData = "";
var DiveData = "";

var currentPoint = null;
var currentZoom = null;

// SETTINGS
var defaultPropertyName = "Resort";
//var defaultPropertyIcon = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
//var defaultPropertyIconShadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";

// default property icon
var defaultPropertyIcon = "images/gmaps/villa.png";
//var defaultPropertyIconShadow = "images/gmaps/accommodations_shadow.png"
var defaultPropertyIconWidth = 32;
var defaultPropertyIconHeight = 37;
//var defaultPropertyIconShadowWidth = 24;
//var defaultPropertyIconShadowHeight = 20;

// default cluster icon
var defaultPropertyClusterIcon = "http://labs.google.com/ridefinder/images/mm_20_red.png";
var defaultPropertyClusterIconShadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
var defaultPropertyClusterIconWidth = 12;
var defaultPropertyClusterIconHeight = 20;
var defaultPropertyClusterIconShadowWidth = 22;
var defaultPropertyClusterIconShadowHeight = 20;

// windsurf center
var WindSurfCenterIcon = "images/gmaps/windsurfing.png";
var WindSurfCenterIconWidth = 32;
var WindSurfCenterIconHeight = 37;

// dive center
var DiveCenterIcon = "images/gmaps/water.png";
var DiveCenterIconWidth = 32;
var DiveCenterIconHeight = 37;

function showAddress(address,zoom) 
{
    if(directions)
    {
        directions.clear();
    }
    if (geocoder) 
    {
        geocoder.getLatLng(
            address,    
            function(point){
                if (!point) 
                {
                    showAddress("Little Bonaire", 3);
                }
                else
                {
                    currentPoint = point;
                    currentZoom = zoom;
                    map.setCenter(point, zoom);
                }
            }
        );
    }
}

function MapLoad(AccommodationID) {
    var initialZoom;
    
	if (GBrowserIsCompatible()) 
	{
		map=new GMap2(document.getElementById('m_MapDiv'));
		map.setCenter(new GLatLng(12.202456, -68.275223), 3, G_NORMAL_MAP);
		map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7)));
		map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7)));
        geocoder = new GClientGeocoder();

        if (typeof AccommodationID != undefined) {
            initialZoom = 12;
        }
        else {
            initialZoom = 12;
        }
        
        showAddress('Little Bonaire', initialZoom);
        
        LoadMarkers(AccommodationID);
        
//      NOTE:  To cluster the icons uncomment the next 2 lines and comment out line 90.
//		cluster=new ClusterMarker(map, { markers:markersArray } );
//		cluster.refresh();
		
		map.savePosition();
	}
}

function LoadMarkers(AccommodationID) {
    // show the waiting spinner
    document.getElementById("m_MarkerDiv").innerHTML = document.getElementById("SpinWait").innerHTML;

    ResortData = "";
    DiveData = "";
    SurfData = "";

    // remove the old markers
    if (resortArray.length > 0) {
        for (var i = 0; i < resortArray.length; i++) {
            map.removeOverlay(resortArray[i]);
        }
    }
    if (diveArray.length > 0) {
        for (var i = 0; i < diveArray.length; i++) {
            map.removeOverlay(diveArray[i]);
        }
    }
    if (surfArray.length > 0) {
        for (var i = 0; i < surfArray.length; i++) {
            map.removeOverlay(surfArray[i]);
        }
    }

    // reset everything
    resortArray = [];
    diveArray = [];
    surfArray = [];
    
    // load the selected markers
    if (document.getElementById('Accommodations')) {
        if (document.getElementById('Accommodations').checked) {
            addAccommodations(AccommodationID);
        }
    }

    if (document.getElementById('DiveCenters')) {
        if (document.getElementById('DiveCenters').checked) {
            addDiveCenters();
        }
    }

    if (document.getElementById('WindSurfCenters')) {
        if (document.getElementById('WindSurfCenters').checked) {
            addWindSurfCenters();
        }
    }
}

function newMarker(markerType, markerLocation, markerId, markerIcon, markerCollection)
{
    var marker = new GMarker(markerLocation, { title: markerCollection[markerId].getAttribute("address"), icon: markerIcon });
    var url = "";
    
    if (markerType == 'RESORT') {
        url = markerCollection[markerId].getAttribute("name").replace(/ /gi, '-').replace(/'/gi, '') + '.aspx';
    }
    else {
        url = markerCollection[markerId].getAttribute("url");
    }
	
	GEvent.addListener(marker, 'click', function() {
	    var markerInfo = '';
	    markerInfo += '<div class="marker">';
	    markerInfo += '     <a href="' + markerCollection[markerId].getAttribute("name").replace(/ /gi, '-').replace(/'/gi, '') + '.aspx"><img class="businessimage" width="100" src="' + markerCollection[markerId].getAttribute("image") + '" border="0" /></a>';
	    markerInfo += '     <div class="businessinfo">';
	    markerInfo += '         <a href="' + url + '"><strong>' + markerCollection[markerId].getAttribute("name") + '</strong></a><br />';
	    markerInfo += '         ' + markerCollection[markerId].getAttribute("address") + '<br />';
	    markerInfo += '         <br />';
	    if (markerType != 'RESORT') {
	        markerInfo += '         ' + markerCollection[markerId].getAttribute("general_desc") + '<br />';
	    }
	    else {
	    	markerInfo += '     <a href="' + markerCollection[markerId].getAttribute("name").replace(/ /gi, '-').replace(/'/gi, '') + '.aspx">Learn More &raquo;</a>';
	    }
	    markerInfo += '     </div>'
	    markerInfo += '</div>';
	    markerInfo += '<br />';

	    marker.openInfoWindowHtml(markerInfo);
	});
	return marker;
}

function markerClick(i, markerType) {
    
    try{
        //var zoomLvl = map.getZoom();
        var zoomLvl = 13;
        switch (markerType) {
            case 'RESORT':
                markerArray = resortArray;
                break;
            case 'DIVE':
                markerArray = diveArray;
                break;
            case 'SURF':
                markerArray = surfArray;
                break;
        }
        
        map.setCenter(new GLatLng(markerArray[i].getPoint().lat(), markerArray[i].getPoint().lng()), zoomLvl);
        setTimeout("GEvent.trigger(markerArray[" + i + "],'click');", 100);        
        
    }catch(err){
        alert("The attraction you have selected cannot be mapped.  Please select another attraction.");
    }
}

function addMarkerData() {
    // this is obviously not the most ideal way, but IE was having trouble comparing innerHTML values
    if (document.getElementById("m_MarkerDiv").innerHTML.indexOf('Please Wait while Loading') > 0) {
        document.getElementById("m_MarkerDiv").innerHTML = ResortData + DiveData + SurfData;
    }
    else {
        document.getElementById("m_MarkerDiv").innerHTML = ResortData + DiveData + SurfData;
    }
}

function addAccommodations(AccommodationID) {
    var resort, newIcon;
    var dataUrl = '/Hotel-Markers.aspx';

    if (typeof AccommodationID != undefined) {
        dataUrl += '?AccommodationID=' + AccommodationID;
    }

    GDownloadUrl(dataUrl, function(data) {
        var xml = GXml.parse(data);
        var resortId = 0;
        var resorts = xml.documentElement.getElementsByTagName("marker");

        ResortData += "   <table cellspacing=\"0\" cellpadding=\"0\" style=\"width:95%;\">";
        for (var i = 0; i < resorts.length; i++) {
            var latlng = new GLatLng(parseFloat(resorts[i].getAttribute("lat")), parseFloat(resorts[i].getAttribute("lng")));
            var resortName = resorts[i].getAttribute("address");
            //newIcon=new GIcon(icon, defaultPropertyIcon);

            newIcon = new GIcon();
            newIcon.image = defaultPropertyIcon;
            //newIcon.shadow = defaultPropertyIconShadow;
            newIcon.iconSize = new GSize(defaultPropertyIconWidth, defaultPropertyIconHeight);
            //newIcon.shadowSize = new GSize(defaultPropertyIconShadowWidth, defaultPropertyIconShadowHeight);
            newIcon.iconAnchor = new GPoint(6, 20);
            newIcon.infoWindowAnchor = new GPoint(5, 1);

            resortId = resortArray.length;
            resort = newMarker('RESORT', latlng, resortId, newIcon, resorts);
            resortArray.push(resort);
            map.addOverlay(resort);

            ResortData += " <tr onmouseover=\"this.style.backgroundColor='#e8e8e8';this.style.cursor='pointer';\" onmouseout=\"this.style.backgroundColor='';\" onclick=\"markerClick(" + resortId + ", 'RESORT');\">";
            ResortData += "     <td class=\"m_markerList\">";
            ResortData += "         <table width=\"100%\">";
            ResortData += "             <tr>";
            ResortData += "                 <td width=\"125\" valign=\"top\">";
            ResortData += "                     <img class=\"businessimage\" width=\"120\" src=\"" + resorts[i].getAttribute("image") + "\"/>";
            ResortData += "                 </td>";
            ResortData += "                 <td width=\"220\" valign=\"top\" align=\"left\">";
            ResortData += "                     <strong>" + resorts[i].getAttribute("name") + "</strong><br />";
            ResortData += '                     ' + resorts[i].getAttribute("address") + '<br />';
            ResortData += "                 </td>";
            ResortData += "                 <td valign=\"top\" align=\"left\">";
            ResortData += '                     ' + resorts[i].getAttribute("general_desc");
            ResortData += "                 </td>";
            ResortData += "             </tr>";
            ResortData += "         </table>";
            ResortData += "     </td>";
            ResortData += " </tr>";
        }
        ResortData += "   </table>";

        addMarkerData();
    });
}

function addDiveCenters() {
    var dive, newIcon;

    GDownloadUrl("/includes/Dive-Centers.xml", function(data) {
        var xml = GXml.parse(data);
        var diveId = 0;
        var dives = xml.documentElement.getElementsByTagName("marker");

        DiveData += "   <table id=\"DiveCentersTable\" cellspacing=\"0\" cellpadding=\"0\" style=\"width:95%;\">";
        for (var i = 0; i < dives.length; i++) {
            var latlng = new GLatLng(parseFloat(dives[i].getAttribute("lat")), parseFloat(dives[i].getAttribute("lng")));
            var diveName = dives[i].getAttribute("address");
            //newIcon=new GIcon(icon, defaultPropertyIcon);

            newIcon = new GIcon();
            newIcon.image = DiveCenterIcon;
            //newIcon.shadow = defaultPropertyIconShadow;
            newIcon.iconSize = new GSize(DiveCenterIconWidth, DiveCenterIconHeight);
            //newIcon.shadowSize = new GSize(defaultPropertyIconShadowWidth, defaultPropertyIconShadowHeight);
            newIcon.iconAnchor = new GPoint(6, 20);
            newIcon.infoWindowAnchor = new GPoint(5, 1);
            
            diveId = diveArray.length;
            dive = newMarker('DIVE', latlng, diveId, newIcon, dives);
            diveArray.push(dive);
            map.addOverlay(dive);

            DiveData += " <tr onmouseover=\"this.style.backgroundColor='#e8e8e8';this.style.cursor='pointer';\" onmouseout=\"this.style.backgroundColor='';\" onclick=\"markerClick(" + diveId + ", 'DIVE');\">";
            DiveData += "     <td class=\"m_markerList\">";
            DiveData += "         <table width=\"100%\">";
            DiveData += "             <tr>";
            DiveData += "                 <td width=\"125\" valign=\"top\">";
            DiveData += "                     <img class=\"businessimage\" width=\"120\" src=\"" + dives[i].getAttribute("image") + "\"/>";
            DiveData += "                 </td>";
            DiveData += "                 <td width=\"220\" valign=\"top\" align=\"left\">";
            DiveData += "                     <strong>" + dives[i].getAttribute("name") + "</strong><br />";
            DiveData += '                     ' + dives[i].getAttribute("address") + '<br />';
            DiveData += "                 </td>";
            DiveData += "                 <td valign=\"top\" align=\"left\">";
            DiveData += '                     ' + dives[i].getAttribute("general_desc");
            DiveData += "                 </td>";
            DiveData += "             </tr>";
            DiveData += "         </table>";
            DiveData += "     </td>";
            DiveData += " </tr>";
        }
        DiveData += "   </table>";

        addMarkerData();
    });
}

function addWindSurfCenters() {
    var surf, newIcon;

    GDownloadUrl("/includes/Wind-Surf-Centers.xml", function(data) {
        var xml = GXml.parse(data);
        var surfId = 0;
        var surfs = xml.documentElement.getElementsByTagName("marker");

        SurfData += "   <table id=\"WindSurfCentersTable\" cellspacing=\"0\" cellpadding=\"0\" style=\"width:95%;\">";
        for (var i = 0; i < surfs.length; i++) {
            var latlng = new GLatLng(parseFloat(surfs[i].getAttribute("lat")), parseFloat(surfs[i].getAttribute("lng")));
            var surfName = surfs[i].getAttribute("address");
            //newIcon=new GIcon(icon, defaultPropertyIcon);

            newIcon = new GIcon();
            newIcon.image = WindSurfCenterIcon;
            //newIcon.shadow = defaultPropertyIconShadow;
            newIcon.iconSize = new GSize(WindSurfCenterIconWidth, WindSurfCenterIconHeight);
            //newIcon.shadowSize = new GSize(defaultPropertyIconShadowWidth, defaultPropertyIconShadowHeight);
            newIcon.iconAnchor = new GPoint(6, 20);
            newIcon.infoWindowAnchor = new GPoint(5, 1);
            
            surfId = surfArray.length;
            surf = newMarker('SURF', latlng, surfId, newIcon, surfs);
            surfArray.push(surf);
            map.addOverlay(surf);

            SurfData += " <tr onmouseover=\"this.style.backgroundColor='#e8e8e8';this.style.cursor='pointer';\" onmouseout=\"this.style.backgroundColor='';\" onclick=\"markerClick(" + surfId + ", 'SURF');\">";
            SurfData += "     <td class=\"m_markerList\">";
            SurfData += "         <table width=\"100%\">";
            SurfData += "             <tr>";
            SurfData += "                 <td width=\"125\" valign=\"top\">";
            SurfData += "                     <img class=\"businessimage\" width=\"120\" src=\"" + surfs[i].getAttribute("image") + "\"/>";
            SurfData += "                 </td>";
            SurfData += "                 <td width=\"220\" valign=\"top\" align=\"left\">";
            SurfData += "                     <strong>" + surfs[i].getAttribute("name") + "</strong><br />";
            SurfData += '                     ' + surfs[i].getAttribute("address") + '<br />';
            SurfData += "                 </td>";
            SurfData += "                 <td valign=\"top\" align=\"left\">";
            SurfData += '                     ' + surfs[i].getAttribute("general_desc");
            SurfData += "                 </td>";
            SurfData += "             </tr>";
            SurfData += "         </table>";
            SurfData += "     </td>";
            SurfData += " </tr>";
        }
        SurfData += "   </table>";

        addMarkerData();
    });
}