diff --git a/examples/sld.html b/examples/sld.html
index f64f54b97b..4667ba34b5 100644
--- a/examples/sld.html
+++ b/examples/sld.html
@@ -6,92 +6,9 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
     <link rel="stylesheet" href="style.css" type="text/css">
-    <script src="../lib/Firebug/firebug.js"></script>
+    <!--script src="../lib/Firebug/firebug.js"></script-->
     <script src="../lib/OpenLayers.js"></script>
-    <script type="text/javascript">
-        
-        var map, sld, gmlLayers;
-        var format = new OpenLayers.Format.SLD();
-        function init() {
-
-            map = new OpenLayers.Map('map');
-            map.addControl(new OpenLayers.Control.LayerSwitcher());
-
-            OpenLayers.loadURL("tasmania/sld-tasmania.xml", null, null, complete);
-
-        }
-        
-        function getDefaultStyle(sld, layerName) {
-            var styles = sld.namedLayers[layerName].userStyles;
-            var style;
-            for(var i=0; i<styles.length; ++i) {
-                style = styles[i];
-                if(style.isDefault) {
-                    break;
-                }
-            }
-            return style;
-        }
-
-        function complete(req) {
-
-            sld = format.read(req.responseXML || req.responseText);
-            var hoverStyle = sld.namedLayers["WaterBodies"].userStyles[1];
-            hoverStyle.defaultStyle = OpenLayers.Util.extend(
-                {}, OpenLayers.Feature.Vector.style["select"]
-            );
-
-            gmlLayers = [
-                // use the sld UserStyle named "Default Styler"
-                new OpenLayers.Layer.GML(
-                    "StateBoundaries",
-                    "tasmania/TasmaniaStateBoundaries.xml",
-                    {
-                        styleMap: new OpenLayers.StyleMap(
-                            getDefaultStyle(sld, "Land")
-                        ),
-                        isBaseLayer: true
-                    }
-                ),
-                new OpenLayers.Layer.GML(
-                    "Roads",
-                    "tasmania/TasmaniaRoads.xml",
-                    {styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "Roads"))}
-                ),
-                new OpenLayers.Layer.GML(
-                    "WaterBodies",
-                    "tasmania/TasmaniaWaterBodies.xml",
-                    {
-                        styleMap: new OpenLayers.StyleMap({
-                            "default": getDefaultStyle(sld, "WaterBodies"),
-                            "select": hoverStyle
-                        })
-                    }
-                ),
-                new OpenLayers.Layer.GML(
-                    "Cities",
-                    "tasmania/TasmaniaCities.xml",
-                    {styleMap: new OpenLayers.StyleMap(getDefaultStyle(sld, "Cities"))}
-                )
-            ];
-            
-            map.addLayers(gmlLayers);
-            map.zoomToExtent(new OpenLayers.Bounds(143,-39,150,-45));
-            
-            var hover = new OpenLayers.Control.SelectFeature(
-                gmlLayers[2], {hover: true}
-            );
-            map.addControl(hover);
-            hover.activate();
-        }
-        
-        // set a new style when the radio button changes
-        function setStyle(index) {
-            gmlLayers[2].styleMap.styles["default"] = sld.namedLayers["WaterBodies"].userStyles[index];
-            // change the style of the features of the WaterBodies layer
-            gmlLayers[2].redraw();
-        }
-    </script>
+    <script src="sld.js"></script>
   </head>
   <body onload="init()">
     <h1 id="title">Styled Layer Descriptor (SLD) Example</h1>
@@ -105,19 +22,10 @@ <h1 id="title">Styled Layer Descriptor (SLD) Example</h1>
     <p id="docs">This example uses a <a target="_blank" href="tasmania/sld-tasmania.xml">SLD
     file</a> to style the vector features. To construct layers that use styles
     from SLD, create a StyleMap for the layer that uses one of the userStyles in the
-    namedLayers object of the return from format.read().</p>
+    namedLayers object of the return from format.read(). Look at the <a href="sld.js">sld.js source</a>
+    to see how this is done.</p>
     <p>Select a new style for the WaterBodies layer below:</p>
-    <form>
-      <input type="radio" name="style" onclick="setStyle(this.value)" checked="checked" value="0">Default Styler (zoom in to see more features)</input><br>
-      <input type="radio" name="style" onclick="setStyle(this.value)" value="3">Styler Test PropertyIsEqualTo</input><br>
-      <input type="radio" name="style" onclick="setStyle(this.value)" value="4">Styler Test WATER_TYPE</input><br>
-      <input type="radio" name="style" onclick="setStyle(this.value)" value="5">Styler Test PropertyIsGreaterThanOrEqualTo</input><br>
-      <input type="radio" name="style" onclick="setStyle(this.value)" value="6">Styler Test PropertyIsLessThanOrEqualTo</input><br>
-      <input type="radio" name="style" onclick="setStyle(this.value)" value="7">Styler Test PropertyIsGreaterThan</input><br>
-      <input type="radio" name="style" onclick="setStyle(this.value)" value="8">Styler Test PropertyIsLessThan</input><br>
-      <input type="radio" name="style" onclick="setStyle(this.value)" value="9">Styler Test PropertyIsLike</input><br>
-      <input type="radio" name="style" onclick="setStyle(this.value)" value="10">Styler Test PropertyIsBetween</input><br>
-      <input type="radio" name="style" onclick="setStyle(this.value)" value="11">Styler Test FeatureId</input><br>
-    </form>
+    <ul id="style_chooser">
+    </ul>
   </body>
 </html>
diff --git a/examples/sld.js b/examples/sld.js
new file mode 100644
index 0000000000..21cb295a5d
--- /dev/null
+++ b/examples/sld.js
@@ -0,0 +1,99 @@
+var map, sld, waterBodies;
+var format = new OpenLayers.Format.SLD();
+function init() {
+
+    map = new OpenLayers.Map('map', {allOverlays: true});
+    var layers = createLayers();
+    map.addLayers(layers);
+
+    waterBodies = layers[2];
+    map.addControl(new OpenLayers.Control.SelectFeature(
+        waterBodies, {hover: true, autoActivate: true}
+    ));
+    map.addControl(new OpenLayers.Control.LayerSwitcher());
+
+    OpenLayers.loadURL("tasmania/sld-tasmania.xml", null, null, complete);
+}
+
+// handler for the loadURL function in the init method
+function complete(req) {
+    sld = format.read(req.responseXML || req.responseText);
+    buildStyleChooser();
+    setLayerStyles();
+    
+    map.zoomToExtent(new OpenLayers.Bounds(143,-39,150,-45));
+}
+
+function createLayers() {
+    // the name of each layer matches a NamedLayer name in the SLD document
+    var layerData = [{
+        name: "Land",
+        url: "tasmania/TasmaniaStateBoundaries.xml"
+    }, {
+        name: "Roads",
+        url: "tasmania/TasmaniaRoads.xml"
+    }, {
+        name: "WaterBodies",
+        url: "tasmania/TasmaniaWaterBodies.xml"
+    }, {
+        name: "Cities",
+        url: "tasmania/TasmaniaCities.xml"
+    }];
+
+    var layers = [];
+    for (var i=0,ii=layerData.length; i<ii; ++i) {
+        layers.push(new OpenLayers.Layer.Vector(
+            layerData[i].name, {
+                protocol: new OpenLayers.Protocol.HTTP({
+                    url: layerData[i].url,
+                    format: new OpenLayers.Format.GML.v2()
+                }),
+                strategies: [new OpenLayers.Strategy.Fixed()],
+                // empty style map, will be populated in setLayerStyles
+                styleMap: new OpenLayers.StyleMap()
+            }
+        ));
+    }
+    return layers;
+}
+
+function setLayerStyles() {
+    // set the default style for each layer from sld
+    for (var l in sld.namedLayers) {
+        var styles = sld.namedLayers[l].userStyles, style;
+        for (var i=0,ii=styles.length; i<ii; ++i) {
+            style = styles[i];
+            if (style.isDefault) {
+                map.getLayersByName(l)[0].styleMap.styles["default"] = style;
+                break;
+            }
+        }
+    }
+    // select style for mouseover on WaterBodies objects
+    waterBodies.styleMap.styles.select = sld.namedLayers["WaterBodies"].userStyles[1];
+}
+
+// add a radio button for each userStyle
+function buildStyleChooser() {
+    var styles = sld.namedLayers["WaterBodies"].userStyles;
+    var chooser = document.getElementById("style_chooser"), input, li;
+    for (var i=0,ii=styles.length; i<ii; ++i) {
+        input = document.createElement("input");
+        input.type = "radio";
+        input.name = "style";
+        input.value = i;
+        input.checked = i == 0;
+        input.onclick = function() { setStyle(this.value); };
+        li = document.createElement("li");
+        li.appendChild(input);
+        li.appendChild(document.createTextNode(styles[i].title));
+        chooser.appendChild(li);
+    }
+}
+
+// set a new style when the radio button changes
+function setStyle(index) {
+    waterBodies.styleMap.styles["default"] = sld.namedLayers["WaterBodies"].userStyles[index];
+    // apply the new style of the features of the Water Bodies layer
+    waterBodies.redraw();
+}
diff --git a/examples/tasmania/sld-tasmania.xml b/examples/tasmania/sld-tasmania.xml
index 0b174f0616..1c41225354 100644
--- a/examples/tasmania/sld-tasmania.xml
+++ b/examples/tasmania/sld-tasmania.xml
@@ -10,7 +10,7 @@
     <sld:Name>WaterBodies</sld:Name>
     <sld:UserStyle>
       <sld:Name>Default Styler</sld:Name>
-      <sld:Title>Default Styler</sld:Title>
+      <sld:Title>Default Styler (zoom in to see more objects)</sld:Title>
       <sld:Abstract></sld:Abstract>
       <sld:IsDefault>1</sld:IsDefault>
       <sld:FeatureTypeStyle>
