var locations = new Array();	
    var hotellinks_html = "";
    var gmarkers = [];
    var htmls = [];
    var to_htmls = [];
    var from_htmls = [];
    var i = 0;
    var oddEven = 0;
    var map;
    var baseIcon = new GIcon();

    baseIcon.iconSize=new GSize(32,32);
    baseIcon.shadowSize=new GSize(56,32);
    baseIcon.iconAnchor=new GPoint(16,32);
    baseIcon.infoWindowAnchor=new GPoint(16,0);
      
    var house = new GIcon(baseIcon, "images/barbsmllogo.gif", null, "images/icon20s.png");
    var bed   = new GIcon(baseIcon, "images/icon20.png", null, "images/icon20s.png");
    
	function onLoad(intVal) 
	{
		map = new GMap(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.centerAndZoom(locations[1][2], intVal);
		renderList();
		
		// put the assembled hotellinks_html contents into the hotellinks div
		document.getElementById("hotellinks").innerHTML = hotellinks_html;
	}
	
	function renderList() 
	{
		for (i = 1; i < locations.length; i++)
		{
			name = locations[i][0];
			description = locations[i][1];
			point = locations[i][2];
			longitude = locations[i][3]
			latitude = locations[i][4]
			icon = locations[i][5];
			map.addOverlay(createMarker(point, longitude, latitude, name, description, icon, i))
		}
	}
	
	// Creates a marker at the given point with the given name and description
	function createMarker(point, longitude, latitude, name, description, icon, counter) 
	{
	  var marker = new GMarker(point, icon);
      	  GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml(description + '<br>Directions: <a href="javascript:tohere('+counter+')">To here</a> - <a href="javascript:fromhere('+counter+')">From here</a>'); });
	 
	  // save the info we need to use later for the hotellinks
	  gmarkers[counter] = marker;
	  htmls[counter] = description;
	  // add a line to the hotellinks html
	  if (counter % 2 == 0){oddEven=0;}else{oddEven=1;}
	  hotellinks_html += '<div class="item' + oddEven + '"><a href="#" onclick="javascript:myclick(' + counter + ')">' + name + '</a></div>';
	  
	  // The info window version with the "to here" form open
        to_htmls[counter] = '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + counter + ')">From here</a>' +
       '<br>Start address:<form action="http://maps.google.co.uk/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="' + latitude + "," + longitude + '"/>';
       
        from_htmls[counter] = '<br>Directions: <a href="javascript:tohere(' + counter + ')">To here</a> - <b>From here</b>' +
       '<br>End address:<form action="http://maps.google.co.uk/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="' + latitude + "," + longitude + '"/>';
       
      // The inactive version of the direction info
      htmls[counter] = htmls[counter] + '<br>Directions: <a href="javascript:tohere('+counter+')">To here</a> - <a href="javascript:fromhere('+counter+')">From here</a>';
	 
	  return marker;
	}

	// This function picks up the click and opens the corresponding info window
	
	// functions that open the directions forms
  function tohere(i) {
    gmarkers[i].openInfoWindowHtml(to_htmls[i]);
  }
  
  function fromhere(i) {
    gmarkers[i].openInfoWindowHtml(from_htmls[i]);
  }
  
  function myclick(i) 
  {
    gmarkers[i].openInfoWindowHtml(htmls[i]);
  }