//<![CDATA[

    if (GBrowserIsCompatible()) {
      var gmarkers = [];
      var gicons = [];
      gicons["10"] = new GIcon(G_DEFAULT_ICON,"../img/markerorange.png");
      gicons["10rd"] = new GIcon(G_DEFAULT_ICON,"../img/markerorangerd.png");
      gicons["09"] = new GIcon(G_DEFAULT_ICON,"../img/markerblue.png");
      gicons["09rd"] = new GIcon(G_DEFAULT_ICON,"../img/markerblueonb.png");    
      gicons["08"] = new GIcon(G_DEFAULT_ICON,"../img/markerblue.png");
      gicons["08rd"] = new GIcon(G_DEFAULT_ICON,"../img/markerblueonb.png");
      gicons["blue"] = new GIcon(G_DEFAULT_ICON,"../img/markerblue.png");
      gicons["yellow"] = new GIcon(G_DEFAULT_ICON,"../img/markeryellow.png");
      gicons["yellowrd"] = new GIcon(G_DEFAULT_ICON,"../img/markeryellowonb.png");
      gicons["green"] = new GIcon(G_DEFAULT_ICON,"../img/markergreen.png");
      gicons["orange"] = new GIcon(G_DEFAULT_ICON,"../img/markerorange.png");
      gicons["orangerd"] = new GIcon(G_DEFAULT_ICON,"../img/markerorangerd.png");       

      // A function to create the marker and set up the event window
      function createMarker(point,name,label2,html,category,icon) {
        var marker = new GMarker(point,gicons[icon]);
        marker.ColdImage = marker.getIcon().image;
        
        // === Store the category and name info as a marker properties ===
        marker.tooltip = '<div class="tooltip"><nobr>'+label2+'</nobr></div>';
        marker.mycategory = category;                                 
        marker.myname = name;
        GEvent.addListener(marker, "click", function() {
          tooltip.style.visibility="hidden";
          marker.openInfoWindowHtml(html);
        });
        
        // Switch icon on marker mouseover and mouseout
        GEvent.addListener(marker, "mouseover", function() {
          marker.setImage("../img/markerred.png");
          showTooltip(marker);
        });
        GEvent.addListener(marker, "mouseout", function() {
          marker.setImage(marker.ColdImage);
          tooltip.style.visibility="hidden"
        });        

      // ====== 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.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
	var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
	var anchor=marker.getIcon().iconAnchor;
	var width=marker.getIcon().iconSize.width;
	var height=tooltip.clientHeight;
	var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y -height)); 
	pos.apply(tooltip);
	tooltip.style.visibility="visible";
      }
       
        gmarkers.push(marker);
   
        return marker;
      }


      // == 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;
      }

      // == 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();
      }

      // == a checkbox has been clicked ==
      function boxclick(box,category) {
        if (box.checked) {
          show(category);
        } else {
          hide(category);
        }
        // == rebuild the side bar
        makeSidebar();
      }

      function myclick(i) {
        GEvent.trigger(gmarkers[i],"click");
      }

      // == 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="gmarkers['+i+'].setImage(\'../img/markerred.png\')" onmouseout="gmarkers['+i+'].setImage(gmarkers['+i+'].ColdImage)">' + gmarkers[i].myname + '</a><br>';
          }
        }
        document.getElementById("side_bar").innerHTML = html;
      }


      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
        map.addControl(
          new TextualZoomControl(),
          new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,10)));
        map.enableContinuousZoom();
      map.setCenter(new GLatLng(51.4326, -1.8230), 11, G_HYBRID_MAP);
      
			map.addControl(new GOverviewMapControl());		//MiniMap
 
      var otherOpts = { 
          buttonStartingStyle: {display:'block',color:'black',background:'white',width:'7em',textAlign:'center',
            fontFamily:'Verdana',fontSize:'12px',fontWeight:'bold',border:'1px solid gray',paddingBottom:'1px',cursor:'pointer'},
          buttonHTML: 'Drag Zoom',
          buttonZoomingHTML: 'Drag a region on the map (click here to reset)',
          buttonZoomingStyle: {background:'yellow'},
          backButtonHTML: 'Drag Zoom Back',  
          backButtonStyle: {display:'none',marginTop:'3px',background:'#FFFFC8'},
          backButtonEnabled: true
        } 
        map.addControl(new DragZoomControl({}, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,46)));
      
      // ====== set up marker mouseover tooltip div ======
      var tooltip = document.createElement("div");
      map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
      tooltip.style.visibility="hidden";      

      // Read the data
      GDownloadUrl("categories.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 orientatie = markers[i].getAttribute("dir");
            var locatie = markers[i].getAttribute("loc");
            var datum = markers[i].getAttribute("datum");
            var foto = markers[i].getAttribute("foto");
            var info = markers[i].getAttribute("info");
            var plaatje = "<img src='"+foto+"' border=0 width=90 height=70>"
            var cel = markers[i].getAttribute("cel");
            var html = "<table><tr><td width=96 valign='bottom'>"
                       +plaatje+"</td><td width="+cel+"><b><font face='Arial' size=2>"+locatie
                       +"</font></b><br>"
                       +"<font size=1 face='Arial' color='333333'>"+datum
                       +"<br><font size=1 face='Arial' color='cc0000'><a href="+info+">additional information</a></td></tr></font></table>"
            var label = plaatje+"<br><font face='Arial' size=1><span style='background-color:#ffffff'>"+locatie+" "+datum+"</span></font>";
            var label2 =  "<div align='center'><table border=0 bgcolor='ffffcc' cellspacing=0 cellpadding=5><span style='background-color:#ffffcc'>"
                          +"<tr><td align='center' valign='bottom' background='../img/ttfill.png'><font face='Arial' size=2>"+locatie+"<br>"+plaatje
                          +"</font><br><font face='Arial' size=1>"+datum+"</font></td></tr></table><\/div>";            
            var category = markers[i].getAttribute("category");
            var icon = markers[i].getAttribute("icon");


          // create the marker
          var marker = createMarker(point,label,label2,html,category,icon);
          map.addOverlay(marker);
        }

        // == show or hide the categories initially ==
        // hide("cc2008");
        hide("sites");        
        show("cc2010");        
        // == 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
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/   
    // http://econym.googlepages.com/index.htm

    //]]>