//<![CDATA[

	var i = 0;
	var a = 0;
	var gmarkersB = [];
	var htmls = [];
    var markers;    
    var map;
    var point;
	var tooltip;
	var tabcontent=[];
	var tabx = [];
	
	// this variable will collect the html which will eventually be placed in the sidebar
	var sidebar_html = "";	
	
	// Create the marker icon
	var icon2 = new GIcon();
	icon2.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
	icon2.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
	icon2.iconSize = new GSize(12, 20);
	icon2.shadowSize = new GSize(22, 20);
	icon2.iconAnchor = new GPoint(6, 20);
	icon2.infoWindowAnchor = new GPoint(5, 1);
    
	// This function picks up the click in the sidebar and opens the corresponding info window
	 
	
	function model_listclick(i) {
		//gmarkersB[i].openInfoWindowTabsHtml(htmls[i]);
		GEvent.trigger(gmarkersB[i], "click");
	}
	


	// A function to hide the loading message
	function hideLoad()
	{
	   var loaddiv = document.getElementById("loaddiv");
	   if (loaddiv == null)
	   {
		  alert("Sorry can't find the loaddiv");
		  return;
	   }
	   //div found
	   loaddiv.style.visibility="hidden";
	}
	
	// A function to show the loading message
	function showLoad()
	{
	   var loaddiv = document.getElementById("loaddiv");
	   if (loaddiv == null)
	   {
		  alert("Sorry can't find your loaddiv");
		  return;
	   }
	   //div found
	   loaddiv.style.visibility="visible";
	}


	// ====== This function displays the tooltip ======
	// it can be called from an icon mousover or a sidebar mouseover
	function showTooltip(marker) {
		tooltip.innerHTML = marker.tooltip;
		var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.getBounds().getSouthWest(),map.getZoom());
		var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
		var anchor=marker.getIcon().iconAnchor;
		var width=marker.getIcon().iconSize.width;
		var pos = new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(offset.x - point.x - anchor.x + width,- offset.y + point.y +anchor.y)); 
		pos.apply(tooltip);
		tooltip.style.visibility="visible";
	}


	function getXML()
	{
		// Download the data in data.xml and load it on the map.
	//GDownloadUrl("http://miguelagullo.net/Madrid3D/php/fetchxml.php", function(data, responseCode) {
	GDownloadUrl("data/modeltabs.xml", function(data, responseCode) {
	  Model_list_xml_data = GXml.parse(data);
	  markers = Model_list_xml_data.documentElement.getElementsByTagName("marker");
	  
	  if (document.getElementById('loaddiv')) {
			  document.getElementById('loaddiv').innerHTML= "<p class='en'>Loaded " +  markers.length + " models</p><p  class='es'>"+  markers.length +" modelos cargados" ;
	  }
	  window.setTimeout("drawmarkers()",100);
	});
	}

	function drawmarkers(){
		  max_markers = markers.length;
		  //for (var i = 0; i < markers.length; i++) {
		  if ( a <  markers.length ) {
			var max=Math.min(a+10, markers.length);
			while (a < max) {		  
			  // obtain the attribues of each marker
			  var lat = parseFloat(markers[a].getAttribute("lat"));
			  var lng = parseFloat(markers[a].getAttribute("lon"));
			  var point = new GLatLng(lat,lng);
			  var label = markers[a].getAttribute("label");
			  
			  // obtain the attribues of the marker tabs
			  tabcontent=[];
			  var tabs = markers[a].getElementsByTagName("tab");
				for (var i = 0; i < tabs.length; i++) {
					tabcontent[i] = tabs[i].getAttribute("html");
				}
			  // create the marker
			  var marker = createMarker(point,icon2,tabcontent,label);
			  map.addOverlay(gmarkersB[a]);
			  a++;                  
			}
		  if (document.getElementById('loaddiv')) {
				  document.getElementById('loaddiv').innerHTML= "<p class='en'>Placing <b>" + max + "</b> models of <b>" + markers.length + "</b> on the map</p><p  class='es'>Situando <b>"+ max + "</b> modelos de <b>" + markers.length + "</b> en el mapa</p>";
		  }
		   window.setTimeout("drawmarkers()",100);   
		  }
		  else
		  {
		  // put the assembled sidebar_html contents into the sidebar div
		  document.getElementById("model_list").innerHTML = sidebar_html;
		  hideLoad()  
		  }
	}

			
	// Creates a marker at the given point with the given number label
	function createMarker(point,icon,tabcontent,label) {
	  var markerB = new GMarker(point,icon2);
	  
	  markerB.tooltip = '<div class="tooltip">'+label+'</div>';
	  
	  GEvent.addListener(markerB, "click", function() {
		  
	  
          // adjust the width so that the info window is large enough for this many tabs
          if (tabcontent.length > 2) {
            tabcontent[0] = '<div style="width:'+tabcontent.length*88+'px">' + tabcontent[0] + '</div>';
          }
          
          var tabx = [];
         
          for (var o=0; o<tabcontent.length; o++) {
            tabx.push(new GInfoWindowTab(o+1,tabcontent[o]));
             
          }
         
          markerB.openInfoWindowTabsHtml(tabx);
	  });

	 //  ======  The new marker "mouseover" and "mouseout" listeners  ======
	 
	GEvent.addListener(markerB, "mouseover", function() {
	  showTooltip(markerB);	  
	});        
	GEvent.addListener(markerB, "mouseout", function() {
	tooltip.style.visibility="hidden"
	}); 


	  // save the info we need to use later for the sidebar
	  gmarkersB[a] = markerB;
	  //htmls[a] = tabx;
	  
	  // add a line to the sidebar html
	  sidebar_html += '<p><a href="javascript:model_listclick(' + a + ')">' + label + '</a></p>';
	  

			   
	}
			
			
    function load() {
      if (GBrowserIsCompatible()) 
      
      {
			//Add map
			showLoad()
			map = new GMap2(document.getElementById("map"));
			map.addControl(new GSmallMapControl());
			map.addControl(new GScaleControl());
			map.addControl(new GMapTypeControl());
			map.setCenter(new GLatLng( 40.426042128264925, -3.658447265625), 11);
			map.hideControls();

			//'mouseover' listener shows controls
			
			GEvent.addListener(map, "mouseover", function(){
			map.showControls();
			});
			
			//'mouseout' listener hides controls
			
			GEvent.addListener(map, "mouseout", function(){
			map.hideControls(); 
			});
		
			// ====== Restricting the range of Zoom Levels =====
			//By Mike Williams http://www.econym.demon.co.uk/googlemaps/range.htm  
			
			// Get the list of map types
			var mt = map.getMapTypes();
			// Overwrite the getMinimumResolution() and getMaximumResolution() methods
			for (var i=0; i<mt.length; i++) {
 			mt[i].getMinimumResolution = function() {return 8;}
 			mt[i].getMaximumResolution = function() {return 18;}
			}      

			// ====== Restricting the range of Pan movement =====
			//By Mike Williams http://www.econym.demon.co.uk/googlemaps/range.htm 
			 		
			// Add a move listener to restrict the bounds range
			GEvent.addListener(map, "move", function() {
				checkBounds();
			});

			// The allowed region which the whole map must be within
			var allowedBounds = new GLatLngBounds(new GLatLng(39.8, -4.5), new GLatLng(40.7,-3 ));
			  
			// If the map position is out of range, move it back
			function checkBounds() {
				// Perform the check and return if OK
				if (allowedBounds.contains(map.getCenter())) {
				  return;
				}
				// It`s not OK, so find the nearest allowed point and move there
				var C = map.getCenter();
				var X = C.lng();
				var Y = C.lat();
		
				var AmaxX = allowedBounds.getNorthEast().lng();
				var AmaxY = allowedBounds.getNorthEast().lat();
				var AminX = allowedBounds.getSouthWest().lng();
				var AminY = allowedBounds.getSouthWest().lat();
		
				if (X < AminX) {X = AminX;}
				if (X > AmaxX) {X = AmaxX;}
				if (Y < AminY) {Y = AminY;}
				if (Y > AmaxY) {Y = AmaxY;}
				//alert ("Restricting "+Y+" "+X);
				map.setCenter(new GLatLng(Y,X));
			}
			
			  // ====== set up marker mouseover tooltip div ======
			  tooltip = document.createElement("div");
			  document.getElementById("map").appendChild(tooltip);
			  tooltip.style.visibility="hidden";
			
		
		 getXML()

		}
	
		
    }

    //]]>