// Live key = ABQIAAAAucY0MhNJnPS2AgkNlkVIMhRJGZz_p3nVOGbvMc4-cLnfogJm9BSAMMdsBboOJeYx8G6cfSnpYCEQ7g
    // Test key = ABQIAAAAucY0MhNJnPS2AgkNlkVIMhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSSAZrGjgSX5gWQIFM8xVpOu2Bqzw
    
    //<![CDATA[
    
    var points = [];
    var map;
    
    function loadReadOnlyMap() {
        if (GBrowserIsCompatible()) {
        var number = 0;
        var route = new GPolyline(points);         
                    
        map = new GMap2(document.getElementById("map"), {draggableCursor: 'crosshair', draggingCursor: 'pointer'});
        map.addControl(new GLargeMapControl());
        map.setCenter(new GLatLng(52.92215137976296, -1.29638671875), 6);

        // Create our "tiny" marker icon
        var icon = new GIcon();
        icon.image = "../artwork/marker.gif";
        icon.iconSize = new GSize(7, 8);
        icon.iconAnchor = new GPoint(4, 4);
        icon.infoWindowAnchor = new GPoint(7, 8);
        
        // Creates a marker at the given point with the given number label
        function CreateWaypoint(point, number) {
          var tooltip = "Waypoint " + (number + 1);
          var waypoint = new GMarker(point, {icon: icon, title: tooltip});
          points.push(point);
          
          waypoint.index = number;
          return waypoint;
        }
        
        // XML Thing
        //GDownloadUrl("mapdata.xml", function(data, responseCode) {
        var myForm = document.aspnetForm;
        var xml = GXml.parse(myForm.ctl00$cphMain$dtvRoute$hdnRouteXml.value);
        if (myForm.ctl00$cphMain$dtvRoute$hdnRouteXml.value != "") {
            var centre = xml.documentElement.getElementsByTagName("centre");
            var zoom = xml.documentElement.getElementsByTagName("zoom");
            var waypoints = xml.documentElement.getElementsByTagName("waypoint");
            map.setCenter(new GLatLng(parseFloat(centre[0].getAttribute("lat")), 
                                      parseFloat(centre[0].getAttribute("lng"))),
                                      parseInt(zoom[0].getAttribute("level")));
            for (var i = 0; i < waypoints.length; i++) {
                var point = new GLatLng(parseFloat(waypoints[i].getAttribute("lat")),
                                        parseFloat(waypoints[i].getAttribute("lng")));
                map.addOverlay(CreateWaypoint(point, i));
            }
            //map.removeOverlay(route);
            route = new GPolyline(points);
            map.addOverlay(route);
        }
        
        //
      }
    }

    function loadEditableMap() {
      if (GBrowserIsCompatible()) {
        var number = 0;
        var route = new GPolyline(points);
        //var mapsize = new GSize(700, 500);
        //var xmlDoc;
        //var xmlObj;
        //var newElement;
        //var newAttribute;
        
        // Set up XML object
        //if (window.clipboardData) {
        //    xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        //}
        //else {
        //    xmlDoc = document.implementation.createDocument("", "", null);
        //}
           
        //xmlDoc.load("routetemplate.xml");
        //xmlObj=xmlDoc.documentElement;         
                    
        map = new GMap2(document.getElementById("map"), {draggableCursor: 'crosshair', draggingCursor: 'pointer'});
                      
        //function MyMarker (index, point, opts) {
        //    this.base = GMarker;
        //    this.base(point, opts);
        //    this.index = index;
        //}
        //MyMarker.prototype = new GMarker;       
        
        // Navigation control
        map.addControl(new GLargeMapControl());
        // Satellite, hybrid etc. control
        //map.addControl(new GMapTypeControl());
        
        // Event listener
        //GEvent.addListener(map, "moveend", function() {
        //  var center = map.getCenter();
        //  document.getElementById("message").innerHTML = xmlDoc.childNodes[0].childNodes.length.toString();
        //});
                
        // Set map center
        map.setCenter(new GLatLng(52.92215137976296, -1.29638671875), 6);

        // Geocoder
        //var geocoder = new GClientGeocoder();
        //function showAddress(address) {
        //  geocoder.getLatLng(
        //    address,
        //    function(point) {
        //      if (!point) {
        //        alert(address + " not found");
        //      } else {
        //        map.setCenter(point, 13);
        //        var marker = new GMarker(point);
        //        map.addOverlay(marker);
        //        marker.openInfoWindowHtml(address);
        //     }
        //    }
        //  );
        //}
        
        // Create our "tiny" marker icon
        var icon = new GIcon();
        icon.image = "../artwork/marker.gif";
        //icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
        icon.iconSize = new GSize(7, 8);
        //icon.shadowSize = new GSize(22, 20);
        icon.iconAnchor = new GPoint(4, 4);
        //icon.infoWindowAnchor = new GPoint(7, 8);
        
        // Creates a marker at the given point with the given number label
        function CreateWaypoint(point, number) {
          var tooltip = "Waypoint " + (number + 1);
          var waypoint = new GMarker(point, {icon: icon, draggable: true, bouncy: false, dragCrossMove: true, title: tooltip});
          points.push(point);
          
          //newElement = xmlDoc.createElement("marker");
          //newAttribute = xmlDoc.createTextNode("lat", point.x);
          //newElement.appendChild(newAttribute);
          //newAttribute = xmlDoc.createTextNode("lng", point.y);
          //newElement.appendChild(newAttribute);
          //xmlObj.childNodes[0].appendChild(newElement);
          
          waypoint.index = number;
          //var infoTabs = [
          //    new GInfoWindowTab("Number", "Waypoint #<b>" + number + "</b>"),
          //    new GInfoWindowTab("Coordinates", point.toString()),
          //    new GInfoWindowTab("Array Coords", points[number].toString())
          //  ];
          //GEvent.addListener(waypoint, "click", function() {
          //  waypoint.openInfoWindowTabsHtml(infoTabs);
          //});
          GEvent.addListener(waypoint, "dragend", function() {
            points[waypoint.index] = waypoint.getPoint();
            map.removeOverlay(route);
            route = new GPolyline(points);
            map.addOverlay(route);
          });
          return waypoint;
        }
        
        // Click handler
        GEvent.addListener(map, "click", function(marker, point) {
          map.addOverlay(CreateWaypoint(point, number));
          map.removeOverlay(route);
          route = new GPolyline(points);
          map.addOverlay(route);
          number++;
        });
        
        // XML Thing
        //GDownloadUrl("mapdata.xml", function(data, responseCode) {
        var myForm = document.aspnetForm;
        var xml = GXml.parse(myForm.ctl00$cphMain$dtvRoute$hdnRouteXml.value);
        if (myForm.ctl00$cphMain$dtvRoute$hdnRouteXml.value != "") {
            var centre = xml.documentElement.getElementsByTagName("centre");
            var zoom = xml.documentElement.getElementsByTagName("zoom");
            var waypoints = xml.documentElement.getElementsByTagName("waypoint");
            map.setCenter(new GLatLng(parseFloat(centre[0].getAttribute("lat")), 
                                      parseFloat(centre[0].getAttribute("lng"))),
                                      parseInt(zoom[0].getAttribute("level")));
            for (var i = 0; i < waypoints.length; i++) {
                var point = new GLatLng(parseFloat(waypoints[i].getAttribute("lat")),
                                        parseFloat(waypoints[i].getAttribute("lng")));
                map.addOverlay(CreateWaypoint(point, i));
            }
            //map.removeOverlay(route);
            route = new GPolyline(points);
            map.addOverlay(route);
        }
        
        //
      }
    }
    
    function CreateRouteXml() {
        var myForm = document.aspnetForm;
        var xmlString = "<route>";
        var centreLatLng = map.getCenter();
        
        xmlString += '<centre lat="' + centreLatLng.lat() + '" lng="' + centreLatLng.lng() + '" />';       
        xmlString += '<zoom level="' + map.getZoom() + '" />';
        
        for (var i = 0; i < points.length; i++) {
            xmlString += '<waypoint index="' + i + '" lat="' + points[i].y + '" lng="' + points[i].x + '" />';
        }
        
        xmlString += "</route>";
        myForm.ctl00$cphMain$dtvRoute$hdnRouteXml.value = xmlString;    
    }