[Control.Panel] place code creating the control markup in a separate function

lib/OpenLayers/Control/Panel.js

@@ -246,18 +246,14 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
         }
         this.controls = this.controls.concat(controls);
 
-        // Give each control a panel_div which will be used later.
-        // Access to this div is via the panel_div attribute of the 
-        // control added to the panel.
-        // Also, stop mousedowns and clicks, but don't stop mouseup,
-        // since they need to pass through.
         for (var i=0, len=controls.length; i<len; i++) {
-            var element = document.createElement("div");
+            var control = controls[i],
-            element.className = controls[i].displayClass + "ItemInactive olButton";
+                element = this.createControlMarkup(control);
-            controls[i].panel_div = element;
+            element.className = control.displayClass + "ItemInactive olButton";
-            if (controls[i].title != "") {
+            if (control.title != "") {
-                controls[i].panel_div.title = controls[i].title;
+                element.title = control.title;
             }
+            controls[i].panel_div = element;
         }
 
         if (this.map) { // map.addControl() has already been called on the panel
@@ -266,6 +262,40 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
         }
     },
 
+    /**
+     * APIMethod: createControlMarkup
+     * This function just creates a div for the control. If specific HTML
+     * markup is needed this function can be overridden in specific classes,
+     * or at panel instantiation time:
+     *
+     * Example:
+     * (code)
+     * var panel = new OpenLayers.Control.Panel({
+     *     defaultControl: control,
+     *     // ovverride createControlMarkup to create actual buttons
+     *     // including texts wrapped into span elements.
+     *     createControlMarkup: function(control) {
+     *         var button = document.createElement('button'),
+     *             span = document.createElement('span');
+     *         if (control.text) {
+     *             span.innerHTML = control.text;
+     *         }
+     *         return button;
+     *     }
+     *  });
+     * (end)
+     *
+     * Parameters:
+     * control - {<OpenLayers.Control>} The control to create the HTML
+     *     markup for.
+     *
+     * Returns:
+     * {DOMElement} The markup.
+     */
+    createControlMarkup: function(control) {
+        return document.createElement("div");
+    },
+   
     /**
      * Method: addControlsToMap
      * Only for internal use in draw() and addControls() methods.