Convert zoom levels to be a slider. Graphics need much improvement, and the code also needs a good twice over, but it works.

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

lib/OpenLayers/Control/PanZoom.js

@@ -31,15 +31,74 @@ OpenLayers.Control.PanZoom.prototype =
         this._addButton("panright", "east-mini.png", xy.addX(sz.w), sz);
         this._addButton("pandown", "south-mini.png", centered.addY(sz.h*2), sz);
         this._addButton("zoomin", "zoom-plus-mini.png", centered.addY(sz.h*3), sz);
-        centered = centered.addY(sz.h*3);
+        centered = centered.addY(sz.h*4);
-        for (var i=this.map.getZoomLevels(); i--; i>=0) {
+        centered = this._addZoomBar(centered,sz.copyOf());
-            centered = centered.addY(sz.h);
+        this._addButton("zoomout", "zoom-minus-mini.png", centered, sz);
-            this._addButton("zoomLevel"+i, "zoom-world-mini.png", centered, sz);
-        }
-        this._addButton("zoomout", "zoom-minus-mini.png", centered.addY(sz.h), sz);
         return this.div;
     },
-
+    _addZoomBar:function(centered,sz) {
+        var zoomStopSize = 15;
+        var slider = OpenLayers.Util.createImage("img/slider.png",
+                       new OpenLayers.Pixel(22,9), 
+                       centered.addY((this.map.getZoomLevels())*zoomStopSize), "absolute",
+                       "OpenLayers_Control_PanZoom_Slider");
+        sz.h = zoomStopSize*(this.map.getZoomLevels()+1);
+        sz.w = 17;
+        var div = OpenLayers.Util.createDiv('OpenLayers_Control_PanZoom_Zoombar',centered,sz);
+        div.style.backgroundImage = "url(img/zoombar.png)";
+        div.onmousedown  = this.doubleClick.bindAsEventListener(div);
+        div.onmousemove  = this.zoomBarDivDrag.bindAsEventListener(div);
+        div.ondblclick  = this.doubleClick.bindAsEventListener(div);
+        div.slider = slider;
+        this.div.appendChild(div);
+        slider.startTop = div.style.top;
+        slider.getMousePosition = this.getMousePosition;
+        slider.onmousedown = this.zoomBarDown.bindAsEventListener(slider);
+        slider.onmousemove = this.zoomBarDrag.bindAsEventListener(slider);
+        slider.onmouseup   = this.zoomBarUp.bindAsEventListener(slider);
+        slider.ondblclick  = this.doubleClick.bindAsEventListener(slider);
+        slider.div = this.div;
+        slider.map = this.map;
+        slider.zIndex = this.div.zIndex + 5;
+        this.div.appendChild(slider);
+        this.buttons.append(slider);
+        centered = centered.addY(zoomStopSize*(this.map.getZoomLevels()+1));
+        return centered; 
+    },
+    getMousePosition: function (evt) {
+        var offsets = Position.page(this.div); 
+        return new OpenLayers.Pixel(
+                        evt.clientX - offsets[0], 
+                        evt.clientY - offsets[1]); 
+    },
+    zoomBarDown:function(evt) {
+        evt.xy = this.getMousePosition(evt);
+        this.mouseDragStart = evt.xy.copyOf();
+        this.zoomStart = evt.xy.copyOf();
+        this.div.style.cursor = "move";
+        Event.stop(evt);
+    },
+    zoomBarDivDrag: function(evt) {
+        this.slider.onmousemove(evt);
+    },
+    zoomBarDrag:function(evt) {
+        if (this.mouseDragStart != null) {
+            evt.xy = this.getMousePosition(evt);
+            var deltaY = this.mouseDragStart.y - evt.xy.y
+            this.style.top = (parseInt(this.style.top)-deltaY)+"px";
+            this.mouseDragStart = evt.xy.copyOf();
+        }
+    },
+    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.style.top = (this.map.getZoomLevels() - this.map.getZoom())*15+
+                          parseInt(document.getElementById("OpenLayers_Control_PanZoom_Zoombar").style.top) + 3;
+        this.div.style.cursor="default";
+        this.mouseDragStart = null;
+        Event.stop(evt);
+    },
     _addButton:function(id, img, xy, sz) {
         var imgLocation = OpenLayers.Util.getImagesLocation() + img;
         // var btn = new ol.AlphaImage("_"+id, imgLocation, xy, sz);
@@ -65,13 +124,7 @@ OpenLayers.Control.PanZoom.prototype =
     },
     
     buttonDown: function (evt) {
-        if (this.action.startsWith("zoomLevel")) {
-            this.map.zoomTo(parseInt(this.action.substr(9,this.action.length)));
-        }
         switch (this.action) {
-            case "zoomLevel0":
-                this.map.zoomExtent();
-                break;
             case "panup": 
                 var resolution = this.map.getResolution();
                 var center = this.map.getCenter();