//functions.js
	
	// div to hold the map
	var mapContainer = null;
	
	// div to hold messages
	var msgContainer = null;
	
	
	
	/* // coords for Coffee to the People
	var mapLat = "37.77";
	var mapLng = "-122.44";
	var mapZoom = "9"; */
	
	// locations xml file
	var locationsXml = 'locations.php';
	
	
	
	function trim(str){
    	return str.replace(/^(\s+)?(\S*)(\s+)?$/, '$2');
    }
    
    
    function showMessage(msg)
    {
	    if (msg.length == 0)
	     	msgContainer.style.display = 'none';
	    else {
		    msgContainer.innerHTML = msg;
		    msgContainer.style.display = 'block';
	    }
    } 
    
    function init(mapId, msgId)
    {
	        
	    mapContainer = document.getElementById(mapId);
	    msgContainer = document.getElementById(msgId);
	    loadMap();
	    
    }	
    
    
    if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventualkly be placed in the side_bar
      var side_bar_html = "";
    
      // arrays to hold copies of the markers used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      
      // Set up custom icon variables
      var gicons = [];
      
      var catTitles = "";
      
      
      var baseIcon = new GIcon(G_DEFAULT_ICON);
      baseIcon.iconAnchor = new GPoint(9,34);
      baseIcon.iconSize = new GSize(24,24);
      baseIcon.infoWindowAnchor = new GPoint(9,2);


      gicons["coffee"] = new GIcon(baseIcon,"coffee.png");
      gicons["pizza"] = new GIcon(baseIcon,"pizza.png");
      gicons["beer"] = new GIcon(baseIcon,"beer.png");
      
      gicons["chinese"] = new GIcon(baseIcon,"chinese.png");
      gicons["donuts"] = new GIcon(baseIcon,"donuts.png");
      
	
		
	// Create the marker and corresponding information window
	function createInfoMarker(point,locname,html,category,locationaddress,locreview) {
		var marker = new GMarker(point, gicons[category]);
		
		// Store the category and name info as a marker property.
		marker.mycategory = category;
		marker.myname = locname;
		marker.myaddress = locationaddress;	
		marker.myreview = locreview;

		GEvent.addListener(marker, "click",	function() {
				marker.openInfoWindowHtml(html);
				// marker.showMapBlowup();
				// map.infoWindow.close();
				
				
			}

			
			
		);
	

		return marker;
	}
	
	
	// Shows all markers of a particular category, and ensures checkbox is checked
	function show(category) {

						
		for (var i=0; i < gmarkers.length; i++) {
			if (gmarkers[i].mycategory == category) {
				gmarkers[i].show();
			
		}	
	}


	firstLetter = category.substr(0, 1);	
	catTitles = firstLetter.toUpperCase() + category.substr(1);
	
	
	

		
	// Check the checkbox
	document.getElementById(category + "box").checked = true;
	}
	
	
	// Hides all markers of a particular category, and ensures the checkbox is cleared
	function hide(category) {
		for (var i=0; i < gmarkers.length; i++) {
			if (gmarkers[i].mycategory == category) {
				gmarkers[i].hide();
				gmarkers[i].closeInfoWindow();

			}
		}
	
		

		
		
		
	/* if ( document.getElementById("infobox").checked == false && document.getElementById("golfbox").checked == false && document.getElementById("theaterbox").checked == false ) {
		catTitles = "";
	} */
		
			
	// Clear the checkbox
	document.getElementById(category + "box").checked = false;
	
	// Close the info window, in case it's open on a marker that we just hid.
			// map.closeInfoWindow();
		
	}
	
	
	// A checkbox has been clicked
	function boxclick (box, category) {
		if (box.checked) {
			show(category);

			
		} else {
			hide(category);

		}
		
		// Re-build the sidebar
		makeSidebar(category);
	}
	

	
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
        
      }
      
      
      // Re-builds the sidebar to match the markers currently displayed.
      
      function makeSidebar() {
	      
	      
		/* if (document.getElementById("infobox").checked == true) {
			catTitle1 = "Tourist Info&nbsp;&nbsp;&nbsp;&nbsp;"; 			
		} else {
			catTitle1 = "";
		
		}
		
		if (document.getElementById("golfbox").checked == true) {
			catTitle2 = "Golf Courses&nbsp;&nbsp;&nbsp;&nbsp;"; 			
		} else {
			catTitle2 = "";
		
		}

		
		if (document.getElementById("theaterbox").checked == true) {
			catTitle3 = "Theaters&nbsp;&nbsp;&nbsp;&nbsp;"; 			
		} else {
			catTitle3 = "";
		
		} */	      
	      
		
	      var html = "";
	      
	      
	      /* for (var i=0; i < gmarkers.length; i++) {
			      if (!gmarkers[i].isHidden()) {
			     html = '<b>' + gmarkers[i].mycategory + '</b><br>';
		         }
	      } */
					html += '<br>';
	      			//html += '<br><b>' + catTitle1 + catTitle2 + catTitle3 + '</b><br>';
       
	      // Display the Location Names only in sidebar listings (directory).
	      for (var i=0; i < gmarkers.length; i++) {
		      if (!gmarkers[i].isHidden()) {
			      
   				
			    html += '<a href="javascript:myclick(' + i + ')">' + '<b>' + gmarkers[i].myname + '</b>' + '<\/a><br>' + gmarkers[i].myaddress + " - " + gmarkers[i].mycategory + '<br><br>';
			    
			     			     	
		      }
	      }
	      		//html += '<br><br>';
	      
	     document.getElementById("side_bar").innerHTML = html;
      }

	
	
	function loadMap() {
		// var centerPoint = new GPoint(mapLat, mapLng);
		
		var map = new GMap(mapContainer);
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(37.7685, -122.4425), 12);


		
		// PARSE ALL XML DATA (by tagname) OF ALL LOCATIONS FROM THE DATABASE [using the 'locations.php' file] so Google Maps can read it and use it.  	
		var request = GXmlHttp.create();
		request.open("POST", locationsXml, true);
		request.onreadystatechange = function() {
			if (request.readyState == 4) {
				var xmlDoc = request.responseXML;
				var markers = xmlDoc.documentElement.getElementsByTagName("marker");
				for (var i = 0; i < markers.length; i++) {
					var point = new GPoint(parseFloat(markers[i].getAttribute("longitude")),parseFloat(markers[i].getAttribute("latitude")));
					
					var reviewername = markers[i].getAttribute('reviewername');
					var locname = markers[i].getAttribute('locname');
					var loccategory = markers[i].getAttribute('category');
					var locationaddress = markers[i].getAttribute('locationaddress');
					var locreview = markers[i].getAttribute('review');

					// Text inside the bubble Info Window					
					var bubbletext = '<b>Reviewer: </b>' + reviewername + '<br><br><b>' + locname + '</b><br>' + locationaddress + '<br><br>' + '<div style="max-width: 250px;">' + locreview + '</div>';
										
					/* var theaddy = '<div class="location"><strong>'
					+ markers[i].getAttribute('locname')
					+ '</strong><br />';
					
					
					theaddy += markers[i].getAttribute('address') + '<br />';
					theaddy += markers[i].getAttribute('city') + ', '
					+ markers[i].getAttribute('state') + '<br />'
					+ markers[i].getAttribute('zip') + '</div>'; */
					
					var marker = createInfoMarker(point,locname,bubbletext,loccategory,locationaddress,locreview);
					map.addOverlay(marker);
					
        	gmarkers.push(marker);
        	// add a line to the side_bar html
        	// side_bar_html += '<b><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + locname + '</a></b><br />' + address + '<br/><br/>';
			// html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';		
					
							// /* BEGIN Set up sidebar clickable links - STEP 2
        	// save the info we need to use later for the side_bar


        	// add a line to the side_bar html
        	// side_bar_html += '<b><a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + locname + '</a></b><br />' + address + '<br/><br/>';

		// END Set up sidebar clickable links - STEP 2 */

				}
				
				// Show or hide the categories initially.
				hide("coffee");
				hide("pizza");
				hide("beer");
				
				hide("chinese");
				hide("donuts");
				
				
				// Create the initial sidebar
				makeSidebar();
				
		        // document.getElementById('side_bar').innerHTML = side_bar_html;				
				
				
		/* BEGIN Set up sidebar clickable links - STEP 3 *
		        // put the assembled side_bar_html contents into the side_bar div
		        document.getElementById('side_bar').innerHTML = side_bar_html;
		/* END Set up sidebar clickable links - STEP 3 */
			}
		}
		request.send('a');
	}
}
	
	
/* BEGIN SUPPLEMENTAL HTML/XML Code
<div id="side_bar">
	<a href="javascript:myclick(0)">Marker One</a><br>
	<a href="javascript:myclick(1)">Marker Two</a><br>
	<a href-"javascript:myclick(2)">Marker Three</a>
</div>




<markers>
	<marker lat="43.65654" lng="-79.90138" label="Marker One">
	<infowindow>Some stuff to display in the&lt;br&gt;First Info Window</infowindow>
	</marker>
</markers>
END SUPPLEMENTAL HTML/XML CODE */	
	
	
	
	function submitform (frm)
	{
		var fields = {
						locname : 'You must enter a location name',
						address : 'You must enter an address',
						city : 'You must enter a city',
						state : 'You must enter a state',
						zip : 'You must enter a zipcode',
						latitude : 'You must enter a latitude',
						longitude : 'You must enter a longitude'
					};
					
		var errors = [];
		var values = 'ajax=1';
		
		for (field in fields) {
			val = frm[field].value;
			if (trim(val).lenth == 0)
				errors[errors.length] = fields[field];
				
			values += '&' + field + '=' + escape(val);
		}
		
		if (errors.length > 0) {
			var errMsg = '<strong>The following errors have occurred: <strong>';
			+ '<br /><ul>\n';
			
			for (var i = 0; i < errors.length; i++){
				errMsg += '<li>' + errors[i] + '</li>\n';
			}
			errMsg += '</ul>\n';
			
			showMessage(errMsg);
			
			return false;
		}
	
		//Create a loading message.
		mapContainer.innerHTML = "<b>Loading...</b>";
		
		var xmlhttp = GXmlHttp.create();
		xmlhttp.open("POST", frm.action, true);
		xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				showMessage(xmlhttp.responseText);
			}
		}
		xmlhttp.send(values);
		
		
		
		//Then reload the map.
		setTimeout ("loadmap()",1000);
	}