// JScript File

// Declare Variables
var map;
var cluster;
var geocoder = null;
var markers = [];   
var directionsPanel;
var directions;
var markersArray=[], sortedMarkersArray=[];
var currentPoint = null;
var currentZoom = null;
var MarkerData = "";

// SETTINGS
var defaultPropertyName = "PropertyName";
var defaultPropertyIcon = "images/propertyicon_sel.png";
var defaultPropertyIconShadow = "images/propertyicon_shadow.png"
var defaultPropertyIconWidth = 12;
var defaultPropertyIconHeight = 20;
var defaultPropertyIconShadowWidth = 22;
var defaultPropertyIconShadowHeight = 20;
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;

function showAddress(address,zoom) 
{
    address = address.replace(' Metro', '');

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

function MapLoad() 
{
	if (GBrowserIsCompatible()) 
	{
		map=new GMap2(document.getElementById('m_MapDiv'));
		map.setCenter(new GLatLng(41.902277,-33.75), 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();  
		      
        setTimeout("showAddress('Mt. Pearl, Newfoundland',3)",300);
		
		var marker, newIcon;
		
        GDownloadUrl("Markers.aspx", function(data) {
            var xml = GXml.parse(data);
            var markerlist = "";
            markers = xml.documentElement.getElementsByTagName("marker"); 
            MarkerData += "   <table cellspacing=\"0\" cellpadding=\"0\" style=\"width:660px;\">";
            for (var i = 0; i < markers.length; i++) 
            {
                var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
                var markerName = markers[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);
                             
                marker = newMarker(latlng, i, newIcon);
                markersArray.push(marker);
                map.addOverlay(marker);         

                MarkerData += " <tr onmouseover=\"this.style.backgroundColor='#e8e8e8';this.style.cursor='pointer';\" onmouseout=\"this.style.backgroundColor='';\" onclick=\"markerClick(" + i + ");\">";
                MarkerData += "     <td class=\"m_markerList\">";
                MarkerData += "         <table width=\"100%\">";
                MarkerData += "             <tr>";
                MarkerData += "                 <td width=\"125\" valign=\"top\">";
                MarkerData += "                     <img class=\"businessimage\" src=\"" + markers[i].getAttribute("img") + "\" alt=\"" + markers[i].getAttribute("name") + "\"/>";
                MarkerData += "                 </td>";
                MarkerData += "                 <td valign=\"top\">";
                MarkerData += "                     <strong>" + markers[i].getAttribute("name") + "</strong><br>";
                MarkerData += '                     ' + markers[i].getAttribute("address") + '<br/>';
                MarkerData += '                     ' + markers[i].getAttribute("city") + ', ' + markers[i].getAttribute("state") + ' ' + markers[i].getAttribute("zip") + '<br/><br/>';
                MarkerData += '                     ' + utf8_decode(markers[i].getAttribute("full_desc")) + '<br/>';
                MarkerData += "                 </td>";
                MarkerData += "             </tr>";
                MarkerData += "         </table>";
                MarkerData += "     </td>";
                MarkerData += " </tr>";
            }
            MarkerData += "   </table>";
            document.getElementById("m_MarkerDiv").innerHTML = MarkerData;
        });
        
        //cluster=new ClusterMarker(map, { markers:markersArray } );
        //cluster.refresh();
		
	    map.savePosition();
	}
}

function newMarker(markerLocation, markerId, markerIcon) 
{	
	var marker = new GMarker(markerLocation, {title:markers[markerId].getAttribute("address"), icon:markerIcon});
	GEvent.addListener(marker, 'click', function() {
	    var markerInfo = '';
	    markerInfo += '<div class="marker">';
        markerInfo += "     <img class=\"businessimage\" src=\"" + markers[markerId].getAttribute("img") + "\" alt=\"" + markers[markerId].getAttribute("name") + "\"/>";
        markerInfo += '     <div class="businessinfo">';
        markerInfo += '         <a href=\"datacenter-details.aspx?pid=' + markers[markerId].getAttribute("pid") + '\"><strong>' + markers[markerId].getAttribute("name") + '</strong></a><br/>';
        markerInfo += '         ' + markers[markerId].getAttribute("address") + '<br/>';
        markerInfo += '         ' + markers[markerId].getAttribute("city") + ', ' + markers[markerId].getAttribute("state") + ' ' + markers[markerId].getAttribute("zip") + '<br/><br/>';
        markerInfo += '         ' + utf8_decode(markers[markerId].getAttribute("full_desc")) + '<br/><br/>';
        markerInfo += '         <a href=\"datacenter-details.aspx?pid=' + markers[markerId].getAttribute("pid") + '\">Details</strong></a><br/>';
        markerInfo += '     </div>'
        markerInfo += '</div>';
        markerInfo += "<br />";
        
		marker.openInfoWindowHtml(markerInfo);
	});
	return marker;
}
    
function markerClick(i){
    try{
        var zoomLvl = map.getZoom();
        //var zoomLvl = 10;
        map.setCenter(new GLatLng(markersArray[i].getPoint().lat(), markersArray[i].getPoint().lng()), zoomLvl);
        setTimeout("GEvent.trigger(markersArray["+i+"],'click');",100);        
    }catch(err){
        alert("The attraction you have selected cannot be mapped.  Please select another attraction.");
    }
} 

function updateMap() {
    // turn on spinner animation
    // document.getElementById("spinner").style.visibility = 'visible';
    
    MarkerData = "";
    MarkerData += "<div align=center>";
    MarkerData += "   <br /><br /><br /><br />";
    MarkerData += "   <img id=\"Img1\" src=\"images/spinner.gif\" />";
    MarkerData += "   <br /><br />";
    MarkerData += "   <strong>Please Wait while Loading....<br /></strong>";                            
    MarkerData += "</div>";
    document.getElementById("m_MarkerDiv").innerHTML = MarkerData;
    
    /* clear existing markers */
    //map.clearOverlays();
    clearMarkers();
    map.setCenter(currentPoint, currentZoom);  
    
    return false;
}

function toggleMarkers(address,market_location,zoom) 
{
    document.getElementById("m_MarkerContainer").style.display = "block";
    
    if(address != "0"){
        for (var i=0;i<markersArray.length;i++) 
        {
            map.removeOverlay(markersArray[i]);
        }
        markersArray = [];
        MarkerData = "";
        
        //cluster.removeMarkers();
        
        var marker, newIcon;
    		
        GDownloadUrl("Markers.aspx", function(data) {
            var xml = GXml.parse(data);
            var markerlist = "";
            markers = xml.documentElement.getElementsByTagName("marker"); 
            MarkerData += "   <table cellspacing=\"0\" cellpadding=\"0\" style=\"width:900px;\">";
            var j = 0;
            for (var i = 0; i < markers.length; i++) 
            {
                if(markers[i].getAttribute("market") == address)
                {
                    var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
                    var markerName = markers[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);
                                 
                    marker = newMarker(latlng, i, newIcon);
                    markersArray.push(marker);
                    map.addOverlay(marker);         

                    MarkerData += " <tr onmouseover=\"this.style.backgroundColor='#e8e8e8';this.style.cursor='pointer';\" onmouseout=\"this.style.backgroundColor='';\" onclick=\"markerClick(" + j + ");\">";
                    MarkerData += "     <td class=\"m_markerList\">";
                    MarkerData += "         <table width=\"100%\">";
                    MarkerData += "             <tr>";
                    MarkerData += "                 <td width=\"125\" valign=\"top\">";
                    MarkerData += "                     <img class=\"businessimage\" src=\"" + markers[i].getAttribute("img") + "\" alt=\"" + markers[i].getAttribute("name") + "\"/>";
                    MarkerData += "                 </td>";
                    MarkerData += "                 <td valign=\"top\">";
                    MarkerData += "                     <strong>" + markers[i].getAttribute("name") + "</strong><br>";
                    MarkerData += '                     ' + markers[i].getAttribute("address") + '<br/>';
                    MarkerData += '                     ' + markers[i].getAttribute("city") + ', ' + markers[i].getAttribute("state") + ' ' + markers[i].getAttribute("zip") + '<br/><br/>';
                    MarkerData += '                     ' + utf8_decode(markers[i].getAttribute("full_desc")) + '<br/>';
                    MarkerData += "                 </td>";
                    MarkerData += "             </tr>";
                    MarkerData += "         </table>";
                    MarkerData += "     </td>";
                    MarkerData += " </tr>";
                    j++;
                }
            }
            MarkerData += "   </table>";
            document.getElementById("m_MarkerDiv").innerHTML = MarkerData;
        });

        //cluster.addMarkers(markersArray);
        //cluster.refresh();
    	
	    showAddress(market_location,zoom);
	}
}

function utf8_decode(utftext) 
{
	var string = "";
	var i = 0;
	var c = c1 = c2 = 0;

	while ( i < utftext.length ) {

		c = utftext.charCodeAt(i);

		if (c < 128) {
			string += String.fromCharCode(c);
			i++;
		}
		else if((c > 191) && (c < 224)) {
			c2 = utftext.charCodeAt(i+1);
			string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
			i += 2;
		}
		else {
			c2 = utftext.charCodeAt(i+1);
			c3 = utftext.charCodeAt(i+2);
			string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
			i += 3;
		}

	}

	return string;
}