var icon = [];
var gmarkers = [];
var htmls = [];
var to_htmls = [];
var from_htmls = [];
var divisions = [];
var i=0;
var j=1;
var currentcategory = 'all';

if (GBrowserIsCompatible()) {
      
    // Create small marker, when zoomed out
		icon[0] = new GIcon();
		icon[0].image = "http://rhdev.madebymn.co.uk/assets/images/contact/icon_gmaps_sm.png";
		icon[0].shadow = "http://rhdev.madebymn.co.uk/assets/images/contact/icon_gmaps_sm_sdw.png";
		icon[0].iconSize = new GSize(42, 38);
		icon[0].shadowSize = new GSize(42, 38);
		icon[0].iconAnchor = new GPoint(15, 38);
		icon[0].infoWindowAnchor = new GPoint(5, 1);  
	
	// Create medium marker, when zoomed in a little
		icon[1] = new GIcon();
		icon[1].image = "http://rhdev.madebymn.co.uk/assets/images/contact/icon_gmaps_med.png";
		icon[1].shadow = "http://rhdev.madebymn.co.uk/assets/images/contact/icon_gmaps_med_sdw.png";
		icon[1].iconSize = new GSize(55, 51);
		icon[1].shadowSize = new GSize(55, 51);
		icon[1].iconAnchor = new GPoint(15, 51);
		icon[1].infoWindowAnchor = new GPoint(5, 1); 
	
	// Create large marker, when zoomed in a lot
		icon[2] = new GIcon();
		icon[2].image = "http://rhdev.madebymn.co.uk/assets/images/contact/icon_gmaps_lrg.png";
		icon[2].shadow = "http://rhdev.madebymn.co.uk/assets/images/contact/icon_gmaps_lrg_sdw.png";
		icon[2].iconSize = new GSize(67, 63);
		icon[2].shadowSize = new GSize(67, 63);
		icon[2].iconAnchor = new GPoint(15, 63);
		icon[2].infoWindowAnchor = new GPoint(0, 0); 
  	
    // Create arrays of markers, for different zoom levels
		markerArray = new Array();
		markerArray[0] = new Array();
		markerArray[1] = new Array(); 
		markerArray[2] = new Array();               
    
	// Create map
		var map = new GMap2(document.getElementById("map"));
	
	// Add controls, and set centre point
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(55.021911, -3), 5);
		map.enableDoubleClickZoom();
    
    /*-------------------------------------------------------------------------
    CREATE MARKERS
    -------------------------------------------------------------------------*/
    
    // Function to create the marker
        function createMarker(point, name, html, division, category, icon){
    		
    		// Start marker creation
    		var marker = new GMarker(point, {icon:icon});	
    		marker.category = category;

			// Add event listener for marker click			
			GEvent.addListener(marker, "click", function() {
           		marker.openInfoWindowTabsHtml([new GInfoWindowTab("Directions",html), new GInfoWindowTab("Contacts",division)]);
        	});
    		
    		map.addOverlay(marker);
    		show(currentcategory);
    		
    		// Return the marker
    		return marker;

    	}
    
    // Read a little XML
    	GDownloadUrl("/assets/xml/branches.php", function(doc) {
    		var xmlDoc = GXml.parse(doc);

    		// Get markers node
    		var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    	
    		// Loop through markers
    		
    		for (var i = 0; i < markers.length; i++) {
    			
    			// Get attributes for the marker
    			var name = markers[i].getAttribute("name");
    			var lat = parseFloat(markers[i].getAttribute("lat"));
          		var lng = parseFloat(markers[i].getAttribute("lng"));
          		var point = new GLatLng(lat,lng);
          		
          		// Traverse the XML to get address and division nodes
          		var markersxml = markers[i];
          		var address = $(markersxml).children('address').text();
          		var html = "<b>"+name+"</b><p>"+address+"</p>";
          		var division = $(markersxml).children('division').text();
          		divisions[i] = $(markersxml).children('division').text();
          		
          		// The category, important!
          		var category = markers[i].getAttribute("category");
    			
// The info window version with the "to here" form open
        to_htmls[i] = html + '<br><span class="directions">Directions:</span> To here - <a href="javascript:fromhere('+i+')">From here</a><br />End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                  // "(" + name + ")" + 
           '"/><br /><br />';
        // The info window version with the "to here" form open
        from_htmls[i] = html + '<br><span class="directions">Directions:</span> <a href="javascript:tohere('+i+')">To here</a> - From here' +
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
                  // "(" + name + ")" + 
           '"/><br /><br />';
           
                   // The inactive version of the direction info
        html = html + '<br><span class="directions">Directions:</span> <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a><br /><br /><br />';
    			
    			// Create marker
    			//for(var j=0; j<1;j++){
    				var marker = createMarker(point, name, html, division, category, icon[0]);
    				gmarkers.push(marker);
    				//markerArray[j].push(marker);
    			//}
    			
    		}
    		
				// Setup marker manager
				//var mm = new MarkerManager(map);
				//mm.addMarkers(markerArray[0],0,6);
				//mm.addMarkers(markerArray[1],7,12);
				//mm.addMarkers(markerArray[2],13,17);
				//mm.refresh();
    		
    	});
    
    
    /*-----------------------------------------------------------------------*/
                
}


/*-------------------------------------------------------------------------
Map functionality (showing, hiding categories, and all that good stuff..)
-------------------------------------------------------------------------*/


  function show(category) {
	currentcategory = category;
	// Hide all markers
		map.closeInfoWindow();
		for (var i=0; i<gmarkers.length; i++) {
			gmarkers[i].hide();
		}
	
	// Show the active marker
		for (var i=0; i<gmarkers.length; i++) {
			if (gmarkers[i].category == category) {
				gmarkers[i].show();
			}
		} 
  }

  // 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].category == category) {
			gmarkers[i].hide();
		  }
		}
	
	// Close the info window, in case its open on a marker that we just hid
		map.closeInfoWindow();
	
  }
  
      // functions that open the directions forms
      function tohere(i) {
        //console.log('To here: ' + i);
        gmarkers[i].openInfoWindowTabsHtml([new GInfoWindowTab("Directions",to_htmls[i]), new GInfoWindowTab("Contacts",divisions[i])]);
      }
      function fromhere(i) {
        //console.log('From here' + i);
        gmarkers[i].openInfoWindowTabsHtml([new GInfoWindowTab("Directions",from_htmls[i]), new GInfoWindowTab("Contacts",divisions[i])]);
      }

/*-----------------------------------------------------------------------*/