AWP.Control.ScaleLine = OpenLayers.Class(OpenLayers.Control.ScaleLine, {
    initialize: function() {
		this.position = new OpenLayers.Pixel(45, 5);
		var options = {
			displayClass: 'olControlScaleLine',
			div: document.getElementById('awp_scale')
		}
        OpenLayers.Control.ScaleLine.prototype.initialize.apply(this, [options]);     
    },
	draw: function() {
		OpenLayers.Control.prototype.draw.apply(this, arguments);
		if (!this.eTop) {
			this.div.style.display = "block";
			this.div.style.position = "absolute";
			
			this.div.style.fontSize = '9px';
			
			// stick in the top bar
			this.eTop = document.createElement("div");
			this.eTop.className = this.displayClass + "Top";
			
			this.eTop.style.height = '3px';
			/*this.eTop.style.borderColor = '-moz-use-text-color black black';
			this.eTop.style.borderStyle = 'none solid solid';
			this.eTop.style.borderWidth = 'medium 2px 2px';*/
			
			var theLen = this.topInUnits.length;
			this.div.appendChild(this.eTop);
			if((this.topOutUnits == "") || (this.topInUnits == "")) {
				this.eTop.style.visibility = "hidden";
			} else {
				this.eTop.style.visibility = "visible";
			}
			
			this.textTop = document.createElement("span");
			this.textTop.style.position = 'relative';
			this.textTop.style.top = '-1.4em';
			this.eTop.appendChild(this.textTop);
			
			// and the bottom bar
			this.eBottom = document.createElement("div");
			this.eBottom.className = this.displayClass + "Bottom";
			
			this.eBottom.style.height = '3px';
			
			this.div.appendChild(this.eBottom);
			if((this.bottomOutUnits == "") || (this.bottomInUnits == "")) {
				this.eBottom.style.visibility = "hidden";
			} else {
				this.eBottom.style.visibility = "visible";
			}
		}
		this.map.events.register('moveend', this, this.update);
		this.update();
		return this.div;
	},
    update: function() {
        var res = this.map.getResolution();
        if (!res) {
            return;
        }

        var curMapUnits = this.map.getUnits();
        var inches = OpenLayers.INCHES_PER_UNIT;

        // convert maxWidth to map units
        var maxSizeData = this.maxWidth * res * inches[curMapUnits];  

        // decide whether to use large or small scale units     
        var topUnits;
        var bottomUnits;
        if(maxSizeData > 100000) {
            topUnits = this.topOutUnits;
            bottomUnits = this.bottomOutUnits;
        } else {
            topUnits = this.topInUnits;
            bottomUnits = this.bottomInUnits;
        }

        // and to map units units
        var topMax = maxSizeData / inches[topUnits];
        var bottomMax = maxSizeData / inches[bottomUnits];

        // now trim this down to useful block length
        var topRounded = this.getBarLen(topMax);
        var bottomRounded = this.getBarLen(bottomMax);

        // and back to display units
        topMax = topRounded / inches[curMapUnits] * inches[topUnits];
        bottomMax = bottomRounded / inches[curMapUnits] * inches[bottomUnits];

        // and to pixel units
        var topPx = topMax / res;
        var bottomPx = bottomMax / res;
        
        // now set the pixel widths
        this.eTop.style.width = Math.round(topPx) + "px";
        this.eBottom.style.width = Math.round(bottomPx) + "px"; 
        
        // and the values inside them
        this.textTop.innerHTML = topRounded + " " + topUnits;
        this.eBottom.innerHTML = bottomRounded + " " + bottomUnits ;
    },
	CLASS_NAME: 'AWP.Control.ScaleLine'
});