//<![CDATA[

	var map = null;
	var Icon = null;
	var side_bar_html = "";
	var gmarkers = [];
	var htmls = [];
	var i = 0;
	var geocoder = null;
	
    function load() {
		if (GBrowserIsCompatible()) {
	      Icon = new GIcon(G_DEFAULT_ICON);
		  Icon.iconSize = new GSize(19, 15);
		  Icon.shadowSize = new GSize(20, 20);
		  Icon.iconAnchor = new GPoint(12, 5);
		  Icon.image = "map/dot.gif";
		  
		  geocoder = new GClientGeocoder();
          geocoder.setBaseCountryCode('nz');
				
		  createMap();
		}
		else {
	      alert("Sorry, the Google Maps API is not compatible with this browser");
	    }
	}
	
      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point,Icon);
		var bubbleHtml = '<div style="color: #999;"><strong>' + name + '</strong><br>' + html;
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(bubbleHtml);
        });

        // Switch icon on marker mouseover and mouseout
        GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("map/hover.gif");
        });
        GEvent.addListener(marker, "mouseout", function() {
          marker.setImage("map/dot.gif");
        });
        
		gmarkers[i] = marker;
		
		//bubble text
		bubbleHtml += "<br /><span style=\"font-size: 8pt; color: #6C8912;\">Zoom: <a href=\"javascript:myinzoom()\" style=\"color: #000000;\">In</a> - <a href=\"javascript:myoutzoom()\" style=\"color: #000000;\">Out</a></span></div>";
        gmarkers[i].myhtmls = bubbleHtml; //for nearest store locator sorting
		htmls[i] = bubbleHtml; //for the 'myclick' event
        
		//side bar text with click, mouseover and mouseout event handlers
		var themarkertext = '<a href="javascript:myclick(' + i + ')" onmouseover="gmarkers['+i+'].setImage(\'map/hover.gif\')" onmouseout="gmarkers['+i+'].setImage(\'map/dot.gif\')">' + name + '</a><br />';
		
		// add a line to the side_bar html
        side_bar_html += themarkertext;
        
		//for side bar when sorting only
		gmarkers[i].sidebarhtml = themarkertext;
		
		i++;
        return marker;
      }

		function myinzoom() {
	      map.setZoom(13);
	    }

		function myoutzoom() {
	      map.setZoom(6);
	    }
	
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
		map.setZoom(13);
      }
      
	  //refresh map
	  function refreshMap() {
		//gdir.clear();
		map = null;
		Icon = null;
		side_bar_html = "";
		gmarkers = [];
		htmls = [];
		i = 0;
		geocoder = null;
		load();
	  }
	
      // create the map
		  function createMap() {
	      map = new GMap2(document.getElementById("map"));
	      map.addControl(new GSmallMapControl());
		  map.setCenter(new GLatLng(-43.587710, 170.366623), 6); //South Island
		  
		  getData();
	  }

	function foo(myfoo) {
		if (geocoder) {
			geocoder.getLatLng(
			  myfoo,
			  function(point) {
				if (!point) {
				  alert(myfoo + " not found");
				} else {
					tmpgmarkers = gmarkers.slice();
					for (var i = 0; i < tmpgmarkers.length; i++) {
						tmpgmarkers[i].dist = tmpgmarkers[i].getPoint().distanceFrom(point);
					}
					tmpgmarkers.sort(function (a,b) {return (a.dist - b.dist)});
					tmpgmarkers[0].openInfoWindowHtml(tmpgmarkers[0].myhtmls);
					map.setZoom(13);
					
					//loop through sorted array to display side bar info
					document.getElementById("side_bar").innerHTML = "In Order, Nearest First...<br><hr>";
					for (var j = 0; j < tmpgmarkers.length; j++) {
						document.getElementById("side_bar").innerHTML += tmpgmarkers[j].sidebarhtml;
					}
				}
			  }
			);
		  }
	}
	  
	function getData() {
      // Read the data from example.xml
      var request = GXmlHttp.create();
      request.open("GET", "map/locations_south.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);

          // 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 GLatLng(lat,lng);
            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
          }
          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
        }
      }
      request.send(null);
    }

    //]]>