$(document).ready(function(){
  $("#sidebar").jScrollPane();


//call this when content has been added to the sidebar
function reinitialiseScrollPane()
				{
					$("#sidebar").jScrollPane();
				}

/*the main map functions. This first bit is for custom icons*/
var iconBlue = new GIcon(); 
    iconBlue.image = '../images/bluecirclemarker.png';
    iconBlue.shadow = '';
    iconBlue.iconSize = new GSize(16, 16);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(8, 8);
    iconBlue.infoWindowAnchor = new GPoint(7, 1);

    var iconYellow = new GIcon(); 
    iconYellow.image = '../images/yellowcirclemarker.png';
    iconYellow.shadow = '';
    iconYellow.iconSize = new GSize(16, 16);
    iconYellow.shadowSize = new GSize(22, 20);
    iconYellow.iconAnchor = new GPoint(8, 8);
    iconYellow.infoWindowAnchor = new GPoint(8, 1);
    
    var iconGreen = new GIcon(); 
    iconGreen.image = '../images/greencirclemarker.png';
    iconGreen.shadow = '';
    iconGreen.iconSize = new GSize(16, 16);
    iconGreen.shadowSize = new GSize(22, 20);
    iconGreen.iconAnchor = new GPoint(8, 8);
    iconGreen.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["headoffice"] = iconBlue;
    customIcons["contactcentres"] = iconYellow;
    customIcons["hdp"] = iconGreen;
    customIcons["assc"] = iconBlue;
    var markerGroups = { "headoffice": [], "contactcentre": [], "hdp": [], "assc": []};
/*end */

    if (GBrowserIsCompatible()) {
      var gmarkers = [];      




      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(54.488761, -3.120117), 5);
        var customUI = map.getDefaultUI();
        // Remove MapType.G_HYBRID_MAP
        customUI.maptypes.hybrid = false;
        map.setUI(customUI);



      // Read the data
      GDownloadUrl("markerdata.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 category = markers[i].getAttribute("category");
          // create the marker
          var marker = createMarker(point,name,address,category);
          map.addOverlay(marker);
        }

        // == show or hide the categories initially ==
        show("headoffice");
        hide("contactcentres");
        hide("hdp");
        hide("assc");
        // == 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

/*new custom marker function*/
   function createMarker(point, name, address, category) {
      var marker = new GMarker(point, {icon: customIcons[category]});      
      var html = "<strong>" + name + "</strong> <br/><span style='font-size:1em'>" + address + "</span>";
        marker.mycategory = category;                                    
        marker.myname = name;
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        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 ==
        $("#" + 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 ==
        $("#" + 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 = "<p>Selected locations:</p><p>";
        for (var i=0; i<gmarkers.length; i++) {
          if (!gmarkers[i].isHidden()) {
            html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br \/>';
      
          }
        }
        html +="</p>";
        //load the content into the sidebar and make it a scrollable div
         $("#sidebar").html(html);
         reinitialiseScrollPane();
     
        
        
      }
});