Fixing PanZoomBar and Panel issues after #164.

For PanZoomBar, this fixes the slider behavior. Now the buttonclick listener argument also includes a buttonXY property, and PanZoomPanel does not need an Events instance for the zoombarDiv any more.
For Panel, this fixes events for panels outside the map. Just setting the element on the Events instance was no longer enough after e70569b2bb. Events::attachToElement is now used, and it needed to be modified to also work if the Events instance had no element previously.
Finally, I renamed the button property of the buttonclick listener argument to buttonElement, to not confuse it with the browser event button property, and added some more tests and documentation.

tests/Control/PanZoom.html

@@ -159,7 +159,6 @@
         };
 
         var delta, dir;
-        var evt = {which: 1}; // a fake left click
         var buttons = control.buttons;
         map.pan = function(dx, dy){
             t.eq([dx,dy],delta,"Panning " + dir + " sets right delta with slideRatio");
@@ -168,25 +167,25 @@
         //up
         var delta = [0, -50];
         var dir = "up";
-        evt.button = buttons[0];
+        var evt = {buttonElement: buttons[0]};
         control.onButtonClick.call(control, evt);
         
         //left
         var delta = [-125, 0];
         var dir = "left";
-        evt.button = buttons[1];
+        evt.buttonElement = buttons[1];
         control.onButtonClick.call(control, evt);
         
         //right
         var delta = [125, 0];
         var dir = "right";
-        evt.button = buttons[2];
+        evt.buttonElement = buttons[2];
         control.onButtonClick.call(control, evt);
         
         //down
         var delta = [0, 50];
         var dir = "down";
-        evt.button = buttons[3];
+        evt.buttonElement = buttons[3];
         control.onButtonClick.call(control, evt);
         
         map.destroy();

tests/Control/PanZoomBar.html

@@ -50,7 +50,7 @@
         t.eq(control.zoombarDiv, null, "zoombar div nullified.")
     }
 
-    function test_Control_PanZoomBar_divClick (t) {
+    function test_Control_PanZoomBar_onButtonClick (t) {
         t.plan(2);
         map = new OpenLayers.Map('map', {controls:[]});
         var layer = new OpenLayers.Layer.WMS("Test Layer",
@@ -59,16 +59,16 @@
         map.addLayer(layer);
         control = new OpenLayers.Control.PanZoomBar();
         map.addControl(control);
-        control.divClick({'xy': {'x': 0, 'y': 50}, which: 1});
+        control.onButtonClick({'buttonXY': {'x': 0, 'y': 50}, buttonElement: control.zoombarDiv});
         t.eq(map.zoom, 11, "zoom is correct on standard map");
 
         map.fractionalZoom = true;
-        control.divClick({'xy': {'x': 0, 'y': 49}, which: 1});
+        control.onButtonClick({'buttonXY': {'x': 0, 'y': 49}, buttonElement: control.zoombarDiv});
         t.eq(map.zoom.toFixed(3), '10.545', "zoom is correct on fractional zoom map");
 
     }
 
-    function test_Control_PanZoomBar_forceFixedZoomLevel_divClick(t){
+    function test_Control_PanZoomBar_forceFixedZoomLevel_onButtonClick(t){
         t.plan(1);
         map = new OpenLayers.Map('map', {
             controls: [],
@@ -84,12 +84,12 @@
         });
         map.addControl(control);
         
-        control.divClick({
-            'xy': {
+        control.onButtonClick({
+            'buttonXY': {
                 'x': 0,
                 'y': 49
             },
-            which: 1
+            buttonElement: control.zoombarDiv
         });
         t.eq(map.zoom, 11, "forceFixedZoomLevel makes sure that after a div click only fixed zoom levels are used even if the map has fractionalZoom");
     }     

tests/Control/Panel.html

@@ -322,6 +322,21 @@
 
         map.destroy();
     }
+    
+    function test_buttonclick(t) {
+        t.plan(4);
+        var map = new OpenLayers.Map('map');
+        var panel1 = new OpenLayers.Control.Panel();
+        var div = document.createElement("div");
+        var panel2 = new OpenLayers.Control.Panel({div: div});
+        map.addControls([panel1, panel2]);
+        
+        t.ok(map.events.listeners.buttonclick, "buttonclick event registered on map's Events instance for panel inside map");
+        t.ok(!panel1.events.element, "Panel inside map has no element on its Events instance");
+        t.ok(panel2.events.listeners.buttonclick, "buttonclick event registered on panel's Events instance if outside map")
+        t.ok(panel2.events.element === div, "Panel outside map has the panel's div as element on its Events instance");
+        
+    }
   </script>
 </head>
 <body>