var GetToggleOverlayControl = function() {

    // A ToggleOverlayControl is a GControl that displays textual "Zoom In"
    // and "Zoom Out" buttons (as opposed to the iconic buttons used in
    // Google Maps).

    // We define the function first
    function ToggleOverlayControl() {
    }

    // To "subclass" the GControl, we set the prototype object to
    // an instance of the GControl object
    ToggleOverlayControl.prototype = new google.maps.Control();

    // Creates a one DIV for each of the buttons and places them in a container
    // DIV which is returned as our control element. We add the control to
    // to the map container and return the element for the map class to
    // position properly.
    ToggleOverlayControl.prototype.initialize = function(map) {

        var toggleoverlay = function(olay, button) {
            if (olay.isHidden()) {
                olay.show();
                button.style.backgroundColor = "rgb(255, 255, 255)";
                //button.className = "opaquebackground";
            } else {
                olay.hide();
                button.style.backgroundColor = "rgb(255, 255, 255)";
                //button.className = "clearbackground";
            }
        }

        var container = document.createElement("div");

        var paradeRouteDiv = document.createElement("div");
        this.setButtonStyle_(paradeRouteDiv);
        container.appendChild(paradeRouteDiv);
        paradeRouteDiv.appendChild(document.createTextNode("Parade Route"));
        google.maps.Event.addDomListener(paradeRouteDiv, "click", function() {
            toggleoverlay(rtexml, paradeRouteDiv);
        });

        var grandCommentaryDiv = document.createElement("div");
        this.setButtonStyle_(grandCommentaryDiv);
        container.appendChild(grandCommentaryDiv);
        grandCommentaryDiv.appendChild(document.createTextNode("Grandstands & Commentary"));
        google.maps.Event.addDomListener(grandCommentaryDiv, "click", function() {
            toggleoverlay(comxml, grandCommentaryDiv);
        });

        var toiletsFirstAidDiv = document.createElement("div");
        this.setButtonStyle_(toiletsFirstAidDiv);
        container.appendChild(toiletsFirstAidDiv);
        toiletsFirstAidDiv.appendChild(document.createTextNode("Toilets & First Aid"));
        google.maps.Event.addDomListener(toiletsFirstAidDiv, "click", function() {
            toggleoverlay(parxml, toiletsFirstAidDiv);
        });

        map.getContainer().appendChild(container);
        return container;
    }

    // By default, the control will appear in the top left corner of the
    // map with 7 pixels of padding.
    ToggleOverlayControl.prototype.getDefaultPosition = function() {
        return new google.maps.ControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(7, 7));
    }

    // Sets the proper CSS for the given button element.
    ToggleOverlayControl.prototype.setButtonStyle_ = function(button) {

        button.style.color = "black";
        button.style.backgroundColor = "rgb(255, 255, 255)";
        button.style.font = "small Arial";
        button.style.border = "1px solid black";
        button.style.padding = "2px 1px";
        button.style.marginBottom = "3px";
        button.style.textAlign = "center";
        button.style.width = "14em";
        button.style.cursor = "pointer";
    }

    return new ToggleOverlayControl();
}

var toggleoverlay = function(olay) {
    if (olay.isHidden()) {
        olay.show();
        olay.gotoDefaultViewport(map);
    } else {
        olay.hide();
    }
}