docs: 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.
          var len = this.map.layers.length;
          this.layerStates = new Array(len);
          for (var i=0; i <len; 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, len=layers.length; i<len; 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"),
                      // The input shall have an id attribute so we can use
                      // labels to interact with them.
                      inputId = OpenLayers.Util.createUniqueID(
                          this.id + "_input_"
                      );
  
                  inputElem.id = inputId;
                  inputElem.name = (baseLayer) ? this.id + "_baseLayers" : layer.name;
                  inputElem.type = (baseLayer) ? "radio" : "checkbox";
                  inputElem.value = layer.name;
                  inputElem.checked = checked;
                  inputElem.defaultChecked = checked;
                  inputElem.className = "olButton";
                  inputElem._layer = layer.id;
                  inputElem._layerSwitcher = this.id;
  
                  if (!baseLayer && !layer.inRange) {
                      inputElem.disabled = true;
                  }
  
                  // create span
                  var labelSpan = document.createElement("label");
                  // this isn't the DOM attribute 'for', but an arbitrary name we
                  // use to find the appropriate input element in <onButtonClick>
                  labelSpan["for"] = inputElem.id;
                  OpenLayers.Element.addClass(labelSpan, "labelSpan olButton");
                  labelSpan._layer = layer.id;
                  labelSpan._layerSwitcher = this.id;
                  if (!baseLayer && !layer.inRange) {
                      labelSpan.style.color = "gray";
                  }
                  labelSpan.innerHTML = layer.name;
                  labelSpan.style.verticalAlign = (baseLayer) ? "bottom"
                                                              : "baseline";
                  // create line break
                  var br = document.createElement("br");
  
  
                  var groupArray = (baseLayer) ? this.baseLayers
                                               : this.dataLayers;
                  groupArray.push({
                      'layer': layer,
                      'inputElem': inputElem,
                      'labelSpan': labelSpan
                  });
  
  
                  var groupDiv = (baseLayer) ? this.baseLayersDiv
                                             : this.dataLayersDiv;
                  groupDiv.appendChild(inputElem);
                  groupDiv.appendChild(labelSpan);
                  groupDiv.appendChild(br);
              }
          }
  
          // if no overlays, dont display the overlay label
          this.dataLbl.style.display = (containsOverlays) ? "" : "none";
  
          // if no baselayers, dont display the baselayer label
          this.baseLbl.style.display = (containsBaseLayers) ? "" : "none";
  
          return this.div;
      }