//<![CDATA[

if (GBrowserIsCompatible()){

var map;
var points ='';
// arrays to hold variants of the info window html with get direction forms open
      var to_htmls = [];
      var from_htmls = [];
      
var baseIcon = new GIcon();
baseIcon.shadow = "http://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);

// this variable will collect the html which will eventualkly be placed in the sidebar
      var sidebar_html = [];
      var gmarkers = [];
      var htmls = [];
      //var i = 0;
      var x = 0;
      
 function onLoad() {
	
		map = new GMap(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		//map.centerAndZoom(new GPoint(lon, lat), zoom);
		map.centerAndZoom(new GPoint(-105.19662, 39.719044), 6); //center

		points=points.substring(0,points.length-2) 
		
		
		points = '[' + points + '];';
	
		points = eval(points);	
		//alert(points);
		
		if(points){
			for(i=0;i<points.length;i++){
				var point = new GPoint(points[i][2],points[i][3]);
				var marker = createMarker(point, i, points[i][0], points[i][1]);
				map.addOverlay(marker);
				document.getElementById("sidebar" + i).innerHTML = sidebar_html[i];				
			}
		//document.getElementById("sidebar").innerHTML = sidebar_html;
		}
	
}

function showZoom(theTable)
{
     if (document.getElementById(theTable).style.display == 'none')
     {
          document.getElementById(theTable).style.display = 'block';
     }
}

function hideZoom(theTable)
{
     if (document.getElementById(theTable).style.display == 'none')
     {
          document.getElementById(theTable).style.display = 'none';
     }
     else
     {
          document.getElementById(theTable).style.display = 'none';
     }
}


// Create a marker whose info window displays the given number.
function createMarker(point, index, name, address) {

  var letter = String.fromCharCode("A".charCodeAt(0) + index);
  var icon = new GIcon(baseIcon);
  icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
  
  var whiteicon = "http://www.google.com/mapfiles/icon" + letter + ".png";
   
  var marker = new GMarker(point, icon);
  var marker = new GMarker(point, icon);

  // Show this marker's index in the info window when it is clicked.
  //var html = "Marker #<b>" + number + "</b>";
  
  //var dest = address;
  
  //var listing = '<p align=left><b>'+name+'</b><br>'+address+'</p>';
  var listing = '<div align=left><table border=0 cellpadding=0 cellspacing=0><tr><td><b>'+name+'</b><br>'+address+'</td></tr>';
  var dirLink = listing;
  
 //ZOOM
 
        dirLink = dirLink + '<tr id=ZoomIn><td><a href="javascript:zoomIN('+index+');" onClick="showZoom(\'ZoomOut\');hideZoom(\'ZoomIn\');return true;">Zoom in to marker</a></td></tr><tr id=ZoomOut style="display: none;"><td><a href="javascript:zoomOUT('+index+');" onClick="showZoom(\'ZoomIn\');hideZoom(\'ZoomOut\');return true;">Zoom out to region</a></td></tr>';
 
address = address.replace( "<br>", " " );

   // The info window version with the "to here" form open
        to_htmls[i] = dirLink + '<div align=left><table border=0 cellpadding=0 cellspacing=0><tr><td>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
           '<form action="http://maps.google.com/maps" method="get" target="_blank">' +
   '<b>Start address:</b><br><input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="daddr" value="'+address+'" /></td></tr></table></div>';
           
        // The info window version with the "from here" form open
        from_htmls[i] = dirLink + '<div align=left><table border=0 cellpadding=0 cellspacing=0><tr><td>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
           '<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
        '<b>End address:</b><br><input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="saddr" value="'+address+'" /></td></tr></table></div>';
            
         // The inactive version of the direction info
        dirLink = dirLink + '<tr><td>Directions:<br><a href="javascript:tohere('+index+')">To here</a> - <a href="javascript:fromhere('+index+')">From here</a></td></tr></table></div>';
        

GEvent.addListener(marker, 'click', function() { 
	marker.openInfoWindowHtml(dirLink);
	
  });
  
  /*
  GEvent.addListener(marker, 'mouseover', function() { 
	marker.openInfoWindowHtml(dirLink);
	
  });
  */

  // save the info we need to use later for the sidebar

        gmarkers[index] = marker;
        htmls[index] = dirLink
        
        
        
        // add a line to the sidebar html
        
        
        sidebar_html[index] = '<a href="javascript:myclick(' + index + ');" onmouseover="javascript:myclick(' + index + ');"  >' + "<img src=" + whiteicon + ">" + '</a>';

//alert(index + ' ' + sidebar_html[index]);
/* //add zoom to side bar
 sidebar_html[index] = '<a href="javascript:myclick(' + index + ');" onmouseover="javascript:myclick(' + index + ');"  >' + "<img src=" + whiteicon + ">" + '</a> ' + '<a href="javascript:zoomIN('+index+');">Zoom in to marker</a> <a href="javascript:zoomOUT('+index+');">Zoom out to region</a>';
*/
	return marker;
}

// This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
        map.zoomTo(6);
        //zoomOUT(i);
        //alert(i + ' ' + htmls[i]);
      }
      
      // functions that open the directions forms
      function tohere(i) {
        // alert("tohere("+i+")"+to_htmls[i]);
        gmarkers[i].openInfoWindowHtml(to_htmls[i]);
      }
      function fromhere(i) {
        // alert("fromhere("+i+")"+from_htmls[i]);
        gmarkers[i].openInfoWindowHtml(from_htmls[i]);
      }
      
      function zoomIN(i) { 
		//Zoom in on the current marker. 
		//alert("markers["+i+"]="+markers[i].location+"@"+markers[i].point);
		//map.centerAndZoom(gmarkers[i].point,1); //google api version 1
		//map.centerAndZoom(gmarkers[i].getPoint(),1); //google api version 2
		map.zoomTo(1); //google api version 2
	  } 

	  function zoomOUT(i) { 
	  //Return to starting point.
	  //map.centerAndZoom(gmarkers[i].point,6); //google api version 1 
	  //map.centerAndZoom(gmarkers[i].getPoint(),6); //google api version 2
	  map.zoomTo(6); //google api version 2
	  } 

} else {
		var nomap = document.getElementById("map");
		var html = 'Your browser currently does not support the Google Maps API. Please Upgrade your Browser.'+"\n\n";
		nomap.innerHTML = html;
	}

	//]]>