/**
* Class: OpenLayers.Control.StyledLayerSwitcher
*
* Inherits from:
*  - <OpenLayers.Control.LayerSwitcher>
*/
OpenLayers.Control.StyledLayerSwitcher =
  OpenLayers.Class(OpenLayers.Control.LayerSwitcher, {

      /**  
      * Property: activeColor
      * {String}
      */

      activeColor: "#99BA34",
      /**
      * Constructor: OpenLayers.Control.PanZoomBar
      */
      initialize: function() {
          OpenLayers.Control.LayerSwitcher.prototype.initialize.apply(this, arguments);
      },

      /** 
      * Method: loadContents
      * Set up the labels and divs for the control
      */
      loadContents: function() {

          //configure main div
          this.div.className = "olLayerSwitcher_mainDiv";

          OpenLayers.Event.observe(this.div, "mouseup",
            OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
          OpenLayers.Event.observe(this.div, "click",
                      this.ignoreEvent);
          OpenLayers.Event.observe(this.div, "mousedown",
            OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
          OpenLayers.Event.observe(this.div, "dblclick", this.ignoreEvent);

          // layers list div
          this.layersDiv = document.createElement("div");
          this.layersDiv.className = "olLayerSwitcher_layersDiv";
          this.layersDiv.id = "layersDiv";

          this.baseLayersDiv = document.createElement("div");
          this.baseLayersDiv.className = "olLayerSwitcher_baseLayersDiv";

          this.dataLayersDiv = document.createElement("div");
          this.dataLayersDiv.className = "olLayerSwitcher_dataLayersDiv";

          if (this.ascending) {
              this.layersDiv.appendChild(this.baseLayersDiv);
              this.layersDiv.appendChild(this.dataLayersDiv);
          } else {
              this.layersDiv.appendChild(this.dataLayersDiv);
              this.layersDiv.appendChild(this.baseLayersDiv);
          }

          this.div.appendChild(this.layersDiv);


          // Corners
          /*        var corner_color;

        //  if (this.theme == "BorgerDk") {
          corner_color = "#99BA34";
          //  }
          //  else {
          //      corner_color = "#ABC2CA";
          //  }
          OpenLayers.Rico.Corner.round(this.div, { corners: "bl",
          bgColor: "transparent",
          color: corner_color,
          blend: false
          });
          */
          OpenLayers.Rico.Corner.changeOpacity(this.layersDiv, 0.75);

          // maximize button div
          var imgLocation = OpenLayers.Util.getImagesLocation();
          var sz = new OpenLayers.Size(207, 18);
          var img = imgLocation + 'layer-switcher-maximize.png';
          this.maximizeDiv = OpenLayers.Util.createAlphaImageDiv(
                                    "OpenLayers_Control_MaximizeDiv",
                                    null,
                                    sz,
                                    img,
                                    "absolute");
          this.maximizeDiv.style.top = "0px";
          this.maximizeDiv.style.right = "0px";
          this.maximizeDiv.style.left = "";
          this.maximizeDiv.style.display = "none";
          OpenLayers.Event.observe(this.maximizeDiv, "click",
          OpenLayers.Function.bindAsEventListener(this.maximizeControl, this)
        );

          this.div.appendChild(this.maximizeDiv);

          // minimize button div
          var img = imgLocation + 'layer-switcher-minimize.png';
          var sz = new OpenLayers.Size(207, 18);
          this.minimizeDiv = OpenLayers.Util.createAlphaImageDiv(
                                    "OpenLayers_Control_MinimizeDiv",
                                    null,
                                    sz,
                                    img,
                                    "absolute");
          this.minimizeDiv.style.top = "0px";
          this.minimizeDiv.style.right = "0px";
          this.minimizeDiv.style.left = "";
          this.minimizeDiv.style.display = "none";
          OpenLayers.Event.observe(this.minimizeDiv, "click",
          OpenLayers.Function.bindAsEventListener(this.minimizeControl, this)
        );

          this.div.appendChild(this.minimizeDiv);
      },

      /** 
      * Method: maximizeControl
      * Set up the labels and divs for the control
      * 
      * Parameters:
      * e - {Event} 
      */
      maximizeControl: function(e) {
          this.div.style.width = "207px"; //20em
          this.div.style.height = "";

          this.showControls(false);

          if (e != null) {
              OpenLayers.Event.stop(e);
          }
      },
      /** 
      * 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 + "lkm";
                  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 = "&nbsp;" + layer.name + "&nbsp;&nbsp;&nbsp;";
                  labelSpan.style.verticalAlign = (baseLayer) ? "3px"
                                                            : "3px";
                  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
                  });

                  // Choose the map or theme layerDIV
                  var groupDiv = (baseLayer) ? this.baseLayersDiv
                                             : this.dataLayersDiv;
                  groupDiv.appendChild(inputElem); // Add elements radiobutton or checkbox
                  groupDiv.appendChild(labelSpan);

                  if (layer.options.extra != null && layer.options.extra.legend != null) {
                      var legend = layer.options.extra.legend;
                      var legendImg = document.createElement("img");
                      legendImg.src = legend.src;
                      if (legend.style != null)
                          legendImg.style = legend.style;
                      if (legend.width != null)
                          legendImg.width = legend.width;
                      if (legend.height != null)
                          legendImg.height = legend.height;
                      groupDiv.appendChild(legendImg);
                  }

                  if (layer.options.extra != null && layer.options.extra.slider != null && layer.options.extra.slider.toString() == "true") {
                  	// base layer, append opacityslider
                      var initialOpacity = 100;
                      if (layer.options.opacity != null) {
                      	initialOpacity = layer.options.opacity * 100;
                      }

                      var sliderTrack = document.createElement("div");
                      sliderTrack.className = "horizontal_track";
                      sliderTrack.id = "horizontal_track" + layer.name;
                      groupDiv.appendChild(sliderTrack);

                      var sliderSlit = document.createElement("div");
                      sliderSlit.className = "horizontal_slit";
                      sliderTrack.appendChild(sliderSlit);
                      
                      var sliderDiv = document.createElement("div");
                      sliderDiv.className = "horizontal_slider";
                      sliderDiv.style.left = initialOpacity + "px";
                      sliderDiv.id = "horizontal_slider" + layer.name;
                      sliderTrack.appendChild(sliderDiv);

                      var sliderValue = document.createElement("hidden");
                      sliderValue.type = "text";
                      sliderValue.value = initialOpacity;
                      sliderValue.id = "sliderValue" + layer.name.toString() + "";
                      sliderValue.className = "value_display";

                      groupDiv.appendChild(sliderValue);

                      var sliderLayerRef = document.createElement("hidden");
                      sliderLayerRef.type = "text";
                      sliderLayerRef.value = initialOpacity;
                      sliderLayerRef.id = "" + layer.name.toString() + "";                      
                      groupDiv.appendChild(sliderLayerRef);
	
		      var code="document.getElementById('" + sliderDiv.id + "').onmousedown = function (event) {slide(event, 'horizontal', 100, 0, 100, 101, 0, '" + sliderValue.id + "', '" + sliderTrack.id + "', '" + sliderLayerRef.id + "'); };";
                      setTimeout(code, 0);                      
                  }

                  groupDiv.appendChild(br);
              }
          }

          return this.div;
      },      


      CLASS_NAME: "OpenLayers.Control.StyledLayerSwitcher"
  });