// version 1.0  as on web site http://www.ramadasantacruzca.com
// ©2005 Bill Aspromonte

var map1;
// array to hold copies of the markers 
var gmarkers = [];

function CreateMap(mapID, latLng, zoom, satellite, control, miniMap, file, sidebarID ) { 
	// create the map
   if (GBrowserIsCompatible()) {
		var map = new GMap2(document.getElementById(mapID));
		switch(control )
			{
			case "small":
				map.addControl(new GSmallZoomControl());
			  break    
			case "medium":
				map.addControl(new GSmallMapControl());
			  break
			case "large":
				map.addControl(new GLargeMapControl());
			  break
			}
		if (satellite) { map.addControl(new GMapTypeControl()); }
		if (miniMap) { map.addControl(new GOverviewMapControl()); }
		map.addControl(new GScaleControl( ));  
		map.setCenter(latLng, zoom);
		CreateMarkers(map, file, sidebarID)
		return map;
    }
    else {
      alert("Sorry, Google Maps are not compatible with your browser");
    }
}



function CreateMarkers(map, file, sidebarID) { 
	var sidebar_html = "";
	map.sidebarID = sidebarID;
	// Create a base icon for all of our markers that specifies the shadow, icon
	// dimensions, etc.
	var baseIcon = new GIcon();
	baseIcon.shadow = "markers/mm_20_shadow.png";
	baseIcon.iconSize = new GSize(12, 20);
	baseIcon.shadowSize = new GSize(22, 20);
	baseIcon.iconAnchor = new GPoint(6, 20);
	baseIcon.infoWindowAnchor = new GPoint(5, 1);
	baseIcon.infoShadowAnchor = new GPoint(14, 24);
	baseIcon.imageMap = [4,0,0,4,0,7,3,11,4,19,7,19,8,11,11,7,11,4,7,0]; 
	baseIcon.transparent = "markers/mm_20_transparent.png"; 

      // Read the data from todo.xml
	var request = GXmlHttp.create();
	request.open("GET", file, true);
	request.onreadystatechange = function() {
    if (request.readyState == 4) {
      var xmlDoc = request.responseXML;

      // 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"));
        var point = new GPoint(lng,lat);
        var name = markers[i].getAttribute("name");
        var link = markers[i].getAttribute("LINK");
        var review = markers[i].getAttribute("review");
        var color = markers[i].getAttribute("COLOR");
        var type = markers[i].getAttribute("TYPE");

		var icon = new GIcon(baseIcon);
		icon.image = "markers/mm_20_" + color + ".png";
//alert(markers[i].getAttribute("LINK"));
        // create the marker
    	var marker = new GMarker(point, {icon:icon, title:name});
        gmarkers.push(marker);
        // Build the extra html that handles the directions links and forms
        //     The inactive version of the direction info
		if (link) {var html = '<div style="font-size:9pt; font-weight: bold;">' + '<a href="' + link + '" target="blank">' + name + '</a>' + '</div>';} 
		else {var html = '<div style="font-size:9pt; font-weight: bold;">' + name + '</div>';}
		if (review) { html += '<div style="font-size:8pt; ">' + '<a href="' + review + '" target="blank">review</a>' + '</div>'; } 
        marker.my_html = html + '<div style="width: 200px; font-size:8pt; padding-top: 15px;">' + 
        		'Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a></div>';
        //     The version with the "to here" form open
        marker.to_html = html + '<div style="font-size:8pt; padding-top: 9px;">' + 
              'Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
              '<form style="margin:5px 0px 0px 0px;" action="http://maps.google.com" method="get" target="_blank">' +
			  'Start address<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="' + 
              point.y + ',' + point.x + "(" + name + ")" + '"/></div>';
        //     The version with the "to here" form open
        marker.from_html = html + '<div style="font-size:8pt; padding-top: 9px;">' +
        	  'Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
              '<form style="margin:5px 0px 0px 0px;" action="http://maps.google.com/maps" method="get"" target="_blank">' +
			  'End address<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="' + 
              point.y + ',' + point.x + "(" + name + ")" + '"/></div>';
        marker.my_name = name;
        marker.my_color = color;
        marker.my_type = type;
//		map.addOverlay(marker);
   
///////		marker.display(false);

		if ( document.getElementById('checkbox' + color + type).checked ) {
///////			marker.display(true);
			map.addOverlay(marker);
		    // assemble the sidebar html
		    if (sidebarID) {
				sidebar_html += '<a href="javascript:myclick(' + i + ')">' + '<img src="' + "markers/mm_20_" + color + ".png" + '" width="12" height="20" border="0" alt="" >' +  name+ '</a><br/>';
		    }
		}
      }
	// put the assembled sidebar_html contents into the sidebar div
	if (sidebarID) {document.getElementById(sidebarID).innerHTML = sidebar_html;}
    }
  }

  request.send(null);

  GEvent.addListener(map, "click", function(overlay, point) {
    if (overlay) {
      if (overlay.my_html) { overlay.openInfoWindowHtml(overlay.my_html); }
    }
  });  
}


// This function picks up the click and opens the corresponding info window
function myclick(i) { gmarkers[i].openInfoWindowHtml(gmarkers[i].my_html); }
// functions that open the directions forms
function tohere(i) { gmarkers[i].openInfoWindowHtml(gmarkers[i].to_html ); }
function fromhere(i) { gmarkers[i].openInfoWindowHtml(gmarkers[i].from_html ); }



function setCategory( map, color, onOff)
{
	var cb;
	var m;
    for (var i = 1; cb = document.getElementById("checkbox" + color + i); i *= 2) {
		if(cb.checked != onOff) {
			cb.checked=onOff;
			m |= i;
		}
	}
	toggleMarkers(map, color , m, onOff);	
}

function setSubCategory( map, color)
{
	var cb;
	var m;
	toggleMarkers(map, color , 0xffff, false);	
    for (var i = 1; cb = document.getElementById("checkbox" + color + i); i *= 2) {
		if(cb.checked) { m |= i; }
	}
	toggleMarkers(map, color , m, true);	
}

function toggleMarkers(map, color, type, onOff) { 
	// this variable will collect the html which will eventually be placed in the sidebar
	var sidebar_html = "";
	var marker;

	map.closeInfoWindow(); 
	for (var i = 0; i < gmarkers.length; i++) {
	   marker = gmarkers[i];
	   if ( marker.my_color == color && (marker.my_type & type)){
//			marker.display(onOff);
			if (onOff) {map.addOverlay(marker);} else {map.removeOverlay(marker);}
		}
	}  
				
	if (!onOff) { if(document.getElementById('checkbox' + color)) {document.getElementById('checkbox' + color).checked = false; }}
	
	if (map.sidebarID) {
		for (var i = 0; i < gmarkers.length; i++) {
		  marker = gmarkers[i];
		  if ( 	document.getElementById('checkbox' + marker.my_color + marker.my_type).checked ) {
		    	// assemble the sidebar html
				sidebar_html += '<a href="javascript:myclick(' + i + ')">' + '<img src="' + "markers/mm_20_" + marker.my_color + ".png" + '" width="12" height="20" border="0" alt="" >' +  marker.my_name+ '</a><br/>';
		   }
		 }
		// put the assembled sidebar_html contents into the sidebar div
		if (map.sidebarID) {document.getElementById(map.sidebarID).innerHTML = sidebar_html;}
	}
}