//<![CDATA[

    if (GBrowserIsCompatible()) { 
      var sidebar_html = "";
      var topbar_html = "";
      var underbar_html = [];
      var leaguesadded = 0;
      var gmarkers = [];
      var htmls = [];
      var i = 0;
      var singlebar_html=" ";

      // Create some custom icons
      
      var baseIcon = new GIcon();
      baseIcon.shadow = "shadow.png";
      baseIcon.iconSize = new GSize(18, 30),
      baseIcon.shadowSize = new GSize(37, 34);
      baseIcon.iconAnchor = new GPoint(8, 30);
      baseIcon.infoWindowAnchor = new GPoint(9, 2);
      baseIcon.infoShadowAnchor = new GPoint(18, 25);

      var redIcon = new GIcon(baseIcon);
      redIcon.image = "red.png";

      var yellowIcon = new GIcon(baseIcon);
      yellowIcon.image = "yellow.png";

      var greenIcon = new GIcon(baseIcon);
      greenIcon.image = "green.png";

      var cyanIcon = new GIcon(baseIcon);
      cyanIcon.image = "cyan.png";

      var blueIcon = new GIcon(baseIcon);
      blueIcon.image = "blue.png";

      var magentaIcon = new GIcon(baseIcon);
      magentaIcon.image = "magenta.png";

      var paleredIcon = new GIcon(baseIcon);
      paleredIcon.image = "palered.png";

      var paleyellowIcon = new GIcon(baseIcon);
      paleyellowIcon.image = "paleyellow.png";

      var palegreenIcon = new GIcon(baseIcon);
      palegreenIcon.image = "palegreen.png";

      var palecyanIcon = new GIcon(baseIcon);
      palecyanIcon.image = "palecyan.png";

      var paleblueIcon = new GIcon(baseIcon);
      paleblueIcon.image = "paleblue.png";

      var palemagentaIcon = new GIcon(baseIcon);
      palemagentaIcon.image = "palemagenta.png";

      var greyIcon = new GIcon(baseIcon);
      greyIcon.image = "grey.png";

      var silverIcon = new GIcon(baseIcon);
      silverIcon.image = "silver.png";

      var whiteIcon = new GIcon(baseIcon);
      whiteIcon.image = "white.png";




      // An array of GIcons, to make the selection easier
      var icons = [];
      icons["red"] = redIcon;
      icons["yellow"] = yellowIcon;
      icons["green"] = greenIcon;
      icons["cyan"] = cyanIcon;
      icons["blue"] = blueIcon;
      icons["magenta"] = magentaIcon;
      icons["palered"] = paleredIcon;
      icons["paleyellow"] = paleyellowIcon;
      icons["palegreen"] = palegreenIcon;
      icons["palecyan"] = palecyanIcon;
      icons["paleblue"] = paleblueIcon;
      icons["palemagenta"] = palemagentaIcon;
      icons["grey"] = greyIcon;
      icons["silver"] = silverIcon;
      icons["white"] = whiteIcon;

      // A function to create the marker and set up the event window
      function createMarker(point,name,html,icontype) {
        var marker = new GMarker(point,icons[icontype]);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the sidebar
        gmarkers[i] = marker;
        htmls[i] = '<div align="center">' + html + '</div>';
        // add a line to the sidebar html
	if (leaguesadded == 0)
         {
          sidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br/>';
         }
        else
         {
          underbar_html[leaguesadded] += '<a href="javascript:myclick(' + i + ')">' + name + '</a> • ';
         }
        i++;
        return marker;
      }


      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }


      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      // ==== It is necessary to make a setCenter call of some description before adding markers ====
      // ==== At this point we dont know the real values ====
      map.setCenter(new GLatLng(53,-2),6);

      // ===== Start with an empty GLatLngBounds object =====     
      var bounds = new GLatLngBounds();
      
      // Show one map ===================================== READ MAP ================
      function readMap(ud,theicontype) {

	// added bit
	var url = "../asp/data2.asp?uid=" + ud;
        var request = GXmlHttp.create();
	var icontype = theicontype

        request.open("GET", url, true);
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            var xmlDoc = request.responseXML;
            // obtain the array of markers and loop through it
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");
	    var league_name = xmlDoc.documentElement.getAttribute("name");

            // hide the info window, otherwise it still stays open where the removed marker used to be
            map.getInfoWindow().hide();
          
            map.clearOverlays();
            
            // empty the array
            gmarkers = [];
	    bounds = new GLatLngBounds();

            // reset the sidebar
            sidebar_html='<img src="' + icontype + '.gif"/> <b>' + league_name + '</b><br/>';
	    leaguesadded = 0;
          
          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 html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
            
           if (lat > 0) {
		var marker = createMarker(point,label,html,icontype);
        	map.addOverlay(marker);
	        // ==== Each time a point is found, extend the bounds to include it =====
		bounds.extend(point);
	   }

          }
            // put the assembled sidebar_html contents into the sidebar div
            document.getElementById("sidebar").innerHTML = sidebar_html;

	   singlebar_html = " ";
           document.getElementById("singlebar").innerHTML = singlebar_html;

          // ===== determine the zoom level from the bounds =====
          map.setZoom(map.getBoundsZoomLevel(bounds));

          // ===== determine the centre from the bounds ======
          var clat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) /2;
          var clng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) /2;
          map.setCenter(new GLatLng(clat,clng));

          }
        }
        request.send(null);
      }

	//Add another division ===================================== ADD MAP ================
	function addMap(ud,theicontype) {

	// added bit
	var url = "../asp/data2.asp?uid=" + ud;
        var request = GXmlHttp.create();
	var icontype = theicontype;

        request.open("GET", url, true);
        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            var xmlDoc = request.responseXML;
            // obtain the array of markers and loop through it
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");
            
            // hide the info window, otherwise it still stays open where the removed marker used to be
            map.getInfoWindow().hide();         

            // empty the array used by the XML parser
            
            // reset the sidebar
	    leaguesadded++;
            underbar_html[leaguesadded]="";
          
          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 html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,html,icontype);
            map.addOverlay(marker);
            
            // ==== Each time a point is found, extend the bounds to include it =====
            bounds.extend(point);
          }
            // put the assembled sidebar_html contents into the underbar div

	    var league_name = xmlDoc.documentElement.getAttribute("name");
	    var bgcolor=" ";
	    if (Math.round((leaguesadded)/2) == (leaguesadded)/2) {bgcolor="#ddffdd"} else {bgcolor="#eeffee"};

	 singlebar_html += '<table bgcolor=' + bgcolor + ' width=750>';
	 singlebar_html += '<tr> <td rowspan=2 width=25 align="center" valign="center">';
	 singlebar_html += '<img src="' + icontype + '.gif">' + '</td>';
	 singlebar_html += '<td align="center"><b>' + league_name + '</b></td></tr>';
	 singlebar_html += '<tr> <td align="center" width=725>' + underbar_html[leaguesadded] + '</td></tr>';
	 singlebar_html += '</table>';
         document.getElementById("singlebar").innerHTML = singlebar_html;


          // ===== determine the zoom level from the bounds =====
          map.setZoom(map.getBoundsZoomLevel(bounds));

          // ===== determine the centre from the bounds ======
          var clat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) /2;
          var clng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) /2;
          map.setCenter(new GLatLng(clat,clng));

          }
        }
        request.send(null);
      }
      
  
	function addborder(type,ud,col) {
      // Read the data from giftwrap.asp
      var url = "../asp/giftwrap.asp?uid=" + ud;      
      var request = GXmlHttp.create()

      request.open("GET", url, true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          
         
          // ========= Now process the polylines ===========
          var lines = xmlDoc.documentElement.getElementsByTagName("line");
          // read each line
          for (var a = 0; a < lines.length; a++) {
            // get any line attributes
            var colour = lines[a].getAttribute("colour");
            var width  = parseFloat(lines[a].getAttribute("width"));
            // read each point on that line
            var points = lines[a].getElementsByTagName("point");
            var pts = [];
            for (var i = 0; i < points.length; i++) {
               pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                   parseFloat(points[i].getAttribute("lng")));
            }
            map.addOverlay(new GPolyline(pts,colour,width));
          }
          // ================================================          
        }
      }
      request.send(null);

	// end of function
	 }


      // When initially loaded, use Premiership with pale green markers
     

    }

    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://www.econym.demon.co.uk/googlemaps/
    // Original code Copyright © 2006 Tom Willis
    // Last updated 12:54 25/10/2006

    //]]>