//GLOBAL VARIABLES
						  var side_bar_html = "";
						  var gmarkers = [];
						  var gmarkersID = [];
						  var gpoints = [];
						  var htmls = [];
						  var i = 0;
						  var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
						  var date_type = "a";

//===== ICON STYLING FOR MAP ICONS
						  var greenIcon = new GIcon();
						  greenIcon.image = "/images/icons/gmaps/past.png";
						  greenIcon.shadow = "/images/icons/gmaps/past_s.png";
						  greenIcon.hoverIcon = "/images/icons/gmaps/past_h.png";
						  greenIcon.iconSize = new GSize(15, 15);
						  greenIcon.shadowSize = new GSize(23, 16);
						  greenIcon.iconAnchor = new GPoint(8, 14);
						  greenIcon.infoWindowAnchor = new GPoint(15, 0);
						  greenIcon.infoShadowAnchor = new GPoint(15, 15);
						  greenIcon.transparent = "/~forestc1/images/icons/inventory/t_green.png";
						  //greenIcon.printImage = "xxx.gif";
						  //greenIcon.mozPrintImage = "xxx.gif";
						  
						   var orangeIcon = new GIcon();
						  orangeIcon.image = "/images/icons/gmaps/past_h.png";
						  orangeIcon.shadow = "/images/icons/gmaps/past_s.png";
						  orangeIcon.hoverIcon = "/images/icons/gmaps/past.png";
						  orangeIcon.iconSize = new GSize(11, 11);
						  orangeIcon.shadowSize = new GSize(22, 11);
						  orangeIcon.iconAnchor = new GPoint(6, 11);
						  orangeIcon.infoWindowAnchor = new GPoint(11, 0);
						  orangeIcon.infoShadowAnchor = new GPoint(11, 11);
						  orangeIcon.transparent = "/~forestc1/images/icons/inventory/t_orange.png";
						  //orangeIcon.printImage = "xxx.gif";
						  //orangeIcon.mozPrintImage = "xxx.gif";
						  
						  var icons = [];
						  icons[0] = greenIcon;
						  icons[1] = orangeIcon;
						//END ICON STYLING
						
//===== THIS IS FOR LAUNCHING FUNCTIONS FROM OUTSIDE THE MAP
						  // This function picks up the click and opens the corresponding info window
						  function myclick(i) {
							gmarkersID[i].openInfoWindowHtml("<div class='infoBox' style='background-image:none'>"+gmarkersID[i].code+"</div>");
						  }
						  
						  // It launches the tooltip layer on the icon      
						  function mymouseover(i) {
							//showTooltip(gmarkers[i])
							showInfoBox(gmarkersID[i])
						  }
						  
						  //closes the nutrition label
						  function hideInfoBox(){
						  	ew.hide();
						  }

						  // It hides the tooltip from outside the map     
						  function mymouseout() {
							tooltip.style.visibility="hidden";
						  }
						  
						  function showInfoBox(marker) {
							//first start moving the map
							ew.openOnMarker(marker,buildHTML(marker.title, marker.code));
							var newPoint = getOffsetPoint(0, -50, marker.coords);
							map.panTo(newPoint);
							map.panTo(marker.coords);
						
						  }
						
						
						
						
    //<![CDATA[
    
    if (GBrowserIsCompatible()) { 
//______________________BUILD MARKERS_________________________

      function createMarker(point,name,html,icontype, icontitle, id) {
        if (IE6){ //for some reason I cannot load the marker with icon or I lose functionality
			var marker = new GMarker(point);
		} else {var marker = new GMarker(point, icons[icontype]);}
		marker.coords = point;
							
		//modify the tooltip:
		marker.title = name;
		marker.code = html;
		marker.tooltip = '<div class="tooltip"><nobr>'+icontitle+'<\/nobr><\/div>';
		
        
		html = buildHTML(name, html);
		// ========== Open the EWindow instead of a Google Info Window ==========
        GEvent.addListener(marker, "click", function() {
			ew.openOnMarker(marker,html);
		  	var newPoint = getOffsetPoint(0, -50, point);
		  	map.panTo(newPoint);
        });
		
//========== Set the double click function ===============
		 GEvent.addListener(marker, "dblclick", function() {
		   window.location.href='event.php?id='+id
        });
		
		 // Switch icon on marker mouseover and mouseout
		GEvent.addListener(marker, "mouseover", function() {
		  marker.setImage(icons[icontype].hoverIcon);
		  showTooltip(marker);
		  //map.panTo(point);
		});
		GEvent.addListener(marker, "mouseout", function() {
		  marker.setImage(icons[icontype].image);
		  tooltip.style.visibility="hidden";
		});
		
		//add it to the global array
		gmarkers.push(marker);
		gpoints.push(marker.coords);
		gmarkersID[id]=marker;
		
        return marker;
      }
	  
	  function getOffsetPoint(offsetX, offsetY, point) {
			var pixels = map.getCurrentMapType().getProjection().fromLatLngToPixel(point,map.getZoom());
			return map.getCurrentMapType().getProjection().fromPixelToLatLng(new GPoint((pixels.x-offsetX),pixels.y-offsetY),map.getZoom());
	  } 
      
      var map = new GMap2(document.getElementById("map"),{mapTypes:[G_PHYSICAL_MAP, G_NORMAL_MAP, G_SATELLITE_MAP]});
	  var LargeMapControl = new GLargeMapControl();
	  map.addControl(LargeMapControl);
	  var TypeMapControl = new GMapTypeControl();
	  map.addControl(TypeMapControl);
	  map.setCenter(new GLatLng( 27.71859, 6.679688), 1, G_PHYSICAL_MAP);
	  map.addMapType(G_PHYSICAL_MAP);
	  map.enableContinuousZoom();
	  map.enableScrollWheelZoom();
      
      // Create an EWindow
      ew = new EWindow(map, E_STYLE_7);      
      map.addOverlay(ew);
	  
	  //now that the map is built, add the tooltip layer
	  var tooltip = document.createElement("div");
	  map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
	  tooltip.style.visibility="hidden";
      
      // This function just makes a pretty table for the EWindow contents
      function buildHTML(title,html) {
        return '<table id="infoPop" border="0" cellpadding="3" cellspacing="0" class="infoBox"><tr><th width="100%" nowrap><a href="javascript:hideInfoBox();" class="close"><img src="/~forestc1/images/structure/buttons/x.gif" alt="[x]" /></a>' + title + '</th></tr>' +
               '<tr><td nowrap>' + html + '</td></tr></table>';
      }
	  
	  function showTooltip(marker) {
		tooltip.innerHTML = marker.tooltip;
		var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
		var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
		var anchor=marker.getIcon().iconAnchor;
		var width=marker.getIcon().iconSize.width;
		var height=tooltip.clientHeight;
		var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y -height)); 
		pos.apply(tooltip);
		tooltip.style.visibility="visible";
	  }
	  
	  function showInfoBox(marker){
		  var html = buildHTML(marker.title, marker.code);
		  ew.openOnMarker(marker,html);
		  var newPoint = getOffsetPoint(0, -50, marker.coords);
		  map.panTo(newPoint);
	  }
	  
	  function fitMap( map, points ) {
		   var bounds = new GLatLngBounds();
		   for (var i=0; i< points.length; i++) {
			  bounds.extend(points[i]);
		   }
		   map.setZoom(map.getBoundsZoomLevel(bounds));
		   map.setCenter(bounds.getCenter());
	   }
	  
	   // A function to read the data
						  function readMap(url) {
							var url="/ajax/events.php?q="+url;
							var request = GXmlHttp.create();
							request.open("GET", url, true);
							request.onreadystatechange = function() {
							  if (request.readyState == 4) {
								var xmlDoc = request.responseXML;
								// obtain the array of markers and loop through it
								/*if (!xmlDoc.documentElement){
									alert('NO: '+url);
								} else {
									alert('YES: '+url);
								}*/
								var markers = xmlDoc.documentElement.getElementsByTagName("marker");
								
								//map.clearOverlays();
								
								// empty the array
								gmarkers = [];
					
								// reset the side_bar
								side_bar_html="";
							  
								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 html = markers[i].getAttribute("html");
								  var label = markers[i].getAttribute("label");
								  var icontype =  markers[i].getAttribute("icon");
								  var icontitle  = markers[i].getAttribute("title");
								  var id = markers[i].getAttribute("item");
								  // create the marker
								  var marker = createMarker(point,label,html, icontype, icontitle, id);
								  map.addOverlay(marker);
								  
								  //now we compensate for the strange IE6 problem (though shadows are odd)
								  //Basicly, IE six will accept alternate icon types in the GMarker function, but no functionality is preserved
								  if (IE6){
									  marker.setImage(icons[icontype].image);
								  }
								  
								}
								// put the assembled side_bar_html contents into the side_bar div
								//document.getElementById("side_bar").innerHTML = side_bar_html;
							  }
							}
							request.send(null);
						  }
      
      
      // ========== Close the EWindow if theres a map click ==========
      GEvent.addListener(map, "click", function(overlay,point) {
        if (!overlay) {
          ew.hide();
        }
      });
	  
	  // =========== On zoom, do something ==============
	  GEvent.addListener(map, "zoomend", function() {
		map.clearOverlays();
		ew = new EWindow(map, E_STYLE_7);      
        map.addOverlay(ew);
		readMap(date_type+"&zoom_level="+ map.getZoom());
      });
      

    }
    
    // display a warning if the browser was not compatible
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/   
    // http://econym.googlepages.com/index.htm

    //]]>