OverlayMessage = function(container) {
    // Terminology:
    // +-----------------+
    // |wrapper          |
    // |+---------------+|
    // ||container      ||
    // ||   +-------+   ||
    // ||   |overlay|   ||
    // ||   +-------+   ||
    // ||               ||
    // |+---------------+|
    // +-----------------+

    // Get the parent.
    var parent = container.parentNode;

    // Make the wrapper div.
    var wrapper = document.createElement('div');
    wrapper.style.cssText = container.style.cssText;
    parent.insertBefore(wrapper, container);

    // Move the container into the wrapper.
    parent.removeChild(container);
    wrapper.appendChild(container);
    container.style.cssText = 'position: relative; width: 100%; height: 100%;';

    // Add the overlay div.
    this.overlay = document.createElement('div');
    wrapper.appendChild(this.overlay);
    this.visibleStyle = 'position: relative; top: -55%; background-color: ' + OverlayMessage.backgroundColor + '; width: 40%; text-align: center; margin-left: auto; margin-right: auto; padding: 2em; border: 0.05in solid ' + OverlayMessage.borderColor + '; z-index: 100; opacity: .75; filter: alpha(opacity=75);';
    this.invisibleStyle = 'display: none;';
    this.overlay.style.cssText = this.invisibleStyle;
};


OverlayMessage.backgroundColor = '#f3f3f3';
OverlayMessage.borderColor = '#999';


OverlayMessage.prototype.Set = function(message) {
    this.overlay.innerHTML = message;
    this.overlay.style.cssText = this.visibleStyle;
};


OverlayMessage.prototype.Clear = function() {
    this.overlay.style.cssText = this.invisibleStyle;
};


OverlayMessage.SetBackgroundColor = function(color) {
    OverlayMessage.backgroundColor = color;
};


OverlayMessage.SetBorderColor = function(color) {
    OverlayMessage.borderColor = color;
};



// remove the loading message when the page has finished loading
function clearmessage() {
    om.Clear();
}


var gmarkers = [];


// added by Jason
var map;
var gdir;
var geocoder = null;
var addressMarker;
//



function mapload() {
    if (GBrowserIsCompatible()) {

        var map = new GMap2(document.getElementById("map"));
        var OMap = new GOverviewMapControl();
        map.addControl(OMap);
       // OMap.hide(true);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(officeLon, officeLat), 15);
        var baseIconLarge = new GIcon();
        baseIconLarge.image = "/images/icons/kfOffice.png";
        baseIconLarge.shadow = "/library/images/shadow50.png";
        baseIconLarge.iconSize = new GSize(20, 34);
        baseIconLarge.shadowSize = new GSize(37, 34);
        baseIconLarge.iconAnchor = new GPoint(9, 34);
        baseIconLarge.infoWindowAnchor = new GPoint(9, 2);

        baseIconLarge.imageMap = [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5, 19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14, 21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0];

        var baseIconSmall = new GIcon();
        baseIconSmall.image = "/images/icons/kfOffice.png";
        baseIconSmall.shadow = "/library/images/shadow20.png";
        baseIconSmall.iconSize = new GSize(12, 20);
        baseIconSmall.shadowSize = new GSize(22, 20);
        baseIconSmall.iconAnchor = new GPoint(6, 20);
        baseIconSmall.infoWindowAnchor = new GPoint(5, 1);

        baseIconSmall.imageMap = [4, 0, 0, 4, 0, 7, 3, 11, 4, 19, 7, 19, 8, 11, 11, 7, 11, 4, 7, 0];




        function createMarker(point, iconname, info) {

            if (iconname.getAttribute("size") == 'large')
                var icon = new GIcon(baseIconLarge);
            else
                var icon = new GIcon(baseIconSmall);

            icon.image = iconname.getAttribute("image");
            var marker = new GMarker(point, icon);



            var directions = "<form method=\'GET\' style=\'margin: 5px 0px 0px 0px;\' action=\'http://maps.google.co.uk/maps\' " +
					"target=\'_blank\'><span style=\'font-size: 11px; color: #888\'>Enter your postcode to get " +
					"directions to here:<br /></span><input type=text name=saddr size=20 " +
					"style=\'font-size: 10pt\'><input type=hidden name=daddr " +
					"value=\'" + info.getAttribute("address") + "\'> <input type=submit value=\'Go\' " +
					"style=\'padding: 0px\'><input type=hidden name=hl " +
					"value=en></form>";

            // Show this marker's index in the info window when it is clicked
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml('<div style="width: 200px;"><H1>' + info.getAttribute("name") + '</H1>' + info.getAttribute("address") + '<br />' + info.getAttribute("phone") + '<br />' + '<a href=\"' + info.getAttribute("url") + '\"> View the ' + info.getAttribute("name") + ' website</a>' + '<br />' + '<a href=\"' + info.getAttribute("url2") + '\">' + info.getAttribute("url2name") + '</a>' + directions + '<br style="clear: both;"></div>');

            });






            return marker;
        }


        var request = GXmlHttp.create();

        // jason - get xml from querystring e.g ?xml=xxxxxx.xml  
        var fullURL = parent.document.URL
        //check to see if querystring exists to load the right xml file



        //alert("load default");
        request.open("GET", "/office-locator/sales.xml", true);



        //request.open("GET", "kfofficedatav2.xml", true);
        request.onreadystatechange = function() {

            if (request.readyState == 4) {
                var xmlDoc = request.responseXML;
                // obtain the array of markers and loop through it
                var points = xmlDoc.documentElement.getElementsByTagName("point");
                var icons = xmlDoc.documentElement.getElementsByTagName("icon");
                var info = xmlDoc.documentElement.getElementsByTagName("info");

                for (var i = 0; i < points.length; i++) {
                    // obtain the attribues of each marker
                    var lat = parseFloat(points[i].getAttribute("lat"));
                    var lng = parseFloat(points[i].getAttribute("lng"));
                    var point = new GLatLng(lat, lng);

                    // create the marker
                    var marker = createMarker(point, icons[i], info[i]);
                    map.addOverlay(marker);
                }
            }
            // put the assembled sidebar_html contents into the sidebar div

            //document.getElementById("dropdown").innerHTML = select_html;


        }
        request.send(null);
    }

    else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
    }

}