//<![CDATA[

    var iconYellow = new GIcon();
    iconYellow.image = 'http://labs.google.com/ridefinder/images/mm_20_yellow.png';
    iconYellow.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconYellow.iconSize = new GSize(12, 20);
    iconYellow.shadowSize = new GSize(22, 20);
    iconYellow.iconAnchor = new GPoint(6, 20);
    iconYellow.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon();
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

// this variable will collect the html which will eventually be placed in the side_bar
    var sidebar_html = ["","",""];
    
// Number of sidebar columns
      var sidebars=sidebar_html.length;
      // Number of markers per sidebar
      var num_markers;
    
// arrays to hold copies of the markers used by the side_bar
// because the function closure trick doesnt work there
    var gmarkers = [];
      var htmls=[];
      var i=0;
    var customIcons = [];
    customIcons["Fashion"] = iconYellow;
    customIcons["Food"] = iconRed;

     function createTabbedMarker(point,title,html,html1,html2,label1,label2, name, address_1, address_2, postcode, std_code, phone, type, notes, image_link) {
      var marker = new GMarker(point, customIcons[type]);
      var html1 = ""+ '<div style="width:200px; height:120px">' + '<img src=' + image_link + '> </div>'  + "<br /><b>" + name + "</b> <br/>" + address_1 + "<br/>" + address_2 + "<br/>" + postcode + "<br/>" + "0" + std_code + " " + phone;
       var html2 = "<b>Description</b>" + "<br />" + "<br />" + '<div style="width:200px; height:120px">' + notes + '</div>';
      GEvent.addListener(marker, 'click', function() {
 //   GEvent.addListener(marker,"mouseover", function() {
         marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]);
      });

       // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
        // add a line to the side_bar html
        // add a line to the side_bar html
        side_html = '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br>';
        sidebar_html[Math.floor(i/num_markers)]+=side_html;
        i++;
        return marker;
    }

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

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
       	map.setCenter(new GLatLng(51.461842, -3.448607), 17);
       	map.setMapType(G_HYBRID_MAP);

        GDownloadUrl("cfmap_query_web.php", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
           num_markers=Math.ceil(markers.length/sidebars);
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var address_1 = markers[i].getAttribute("address_1");
            var address_2 = markers[i].getAttribute("address_2");
            var address_3 = markers[i].getAttribute("address_3");
            var postcode = markers[i].getAttribute("postcode");
             var std_code = markers[i].getAttribute("std_code");
             var phone = markers[i].getAttribute("phone");
            var type = markers[i].getAttribute("type");
            var html = markers[i].getAttribute("postcode");
            var title = markers[i].getAttribute("name");
          //  var pupils = markers[i].getAttribute("pupils");
            var notes = markers[i].getAttribute("notes");
           var image_link = markers[i].getAttribute("image_link");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createTabbedMarker(point,title,html,"", "", "Outlet", "Details", name, address_1, address_2, postcode, std_code, phone, type, notes, image_link);
            map.addOverlay(marker);
          }
   // put the assembled side_bar_html contents into the side_bar div

         document.getElementById("sidebar0").innerHTML = sidebar_html[0];
        document.getElementById("sidebar1").innerHTML = sidebar_html[1];
        document.getElementById("sidebar2").innerHTML = sidebar_html[2];
        });
      }
    }
    //]]>