var geocoder = null;
    var map = null;

	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_purple.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 customIcons = [];
    customIcons["0"] = iconBlue;
    customIcons["1"] = iconRed;
    
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());     
        geocoder = new GClientGeocoder();
        map.setCenter(new GLatLng(52.022346, 1.295780), 10);
    
		mgrOptions = { borderPadding: 50, maxZoom: 15, trackMarkers: true };
		mgr = new MarkerManager(map, mgrOptions);

        var batch = []; 
        
/*
        GDownloadUrl("xml/sites_feed.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 address = null;
            var type = markers[i].getAttribute("type");
            var siteID = markers[i].getAttribute("siteID");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            batch.push(createMarker(point, name, address, type, siteID));
          }
          mgr.addMarkers(batch, 9); 
          mgr.refresh(); 
        });*/
        /*
        new Ajax.Request('/some_url',
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
    },
    onFailure: function(){ alert('Something went wrong...') }
  });
  */
        new Ajax.Request('/xml/sites_feed.php',
		{
		    method:'get',
		    onSuccess: function(transport){
		      var data = transport.responseText;
		      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 address = null;
	            var type = markers[i].getAttribute("type");
	            var siteID = markers[i].getAttribute("siteID");
	            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
	                                    parseFloat(markers[i].getAttribute("lng")));
	            batch.push(createMarker(point, name, address, type, siteID));
	          }
	          mgr.addMarkers(batch, 9); 
	          mgr.refresh(); 
		    },
		    onFailure: function(){ alert('Something went wrong...') }
		});
      }
    }

    function createMarker(point, name, address, type, siteID) {
      var marker = new GMarker(point, customIcons[type]);
      var html = "<b>" + name + "</b> <br/><br /><a href=\"javascript:loadInfo("+siteID+");\">More information</a>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    
    
    
    function loadInfo(siteID) {
		new Ajax.Updater('site_info_content', '/include_pages/site_info.php?siteID='+siteID, {
			onLoading:function(request){
				//Element.show('info_loader')
			}, 
			onComplete:function(request){
				//Element.hide('info_loader'); 
				if($('site_info').style.display == 'none') {
					Effect.toggle('site_info', 'slide', { duration: 0.5 });
				}
			}
		});
    	//Effect.SlideDown('site_info');
    	//$('black_bg').style.display = '';
    	//$('info_close_link').appear({ duration: 0.5 });
    	//Effect.toggle('site_info', 'blind', { duration: 0.5 });
    	//$('site_info').appear({ duration: 0.5 });
	}
	
	
    function centreMap(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 10);
            }
          }
        );
      }
    }
    
    
    function hide_info() {
    	$('black_bg').style.display = 'none';
    	$('site_info').fade({ duration: 0.5 });
    	$('info_close_link').fade({ duration: 0.5 });
    }
    
    /* Set some event listeners */
    Event.observe(window, 'load', function() {
	    Event.observe('info_bar', 'click', function(event) {
	    	Effect.toggle('site_info', 'slide', { duration: 0.5 });
	    });
	    Event.observe('close_button', 'click', function(event) {
	    	Effect.toggle('site_info', 'slide', { duration: 0.5 });
	    });
    });
    
	Ajax.Responders.register({
		onCreate: function(){
			Effect.SlideDown('info_loader', { duration: 0.2,  queue: { position: 'front', scope: 'loadxscope' } });
	    	//Effect.toggle('info_loader', 'slide', { duration: 0.5 });
		}, 
		onComplete: function(){
			Effect.SlideUp('info_loader', { duration: 0.2,  queue: { position: 'end', scope: 'loadxscope' } });
	    	//Effect.toggle('info_loader', 'slide', { duration: 0.5 });
		}
	});