//<![CDATA[


//these variables have been taken out of the loadMap function in order to make them global so that they work in an external
//javascript file

var gmarkers = [];
var side_bar_html = "";
var map;
var tooltip;

// this function has been taken out of the loadMap function in order for it to work in an external javascript file	   
      function myclick(i) {
        GEvent.trigger(gmarkers[i],"click");
      }	
// this function has been taken out of the loadMap function in order for it to work in an external javascript file	  	  
 // == shows all markers of a particular category, and ensures the checkbox is checked ==
      function show(category) {
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].mycategory == category) {
            gmarkers[i].show();
          }
        }
        // == check the checkbox ==
        document.getElementById(category+"box").checked = true;
      }

      // this function has been taken out of the loadMap function in order for it to work in an external javascript file	  
	  // == 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].mycategory == category) {
            gmarkers[i].hide();
          }
        }
        // == clear the checkbox ==
        document.getElementById(category+"box").checked = false;
        // == close the info window, in case its open on a marker that we just hid
        map.closeInfoWindow();
      }

      // this function has been taken out of the loadMap function in order for it to work in an external javascript file	  
	  // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
        // == rebuild the side bar
        makeSidebar();
      }



// this function has been taken out of the loadMap function in order for it to work in an external javascript file	  
      // == rebuilds the sidebar to match the markers currently displayed ==
      function makeSidebar() {
        var html = "";
        for (var i=0; i<gmarkers.length; i++) {
          if (!gmarkers[i].isHidden()) {
			  
		     
		  
            html += '<a href="javascript:myclick(' + i + ')" onmouseover="mymouseover('+i+')" onmouseout="mymouseout()">' + gmarkers[i].myname + '<\/a><br>';
			  }
		  
		  
        }
        document.getElementById("side_bar").innerHTML = html;
      }
	  
  // ====== This function displays the tooltip ======
      // it can be called from an icon mousover or a side_bar 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 - 8,- offset.y + point.y +anchor.y - 7)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
      }
	  
// ===== This function is invoked when the mouse goes over an entry in the side_bar =====
      // It launches the tooltip on the icon      
      //function mymouseover(i) {
       // showTooltip(gmarkers[i])
     // }
      // ===== This function is invoked when the mouse leaves an entry in the side_bar =====
      // It hides the tooltip      
     // function mymouseout() {
	//tooltip.style.visibility="hidden";
    //  }
		   
function loadMap()
{
    if (GBrowserIsCompatible()) {
      var gicons = [];

      var baseIcon = new GIcon();
      baseIcon.iconAnchor = new GPoint(14,25);
      baseIcon.iconSize = new GSize(28,25);
	  baseIcon.shadow = "http://www.jasperhotels.com/images/map/cabin-shadow-sm-c.png";
	  baseIcon.shadowSize = new GSize(39, 25);
      baseIcon.infoWindowAnchor = new GPoint(15,7);
	 



      gicons["hotel"] = new GIcon(baseIcon,"http://www.jasperhotels.com/images/map/hotel-icon-green.png");
      gicons["restaurant"] = new GIcon(baseIcon,"colour108.png");
	  gicons["cabins"] = new GIcon(baseIcon,"http://www.jasperhotels.com/images/map/hotel-icon-cabin-sm.png");


      // A function to create the marker and set up the event window
      function createMarker(point,name,html,category) {
        var marker = new GMarker(point,gicons[category]);
        // === Store the category and name info as a marker properties ===
        marker.mycategory = category;                                 
        marker.myname = name;
		// Added from Tooltip code === store the name so that the tooltip function can use it ===
        marker.tooltip = '<div class="tooltip">'+name+'<\/div>';
		
		//  ======  The new marker "mouseover" and "mouseout" listeners  ======
        GEvent.addListener(marker,"mouseover", function() {
          showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
		tooltip.style.visibility="hidden"
        }); 				
		
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        gmarkers.push(marker);
        return marker;
      }

     


      // create the map
      map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(52.881796, -118.076463), 14);
	  
	  // ====== set up marker mouseover tooltip div ======
      tooltip = document.createElement("div");
      document.getElementById("map").appendChild(tooltip);
      tooltip.style.visibility="hidden";


      // Read the data
      GDownloadUrl("http://www.jasperhotels.com/map/categoriesp.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new GLatLng(lat,lng);
          var address = markers[i].getAttribute("address");
          var name = markers[i].getAttribute("name");
		  // var html = "<b>"+name+"<\/b><p>"+address;
		  var image = markers[i].getAttribute("image");
		  var bubble = markers[i].getAttribute("bubble");
		  var line1 = markers[i].getAttribute("line1");
		  var line2 = markers[i].getAttribute("line2");
		  var line3 = markers[i].getAttribute("line3");
		  var linktext = markers[i].getAttribute("linktext");
		  var anchortext = markers[i].getAttribute("anchortext");
		  
		  
		  //<div id="jasperParkLodge">
          //<div id="leftPane"><img src="jpl.jpg"/></div><div id="rightPane"><h1>Jasper Park Lodge</h1>
          //<p>* This is the JPL, its a great hotel <br />
//* Located on Lac Beauvert<br />
//* Luxury accommodation in Jasper</p><p class="dark">Old Lodge Rd, Jasper
         //</p>
  //<p class="link"> <a href="http://www.fairmont.com">www.fairmont.com</a></p>

//</div>
          //</div>
		  
 // var html = "<div id='jasperParkLodge'><div id='leftPane'><img src='"+image+"'\/></div><div id='rightPane'><h1>"+name+"<\/h1>//<p>"+line1+"<br \/>"+line2+"<br \/>"+line3+"<\/p><p class="dark">"+address+"<\/p><p class='link'> <a href='"+linktext+"'>//"+anchortext+"<\/a><\/p>
//<\/div>
//<\/div>"		  
		  
          var html = "<div id='"+bubble+"'><div id='leftPane'><img src='"+image+"'\/><\/div><div id='rightPane'><h1>"+name+"<\/h1><p>"+line1+"<br \/>"+line2+"<br \/>"+line3+"<\/p><p class='dark'>"+address+"<\/p><p class='link'><a href='"+linktext+"'>"+anchortext+"<\/a><\/p><\/div><\/div>"
          var category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,html,category);
          map.addOverlay(marker);
        }

        // == show or hide the categories initially ==
        show("hotel");
      //  hide("restaurant");
		hide("cabins");

        // == create the initial sidebar ==
        makeSidebar();
      });
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
	
}
	
    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/

    //]]>