var gmarkers = [];
var D_type = [];
var D_title = [];
var D_add = [];
var D_desc = [];
var D_img = [];
var D_points = [];
var activeMarker = 99;
var numMarkers = "";
var bounds = "";
var map = "";

$(document).ready(function() {
    if (GBrowserIsCompatible()) {

			// hide display element
			document.getElementById("detailImg").style.visibility = "hidden";

			// Home icon
      var HIcon = new GIcon(G_DEFAULT_ICON);
      HIcon.image = "scripts/icons/home.png";
			HIcon.iconSize = new GSize(34, 34);
      HIcon.shadow = "scripts/icons/shadow.png";
      HIcon.shadowSize = new GSize(40, 34);

      var Icon = new GIcon(G_DEFAULT_ICON);
      Icon.image = "scripts/icons/green.png";
			Icon.iconSize = new GSize(34, 34);
      Icon.shadow = "scripts/icons/shadow.png";
      Icon.shadowSize = new GSize(40, 34);

      var side_bar_html = "<ul>";
			var i = 0;

      // which map to display
			if(document.getElementById("Beaches")) 		 { document.getElementById("Beaches").id = "map"; 		var mapType = "include/Markers_Beaches2.xml"; }
			if(document.getElementById("Attractions")) { document.getElementById("Attractions").id = "map"; var mapType = "include/Markers_Attractions2.xml"; }
			if(document.getElementById("Restaurants")) { document.getElementById("Restaurants").id = "map"; var mapType = "include/Markers_Restaurants2.xml"; }

      // create the map
      map = new GMap2(document.getElementById("map"));
      map.addControl(new GSmallMapControl());
			map.setCenter(new GLatLng(0, 0), 0);

      // A function to create the marker and set up the event window
			//createMarker(point,i,type,title,add,detail,img)
      //function createMarker(point,name,type,i) {
      function createMarker(point,i,type,title,add,detail,img) {

				
      	if(type == "Home") { 
      			var marker = new GMarker(point,HIcon);	
      	} else { 
      			var marker = new GMarker(point,Icon); 
				}
  
				var link = "lab" + i;				   	      	
	
  // -------    	      	
  // CLICKED
  // -------    	      	
        GEvent.addListener(marker, "click", function() {
				
				// If marker selected is not selected
      	if (activeMarker != i-1) {
	
						// set all markers to original
						for (var a = 1; a < numMarkers; a++) {
							gmarkers[a].setImage("scripts/icons/green.png");
						}
		
						if(document.getElementById("active"))
	  				{	
	  					var tit = document.getElementById("active").name;
	  					document.getElementById("active").id = tit;
						}
		
		      	if(document.getElementById("over"))
	      		{
	      			document.getElementById("over").name = link;
							document.getElementById("over").id = "active";
						}
						
						if(i-1 != 0) {
							marker.setImage("scripts/icons/blue.png");
							map.panTo(marker.getLatLng()); 					
						} else {	
							map.setCenter(bounds.getCenter());
							map.setZoom(map.getBoundsZoomLevel(bounds));		
					  }
										
						//change format of side text
						if(document.getElementById("detailAdd")) { document.getElementById("detailAdd").id = "detailAdd_act"; }

										
						activeMarker = i-1;
						document.getElementById("detailImg").style.visibility = "visible";
						document.getElementById("detailTitle").innerHTML = "<b>" + title + "</b>";
						document.getElementById("detailAdd_act").innerHTML = "<i>" + add + "</i>";
						document.getElementById("detailDesc").innerHTML = "<br>" + detail;
						document.getElementById("detailImage").src = img;					
						document.getElementById("detailImage").alt = title;					
					}
        });
        
  // -------    	      	
  // MOUSEOVER'D
  // -------    	      	
        GEvent.addListener(marker, "mouseover", function() {
      	if (activeMarker != i-1 && i-1 != 0) {
	      	marker.setImage("scripts/icons/orange.png");
				}	

				if (activeMarker != i-1) {
					if(i-1 != 0) {
	      		document.getElementById(link).id = "over";
					}
				}

				if (activeMarker == 99) {
					document.getElementById("detailTitle").innerHTML = "<b>Click for details</b>";	
					document.getElementById("detailAdd").innerHTML = "";
					document.getElementById("detailDesc").innerHTML = "";
					document.getElementById("detailImage").src = "";		
					document.getElementById("detailImage").alt = "";		
				}	
        });
        
  // -------    	      	
  // MOUSE OUT
  // -------    	      	
        GEvent.addListener(marker, "mouseout", function() {
				if(i-1 != 0) {
					if (activeMarker != i-1) {
						marker.setImage("scripts/icons/green.png");
					}	
					
					if (activeMarker == 99) {
						document.getElementById("detailTitle").innerHTML = "";
						document.getElementById("detailAdd").innerHTML = "";
						document.getElementById("detailDesc").innerHTML = "";
						document.getElementById("detailImage").src = "";		
						document.getElementById("detailImage").alt = "";		
					}	
        }
        
    		if(document.getElementById("over")){
					if (activeMarker != i) {
						document.getElementById("over").id = link;
					}
				}

        });

        gmarkers[i] = marker;
        
        side_bar_html += '<li id="lab' + i + '"><a href="javascript:myclick(' + i + ')" onmouseover=javascript:mymouseover(' + i + ') onmouseout=javascript:mymouseout(' + i + ')>' + title + '<\/a></li>';
        i++;
        return marker;
      }     
       
			// ===== Start with an empty GLatLngBounds object =====     
      bounds = new GLatLngBounds();
                  
      // Read the data from example.xml
      var request = GXmlHttp.create();
			request.open("GET", mapType, true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          numMarkers = markers.length;
                   
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var type = markers[i].getAttribute("type");
            var title = markers[i].getAttribute("title");
            var add = markers[i].getAttribute("address");
            var detail = markers[i].getAttribute("detail");
            var img = markers[i].getAttribute("img");
            
            // Fill arrays
						D_type[i] = type;
            D_title[i] = title;
            D_add[i] = add;
						D_desc[i] = detail;
						D_img[i] = img;
						D_points[i] = point;
            
            // create the marker
            var marker = createMarker(point,i,type,title,add,detail,img);
            map.addOverlay(marker);
            					            
						// ==== Each time a point is found, extent the bounds ato include it =====
            bounds.extend(point);
          }

          // put the assembled side_bar_html contents into the side_bar div
        	side_bar_html += '</ul>';
          document.getElementById("side_bar").innerHTML = side_bar_html;
          
					// ===== determine the zoom level from the bounds =====
          map.setZoom(map.getBoundsZoomLevel(bounds));

          // ===== determine the centre from the bounds ======
          map.setCenter(bounds.getCenter());
        }
      }
      request.send(null);
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
});
		
$(document.body).unload(function() {
	if (GBrowserIsCompatible()) {
		GUnload();
	}
});


function myclick(i) {
	// set all markers to original
	for (var a = 1; a < numMarkers; a++) {
		gmarkers[a].setImage("scripts/icons/green.png");
	}


	if(document.getElementById("active"))
	{	
		tmp = document.getElementById("active").name;
		document.getElementById("active").id = tmp;
	}

	//change format of side text
	if(document.getElementById("detailAdd")) { document.getElementById("detailAdd").id = "detailAdd_act"; }

	// calc distance
	var d = Math.round(((gmarkers[i].getPoint().distanceFrom(gmarkers[0].getPoint())/1000)*0.621371192)*100)/100;

	// manage side markers to maintain states
	document.getElementById("lab" + i ).name = "lab" + i ;
	document.getElementById("lab" + i ).id = "active";

	// update text
	document.getElementById("detailTitle").innerHTML = "<b>" + D_title[i] + "</b>";
	
	if(document.getElementById("detailAdd_act")) 
	{ 
		document.getElementById("detailAdd_act").innerHTML = "<i>" + D_add[i] + "</i>";
	}

	document.getElementById("detailDesc").innerHTML =  D_desc[i];
	if( d != 0) { 
		document.getElementById("detailDist").innerHTML = d + " miles from Rosemergy Barn<br><i>(straight line distance)</i>"; 
	} else {
		document.getElementById("detailDist").innerHTML = "Rosemergy Barn"; 
	}
		
		
	document.getElementById("detailImg").style.visibility = "visible";
	document.getElementById("detailImage").src = D_img[i];		
	document.getElementById("detailImage").alt = D_title[i];		
	
	if(i != 0) {		     
		gmarkers[i].setImage("scripts/icons/blue.png");	
		map.panTo(gmarkers[i].getLatLng()); 
	} else {
		map.setZoom(map.getBoundsZoomLevel(bounds));		
		map.panTo(bounds.getCenter());
	}
	
	activeMarker = i;
}

function mymouseover(i) {
	if (activeMarker != i && i != 0) {
		gmarkers[i].setImage("scripts/icons/orange.png");
	}	
	if (activeMarker == 99) {
			document.getElementById("detailTitle").innerHTML = "<b>Click for details</b>";	
			
			if(document.getElementById("detailAdd_act")) 
			{ 
					document.getElementById("detailAdd_act").innerHTML = "";
			}
			document.getElementById("detailDesc").innerHTML = "";
			document.getElementById("detailImage").src = "";		
			document.getElementById("detailImage").alt = "";		
	}	
}

function mymouseout(i) {
	if(i != 0) {
		if (activeMarker != i) {
			gmarkers[i].setImage("scripts/icons/green.png");
		}	
		else {	
		gmarkers[i].setImage("scripts/icons/blue.png");
		}	
	}
	if (activeMarker == 99) {
			document.getElementById("detailImg").style.visibility = "hidden";
			document.getElementById("detailTitle").innerHTML = "";	
			if(document.getElementById("detailAdd_act")) 
			{ 
				document.getElementById("detailAdd_act").innerHTML = "";
			}
			document.getElementById("detailDesc").innerHTML = "";
			document.getElementById("detailImage").src = "";		
			document.getElementById("detailImage").alt = "";		
	}	
}