OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoomBar, {
    zoomStopWidth: 11,
    zoomStopHeight: 18,
    panIconW: 18,
    panIconH: 18,
    zoomWorldIcon: false,

    draw: function(px) {
        var imgLocation = OpenLayers.Util.getImagesLocation();
        OpenLayers.Control.prototype.draw.apply(this, arguments);        
        this.buttons = [];        
        
        var mapSize = new OpenLayers.Size(map.viewPortDiv.clientWidth, map.viewPortDiv.clientHeight);
        
        //The offset from the bottom-right corner of the map
        var offset = new OpenLayers.Pixel(70, 33);
        var sz = new OpenLayers.Size(this.panIconW, this.panIconH);
        
        //The top-left position of the zoom-plus button
        var positionRight = new OpenLayers.Pixel(mapSize.w - offset.x - sz.w, mapSize.h - offset.y - sz.h);        
        this._addButton("zoomin", 'zoom-plus-mini-black.png', positionRight, sz);        
        positionRight = this._addZoomBarRight(positionRight);
        
        //The top-left position of the zoom-minus button
        var positionLeft = new OpenLayers.Pixel(positionRight.x - sz.w, positionRight.y);        
        this._addButton("zoomout", 'zoom-minus-mini-black.png', positionLeft, sz);
        
        this.div.style.top = "";
        return this.div;
    },    
    
    
    _addZoomBarRight: function(right) {
        var imgLocation = OpenLayers.Util.getImagesLocation();
        var id = "OpenLayers_Control_PanZoomBar_Slider" + this.map.id;
        OpenLayers.Events.prototype.includeXY = true;
        var zoomsToEnd = this.map.getZoom();
        
        //The size of the panzoombar
        var sz = new OpenLayers.Size();
        sz.w = this.zoomStopWidth * this.map.getNumZoomLevels();
        sz.h = this.zoomStopHeight;
        
        //The top-left position of the panzoombar
        var panZoomPosition = new OpenLayers.Pixel(right.x - sz.w, right.y);
        
        //Create the panzoombar
        var div = null;
        div = OpenLayers.Util.createDiv('OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id, panZoomPosition, sz, imgLocation + "slider-bck-black.gif"); //This is the one
        this.zoombarDiv = div;
        this.divEvents = new OpenLayers.Events(this, div, null, true);
        //Events to zoom using the zoombar (in midddle)
        
        this.divEvents.on({
            "mousedown": this.divClick,
            "mousemove": this.passEventToSlider,
            "dblclick": this.doubleClick,
            "click": this.doubleClick
        });        
        
        //Create the slider
        var sliderPos = panZoomPosition.add(zoomsToEnd * this.zoomStopWidth, -1); // Set new y
        var slider = OpenLayers.Util.createAlphaImageDiv(id, sliderPos, new OpenLayers.Size(9, 20), imgLocation + "vert_slider-black.png", "absolute");
        this.slider = slider;
        
        this.sliderEvents = new OpenLayers.Events(this, slider, null, true);
        
        // Events to move slider with mouse.
        this.sliderEvents.on({
            "mousedown": this.zoomBarDown,
            "mousemove": this.zoomBarDrag,
            "mouseup": this.zoomBarUp,
            "dblclick": this.doubleClick,
            "click": this.doubleClick
        });            
        
        //Add the panzoombar and the slider
        this.div.appendChild(div);
        this.startLeft = parseInt(div.style.left) - sz.w;
        this.div.appendChild(slider);
        this.map.events.register("zoomend", this, this.moveZoomBar);
        
        right = right.add(-sz.w, 0);
        return right;
    },
    
    
    
    

    _addZoomBar: function(centered) {
        var imgLocation = OpenLayers.Util.getImagesLocation();
        var id = "OpenLayers_Control_PanZoomBar_Slider" + this.map.id;
        var zoomsToEnd = this.map.getZoom();
//        var zoomsToEnd = this.map.getNumZoomLevels() - 1 - this.map.getZoom();
        //        var zoomsToEnd = this.map.getNumZoomLevels() - 6.9; //Mycket h\u00E5rdkodat!! inte bra
        var sliderPos = centered.add(zoomsToEnd * this.zoomStopWidth, -1); // Set new y
        var slider = OpenLayers.Util.createAlphaImageDiv(id, sliderPos, new OpenLayers.Size(9, 20), imgLocation + "vert_slider-black.png", "absolute");
        this.slider = slider;
        this.sliderEvents = new OpenLayers.Events(this, slider, null, true);
        // Events to move slider with mouse.
        this.sliderEvents.on({
            "mousedown": this.zoomBarDown,
            "mousemove": this.zoomBarDrag,
            "mouseup": this.zoomBarUp,
            "dblclick": this.doubleClick,
            "click": this.doubleClick
        });
        var sz = new OpenLayers.Size();
        
        //The size of the panzoombar
        sz.w = this.zoomStopWidth * this.map.getNumZoomLevels();
        sz.h = this.zoomStopHeight;
        var div = null;
        //I IE6 gick den i alphaHack satsen vilket gjorde att zoombaren inte visades, tvinga den ist\u00E4llet att v\u00E4lja det andra alternativet nedan.
        //        if (OpenLayers.Util.alphaHack()) {
        //            var id = "OpenLayers_Control_PanZoomBar" + this.map.id;
        //            div = OpenLayers.Util.createAlphaImageDiv(id, centered, new OpenLayers.Size(this.zoomStopWidth, sz.h), imgLocation + "slider-bck-black.gif", "absolute", null, "crop");
        //            div.style.width = sz.w;
        //        } else {
        div = OpenLayers.Util.createDiv('OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id, centered, sz, imgLocation + "slider-bck-black.gif"); //This is the one
        //        }
        this.zoombarDiv = div;
        this.divEvents = new OpenLayers.Events(this, div, null, true);
        //Events to zoom using the zoombar (in midddle)
        this.divEvents.on({
            "mousedown": this.divClick,
            "mousemove": this.passEventToSlider,
            "dblclick": this.doubleClick,
            "click": this.doubleClick
        });
        this.div.appendChild(div);
        this.startLeft = parseInt(div.style.left) - sz.w;
        this.div.appendChild(slider);
        this.map.events.register("zoomend", this, this.moveZoomBar);
        centered = centered.add(this.zoomStopWidth * this.map.getNumZoomLevels(), 0);
        return centered;
    },
    divClick: function(evt) {
        if (!OpenLayers.Event.isLeftClick(evt)) {
            return;
        }
        var x = evt.xy.x;
        var left = OpenLayers.Util.pagePosition(evt.object)[1];
        var levels = (x - left) / this.zoomStopWidth;

        if (!this.map.fractionalZoom) {
            levels = Math.floor(levels);
        }
        var zoom = levels;
        zoom = Math.min(Math.max(zoom, 0), this.map.getNumZoomLevels());
        this.map.zoomTo(zoom);
        OpenLayers.Event.stop(evt);
    },
    zoomBarDrag: function(evt) {
        if (this.mouseDragStart != null) {
            var deltaX = this.mouseDragStart.x - evt.xy.x;
            var offsets = OpenLayers.Util.pagePosition(this.zoombarDiv);
            if ((evt.clientX - offsets[0]) > 0 && (evt.clientX - offsets[0]) < parseInt(this.zoombarDiv.style.width) - 2) {
                var newLeft = parseInt(this.slider.style.left) - deltaX;
                this.slider.style.left = newLeft + "px";
            }
            this.mouseDragStart = evt.xy.clone();
            OpenLayers.Event.stop(evt);
        }
    },
    zoomBarUp: function(evt) {
        if (!OpenLayers.Event.isLeftClick(evt)) {
            return;
        }
        if (this.zoomStart) {
            this.div.style.cursor = "";
            this.map.events.un({
                "mouseup": this.passEventToSlider,
                "mousemove": this.passEventToSlider,
                scope: this
            });
            var deltaX = evt.xy.x - this.zoomStart.x;
            var zoomLevel = this.map.zoom;
            if (this.map.fractionalZoom) {
                zoomLevel += deltaX / this.zoomStopWidth;
                zoomLevel = Math.min(Math.max(zoomLevel, 0), this.map.getNumZoomLevels());
            } else {
                zoomLevel += Math.round(deltaX / this.zoomStopWidth);
            }
            this.map.zoomTo(zoomLevel);
            this.moveZoomBar();
            this.mouseDragStart = null;
            OpenLayers.Event.stop(evt);
        }
    },
    moveZoomBar: function() {
        var newLeft = ((this.map.getNumZoomLevels()) + this.map.getZoom()) * this.zoomStopWidth + this.startLeft + 1; //h\u00E4r \u00E4r felet. med plus blir det hela tiden st\u00F6rre n\u00E4r i divklick
        this.slider.style.left = newLeft + "px";
    },
    CLASS_NAME: "OpenLayers.PanZoomBar"
});