/* Copyright (c) 2006-2007 MetaCarta, Inc., published under the BSD license. * See http://svn.openlayers.org/trunk/openlayers/release-license.txt  * for the full text of the license. *//** * @requires OpenLayers/Control/PanZoom.js * * Class: OpenLayers.Control.PanZoomBar * * Inherits from: *  - <OpenLayers.Control.PanZoom> *  - <OpenLayers.Control> */OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {    /**      * APIProperty: zoomStopWidth     */    zoomStopWidth: 18,    /**      * APIProperty: zoomStopHeight     */    zoomStopHeight: 11,    /**      * Property: slider     */    slider: null,    /**      * Property: sliderEvents     * {<OpenLayers.Events>}     */    sliderEvents: null,    /**      * Property: zoomBarDiv     * {DOMElement}     */    zoomBarDiv: null,    /**      * Property: divEvents     * {<OpenLayers.Events>}     */    divEvents: null,    /**     * Constructor: <OpenLayers.Control.PanZoomBar>     */     initialize: function() {        OpenLayers.Control.PanZoom.prototype.initialize.apply(this, arguments);    },    /**     * APIMethod: destroy     */    destroy: function() {        this.div.removeChild(this.slider);        this.slider = null;        this.sliderEvents.destroy();        this.sliderEvents = null;                this.div.removeChild(this.zoombarDiv);        this.zoomBarDiv = null;        this.divEvents.destroy();        this.divEvents = null;        this.map.events.unregister("zoomend", this, this.moveZoomBar);        this.map.events.unregister("changebaselayer", this, this.redraw)        OpenLayers.Control.PanZoom.prototype.destroy.apply(this, arguments);    },        /**     * Method: setMap     *      * Parameters:     * map - {<OpenLayers.Map>}      */    setMap: function(map) {        OpenLayers.Control.PanZoom.prototype.setMap.apply(this, arguments);        this.map.events.register("changebaselayer", this, this.redraw);    },    /**      * Method: redraw     * clear the div and start over.     */    redraw: function() {        if (this.div != null) {            this.div.innerHTML = "";        }          this.draw();    },        /**    * Method: draw     *    * Parameters:    * px - {<OpenLayers.Pixel>}     */    draw: function(px) {        // initialize our internal div        OpenLayers.Control.prototype.draw.apply(this, arguments);        px = this.position.clone();        // place the controls        this.buttons = [];        var sz = new OpenLayers.Size(18,18);        var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);        this._addButton("panup", "north-mini.png", centered, sz);        px.y = centered.y+sz.h;        this._addButton("panleft", "west-mini.png", px, sz);        this._addButton("panright", "east-mini.png", px.add(sz.w, 0), sz);        this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz);        this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, sz.h*3+5), sz);        centered = this._addZoomBar(centered.add(0, sz.h*4 + 5));        this._addButton("zoomout", "zoom-minus-mini.png", centered, sz);        return this.div;    },    /**     * Method: _addZoomBar    *     * Parameters:    * location - {<OpenLayers.Pixel>} where zoombar drawing is to start.    */    _addZoomBar:function(centered) {        var imgLocation = OpenLayers.Util.getImagesLocation();                var id = "OpenLayers_Control_PanZoomBar_Slider" + this.map.id;        var zoomsToEnd = this.map.getNumZoomLevels() - 1 - this.map.getZoom();        var slider = OpenLayers.Util.createAlphaImageDiv(id,                       centered.add(-1, zoomsToEnd * this.zoomStopHeight),                        new OpenLayers.Size(20,9),                        imgLocation+"slider.png",                       "absolute");        this.slider = slider;                this.sliderEvents = new OpenLayers.Events(this, slider, null, true);        this.sliderEvents.register("mousedown", this, this.zoomBarDown);        this.sliderEvents.register("mousemove", this, this.zoomBarDrag);        this.sliderEvents.register("mouseup", this, this.zoomBarUp);        this.sliderEvents.register("dblclick", this, this.doubleClick);        this.sliderEvents.register("click", this, this.doubleClick);                sz = new OpenLayers.Size();        sz.h = this.zoomStopHeight * this.map.getNumZoomLevels();        sz.w = this.zoomStopWidth;        var div = null                if (OpenLayers.Util.alphaHack()) {            var id = "OpenLayers_Control_PanZoomBar" + this.map.id;            div = OpenLayers.Util.createAlphaImageDiv(id, centered,                                      new OpenLayers.Size(sz.w,                                               this.zoomStopHeight),                                      imgLocation + "zoombar.png",                                       "absolute", null, "crop");            div.style.height = sz.h;        } else {            div = OpenLayers.Util.createDiv(                        'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id,                        centered,                        sz,                        imgLocation+"zoombar.png");        }                this.zoombarDiv = div;                this.divEvents = new OpenLayers.Events(this, div, null, true);        this.divEvents.register("mousedown", this, this.divClick);        this.divEvents.register("mousemove", this, this.passEventToSlider);        this.divEvents.register("dblclick", this, this.doubleClick);        this.divEvents.register("click", this, this.doubleClick);                this.div.appendChild(div);        this.startTop = parseInt(div.style.top);        this.div.appendChild(slider);        this.map.events.register("zoomend", this, this.moveZoomBar);        centered = centered.add(0,             this.zoomStopHeight * this.map.getNumZoomLevels());        return centered;     },        /*     * Method: passEventToSlider     * This function is used to pass events that happen on the div, or the map,     * through to the slider, which then does its moving thing.     *     * Parameters:     * evt - {<OpenLayers.Event>}      */    passEventToSlider:function(evt) {        this.sliderEvents.handleBrowserEvent(evt);    },        /*     * Method: divClick     * Picks up on clicks directly on the zoombar div     *           and sets the zoom level appropriately.     */    divClick: function (evt) {        if (!OpenLayers.Event.isLeftClick(evt)) return;        var y = evt.xy.y;        var top = OpenLayers.Util.pagePosition(evt.object)[1];        var levels = Math.floor((y - top)/this.zoomStopHeight);        this.map.zoomTo((this.map.getNumZoomLevels() -1) -  levels);        OpenLayers.Event.stop(evt);    },        /*     * Method: zoomBarDown     * event listener for clicks on the slider     *     * Parameters:     * evt - {<OpenLayers.Event>}      */    zoomBarDown:function(evt) {        if (!OpenLayers.Event.isLeftClick(evt)) return;        this.map.events.register("mousemove", this, this.passEventToSlider);        this.map.events.register("mouseup", this, this.passEventToSlider);        this.mouseDragStart = evt.xy.clone();        this.zoomStart = evt.xy.clone();        this.div.style.cursor = "move";        // reset the div offsets just in case the div moved        this.zoombarDiv.offsets = null;         OpenLayers.Event.stop(evt);    },        /*     * Method: zoomBarDrag     * This is what happens when a click has occurred, and the client is     * dragging.  Here we must ensure that the slider doesn't go beyond the     * bottom/top of the zoombar div, as well as moving the slider to its new     * visual location     *     * Parameters:     * evt - {<OpenLayers.Event>}      */    zoomBarDrag:function(evt) {        if (this.mouseDragStart != null) {            var deltaY = this.mouseDragStart.y - evt.xy.y            var offsets = OpenLayers.Util.pagePosition(this.zoombarDiv);            if ((evt.clientY - offsets[1]) > 0 &&                 (evt.clientY - offsets[1]) < parseInt(this.zoombarDiv.style.height) - 2) {                var newTop = parseInt(this.slider.style.top) - deltaY;                this.slider.style.top = newTop+"px";            }            this.mouseDragStart = evt.xy.clone();            OpenLayers.Event.stop(evt);        }    },        /*     * Method: zoomBarUp     * Perform cleanup when a mouseup event is received -- discover new zoom     * level and switch to it.     *     * Parameters:     * evt - {<OpenLayers.Event>}      */    zoomBarUp:function(evt) {        if (!OpenLayers.Event.isLeftClick(evt)) return;        if (this.zoomStart) {            this.div.style.cursor="";            this.map.events.unregister("mouseup", this, this.passEventToSlider);            this.map.events.unregister("mousemove", this, this.passEventToSlider);            var deltaY = this.zoomStart.y - evt.xy.y            this.map.zoomTo(this.map.zoom + Math.round(deltaY/this.zoomStopHeight));            this.moveZoomBar();            this.mouseDragStart = null;            OpenLayers.Event.stop(evt);        }    },        /*    * Method: moveZoomBar    * Change the location of the slider to match the current zoom level.    */    moveZoomBar:function() {        var newTop =             ((this.map.getNumZoomLevels()-1) - this.map.getZoom()) *             this.zoomStopHeight + this.startTop + 1;        this.slider.style.top = newTop + "px";    },            CLASS_NAME: "OpenLayers.Control.PanZoomBar"});