// JavaScript Document
window.onload = load; 
var map; var bounds = {};
var markers; var places;
var tooltip; var baseIcon;
var basePlaceIcon;
// sidebar variables
var sidebar_html = "";
var side_markers = [];
var side_tabs = [];
var x_num = 0;
//sidebar place variables
var sidebar_place_html = "";
var side_place_markers = [];
var side_place_tabs = [];
var x_place_num = 0;
//toggle for zoom
var zoomedIn = false;

function load() {
      if (GBrowserIsCompatible()) {
		      // ==== Make the map types semi transparent ===
      G_NORMAL_MAP.getTileLayers()[0].getOpacity = function () {return 0.9;};
      G_SATELLITE_MAP.getTileLayers()[0].getOpacity = function () {return 0.9;};
      G_HYBRID_MAP.getTileLayers()[0].getOpacity = function () {return 0.9;};
      G_HYBRID_MAP.getTileLayers()[1].getOpacity = function () {return 0.9;};
	  
		baseIcon = new GIcon();
		baseIcon.shadow = "../www.google.com/mapfiles/shadow50.png";
		baseIcon.iconSize = new GSize(20, 34);
		baseIcon.shadowSize = new GSize(37, 34);
		baseIcon.iconAnchor = new GPoint(9, 34);
		baseIcon.infoWindowAnchor = new GPoint(9, 2);
		baseIcon.infoShadowAnchor = new GPoint(18, 25);
		
          basePlaceIcon = new GIcon();
          basePlaceIcon.iconSize=new GSize(32,32);
          basePlaceIcon.shadowSize=new GSize(56,32);
          basePlaceIcon.iconAnchor=new GPoint(16,32);
          basePlaceIcon.infoWindowAnchor=new GPoint(16,0);
	  
        map = new GMap2(document.getElementById("map"));
		document.getElementById("map").style.backgroundColor="#CACAAF";
		map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        //map.setCenter(new GLatLng(37.427770, -122.144841), 13);
		map.setCenter(new GLatLng(0,0),0);
		bounds = new GLatLngBounds();
		
		tooltip = document.createElement("div");
        map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
        tooltip.style.visibility="hidden";
		
		GDownloadUrl("nazca.xml", function(data, responseCode) {
          var xml = GXml.parse(data);
          markers = xml.documentElement.getElementsByTagName("marker");
		  places = xml.documentElement.getElementsByTagName("place");  
		  
		  // create markers
          for (var i = 0; i < markers.length; i++) {
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                   parseFloat(markers[i].getAttribute("lng")));				
			var titles = []; var html = []; var infowindows;
			
			var marker_name = markers[i].getAttribute("name");
			var marker_dir = markers[i].getAttribute("dir");
			var marker_zoom = markers[i].getAttribute("zoom");
			// find length of infowindows for each marker for for-loop
			infowindows = markers[i].getElementsByTagName("infowindow").length;
			 for (var j=0; j<infowindows; j++) {
				html.push(GXml.value(markers[i].getElementsByTagName("infowindow")[j]));
				titles.push(markers[i].getElementsByTagName("infowindow")[j].getAttribute("title"));
			 }
			 var tooltip_html = GXml.value(markers[i].getElementsByTagName("tooltip")[0]);
			 
            map.addOverlay(createTabbedMarker(point, marker_name, html, titles,marker_dir,tooltip_html,marker_zoom));		
			bounds.extend(point);
           } // end for loop for markers
		   
 		  // create places
          for (var h = 0; h < places.length; h++) {
            var place_point = new GLatLng(parseFloat(places[h].getAttribute("lat")),
                                   parseFloat(places[h].getAttribute("lng")));							
			var place_titles = [];
			var place_html = [];
			var place_infowindows;			
			var place_name = places[h].getAttribute("name");
			var place_dir = places[h].getAttribute("dir");
			var place_zoom = places[h].getAttribute("zoom");
			// find length of infowindows for each marker for for-loop
			place_infowindows = places[h].getElementsByTagName("infowindow").length;
			 for (var p=0; p<place_infowindows; p++) {
				place_html.push(GXml.value(places[h].getElementsByTagName("infowindow")[p]));
				place_titles.push(places[h].getElementsByTagName("infowindow")[p].getAttribute("title"));
			 } 
			var frontIcon = places[h].getAttribute("icon");
			var shadowIcon = places[h].getAttribute("icon_s");
			var pIcon = new GIcon(basePlaceIcon, frontIcon, null, shadowIcon);
			var tooltip_place_html = GXml.value(places[h].getElementsByTagName("tooltip")[0]);

            map.addOverlay(createTabbedPlace(place_point,place_name,place_html,place_titles,pIcon,place_dir, tooltip_place_html, place_zoom));	
			bounds.extend(place_point);
           } // end for loop for places 
		   
		  map.setMapType(G_SATELLITE_MAP);
		  map.setZoom(map.getBoundsZoomLevel(bounds));
		  var clat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) /2;
          var clng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) /2;
          map.setCenter(new GLatLng(clat,clng));
		  map.zoomOut();
		  
		  document.getElementById("trail").innerHTML = sidebar_html;
		  document.getElementById("spots").innerHTML = sidebar_place_html;
          }); // end GDownloadUrl
		
		  }  else { 
		  alert("Sorry, the Google Maps API is not compatible with this browser");
		  } // end browser compatibility
		} // end load() function
	
	
	
	
      function createTabbedMarker(point,name,htmls,titles,marker_dir,tooltip_html,marker_zoom) {
		var tabs = [];  
		  var letter = String.fromCharCode("A".charCodeAt(0) + x_num);
		  var iconic = new GIcon(baseIcon);
		  iconic.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
		 var marker = new GMarker(point,{ icon:iconic});
          // adjust the width so that the info window is large enough for this many tabs
          if (htmls.length > 2) {
			  for (var i=0; i<htmls.length; i++) {
                htmls[i] = '<div style="width:'+htmls.length*88+'px">' + htmls[i] + '</div>';
			  }
          }
        for (var i=0; i<htmls.length; i++) {
	      tabs.push(new GInfoWindowTab(titles[i],htmls[i]));
	    }
        GEvent.addListener(marker, "click", function() {		  
          marker.openInfoWindowTabsHtml(tabs);
        }); // end event listener
		marker.tooltip = '<div class="tooltip">'+tooltip_html+'</div>';
		GEvent.addListener(marker,"mouseover", function() {
          showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
		tooltip.style.visibility="hidden"
        }); 
		// save the info for sidebar and polyline
        side_markers[x_num] = marker;
        side_tabs[x_num] = tabs;	    
        // create polylines 		
		if (x_num != 0) {
        createPolyline(point);
		} 
	
        sidebar_html += '<div id="marker">' + letter + '. <a href="javascript:myclick(' + x_num + ')" onmouseover="mymouseover('+ x_num +')" onmouseout="mymouseout()" >' + name + '</a><a href="javascript:zoomMarker(' + x_num + ')"><span class="directions">Zoom</span></a></div>';
    
		sidebar_html += '<table id="options_place"><tr>';
		// for directions
        if (marker_dir == "yes") {
        sidebar_html += '<div><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank"><span class="directions">Y aller</span></a></div>';
	    } 
		// for zoom
        if (marker_zoom == "yes") {
		  sidebar_html += '<div><a href="javascript:zoomMarker(' + x_num + ')"><span class="directions">Zoom</span></a></div>';
	    } 
		
		sidebar_html += '</tr></table>';
		
        x_num++;
        return marker;
      }
	  
	 
	 
	 
      function createTabbedPlace(point,name,htmls,titles,place_icon,place_dir, place_tooltip,place_zoom) {
		var tabs = [];  
		 var marker = new GMarker(point,{ icon:place_icon});
          // adjust the width so that the info window is large enough for this many tabs
          if (htmls.length > 2) {
			  for (var i=0; i<htmls.length; i++) {
                htmls[i] = '<div style="width:'+htmls.length*88+'px">' + htmls[i] + '</div>';
			  }
          }  
        for (var i=0; i<htmls.length; i++) {
	      tabs.push(new GInfoWindowTab(titles[i],htmls[i]));
	    }
        GEvent.addListener(marker, "click", function() {		  
          marker.openInfoWindowTabsHtml(tabs);
        }); // end event listener
		
		marker.tooltip = '<div class="tooltip">'+place_tooltip+'</div>';
		GEvent.addListener(marker,"mouseover", function() {
          showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
		tooltip.style.visibility="hidden"
        }); 
		// save the info we need to use later for the sidebar and polyline
        side_place_markers[x_place_num] = marker;
        side_place_tabs[x_place_num] = tabs;	    
        sidebar_place_html += '<div id="spot"><a href="javascript:myplaceclick(' + x_place_num + ')" onmouseover="myplacemouseover('+ x_place_num +')" onmouseout="mymouseout()">' + name + '</a><a href="javascript:zoomPlace(' + x_place_num + ')"><span class="directions"><img src="images/search.png" alt="ZOOM" width="16" height="16" border="0" align="absmiddle"></span></a></div>';
        
		sidebar_place_html += '<table><tr>';
		// for directions
        /*if (place_dir == "yes") {
         sidebar_place_html += '<td><a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank"><span class="directions">Directions</span></a></td>';
	    }*/
		// for zoom
        /*<a href="javascript:zoomMarker('+ x_num +')"><span class="directions"><img src="images/search.png" alt="ZOOM +" width="16" height="16" border="0" align="absmiddle"></span></a>*/
        /*if (place_zoom == "yes") {
        sidebar_place_html += '<a href="javascript:zoomPlace(' + x_place_num + ')"><span class="directions">Zoom</span></a>';
		}*/
		
		sidebar_place_html += '</tr></table>';
		
        x_place_num++;
        return marker;
      }	  
	  
	  

	  function createPolyline(pres_point) { 		
		var colour = "#FF0000";
		var width = 2;
		var prev_x_num = x_num - 1;
		var prev_point = side_markers[prev_x_num].getPoint();		
		var geopts = [];
		geopts.push(prev_point);
		geopts.push(pres_point);	
		map.addOverlay(new GPolyline(geopts,colour,width));
	  }  
	  
     function createBlowUp(i) {
		 side_markers[i].showMapBlowup(1, G_SATELLITE_MAP);	 
	 }	 
	 function createPlaceBlowUp(i) {
		 side_place_markers[i].showMapBlowup(1, G_SATELLITE_MAP);	 
	 }
	 
	 // sidebar navigation
      function myclick(i) {
        side_markers[i].openInfoWindowTabsHtml(side_tabs[i]);
      }	
	  function myplaceclick(i) {
        side_place_markers[i].openInfoWindowTabsHtml(side_place_tabs[i]);
      }		 
	  
	  // for tooltips      
      function mymouseover(i) {
        showTooltip(side_markers[i])
      }
	  function myplacemouseover(i) {
        showTooltip(side_place_markers[i])
      }     
      function mymouseout() {
	    tooltip.style.visibility="hidden";
      }
	  
	  // for zooms  
	  function zoomBackOut() {
	    map.returnToSavedPosition();
		map.setMapType(G_SATELLITE_MAP);
		document.getElementById("forZoom").innerHTML = "";
	    zoomedIn = false;		  
	  }
	  function zoomMarker(i) {
		  if (!zoomedIn) {
			map.savePosition();      
			map.setMapType(G_SATELLITE_MAP);
			//if (){
			//} else if() {
			//} else
		    map.setZoom(17);
		    //}
			map.panTo(side_markers[i].getPoint());
			document.getElementById("forZoom").innerHTML = '<a href="javascript:zoomBackOut()">Retour &agrave; la carte</a>';
		    zoomedIn = true;
		  } else { map.panTo(side_markers[i].getPoint()); }
	  }
	  
	  function zoomPlace(i) {
		  if (!zoomedIn) {
			map.savePosition();    
			map.setMapType(G_SATELLITE_MAP);

			zoomLevel = getZoomLevel(i);
		    map.setZoom(zoomLevel);

			map.panTo(side_place_markers[i].getPoint());
			document.getElementById("forZoom").innerHTML = '<a href="javascript:zoomBackOut()">Retour &agrave; la carte</a>';
		    zoomedIn = true;
		  } else { 
			zoomLevel = getZoomLevel(i);
		    map.setZoom(zoomLevel);		  
		    map.panTo(side_place_markers[i].getPoint()); 
		  }  
	  }
	  
       function getZoomLevel(numP) {
		   var zoom_level;
		   switch (numP){
             case 2: zoom_level = 13;
             break;
             default : zoom_level = 18;
          }		   
		   return zoom_level;
	   }
	  



      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";
      }  	   
	  
window.onunload = GUnload;