//Map location Coordinates (Lat & Long)
var centerLatitude = 37.926868;
var centerLongitude = -97.117187;

    //Starting Map Zoom Level
var startZoom = 4;

var map;

    // Adding the functions like "Larger Zoom" (in & out), Scale, and other indicators
    // along the left-hand edge of the map.

//Keith... added this function
function check(icon){
  document.getElementById("icon").value=icon;
}
// to right here
    
function init() {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.addControl(new GScaleControl());
	map.addControl(new GOverviewMapControl());
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);

	//Note: this call to retrieve markers is required
	retrieveMarkers();

	GEvent.addListener(map, "click", function(overlay, latlng) {
	//only perform the click if the window is closed and the click was directly on the map.
		if(!overlay) {
	//create an HTML DOM form element
			var inputForm = document.createElement("form");
			inputForm.setAttribute("action","");
			inputForm.onsubmit = function() {storeMarker(); return false;};

	//retrieve the longitude and lattitude of the click point
			var lng = latlng.lng();
			var lat = latlng.lat();

			inputForm.innerHTML = '<fieldset style="width:150px;">'
			+ '<legend>Member Information</legend>'
			+ '<label for="user">User Name:</label>'
			+ '<input type="text" id="user" style="width:100%;"/>'
			+ '<label for="location">Location:</label>'
			+ '<input type="text" id="location" style="width:100%;"/>'
			+ '<label for="location">Select Icon Type:</label>'
//Keith... added new text here... also added "checked" to the default button to make it highlighted
                        + '<input type="radio" name="icon" onclick="check(this.value)" value="" checked>Default<br />'
                        + '<input type="radio" name="icon" onclick="check(this.value)" value="./Icons/icon_camp.png">Campground<br />'
                        + '<input type="radio" name="icon" onclick="check(this.value)" value="./Icons/icon_5er.png">Full-Timing<br />'
                        + '<input type="radio" name="icon" onclick="check(this.value)" value="./Icons/icon_home.png">Home<br />'
                        + '<input type="radio" name="icon" onclick="check(this.value)" value="./Icons/icon_poi.png">Points of Interest<br />'
                        + '</select>'
                        + '<input type="submit" value="Save & Close"/>'
// to right here
            + '<input type="hidden" id="longitude" value="' + lng + '"/>'
			+ '<input type="hidden" id="latitude" value="' + lat + '"/>'
			+ '</fieldset>';

			map.openInfoWindow (latlng,inputForm);
		}
	});

}

window.onload = init;
//added this to try and fix the program on the forum.
window.onunload = GUnload;


     // storage of text information from the Marker sellection area
function storeMarker(){
	var lng = document.getElementById("longitude").value;
	var lat = document.getElementById("latitude").value;

	var getVars =  "?user=" + document.getElementById("user").value
	+ "&location=" + document.getElementById("location").value
    // added code for new icons (see page 61)
	+ "&icon=" + document.getElementById("icon").value

    + "&lng=" + lng
	+ "&lat=" + lat ;

	var request = GXmlHttp.create();

	//open the request to storeMarker.php on your server
	request.open('GET', 'storeMarker.php' + getVars, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {

    //the request in complete
            var xmlDoc = request.responseXML;

	//retrieve the root document element (response)
			var responseNode = xmlDoc.documentElement;

	//retrieve the type attribute of the node
			var type = responseNode.getAttribute("type");

	//retrieve the content of the responseNode
			var content = responseNode.firstChild.nodeValue;

	//check to see if it was an error or success
			if(type!='success') {
				alert(content);
			} else {
	//Create a new marker (icon) and add it's info window.
				var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));
				
	// code to retrive the icon info from XML and pass the info on to createMarker (see page 62)
                var iconImage = responseNode.getAttribute("icon");
				var marker = createMarker(latlng, content, iconImage);

				map.addOverlay(marker);
				map.closeInfoWindow();
			}
		}
	}
	request.send(null);
	return false;
}


function createMarker(latlng, html, iconImage) {

     // Added code to make the new icons work (see bottom of page 61 and top of page 62)
     if(iconImage!=''){
         var icon = new GIcon();
         icon.image = iconImage;
         icon.iconSize = new GSize(35, 30);
         icon.iconAnchor = new GPoint(25, 25);
         icon.infoWindowAnchor = new GPoint(25, 20);
         var marker = new GMarker(latlng,icon);
     }else{
          var marker = new GMarker(latlng);
     }
     GEvent.addListener(marker, 'click', function() {
		var markerHTML = html;
		marker.openInfoWindowHtml(markerHTML);
	 });
	return marker;
}

function retrieveMarkers() {
	var request = GXmlHttp.create();

	//tell the request where to retrieve data from.
	request.open('GET', 'retrieveMarkers.php', true);

	//tell the request what to do when the state changes.
	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 lng = markers[i].getAttribute("lng");
				var lat = markers[i].getAttribute("lat");
    //check for lng and lat so Microsoft Ineternet Explorer does not error
	//on parseFloat of a null value
				if(lng && lat) {
					var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));

					var html = '<div><b>User Name:</b> '
					+ markers[i].getAttribute("user")
					+ '</div><div><b>Location:</b> '
					+ markers[i].getAttribute("location")
					+ '</div>';

    // information from createMarker gets made into the new icon (see page 62)
                    var iconImage = markers[i].getAttribute("icon");
                    
					var marker = createMarker(latlng, html, iconImage);
					map.addOverlay(marker);
				}
			} //for
		} //if
} //function

	request.send(null);
}