// JavaScript Document
AWP.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
	numZoomLevels: 19,
	rulerLineWidth: 4,
	rulerWidth: 184,
    initialize: function() {
		var config = {
			// 2009-06-30, Ma: specify the "id" value for controlling the button background by CSS
			id: 'awp_pan-zoom-bar',
			// 2009-06-30, Ma: specify the "div" dom to placing the PanZoomBar control out of the map
			div: document.getElementById('awp_pan-zoom-bar'),
			// 2009-06-30, Ma: specify this value to control the zoom bar WIDTH
			zoomStopWidth: 10
		}
        OpenLayers.Control.PanZoomBar.prototype.initialize.call(this, config);
    },
	setMap: function(map) {
		OpenLayers.Control.PanZoomBar.prototype.setMap.apply(this, arguments);
		// 2009-06-30, Ma: keep this.numZoomLevels the same with *map*
		this.numZoomLevels = map.getNumZoomLevels();
		this.rulerWidth = this.zoomStopWidth * (this.numZoomLevels - 1) + this.rulerLineWidth;
	},
    draw: function() {
		// 2009-06-30, Ma: draw only control's and ourselves'
        OpenLayers.Control.prototype.draw.call(this, new OpenLayers.Pixel(0, 0));
        var px = this.position.clone();
		
        this.buttons = [];
		var dx = 5, sz = new OpenLayers.Size(29, 29);
		this._addButton("panup", px, sz);
		this._addButton("panleft", px.add(sz.w + dx, 0), sz);
		this._addButton("panright", px.add((sz.w + dx) * 2, 0), sz);
		this._addButton("pandown", px.add((sz.w + dx) * 3, 0), sz);
		this._addButton("zoomin", px.add((sz.w + dx) * 4, 0), sz);
		this._addButton("zoomout", px.add((sz.w + dx) * 5 + this.rulerWidth + 14, 0), sz);

		this._addZoomBar(px.add((sz.w + dx) * 5 + 7, 0));
		return this.div;
    },
    _addButton:function(id, xy, sz) {
        var btn = OpenLayers.Util.createDiv(this.id + "_" + id, xy, sz, null, "absolute");

        //we want to add the outer div
        this.div.appendChild(btn);

        OpenLayers.Event.observe(btn, "mousedown", 
            OpenLayers.Function.bindAsEventListener(this.buttonDown, btn));
        OpenLayers.Event.observe(btn, "dblclick", 
            OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
        OpenLayers.Event.observe(btn, "click", 
            OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
        btn.action = id;
        btn.map = this.map;
		btn.panZoomBar = this;
        btn.slideFactor = this.slideFactor;

        //we want to remember/reference the outer div
        this.buttons.push(btn);
        return btn;
    },
    buttonDown: function (evt) {
        if (!OpenLayers.Event.isLeftClick(evt)) {
            return;
        }

        switch (this.action) {
            case "panup": 
                this.map.pan(0, -this.slideFactor);
                break;
            case "pandown": 
                this.map.pan(0, this.slideFactor);
                break;
            case "panleft": 
                this.map.pan(-this.slideFactor, 0);
                break;
            case "panright": 
                this.map.pan(this.slideFactor, 0);
                break;
            case "zoomin":
				this.panZoomBar.moveZoomBarTo(this.map.getZoom() + 1);
                this.map.zoomIn();
                break;
            case "zoomout":
				this.panZoomBar.moveZoomBarTo(this.map.getZoom() - 1);
                this.map.zoomOut(); 
                break;
            case "zoomworld": 
                this.map.zoomToMaxExtent(); 
                break;
        }

        OpenLayers.Event.stop(evt);
    },
	_addZoomBar:function(centered) {
		var imgLocation = OpenLayers.Util.getImagesLocation();
		var numZoomLevels = this.numZoomLevels;
		
		var zoomsToEnd = numZoomLevels - 1 - this.map.getZoom();
		this.slider = OpenLayers.Util.createDiv(
			this.id + "_slider",
			centered.add(zoomsToEnd * this.zoomStopWidth, 8),
			new OpenLayers.Size(13, 14)
		);
		this.sliderEvents = new OpenLayers.Events(this, this.slider, null, true, {includeXY: true});
		this.sliderEvents.on({
			"mousedown": this.sliderDown,
			"mousemove": this.sliderDrag,
			"mouseup": this.sliderUp
		});
		
		var sz = new OpenLayers.Size(this.rulerWidth, 29);
		this.zoombarDiv = OpenLayers.Util.createDiv(this.id + '_bar', centered, sz);
		
		var div = document.createElement('div');
		div.className = 'awp_bar_x';
		this.zoombarDiv.appendChild(div);
		for (var i = 0; i < numZoomLevels; i++) {
			var div = document.createElement('div');
			div.className = 'awp_bar_y' + i % 2;
			var h = 10 - Math.round(8 * i / numZoomLevels);
			div.style.height = h + h + 'px';
			div.style.left = i * this.zoomStopWidth + 'px';
			div.style.top = 5 + (10 - h) + 'px';
			this.zoombarDiv.appendChild(div);
		}
		
		this.divEvents = new OpenLayers.Events(this, this.zoombarDiv, null, true, {includeXY: true});
		this.divEvents.on({
			"mousedown": this.zoomBarClick,
			"mousemove": this.zoomBarMove
		});
		
		this.div.appendChild(this.zoombarDiv);
		
		this.startLeft = Math.ceil(parseInt(this.zoombarDiv.style.left) - parseInt(this.slider.style.width) / 2 + 2);
		this.div.appendChild(this.slider);
		
		//this.map.events.register("zoomend", this, this.moveZoomBar);
		return centered; 
	},
    zoomBarMove:function(evt) {
        this.sliderEvents.handleBrowserEvent(evt);
    },
	zoomBarClick: function (evt) {
		if (!OpenLayers.Event.isLeftClick(evt)) {
			return;
		}
		var x = evt.xy.x;
		var left = OpenLayers.Util.pagePosition(evt.object)[0];
		var levels = Math.floor((x - left) / this.zoomStopWidth);
		
		var zoomLevel = (this.numZoomLevels - 1) - levels; 
		zoomLevel = Math.min(Math.max(zoomLevel, 0), this.numZoomLevels - 1);
		this.map.zoomTo(zoomLevel);
		this.moveZoomBarTo(zoomLevel);
		
		OpenLayers.Event.stop(evt);
		
		document.getElementById('measureResult').innerHTML = '(' + zoomLevel + ')';
	},
	sliderDown:function(evt) {
		if (!OpenLayers.Event.isLeftClick(evt)) {
			return;
		}
		this.map.events.on({
			"mousemove": this.zoomBarMove,
			"mouseup": this.zoomBarMove,
			scope: this
		});
		this.mouseDragStart = evt.xy.clone();
		if (!this.zoomStart) 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);
	},
	sliderDrag: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);
        }
    },
	sliderUp:function(evt) {
        if (!OpenLayers.Event.isLeftClick(evt)) {
            return;
        }
		if (this.zoomStart) {
			
			document.getElementById('measureResult').innerHTML = 'sliderUp(' + evt.xy.x + ',,' + this.zoomStart.x  + ')';
			
			this.div.style.cursor = "";
			this.map.events.un({
				"mouseup": this.zoomBarMove,
				"mousemove": this.zoomBarMove,
				scope: this
			});
			
			/*var x = evt.xy.x;
			var left = OpenLayers.Util.pagePosition(evt.object)[0];
			var levels = Math.floor((x - left) / this.zoomStopWidth);
			
			var zoomLevel = (this.numZoomLevels - 1) - levels; 
			zoomLevel = Math.min(Math.max(zoomLevel, 0), this.numZoomLevels - 1);
			this.map.zoomTo(zoomLevel);*/
			
			var deltaX = this.zoomStart.x - evt.xy.x;
			var zoomLevel = this.map.getZoom() + Math.round(deltaX / this.zoomStopWidth);
			
			this.map.zoomTo(zoomLevel);
			this.moveZoomBarTo(zoomLevel);
			this.mouseDragStart = null;
			this.zoomStart = null;
			
			OpenLayers.Event.stop(evt);
		}
    },
	moveZoomBar:function() {
        var newLeft = (this.numZoomLevels - 1 - this.map.getZoom()) * this.zoomStopWidth + this.startLeft;
        this.slider.style.left = Math.round(newLeft) + "px";
    },
	moveZoomBarTo:function(zoomLevel) {
        var newLeft = (this.numZoomLevels - 1 - zoomLevel) * this.zoomStopWidth + this.startLeft;
        this.slider.style.left = Math.round(newLeft) + "px";
    },
	CLASS_NAME: 'AWP.Control.PanZoomBar'
})