/*
  * MDVMapSlider presumes
  * 
  * -	mdvLib.js
  * 
  * -	the presence of scale.png in the image directory 
  * 
  * if the background image for the scale bar is to be changed
  * style values in method createDivs() must be updated accordingly  
  *
  */
  
   /*
  * MDVMapScale
  * @constructor
  * @param 			mdvMap
  * @param			object literal to override default settings (optional)
  */

function MDVMapScale(mdvMap, options) {
	
	if (!mdvMap) {
 		return;
 	}
 	
 	this.mdvMap = mdvMap;
	this.init = false;
	
	this.scaleBarWidth = 95;
	
	// array to store values for each zoomLevel
	this.levels = [];
	
	// store DOM elements here
	this.divScale = null;
	this.divScaleBar = null;
	this.divScaleTextBottom = null;
	
	this.displayYards = true;	
	
	//override defaults
	if(options) {
		for (var val in options) {
			this[val] = options[val];
		}
		
	}
	
	if (this.mdvMap.viewportRealWidth !== -1) {
		this._execute();
	} else {
		this.mdvMap.events.registerEvent(MDVEvent_MAP_INITIALISED, this, this._execute);
	}
}

MDVMapScale.prototype._execute = function() {
	
	if(this.init) {
		return true;
	}
	
	this.calculateScales();
	
	var that = this;
	
	//preload bg image
	this.scaleImg = new Image();
	this.scaleImg.failCount = 0;
	
	this.scaleImg.onload = this.createDivs.bind(this);
	this.scaleImg.onerror = function() {
					if (that.mdvMap) {
						that.scaleImg.failCount++;
						var failSrc = that.scaleImg.src;
						if (that.scaleImg.failCount <= 10) {
							that.scaleImg.src = failSrc;
						} else {	
							return;
						}
					}
				}.bind(that);
		
	var img = 'images/';
	if (this.mdvMap.config.get('imagePath'))
		img = this.mdvMap.config.get('imagePath');
		
	this.scaleImg.src = img + 'scaleOak.gif';
};

MDVMapScale.prototype.calculateScales = function() {
	
	var that = this;
	var MILE = 1604.134;
	var milesOut;
	
	for(var i=0, zl = this.mdvMap.config.zoomLevels.length; i < zl; i++) {
		
		var zoomLevel			= this.mdvMap.config.getZoomLevel(i);
		var pxWidthAll          = parseInt(zoomLevel.get('tileSizeX')) * parseInt(zoomLevel.get('numberOfTilesX'));
		var realWidthAll		= parseInt(zoomLevel.get('realWidth'));
		var pxToRealRatioWidth  = pxWidthAll / realWidthAll;
		
		var milesIn = toMiles(this.scaleBarWidth / pxToRealRatioWidth);
		
		this.levels[i] = {};
		this.levels[i].milesOut = milesIn.toFixed(2);
	}
	
	function toMiles(meter) {
		return meter / MILE;
	}
};

MDVMapScale.prototype.setScale = function() {
	
	var level = this.levels[this.mdvMap.config.getZoomLevelIndex()];
	var topText = level.milesOut +  ' mi';

	if (this.divScaleTextBottom) {
		this.divScaleTextBottom.innerHTML = topText; 
	}
	
	return true;
};

MDVMapScale.prototype.createDivs = function() {
	
	this.divScale = createDiv('divScale');
	this.divScaleBar = createDiv('divScaleBar');
	this.divScaleTextBottom = createDiv('divScaleTextBottom');
	
	mdvLib.style([this.divScale], {
		position: 'absolute',
		top: this.mdvMap.viewportHeight - 40 + 'px',
		left: '15px',
		width: this.scaleBarWidth + 'px',
		zIndex: 999
	});
	
	mdvLib.style([this.divScaleBar, this.divScaleTextBottom], {
		position: 'absolute',
		display: 'inline'
	});
	
	mdvLib.style([this.divScaleBar], {
		background: 'transparent',
		backgroundImage: 'url(' + this.scaleImg.src + ')',
		backgroundPosition: '0 0',
		backgroundRepeat: 'no-repeat'
	});
	
	mdvLib.style([this.divScaleBar], {
		width: this.scaleBarWidth + 'px',
		height: '2px',
		left: '0px',
		top: '11px'
	});
	
	
	mdvLib.style([this.divScaleTextBottom], {
		width: '60px',
		left: '2px',
		top: '13px',
		fontSize: '10px',
		fontWeight: 'bold'
	});
	
	this.divScale.appendChild(this.divScaleBar);

	if (this.displayYards) {
		this.divScale.appendChild(this.divScaleTextBottom);
	}
	this.mdvMap.viewport.appendChild(this.divScale);
	
	this.mdvMap.events.registerEvent(MDVEvent_ZOOM_CHANGED, this, this.setScale);
	
	this.init = true;
	
	this.setScale();
	
	function createDiv(id) {
		var div = document.createElement('div');
		div.id = id;
		return div;
	}	
};