Some improvements to Control.PanZoomBar, mostly to make it work with the new graphics.

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

lib/OpenLayers/Control/PanZoomBar.js

@@ -8,9 +8,15 @@ OpenLayers.Control.PanZoomBar.X = 4;
 OpenLayers.Control.PanZoomBar.Y = 4;
 OpenLayers.Control.PanZoomBar.prototype = 
   Object.extend( new OpenLayers.Control.PanZoom(), {
-    // Array(...)
+    /** @type Array(...) */
     buttons: null,
 
+    /** @type int */
+    zoomStopWidth: 18,
+
+    /** @type int */
+    zoomStopHeight: 11,
+
     initialize: function() {
         OpenLayers.Control.PanZoom.prototype.initialize.apply(this, arguments);
         this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoomBar.X,
@@ -22,8 +28,8 @@ OpenLayers.Control.PanZoomBar.prototype =
     */
     draw: function(px) {
         // initialize our internal div
-        OpenLayers.Control.prototype.draw.apply(this);
+        OpenLayers.Control.prototype.draw.apply(this, arguments);
-        this.map.events.register("zoomend", this, this.moveZoomBar);
+        px = this.position;
 
         // place the controls
         this.buttons = new Array();
@@ -43,24 +49,26 @@ OpenLayers.Control.PanZoomBar.prototype =
         return this.div;
     },
     _addZoomBar:function(centered,sz) {
-        var zoomStopSize = 15;
+        /*** THIS METHOD IS A HAIRBALL AND SHOULD BE REFACTORED ***/
+        var zoomStopSize = this.zoomStopHeight;
         var slider = OpenLayers.Util.createImage("img/slider.png",
-                       new OpenLayers.Pixel(22,9), 
+                       new OpenLayers.Pixel(20,9), 
-                       centered.add(0, (this.map.getZoomLevels())*zoomStopSize), "absolute",
+                       centered.add(-1, (this.map.getZoomLevels())*zoomStopSize), "absolute",
                        "OpenLayers_Control_PanZoomBar_Slider");
         sz.h = zoomStopSize*(this.map.getZoomLevels()+1);
-        sz.w = 17;
+        sz.w = this.zoomStopWidth;
+
         var div = OpenLayers.Util.createDiv('OpenLayers_Control_PanZoomBar_Zoombar',centered,sz);
         div.style.backgroundImage = "url(img/zoombar.png)";
-        div.onmousedown  = this.divClick.bindAsEventListener(div);
+        div.onmousedown = this.divClick.bindAsEventListener(div);
-        div.onmousemove  = this.zoomBarDivDrag.bindAsEventListener(div);
         div.ondblclick  = this.doubleClick.bindAsEventListener(div);
         div.slider = slider;
         div.getMousePosition = this.getMousePosition;
         div.map = this.map;
         div.div = this.div;
         this.div.appendChild(div);
-        slider.startTop = div.style.top;
+
+        slider.startTop = parseInt(div.style.top);
         slider.getMousePosition = this.getMousePosition;
         slider.onmousedown = this.zoomBarDown.bindAsEventListener(slider);
         slider.onmousemove = this.zoomBarDrag.bindAsEventListener(slider);
@@ -68,10 +76,14 @@ OpenLayers.Control.PanZoomBar.prototype =
         slider.ondblclick  = this.doubleClick.bindAsEventListener(slider);
         slider.div = this.div;
         slider.map = this.map;
+        slider.zoomStopHeight = this.zoomStopHeight;
         slider.moveZoomBar = this.moveZoomBar;
         slider.zIndex = this.div.zIndex + 5;
         this.div.appendChild(slider);
         this.buttons.append(slider);
+
+        this.map.events.register("zoomend", slider, this.moveZoomBar);
+
         centered = centered.add(0, zoomStopSize*(this.map.getZoomLevels()+1));
         return centered; 
     },
@@ -79,7 +91,7 @@ OpenLayers.Control.PanZoomBar.prototype =
         evt.xy = this.getMousePosition(evt);
         var y = evt.xy.y;
         var top = this.style.top;
-        var levels = Math.floor((y - parseInt(top))/15);
+        var levels = Math.floor((y - parseInt(top))/this.zoomStopHeight);
         this.map.zoomTo(this.map.getZoomLevels() - levels);
         Event.stop(evt);
     },
@@ -110,16 +122,18 @@ OpenLayers.Control.PanZoomBar.prototype =
     zoomBarUp:function(evt) {
         evt.xy = this.getMousePosition(evt);
         var deltaY = this.zoomStart.y - evt.xy.y
-        this.map.zoomTo(this.map.zoom + Math.round(deltaY/15));
+        this.map.zoomTo(this.map.zoom + Math.round(deltaY/this.zoomStopHeight));
         this.moveZoomBar();
         this.div.style.cursor="default";
         this.mouseDragStart = null;
         Event.stop(evt);
     },
     moveZoomBar:function() {
-        var slider = $('OpenLayers_Control_PanZoomBar_Slider');
+        /*** `this` is actually slider... that should be fixed at some point */
-        slider.style.top = (this.map.getZoomLevels() - this.map.getZoom())*15+
+        var newTop = 
-                          parseInt(document.getElementById("OpenLayers_Control_PanZoomBar_Zoombar").style.top) + 3;
+            (this.map.getZoomLevels() - this.map.getZoom()) * this.zoomStopHeight
+            + this.startTop + 1;
+        this.style.top = newTop + "px";
     },    
     
     destroy: function() {