diff --git a/lib/OpenLayers/Control/LayerSwitcher.js b/lib/OpenLayers/Control/LayerSwitcher.js
index 67dc3f484a..c0752604da 100644
--- a/lib/OpenLayers/Control/LayerSwitcher.js
+++ b/lib/OpenLayers/Control/LayerSwitcher.js
@@ -3,27 +3,28 @@
  * See license.txt in the OpenLayers distribution or repository for the
  * full text of the license. */
 
-/** 
+/**
  * @requires OpenLayers/Control.js
  * @requires OpenLayers/Lang.js
  * @requires OpenLayers/Console.js
+ * @requires OpenLayers/Util.js
  * @requires OpenLayers/Events/buttonclick.js
  */
 
 /**
  * Class: OpenLayers.Control.LayerSwitcher
- * The LayerSwitcher control displays a table of contents for the map. This 
+ * The LayerSwitcher control displays a table of contents for the map. This
  * allows the user interface to switch between BaseLasyers and to show or hide
- * Overlays. By default the switcher is shown minimized on the right edge of 
+ * Overlays. By default the switcher is shown minimized on the right edge of
  * the map, the user may expand it by clicking on the handle.
  *
- * To create the LayerSwitcher outside of the map, pass the Id of a html div 
+ * To create the LayerSwitcher outside of the map, pass the Id of a html div
  * as the first argument to the constructor.
- * 
+ *
  * Inherits from:
  *  - <OpenLayers.Control>
  */
-OpenLayers.Control.LayerSwitcher = 
+OpenLayers.Control.LayerSwitcher =
   OpenLayers.Class(OpenLayers.Control, {
 
     /**
@@ -37,104 +38,103 @@ OpenLayers.Control.LayerSwitcher =
      */
     roundedCorner: false,
 
-    /**  
+    /**
      * APIProperty: roundedCornerColor
      * {String} The color of the rounded corners, only applies if roundedCorner
      *     is true, defaults to "darkblue".
      */
     roundedCornerColor: "darkblue",
-    
-    /**  
-     * Property: layerStates 
-     * {Array(Object)} Basically a copy of the "state" of the map's layers 
+
+    /**
+     * 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} 
+     * {DOMElement}
      */
     layersDiv: null,
-    
-    /** 
+
+    /**
      * Property: baseLayersDiv
      * {DOMElement}
      */
     baseLayersDiv: null,
 
-    /** 
+    /**
      * Property: baseLayers
      * {Array(Object)}
      */
     baseLayers: null,
-    
-    
-    /** 
+
+
+    /**
      * Property: dataLbl
-     * {DOMElement} 
+     * {DOMElement}
      */
     dataLbl: null,
-    
-    /** 
+
+    /**
      * Property: dataLayersDiv
-     * {DOMElement} 
+     * {DOMElement}
      */
     dataLayersDiv: null,
 
-    /** 
+    /**
      * Property: dataLayers
-     * {Array(Object)} 
+     * {Array(Object)}
      */
     dataLayers: null,
 
 
-    /** 
+    /**
      * Property: minimizeDiv
-     * {DOMElement} 
+     * {DOMElement}
      */
     minimizeDiv: null,
 
-    /** 
+    /**
      * Property: maximizeDiv
-     * {DOMElement} 
+     * {DOMElement}
      */
     maximizeDiv: null,
-    
+
     /**
      * APIProperty: ascending
-     * {Boolean} 
+     * {Boolean}
      */
     ascending: true,
- 
+
     /**
      * Constructor: OpenLayers.Control.LayerSwitcher
-     * 
+     *
      * Parameters:
      * options - {Object}
      */
     initialize: function(options) {
         OpenLayers.Control.prototype.initialize.apply(this, arguments);
         this.layerStates = [];
-        
+
         if(this.roundedCorner) {
             OpenLayers.Console.warn('roundedCorner option is deprecated');
         }
     },
 
     /**
-     * APIMethod: destroy 
-     */    
+     * APIMethod: destroy
+     */
     destroy: function() {
-        
-        //clear out layers info and unregister their events 
+
+        //clear out layers info and unregister their events
         this.clearLayersArray("base");
         this.clearLayersArray("data");
-        
+
         this.map.events.un({
             buttonclick: this.onButtonClick,
             addlayer: this.redraw,
@@ -144,15 +144,15 @@ OpenLayers.Control.LayerSwitcher =
             scope: this
         });
         this.events.unregister("buttonclick", this, this.onButtonClick);
-        
+
         OpenLayers.Control.prototype.destroy.apply(this, arguments);
     },
 
-    /** 
+    /**
      * Method: setMap
      *
      * Properties:
-     * map - {<OpenLayers.Map>} 
+     * map - {<OpenLayers.Map>}
      */
     setMap: function(map) {
         OpenLayers.Control.prototype.setMap.apply(this, arguments);
@@ -176,9 +176,9 @@ OpenLayers.Control.LayerSwitcher =
      * Method: draw
      *
      * Returns:
-     * {DOMElement} A reference to the DIV DOMElement containing the 
+     * {DOMElement} A reference to the DIV DOMElement containing the
      *     switcher tabs.
-     */  
+     */
     draw: function() {
         OpenLayers.Control.prototype.draw.apply(this);
 
@@ -191,7 +191,7 @@ OpenLayers.Control.LayerSwitcher =
         }
 
         // populate div with current info
-        this.redraw();    
+        this.redraw();
 
         return this.div;
     },
@@ -224,13 +224,13 @@ OpenLayers.Control.LayerSwitcher =
         }
     },
 
-    /** 
+    /**
      * 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}  
+     * layersType - {String}
      */
     clearLayersArray: function(layersType) {
         this[layersType + "LayersDiv"].innerHTML = "";
@@ -241,9 +241,9 @@ OpenLayers.Control.LayerSwitcher =
     /**
      * 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. 
+     * {Boolean} The layer state changed since the last redraw() call.
      */
     checkRedraw: function() {
         var redraw = false;
@@ -254,41 +254,41 @@ OpenLayers.Control.LayerSwitcher =
             for (var i=0, len=this.layerStates.length; i<len; 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) || 
+                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 
+     *     control to display that state. Groups base layers into a
      *     radio-button group and lists each data layer with a checkbox.
      *
-     * Returns: 
+     * Returns:
      * {DOMElement} A reference to the DIV DOMElement containing the control
-     */  
+     */
     redraw: function() {
-        //if the state hasn't changed since last redraw, no need 
+        //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; 
-        } 
+        if (!this.checkRedraw()) {
+            return this.div;
+        }
 
-        //clear out previous layers 
+        //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
@@ -298,12 +298,12 @@ OpenLayers.Control.LayerSwitcher =
         for (var i=0; i <len; i++) {
             var layer = this.map.layers[i];
             this.layerStates[i] = {
-                'name': layer.name, 
+                'name': layer.name,
                 'visibility': layer.visibility,
                 'inRange': layer.inRange,
                 'id': layer.id
             };
-        }    
+        }
 
         var layers = this.map.layers.slice();
         if (!this.ascending) { layers.reverse(); }
@@ -317,16 +317,22 @@ OpenLayers.Control.LayerSwitcher =
                     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 = this.id + "_input_" + layer.name;
+                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;
@@ -339,9 +345,11 @@ OpenLayers.Control.LayerSwitcher =
                 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;
@@ -350,12 +358,12 @@ OpenLayers.Control.LayerSwitcher =
                     labelSpan.style.color = "gray";
                 }
                 labelSpan.innerHTML = layer.name;
-                labelSpan.style.verticalAlign = (baseLayer) ? "bottom" 
+                labelSpan.style.verticalAlign = (baseLayer) ? "bottom"
                                                             : "baseline";
                 // create line break
                 var br = document.createElement("br");
-    
-                
+
+
                 var groupArray = (baseLayer) ? this.baseLayers
                                              : this.dataLayers;
                 groupArray.push({
@@ -363,8 +371,8 @@ OpenLayers.Control.LayerSwitcher =
                     'inputElem': inputElem,
                     'labelSpan': labelSpan
                 });
-                                                     
-    
+
+
                 var groupDiv = (baseLayer) ? this.baseLayersDiv
                                            : this.dataLayersDiv;
                 groupDiv.appendChild(inputElem);
@@ -374,24 +382,24 @@ OpenLayers.Control.LayerSwitcher =
         }
 
         // if no overlays, dont display the overlay label
-        this.dataLbl.style.display = (containsOverlays) ? "" : "none";        
-        
+        this.dataLbl.style.display = (containsOverlays) ? "" : "none";
+
         // if no baselayers, dont display the baselayer label
-        this.baseLbl.style.display = (containsBaseLayers) ? "" : "none";        
+        this.baseLbl.style.display = (containsBaseLayers) ? "" : "none";
 
         return this.div;
     },
 
-    /** 
+    /**
      * Method: updateMap
      * Cycles through the loaded data and base layer input arrays and makes
-     *     the necessary calls to the Map object such that that the map's 
-     *     visual state corresponds to what the user has selected in 
+     *     the necessary calls to the Map object such that that the map's
+     *     visual state corresponds to what the user has selected in
      *     the control.
      */
     updateMap: function() {
 
-        // set the newly selected base layer        
+        // set the newly selected base layer
         for(var i=0, len=this.baseLayers.length; i<len; i++) {
             var layerEntry = this.baseLayers[i];
             if (layerEntry.inputElem.checked) {
@@ -401,18 +409,18 @@ OpenLayers.Control.LayerSwitcher =
 
         // set the correct visibilities for the overlays
         for(var i=0, len=this.dataLayers.length; i<len; i++) {
-            var layerEntry = this.dataLayers[i];   
+            var layerEntry = this.dataLayers[i];
             layerEntry.layer.setVisibility(layerEntry.inputElem.checked);
         }
 
     },
 
-    /** 
+    /**
      * Method: maximizeControl
      * Set up the labels and divs for the control
-     * 
+     *
      * Parameters:
-     * e - {Event} 
+     * e - {Event}
      */
     maximizeControl: function(e) {
 
@@ -424,17 +432,17 @@ OpenLayers.Control.LayerSwitcher =
         this.showControls(false);
 
         if (e != null) {
-            OpenLayers.Event.stop(e);                                            
+            OpenLayers.Event.stop(e);
         }
     },
-    
-    /** 
+
+    /**
      * Method: minimizeControl
-     * Hide all the contents of the control, shrink the size, 
+     * Hide all the contents of the control, shrink the size,
      *     add the maximize icon
      *
      * Parameters:
-     * e - {Event} 
+     * e - {Event}
      */
     minimizeControl: function(e) {
 
@@ -448,7 +456,7 @@ OpenLayers.Control.LayerSwitcher =
         this.showControls(true);
 
         if (e != null) {
-            OpenLayers.Event.stop(e);                                            
+            OpenLayers.Event.stop(e);
         }
     },
 
@@ -456,7 +464,7 @@ OpenLayers.Control.LayerSwitcher =
      * Method: showControls
      * Hide/Show all LayerSwitcher controls depending on whether we are
      *     minimized or not
-     * 
+     *
      * Parameters:
      * minimize - {Boolean}
      */
@@ -467,14 +475,14 @@ OpenLayers.Control.LayerSwitcher =
 
         this.layersDiv.style.display = minimize ? "none" : "";
     },
-    
-    /** 
+
+    /**
      * Method: loadContents
      * Set up the labels and divs for the control
      */
     loadContents: function() {
 
-        // layers list div        
+        // layers list div
         this.layersDiv = document.createElement("div");
         this.layersDiv.id = this.id + "_layersDiv";
         OpenLayers.Element.addClass(this.layersDiv, "layersDiv");
@@ -482,14 +490,14 @@ OpenLayers.Control.LayerSwitcher =
         this.baseLbl = document.createElement("div");
         this.baseLbl.innerHTML = OpenLayers.i18n("Base Layer");
         OpenLayers.Element.addClass(this.baseLbl, "baseLbl");
-        
+
         this.baseLayersDiv = document.createElement("div");
         OpenLayers.Element.addClass(this.baseLayersDiv, "baseLayersDiv");
 
         this.dataLbl = document.createElement("div");
         this.dataLbl.innerHTML = OpenLayers.i18n("Overlays");
         OpenLayers.Element.addClass(this.dataLbl, "dataLbl");
-        
+
         this.dataLayersDiv = document.createElement("div");
         OpenLayers.Element.addClass(this.dataLayersDiv, "dataLayersDiv");
 
@@ -503,8 +511,8 @@ OpenLayers.Control.LayerSwitcher =
             this.layersDiv.appendChild(this.dataLayersDiv);
             this.layersDiv.appendChild(this.baseLbl);
             this.layersDiv.appendChild(this.baseLayersDiv);
-        }    
- 
+        }
+
         this.div.appendChild(this.layersDiv);
 
         if(this.roundedCorner) {
@@ -520,29 +528,29 @@ OpenLayers.Control.LayerSwitcher =
         // maximize button div
         var img = OpenLayers.Util.getImageLocation('layer-switcher-maximize.png');
         this.maximizeDiv = OpenLayers.Util.createAlphaImageDiv(
-                                    "OpenLayers_Control_MaximizeDiv", 
-                                    null, 
-                                    null, 
-                                    img, 
+                                    "OpenLayers_Control_MaximizeDiv",
+                                    null,
+                                    null,
+                                    img,
                                     "absolute");
         OpenLayers.Element.addClass(this.maximizeDiv, "maximizeDiv olButton");
         this.maximizeDiv.style.display = "none";
-        
+
         this.div.appendChild(this.maximizeDiv);
 
         // minimize button div
         var img = OpenLayers.Util.getImageLocation('layer-switcher-minimize.png');
         this.minimizeDiv = OpenLayers.Util.createAlphaImageDiv(
-                                    "OpenLayers_Control_MinimizeDiv", 
-                                    null, 
-                                    null, 
-                                    img, 
+                                    "OpenLayers_Control_MinimizeDiv",
+                                    null,
+                                    null,
+                                    img,
                                     "absolute");
         OpenLayers.Element.addClass(this.minimizeDiv, "minimizeDiv olButton");
         this.minimizeDiv.style.display = "none";
 
         this.div.appendChild(this.minimizeDiv);
     },
-    
+
     CLASS_NAME: "OpenLayers.Control.LayerSwitcher"
 });
diff --git a/tests/Control/LayerSwitcher.html b/tests/Control/LayerSwitcher.html
index 0094e77108..c81a77934a 100644
--- a/tests/Control/LayerSwitcher.html
+++ b/tests/Control/LayerSwitcher.html
@@ -88,13 +88,13 @@
         control = new OpenLayers.Control.LayerSwitcher();
         map.addControl(control);
 
-        var wmsInput = OpenLayers.Util.getElement(control.id + "_input_" + layer.name);
+        var wmsInput = control.div.childNodes[0].childNodes[1].childNodes[0];
         t.ok(wmsInput != null, "correctly makes an input for wms layer");
         t.eq(wmsInput.type, "radio", "wms correctly made a radio button");
         t.eq(wmsInput.name, control.id + "_baseLayers", "wms correctly named");
         t.eq(wmsInput.value, layer.name, "wms correctly valued");
         
-        var markersInput = OpenLayers.Util.getElement(control.id + "_input_" + markers.name);
+        var markersInput = control.div.childNodes[0].childNodes[3].childNodes[0];
         t.ok(markersInput != null, "correctly makes an input for markers layer");
         t.eq(markersInput.type, "checkbox", "wms correctly made a radio button");
         t.eq(markersInput.name, markers.name, "wms correctly named");
@@ -191,7 +191,54 @@
         t.eq(control.div.childNodes[0].childNodes[0].style.display, "" , "Base layer display on when visble base layer");
     }
 
+    // See e.g. https://github.com/openlayers/openlayers/issues/866
+    function test_Control_LayerSwitcher_validIds(t){
+        t.plan(2);
 
+        // setup
+        var layername = "Name with spaces & illegal characters * + ~ ` ' ? )",
+            map = new OpenLayers.Map("map", {
+                controls: [
+                    new OpenLayers.Control.LayerSwitcher()
+                ],
+                layers: [
+                    new OpenLayers.Layer.WMS(
+                        layername,
+                        "../../img/blank.gif"
+                    ),
+                    // add another layer with the same name, the generated id
+                    // must be different
+                    new OpenLayers.Layer.WMS(
+                        layername,
+                        "../../img/blank.gif"
+                    )
+                ]
+            });
+
+        var baselayerDiv = map.controls[0].div.childNodes[0].childNodes[1],
+            firstGeneratedInputId = baselayerDiv.childNodes[0].id,
+            secondGeneratedInputId = baselayerDiv.childNodes[1].id,
+            // legal ids start with a letter and are followed only by word
+            // characters (letters, digits, and underscores) plus the dash (-)
+            // This is only a subset of all allowed charcters inside of ids.
+            allowedIdChars = (/^[a-zA-Z]{1}[\w-]*$/g);
+
+        // tests
+        // validity
+        t.ok(
+            allowedIdChars.test(firstGeneratedInputId),
+            "id only contains letters, digits, underscores and dashes. It " +
+                "starts with a letter."
+        );
+        // uniqueness
+        t.ok(
+            firstGeneratedInputId !== secondGeneratedInputId,
+            "generated ids are different even for equal layernames"
+        );
+
+        // teardown
+        map.destroy();
+    }
 
   </script>
 </head>