//<![CDATA[

if (GBrowserIsCompatible()) {

   function getURLParam(strParamName){
	var strReturn = "";
	var strHref = window.location.href;
	if ( strHref.indexOf("?") > -1 ) {
	     var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
	     var aQueryString = strQueryString.split("&");
	     for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
		if (aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
		   var aParam = aQueryString[iParam].split("=");
		   strReturn = aParam[1];
		   break;
		}
	     }
	}
      return unescape(strReturn);
   }
   var url = getURLParam("regio");
   var act = getURLParam("active");
   //   var xml_file     = "/gmap3/read.php?regio=";
   var url          = "/gmap3/read.php?regio=" + url + "&active=" + act;
   var m_lat        = getURLParam("lat");
   var m_long       = getURLParam("long");
   var zoomfactor   = getURLParam("zoom");
   var zoom = zoomfactor;
   // this variable will collect the html which will eventually be placed in the side_bar
   var side_bar_html = "";
   
   // arrays to hold copies of the markers and html used by the side_bar
   // because the function closure trick doesnt work there
   var gmarkers = [];
   var htmls = [];
   var i = 0;
   // arrays to hold variants of the info window html with get direction forms open
   var point = [];
   var icontype = [];
   var title = [];
   var html = [];
   var label = [];
   var to_htmls = [];
   var from_htmls = [];
   

   
   // array to hold the icons
   var shadow = "/images/gmap/gmgmarker-shadow.png"; 
   
   var gicons = [];
   gicons["blue"] = new GIcon(G_DEFAULT_ICON, "/images/gmap/gmgmarker-blue.png");
   gicons["blue"].shadow = shadow;
   gicons["green"] = new GIcon(G_DEFAULT_ICON, "/images/gmap/gmgmarker-green.png");
   gicons["green"].shadow = shadow;
   gicons["red"] = new GIcon(G_DEFAULT_ICON, "/images/gmap/gmgmarker-red.png");
   gicons["red"].shadow = shadow;
   gicons["orange"] = new GIcon(G_DEFAULT_ICON, "/images/gmap/gmgmarker-orange.png");
   gicons["orange"].shadow = shadow;
   gicons["purple"] = new GIcon(G_DEFAULT_ICON, "/images/gmap/gmgmarker-purple.png");
   gicons["purple"].shadow = shadow;
  
   // A function to create the marker and set up the event window
   function createTabbedMarker(point,tabs,icontype) 
   {
      var marker = new GMarker(point, gicons[icontype]);
      // The inactive version of the direction info
      
      
      var i = gmarkers.length;
      marker.marker_num  = i;
      marker.tabs = tabs;
      gmarkers[i] = marker;

      GEvent.addListener(gmarkers[i], "click", function() {
	 marker.openInfoWindowTabsHtml(gmarkers[i].tabs);
      });
      
       //  ======  The new marker "mouseover" and "mouseout" listeners  ======
      GEvent.addListener(gmarkers[i],"mouseover", function() {
	 showTooltip(gmarkers[i]);
      });        
      GEvent.addListener(gmarkers[i],"mouseout", function() {
	 tooltip.style.visibility="hidden"
      });        
      
      return marker;
   }
   // ====== This function displays the tooltip ======
   // it can be called from an icon mousover or a side_bar mouseover
   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 )); 
      pos.apply(tooltip);
      tooltip.style.visibility="visible";
   }
   
 
   // ===== This function is invoked when the mouse goes over an entry in the side_bar =====
   // It launches the tooltip on the icon      
    function mymouseover(i) {
       showTooltip(gmarkers[i])
    }
   // ===== This function is invoked when the mouse leaves an entry in the side_bar =====
   // It hides the tooltip      
   function mymouseout() {
      tooltip.style.visibility="hidden";
   }
   
   // This function picks up the click and opens the corresponding info window
   function myclick(i) 
   {
      gmarkers[i].openInfoWindowTabsHtml(gmarkers[i].tabs);
   }
   
   // functions that open the directions forms
   function tohere(i)
   {
       gmarkers[i].tabs[0]= new GInfoWindowTab(label[i][0],to_htmls[i]);
       gmarkers[i].openInfoWindowTabsHtml(gmarkers[i].tabs,{selectedTab:0});
   }
   function fromhere(i) 
   {
       gmarkers[i].tabs[0]= new GInfoWindowTab(label[i][0],from_htmls[i]);
       gmarkers[i].openInfoWindowTabsHtml(gmarkers[i].tabs,{selectedTab:0});
   }
   
   
   // create the map
   var map = new GMap2(document.getElementById("map"));
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   map.setCenter(new GLatLng(m_lat,m_long), 8);
   map.setMapType(G_SATELLITE_MAP);
   
   
   // ====== set up marker mouseover tooltip div ======
   var tooltip = document.createElement("div");
   map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
   tooltip.style.visibility="hidden";
   
   
   // Read the data from example.xml
   var request = GXmlHttp.create();
   request.open("GET", url, 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");
	 
	 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"));
	    point[i] = new GLatLng(lat,lng);
	    var img = markers[i].getAttribute("img");
            html[i] = [];
	    html[i][0] = markers[i].getAttribute("html");

            html[i][0] = html[i][0] + '<br>Routeplanner: <a href="javascript:tohere('+i+')">Naar hier</a> - <a href="javascript:fromhere('+i+')">Vanaf hier</a>';
	    html[i][1] = markers[i].getAttribute("html2");
	    html[i][2] = '<img src="/repository/projects/'+ img +'">';
            label[i] = [];
	    label[i][0] = markers[i].getAttribute("label");
	    label[i][1] = markers[i].getAttribute("label2");	    
	    label[i][2] = markers[i].getAttribute("label3");
	    title[i] = markers[i].getAttribute("title");
	    icontype[i] = markers[i].getAttribute("icontype");

            // The info window version with the "to here" form open
            to_htmls[i] = html[i][0] + 
                '<br>Start adres:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
                '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
                '<INPUT value="Toon route" TYPE="SUBMIT">' +
                '<input type="hidden" name="daddr" value="' + point[i].lat() + ',' + point[i].lng() + 
                // "(" + name + ")" + 
                '"/>';
            // The info window version with the "to here" form open
            from_htmls[i] = html[i][0] + 
                '<br>Eind adres:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
                '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
                '<INPUT value="Toon route" TYPE="SUBMIT">' +
                '<input type="hidden" name="saddr" value="' + point[i].lat() + ',' + point[i].lng() +
                // "(" + name + ")" + 
                '"/>';


	    // create the marker
            var tabs = new Array();
            tabs.push(new GInfoWindowTab(label[i][0],html[i][0]));
            tabs.push(new GInfoWindowTab(label[i][1],html[i][1]));
            tabs.push(new GInfoWindowTab(label[i][2],html[i][2]));
	    var marker = createTabbedMarker(point[i],tabs,icontype[i]);
	    map.addOverlay(marker);
            // save the info we need to use later for the side_bar
            htmls[i] = html[i];
            // add a line to the side_bar html
            side_bar_html += '<span><a class="'+icontype[i]+'" href="javascript:myclick(' + i + ')" onmouseover="mymouseover(' + i + ')" onmouseout="mymouseout();">' + title[i] + '</a></span>';
	    // === store the name so that the tooltip function can use it ===
	    gmarkers[i].tooltip = '<div name="toolTip" class="tooltip"><nobr>' + title[i] + '</nobr></div>';      

		   
	 }
	 // put the assembled side_bar_html contents into the side_bar div
	 document.getElementById("side_bar").innerHTML = side_bar_html;
      }
   }
   request.send(null);
}

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
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
//]]>