var map = null;
 var geocoder = null;
 
    var iconMale = new GIcon(); 
    iconMale.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconMale.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconMale.iconSize = new GSize(12, 20);
    iconMale.shadowSize = new GSize(22, 20);
    iconMale.iconAnchor = new GPoint(6, 20);
    iconMale.infoWindowAnchor = new GPoint(5, 1);

    var iconFemale = new GIcon(); 
    iconFemale.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconFemale.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconFemale.iconSize = new GSize(12, 20);
    iconFemale.shadowSize = new GSize(22, 20);
    iconFemale.iconAnchor = new GPoint(6, 20);
    iconFemale.infoWindowAnchor = new GPoint(5, 1);

    var iconNoIdea = new GIcon(); 
    iconNoIdea.image = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
    iconNoIdea.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconNoIdea.iconSize = new GSize(12, 20);
    iconNoIdea.shadowSize = new GSize(22, 20);
    iconNoIdea.iconAnchor = new GPoint(6, 20);
    iconNoIdea.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["m"] = iconMale;
    customIcons["f"] = iconFemale;
    customIcons["u"] = iconNoIdea;

function createMarker(point, name, message, gender) {
  var marker = new GMarker(point, customIcons[gender]);
  var html = "<b>" + name + "</b> <br /><br/>" + message;
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}

   function init() {
     if (GBrowserIsCompatible()) {
     

     map = new GMap2(document.getElementById("map")); 
     map.addControl(new GLargeMapControl()); 
     map.addControl(new GMapTypeControl()); 
     map.setCenter(new GLatLng(22.917922, -16.875), 2); 
     map.enableScrollWheelZoom();

     geocoder = new GClientGeocoder(); 

       GDownloadUrl("getMarker.php", function(data, responseCode) { 
       if(responseCode == 200) {
       var xml = GXml.parse(data); 
       var markers = xml.documentElement.getElementsByTagName("marker"); 
       for (var i=0; i<markers.length; i++) {
	var name = markers[i].getAttribute("name");
	var message = markers[i].getAttribute("message");
	var gender = markers[i].getAttribute("gender");
	var point = new GLatLng(parseFloat(markers[i].getAttribute("lat") + (Math.random() -.5) / 10), parseFloat(markers[i].getAttribute("lng") + (Math.random() -.5) / 10));
	var marker = createMarker(point, name, message, gender);
	map.addOverlay(marker);  
	}
 	} else if(responseCode == -1) {
      alert("Data request timed out. Please try later.");
        } else { 
	    alert("Request resulted in error. Check XML file is retrievable.");
      }
      });
      }}

    function resetOverlay() {
    	map.clearOverlays();
    }
   
    function saveData() {
	var lng = document.getElementById("longitude").value;
	var lat = document.getElementById("latitude").value;
	var person = document.getElementById("name").value;
	var message = document.getElementById("message").value;
	var blog = document.getElementById("blog").value;
	var address = document.getElementById("address").value;
	var email = document.getElementById("email").value;
	var gender = document.getElementById("male").checked ? "m" : document.getElementById("female").checked ? "f" : "u"; 
	
	var getVars = "?person=" + person + "&blog=" + blog + "&gender=" + gender + "&lng=" + lng + "&lat=" + lat + "&m=" + message + "&e=" + email + "&a=" + address;				
	var request=GXmlHttp.create();
	
	request.open('GET', 'saveMarker.php' + getVars, true);
	request.onreadystatechange = function() {
		if(request.readyState == 4) {			
			var xmlDoc = request.responseXML;
			var responseNode = xmlDoc.documentElement;
			var type = responseNode.getAttribute("type");
			var content = responseNode.firstChild.nodeValue;
			if(type!='success') {
				alert(content);
			} else {
			var marker = new GMarker(new GLatLng(lat, lng));
			map.addOverlay(marker);
			marker.openInfoWindowHtml("<p><strong>Thanks " + person + "</strong> - we have added you to the map.</p><p>To add another placemark, use the search box to find that location. </p><p>If you are done, please return to <strong><a href='http://www.labnol.org'>Digital Inspiration</a></strong>.</p>");
			GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml("<p><strong>Latitude: " + lat + "<br ><br /> Longitude: " + lng + "</strong></p>");  });             
}
		}
	}
	request.send(null);
	return false; 
	} 
    
    function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert("We're sorry but '" + address + "' cannot be found on Google Maps. Please try again.");
            } else {
             resetOverlay();
             var marker = new GMarker(point, {draggable: true, title: address});
             map.addOverlay(marker);
              

              var inputForm = document.createElement("form");
              inputForm.setAttribute("action", "");
              inputForm.onsubmit = function() {marker.disableDragging(); saveData(); return false;} ;
              inputForm.onreset = function() {map.removeOverlay(marker); document.location.address.value="";document.location.address.focus();return false;} ;
              			
              	var lng=point.lng();
             	var lat=point.lat();
              			
              	inputForm.innerHTML = '<fieldset style="width: 300px;"><label for="name">Name</label> <input type="text" style="width: 180px;" id="name"/><br/><label for="email">Email</label> <input type="text" style="width: 180px;" id="email"/><br/><label for="blog">Blog URL</label> <input type="text" style="width: 180px;" id="blog"/><br/><label for="message">Who are you?</label> <textarea rows="3" style="width: 180px;" id="message"></textarea><br /><label for="gender">Gender</label> <input type="radio" id="male" value="m" name="gender"/><span id="boxes">Male</span> <input type="radio" id="female" value="f" name="gender"/><span id="boxes">Female</span><br /><br /><strong>Important</strong> - Please drag the red placemark over your exact physical location before saving. We value your privacy - all fields are optional.<br /><br /><label>&nbsp;&nbsp;</label><input type="submit" value="Save Location"/><input type="reset" value="Reset"/>'		
              	+ '<input type="hidden" id="address" value="' + address + '"/>'
              	+ '<input type="hidden" id="longitude" value="' + lng + '"/>'
              	+ '<input type="hidden" id="latitude" value="' + lat + '"/></fieldset>';
             marker.openInfoWindow(inputForm);
             map.setCenter(point, 12);
			
             GEvent.addListener(marker, "dragstart", function() {map.closeInfoWindow();  });             
             GEvent.addListener(marker, "dragend", function() {var point =marker.getPoint(); 
	     
	     map.panTo(point); 
	     var inputForm = document.createElement("form"); 
	     inputForm.setAttribute("action", ""); 
	     inputForm.onsubmit = function() {marker.disableDragging(); saveData(); return false;} ; 
	     inputForm.onreset = function() {map.removeOverlay(marker); return false;} ; 
	     
	     var lng=point.lng(); var lat=point.lat();
             inputForm.innerHTML = '<fieldset style="width: 300px;"><label for="name">Name</label> <input type="text" style="width: 180px;" id="name"/><br/><label for="email">Email</label> <input type="text" style="width: 180px;" id="email"/><br/><label for="blog">Blog URL</label> <input type="text" style="width: 180px;" id="blog"/><br/><label for="message">Who are you?</label> <textarea rows="3" style="width: 180px;" id="message"></textarea><br /><label for="gender">Gender</label> <input type="radio" id="male" value="m" name="gender"/><span id="boxes">Male</span> <input type="radio" id="female" value="f" name="gender"/><span id="boxes">Female</span><br /><br /><strong>Important</strong> - Please drag the red placemark over your exact physical location before saving!.<br /><br /><label>&nbsp;&nbsp;</label><input type="submit" value="Save Location"/><input type="reset" value="Reset"/>' + '<input type="hidden" id="address" value="' + address + '"/>' + '<input type="hidden" id="longitude" value="' + lng + '"/>' + '<input type="hidden" id="latitude" value="' + lat + '"/></fieldset>';
	     
	     marker.openInfoWindow(inputForm); 
	     });		
        }
      });
    }
  }

window.onload = init; 
window.onunload = GUnload;