/* Copyright (c) 2006-2007 MetaCarta, Inc., published under the BSD license. * See http://svn.openlayers.org/trunk/openlayers/release-license.txt  * for the full text of the license. *//**  * @requires OpenLayers/Control.js *  * Class: OpenLayers.Control.LayerSwitcher * * Inherits from: *  - <OpenLayers.Control> */OpenLayers.Control.LayerSwitcher =   OpenLayers.Class(OpenLayers.Control, {    /**       * Property: activeColor     * {String}     */    activeColor: "darkblue",        /**       * Property: layerStates      * {Array(Object)} Basically a copy of the "state" of the map's layers      *     the last time the control was drawn. We have this in order to avoid     *     unnecessarily redrawing the control.     */    layerStates: null,      // DOM Elements      /**     * Property: layersDiv     * {DOMElement}      */    layersDiv: null,        /**      * Property: baseLayersDiv     * {DOMElement}     */    baseLayersDiv: null,    /**      * Property: baseLayers     * {Array(<OpenLayers.Layer>)}     */    baseLayers: null,            /**      * Property: dataLbl     * {DOMElement}      */    dataLbl: null,        /**      * Property: dataLayersDiv     * {DOMElement}      */    dataLayersDiv: null,    /**      * Property: dataLayers     * {Array(<OpenLayers.Layer>)}      */    dataLayers: null,    /**      * Property: minimizeDiv     * {DOMElement}      */    minimizeDiv: null,    /**      * Property: maximizeDiv     * {DOMElement}      */    maximizeDiv: null,        /**     * APIProperty: ascending     * {Boolean}      */    ascending: true,     /**     * Constructor: OpenLayers.Control.LayerSwitcher     *      * Parameters:     * options - {Object}     */    initialize: function(options) {        OpenLayers.Control.prototype.initialize.apply(this, arguments);        this.layerStates = [];    },    /**     * APIMethod: destroy      */        destroy: function() {                OpenLayers.Event.stopObservingElement(this.div);        OpenLayers.Event.stopObservingElement(this.minimizeDiv);        OpenLayers.Event.stopObservingElement(this.maximizeDiv);        //clear out layers info and unregister their events         this.clearLayersArray("base");        this.clearLayersArray("data");                this.map.events.unregister("addlayer", this, this.redraw);        this.map.events.unregister("changelayer", this, this.redraw);        this.map.events.unregister("removelayer", this, this.redraw);        this.map.events.unregister("changebaselayer", this, this.redraw);                OpenLayers.Control.prototype.destroy.apply(this, arguments);    },    /**      * Method: setMap     *     * Properties:     * map - {<OpenLayers.Map>}      */    setMap: function(map) {        OpenLayers.Control.prototype.setMap.apply(this, arguments);        this.map.events.register("addlayer", this, this.redraw);        this.map.events.register("changelayer", this, this.redraw);        this.map.events.register("removelayer", this, this.redraw);        this.map.events.register("changebaselayer", this, this.redraw);    },    /**     * Method: draw     *     * Returns:     * {DOMElement} A reference to the DIV DOMElement containing the      *     switcher tabs.     */      draw: function() {        OpenLayers.Control.prototype.draw.apply(this);        // create layout divs        this.loadContents();        // set mode to minimize        if(!this.outsideViewport) {            this.minimizeControl();        }        // populate div with current info        this.redraw();            return this.div;    },    /**      * Method: clearLayersArray     * User specifies either "base" or "data". we then clear all the     *     corresponding listeners, the div, and reinitialize a new array.     *      * Parameters:     * layersType - {String}       */    clearLayersArray: function(layersType) {        var layers = this[layersType + "Layers"];        if (layers) {            for(var i=0; i < layers.length; i++) {                var layer = layers[i];                OpenLayers.Event.stopObservingElement(layer.inputElem);                OpenLayers.Event.stopObservingElement(layer.labelSpan);            }        }        this[layersType + "LayersDiv"].innerHTML = "";        this[layersType + "Layers"] = [];    },    /**     * Method: checkRedraw     * Checks if the layer state has changed since the last redraw() call.     *      * Returns:     * {Boolean} The layer state changed since the last redraw() call.      */    checkRedraw: function() {        var redraw = false;        if ( !this.layerStates.length ||             (this.map.layers.length != this.layerStates.length) ) {            redraw = true;        } else {            for (var i=0; i < this.layerStates.length; i++) {                var layerState = this.layerStates[i];                var layer = this.map.layers[i];                if ( (layerState.name != layer.name) ||                      (layerState.inRange != layer.inRange) ||                      (layerState.id != layer.id) ||                      (layerState.visibility != layer.visibility) ) {                    redraw = true;                    break;                }                }        }            return redraw;    },        /**      * Method: redraw     * Goes through and takes the current state of the Map and rebuilds the     *     control to display that state. Groups base layers into a      *     radio-button group and lists each data layer with a checkbox.     *     * Returns:      * {DOMElement} A reference to the DIV DOMElement containing the control     */      redraw: function() {        //if the state hasn't changed since last redraw, no need         // to do anything. Just return the existing div.        if (!this.checkRedraw()) {             return this.div;         }         //clear out previous layers         this.clearLayersArray("base");        this.clearLayersArray("data");                var containsOverlays = false;        var containsBaseLayers = false;                // Save state -- for checking layer if the map state changed.        // We save this before redrawing, because in the process of redrawing        // we will trigger more visibility changes, and we want to not redraw        // and enter an infinite loop.        this.layerStates = new Array(this.map.layers.length);        for (var i = 0; i < this.map.layers.length; i++) {            var layer = this.map.layers[i];            this.layerStates[i] = {                'name': layer.name,                 'visibility': layer.visibility,                'inRange': layer.inRange,                'id': layer.id            };        }            var layers = this.map.layers.slice();        if (!this.ascending) { layers.reverse(); }        for( var i = 0; i < layers.length; i++) {            var layer = layers[i];            var baseLayer = layer.isBaseLayer;            if (layer.displayInLayerSwitcher) {                if (baseLayer) {                    containsBaseLayers = true;                } else {                    containsOverlays = true;                }                    // only check a baselayer if it is *the* baselayer, check data                //  layers if they are visible                var checked = (baseLayer) ? (layer == this.map.baseLayer)                                          : layer.getVisibility();                    // create input element                var inputElem = document.createElement("input");                inputElem.id = "input_" + layer.name;                inputElem.name = (baseLayer) ? "baseLayers" : layer.name;                inputElem.type = (baseLayer) ? "radio" : "checkbox";                inputElem.value = layer.name;                inputElem.checked = checked;                inputElem.defaultChecked = checked;                if (!baseLayer && !layer.inRange) {                    inputElem.disabled = true;                }                var context = {                    'inputElem': inputElem,                    'layer': layer,                    'layerSwitcher': this                }                OpenLayers.Event.observe(inputElem, "mouseup",                     OpenLayers.Function.bindAsEventListener(this.onInputClick,                                                            context)                );                                // create span                var labelSpan = document.createElement("span");                if (!baseLayer && !layer.inRange) {                    labelSpan.style.color = "gray";                }                labelSpan.innerHTML = layer.name;                labelSpan.style.verticalAlign = (baseLayer) ? "bottom"                                                             : "baseline";                OpenLayers.Event.observe(labelSpan, "click",                     OpenLayers.Function.bindAsEventListener(this.onInputClick,                                                            context)                );                // create line break                var br = document.createElement("br");                                    var groupArray = (baseLayer) ? this.baseLayers                                             : this.dataLayers;                groupArray.push({                    'layer': layer,                    'inputElem': inputElem,                    'labelSpan': labelSpan                });