// JavaScript Document

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

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

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

    var customIcons = [];
    customIcons["Training Centre"] = iconBlue;
    customIcons["Windsurfing Location"] = iconRed;
	customIcons["Kit Supplier"] = iconGreen;
	
	

    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl3D());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(9.795678, -25.312500), 1);
		map.setMapType(G_HYBRID_MAP);
		geocoder = new GClientGeocoder();
		map.enableGoogleBar();

        GDownloadUrl("genxml.php", function(data) {
          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 address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
			var id = markers[i].getAttribute("id");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type, id);
			markerArray.push(marker); 
			//map.addOverlay(marker);
          }
		  var mc = new MarkerClusterer(map, markerArray);
        });
      }
    }

    function createMarker(point, name, address, type, id) {
      var marker = new GMarker(point, customIcons[type]);
      GEvent.addListener(marker, 'click', function(point) {
			if(point){
		geocoder.getLocations(point, function(addresses) {
			address = addresses.Placemark[0];
			var html = "<div class='info'><b>" + name + "</b> </div>" + type + "<br/>" + address.address + " <br /><a href='comments/"+ id +"/'>Read Description...</a><br /><br /><div class='infocom'><img src='http://www.totalwindsurf.co.uk/images/sm_speech_icon.jpg' alt='Speech Icon'> <a href='addcomment.php?marker="+ id +"'>Add Comment</a> &nbsp; | &nbsp; <a href='comments/"+ id +"/'>Read Comments</a></div><br><br> ";
        marker.openInfoWindowHtml(html);
		
	
	 });
		map.setCenter(point); // center the marker on map 
         map.setZoom(map.getZoom()+2); // zoom on click marker 
			}

	});
      return marker;
    }
    //]]>