// JavaScript Document
//<![CDATA[


// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var InverclydeMap;
var gmarkers = [];
var i = 0;
var lastlinkid;

// This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }

function load() {
    
  if (GBrowserIsCompatible()) { 

      // this variable will collect the html which will eventually be placed in the side_bar
      var side_bar_html = '<ul>';
      var i = 0;

     // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        var linkid = "link"+i;
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
          document.getElementById(linkid).style.background="#ffff00";
          lastlinkid=linkid;
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        // add a line to the side_bar html
        side_bar_html += '<li id="'+linkid+'"><a href="javascript:myclick(' + i + ')">' + name + '</a></li>';
        i++;
        return marker;
      }

      		InverclydeMap = new GMap2(document.getElementById("InverclydeMap"));
      		InverclydeMap.addControl(new GLargeMapControl());
      		InverclydeMap.addControl(new GMapTypeControl());
		InverclydeMap.addControl(new GOverviewMapControl(new GSize(100, 100)));
      		InverclydeMap.setCenter(new GLatLng(55.9100, -4.77336), 11); //13 = map scale, zoom from 1 - 17

      		// Set up Inverclyde map markers with info windows 
     		var point = new GLatLng(55.94801, -4.76032);
      		var marker = createMarker(point, 'Greenock', '<div class="caption"><p><strong>Greenock</strong></p><a href="http://inverclydetouristgroup.co.uk/index.php/maps/greenock/">Click here for Greenock map</a></div>')
      		InverclydeMap.addOverlay(marker);

     		var point = new GLatLng(55.95917, -4.81688);
      		var marker = createMarker(point, 'Gourock', '<div class="caption"><p><strong>Gourock Map</strong></p><a href="http://inverclydetouristgroup.co.uk/index.php/maps/gourock/">Click here for Gourock map</a></div>')
      		InverclydeMap.addOverlay(marker);

     		var point = new GLatLng(55.93543, -4.68724);
      		var marker = createMarker(point, 'Port Glasgow', '<div class="caption"><p><strong>Port Glasgow Map</strong></p><a href="http://inverclydetouristgroup.co.uk/index.php/maps/port/">Click here for Port Glasgow Map</a></div>')
      		InverclydeMap.addOverlay(marker);

     		var point = new GLatLng(55.90773, -4.87426);
      		var marker = createMarker(point, 'Inverkip', '<div class="caption"><p><strong>Inverkip Map</strong></p><a href="http://inverclydetouristgroup.co.uk/index.php/maps/inverkip/">Click here for Inverkip Map</a></div>')
      		InverclydeMap.addOverlay(marker);

     		var point = new GLatLng(55.89349, -4.62664);
      		var marker = createMarker(point, 'Kilmacolm', '<div class="caption"><p><strong>Kilmacolm Map</strong></p><a href="http://inverclydetouristgroup.co.uk/index.php/maps/kilmacolm/">Click here for Kilmacolm Map</a></div>')
      		InverclydeMap.addOverlay(marker);

     		var point = new GLatLng(55.88265, -4.88954);
      		var marker = createMarker(point, 'Wemyss Bay', '<div class="caption"><p><strong>Wemyss Bay Map</strong></p><a href="http://inverclydetouristgroup.co.uk/index.php/maps/wemyss/">Click here for Wemyss Bay Map</a></div>')
      		InverclydeMap.addOverlay(marker);

                GEvent.addListener(InverclydeMap,"infowindowclose", function() {document.getElementById(lastlinkid).style.background="#fff";});
                    
                // put the assembled side_bar_html contents into the side_bar div
                side_bar_html += '</ul>';
                document.getElementById("side_bar").innerHTML = side_bar_html;
        }
    	// display a warning if the browser was not compatible
    	else {
      		alert("Sorry, the Google Maps API is not compatible with this browser");
    	}
}
    //]]>