bring in code from old switcher.js to make the switcher tabs prettier. unfortunately, they refuse to right-align. If i wasnt as cracked-out as I am right now, i would continue plugging away. As it is, however, my faculties are waning. Off to bed.

git-svn-id: http://svn.openlayers.org/trunk/openlayers@86 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Control/LayerSwitcher.js

@@ -36,6 +36,19 @@ OpenLayers.Control.LayerSwitcher.prototype =
     draw: function() {
         // initialize our internal div
         OpenLayers.Control.prototype.draw.apply(this);
+
+        this.div.style.position = "absolute";
+        this.div.style.top = 50;
+        this.div.style.right = 100;
+        this.div.style.fontFamily = "sans-serif";
+        this.div.style.color = "white";
+        this.div.style.fontWeight = "bold";
+        this.div.style.marginTop = "3px";
+        this.div.style.marginLeft = "3px";
+        this.div.style.marginBottom = "3px";
+        this.div.style.fontSize="smaller";   
+        this.div.style.width = "10em";
+
         this.map.events.register("addlayer", this, this.redraw);
         return this.redraw();    
     },
@@ -49,11 +62,8 @@ OpenLayers.Control.LayerSwitcher.prototype =
         //clear out previous incarnation of LayerSwitcher tabs
         this.div.innerHTML = "";
     
-        var ulCoord = new OpenLayers.Pixel(this.map.div.clientWidth - 200, 4);
         for( var i = 0; i < this.map.layers.length; i++) {
-            var tab = this.createTab(i, ulCoord);
+            this.addTab(this.map.layers[i]);
-            this.div.appendChild(tab);
-            ulCoord = ulCoord.add(0, 35);
         }
         return this.div;
     },
@@ -62,9 +72,9 @@ OpenLayers.Control.LayerSwitcher.prototype =
     * @param {event} evt
     */
     singleClick: function(evt) {
-        var visible = this.map.layers[this.layerindex].getVisibility();
+        var visible = this.layer.getVisibility();
         OpenLayers.Control.LayerSwitcher.setTabActivation(this, !visible);
-        this.map.layers[this.layerindex].setVisibility(!visible);
+        this.layer.setVisibility(!visible);
         Event.stop(evt);
     },
     
@@ -78,35 +88,49 @@ OpenLayers.Control.LayerSwitcher.prototype =
     /** 
     * @private
     * 
-    * @param {int} index
+    * @param {OpenLayers.Layer} layer
-    * @param {OpenLayers.Pixel} ulCoord
-    * 
-    * @returns New tab (div) with layer information inside
-    * @type DOMElement
     */            
-    createTab: function(index, ulCoord) {
+    addTab: function(layer) {
-    
-        var layer = this.map.layers[index];
-    
-        var divID = "LayerSwitcher_" + layer.name + "_Tab";
-        var div = OpenLayers.Util.createDiv(divID, 
-                                            ulCoord,
-                                            new OpenLayers.Size(200, 20));
-        
-        div.innerHTML = layer.name;
-        div.style.padding = "5px";
-        
-        //add references onto the div for use in event handlers
-        div.layerindex = index;
-        div.map = this.map;
 
-        div.ondblclick = this.doubleClick.bindAsEventListener(div);
+        // Outer DIV - for Rico Corners
-        div.onmousedown = this.singleClick.bindAsEventListener(div);
+        //
+        var backdropLabelOuter = document.createElement('div');
+        backdropLabelOuter.id = "LayerSwitcher_" + layer.name + "_Tab";
+        backdropLabelOuter.style.marginTop = "4px";
+        backdropLabelOuter.style.marginBottom = "4px";
         
-        OpenLayers.Control.LayerSwitcher.setTabActivation(div, 
+        // Inner Label - for Rico Corners
+        //
+        var backdropLabel = document.createElement('p');
+        backdropLabel.innerHTML = layer.name;
+        backdropLabel.style.marginTop = "0px";
+        backdropLabel.style.marginBottom = "0px";
+        backdropLabel.style.paddingLeft = "10px";
+        backdropLabel.style.paddingRight = "10px";
+        
+        // add reference to layer onto the div for use in event handlers
+        backdropLabel.layer = layer;
+
+        // set event handlers
+        backdropLabel.ondblclick = 
+            this.doubleClick.bindAsEventListener(backdropLabel);
+        backdropLabel.onmousedown = 
+            this.singleClick.bindAsEventListener(backdropLabel);
+
+        
+        // add label to div
+        backdropLabelOuter.appendChild(backdropLabel);
+        
+        // add div to main LayerSwitcher Div
+        this.div.appendChild(backdropLabelOuter);
+
+        Rico.Corner.round(backdropLabelOuter, {corners: "tl bl",
+                                      bgColor: "transparent",
+                                      color: "white",
+                                      blend: false});
+
+        OpenLayers.Control.LayerSwitcher.setTabActivation(backdropLabel, 
                                                         layer.getVisibility());
-                                                        
-        return div;
     },
 
 
@@ -122,12 +146,9 @@ OpenLayers.Control.LayerSwitcher.prototype =
 */
 OpenLayers.Control.LayerSwitcher.setTabActivation = function(div, activate) {
 
-    div.style.backgroundColor = (activate) ?
+    var color = (activate) ? OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR
-        OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR
+                           : OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR;
-        : OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR;
 
-    div.style.color = (activate) ?
+    Rico.Corner.changeColor(div, color);
-        OpenLayers.Control.LayerSwitcher.NONACTIVE_COLOR
-        : OpenLayers.Control.LayerSwitcher.ACTIVE_COLOR;
 };