//<script type="text/javascript">
//<![CDATA[



var side_bar_html = "";

side_bar_html = "<table><tr>";

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


// arrays to hold variants of the info window html with get direction forms open
var to_htmls = [];
var from_htmls = [];
var lats = [];
var lngs = [];
var zoomlevel = [];

        // A function to create the marker and set up the event window
        function createMarker(point, name, html, shtml,map1) {
            //var marker = new GMarker(point);
            var marker = new google.maps.Marker({
                position: point,
                title: name,
                clickable: true,
                map: map1
   
            });
            var savedHTML = ""
            // The info window version with the "to here" form open
            to_htmls[i] = html + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() +
            // "(" + name + ")" + 
           '"/>';
            // The info window version with the "to here" form open
            from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
           '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
            // "(" + name + ")" + 
           '"/>';
            // The inactive version of the direction info
            html = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <a href="javascript:fromhere(' + i + ')">From here</a>';
            savedHTML = html;

            var infiwindow = new google.maps.InfoWindow({ content: html });
            //GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
            google.maps.event.addListener(marker, 'click', function() {
                infiwindow.open(map, marker);
            });
            // 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
            if ((i + 1) % 3 == 0) {
                side_bar_html += '<td class=googlemap><a href="javascript:myclick(' + i + ')">' + name + '</a><br />' + shtml + '</td>';
                side_bar_html += "</tr>"
                side_bar_html += "<tr>"
            }
            else
                side_bar_html += '<td class=googlemap><a href="javascript:myclick(' + i + ')">' + name + '</a><br />' + shtml + '</td>';
            i++;
            return marker;
        }


        // This function picks up the click and opens the corresponding info window
        function myclick(i) {
            scroll(0, 0);
            //map.setCenter(new GLatLng(lats[i], lngs[i]), zoomlevel[i]);
          
            map.setCenter(google.maps.LatLng(lats[i], lngs[i]));
            map.setZoom(zoomlevel[i]);
            var infiwindow = new google.maps.InfoWindow({ content: htmls[i] });
            infiwindow.open(map, gmarkers[i]);
            //gmarkers[i].openInfoWindowHtml(htmls[i]);
        }

        // functions that open the directions forms
        function tohere(i) {
            //gmarkers[i].openInfoWindowHtml(to_htmls[i]);
            var infiwindow = new google.maps.InfoWindow({ content: to_htmls[i] });
            infiwindow.open(map, gmarkers[i]);
        }
        function fromhere(i) {
            //gmarkers[i].openInfoWindowHtml(from_htmls[i]);
            var infiwindow = new google.maps.InfoWindow({ content: from_htmls[i] });
            infiwindow.open(map, gmarkers[i]);
        }

// create the map
//var map = new GMap2(document.getElementById("map"));
var latlng = new google.maps.LatLng(38.61687,-90.263672);

var browser = navigator.appName;
var b_version = navigator.appVersion;
var version = parseFloat(b_version);
//if (browser != "Microsoft Internet Explorer")
//    latlng = new google.maps.LatLng(36.62588, -93.29772);
//else
//    latlng = new google.maps.LatLng(50.62588, -118.29772);
var opt =
    {
    center: latlng,
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableAutoPan: false,
    navigationControl: true,
    navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
    mapTypeControl: true,
    mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }
};

//var map = new GMap2(document.getElementById("map"), opt);
var map = new google.maps.Map(document.getElementById("map"), opt);
//map.addControl(new GLargeMapControl());
//map.addControl(new GMapTypeControl());
//map.setCenter(new GLatLng( 43.907787,-79.359741), 5);
       

// Read the data from example.xml
//var request = GXmlHttp.create();
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
request.open("GET", "duroLocations2.xml", true);

request.onreadystatechange = function() {
    if (request.readyState == 4) {
        //var xmlDoc = GXml.parse(request.responseText);
        // obtain the array of markers and loop through it
        var xmlDoc;
        if (window.ActiveXObject) {
            var doc = new ActiveXObject('Microsoft.XMLDOM');
            doc.loadXML(request.responseText);
            xmlDoc = doc;
        } else if (window.DOMParser) {
            xmlDoc = (new DOMParser).parseFromString(request.responseText, 'text/xml');
        }
        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 google.maps.LatLng(lat, lng);
            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            var shtml = markers[i].getAttribute("shtml");
            //alert(label);
            // create the marker
            var marker = createMarker(point, label, html, shtml,map);
            //map.addOverlay(marker);
            lats[i] = lat;
            lngs[i] = lng;
            if (i % 3 == 0)
                zoomlevel[i] = 10;
            else
                zoomlevel[i] = 6;
        }
        // put the assembled side_bar_html contents into the side_bar div

        side_bar_html += "</tr></table>";
        document.getElementById("side_bar").innerHTML = side_bar_html;
        //alert(side_bar_html);
    }
}
request.send(null);
    //}

//    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

//}
//]]>
// </script>