/*
 * Updates the scale every navigate event.
 * Generates a navigate event when "Enter" is pressed.
 */

var SCALE_BOX_INSTANCE = 0;

function ScaleBox(EventManager, ScaleMap) {
	var ScaleCenterPoint;
	var ScaleBoxId = 'ScaleBox'+SCALE_BOX_INSTANCE;
	var ScaleBoxInstance = 'ScaleBox'+SCALE_BOX_INSTANCE+'-';
	var ScaleInputId = ScaleBoxInstance+'Input-';
	var ScaleJumperId = ScaleBoxInstance+'Jumper-';
	var MySelf = this;

	SCALE_BOX_INSTANCE++;



	function changeScale() {
		EventManager.changePointScale(ScaleCenterPoint, inchScaleToPixelScale(ScaleMap, stripCommas(document.getElementById(ScaleInputId).value)));
	}

	function jumpToScale() {
		var ScaleInput = document.getElementById(ScaleInputId);
		ScaleInput.value = this.getAttribute('scale');
		ScaleInput.onblur();
		changeScale();
	}

	function getBackgroundFunction(color) {
		return function () {
			this.style.background = color;
		};
	}

	function populateScaleJumper(scaleInput, scaleJumper) {
		for(var i in SCALEBOX_JUMPER_INCREMENTS) {
			var link = document.createElement('input');
			link.style.display = 'block';
			link.style.color = 'black';
			link.style.textAlign = 'right';
			var offsetW = 0;
			if(document.all) {
				offsetW -= 6;
			}
			link.style.width = scaleInput.offsetWidth + offsetW + 'px';
			link.style.border = 'none';
			link.value = i;
			link.setAttribute('scale',SCALEBOX_JUMPER_INCREMENTS[i]);
			link.style.cursor = 'default';
			link.onfocus = onFocus;
			link.onmouseover = getBackgroundFunction('#DDD');
			link.onmouseout = getBackgroundFunction('white');
			link.onclick = jumpToScale;
			scaleJumper.appendChild(link);
			link = null;
		}
	}

	


	function onFocus(event) {
		var ScaleInput = document.getElementById(ScaleInputId);
		var ScaleJumper = document.getElementById(ScaleJumperId);
		if(window.event) { event = window.event; }
		var left = ScaleInput.offsetLeft;
		var top = ScaleInput.offsetTop+ScaleInput.offsetHeight;
		var width = ScaleInput.offsetWidth;
		if(document.all) {
			left = objectClientPosition(ScaleInput).x;
			top += 4;
		}

		ScaleInput.style.background = '#DDD';
		ScaleJumper.style.visibility = 'visible';
		ScaleJumper.style.top = 'auto';
		ScaleJumper.style.bottom = top+'px';
		ScaleJumper.style.left = left + 'px';
		ScaleJumper.style.right = 'auto';
		ScaleJumper.style.zIndex = 10000;
	}

	function onBlur(event) {
		if(window.event) { event = window.event; }
		var ScaleJumper = document.getElementById(ScaleJumperId);
		var ScaleInput = document.getElementById(ScaleInputId);
		if(document.all && event.srcElement == ScaleJumper) {
			return false;
		}
		ScaleInput.style.background = 'white';
		ScaleJumper.style.visibility = 'hidden';
	}
	
//	ScaleInput.onkeypress = function(event) {

	function onKeyPress(event) {
		if(window.event) { event = window.event; } 
		if(event.keyCode == 13) {
			EventManager.changePointScale(ScaleCenterPoint, inchScaleToPixelScale(ScaleMap, stripCommas(this.value)));
		}
		if(event.keyCode == 27) {
			this.value = Math.round(this.originalValue);
		}
	}

	var CurrentScale;
	this.onNavigate = function (psScale) {
		var scale = Math.round(pixelScaleToInchScale(ScaleMap, psScale.Radius));
		var ScaleInput = document.getElementById(ScaleInputId);
		if(ScaleInput) {
			ScaleInput.value = commifyNumber(scale);
			ScaleInput.originalValue = scale;
		}
		CurrentScale = scale;
		ScaleCenterPoint = psScale.Center;
	}
	
	this.setParent = function (p) {
		p = document.getElementById(p);

		var ScaleInput = document.createElement('input');
		ScaleInput.style.textAlign = 'right';
		ScaleInput.style.height = '18px';
		ScaleInput.style.fontSize = '13px';
		ScaleInput.size = '12';
		ScaleInput.onblur = onBlur;
		ScaleInput.onkeypress = onKeyPress;
		if(CurrentScale) {
			ScaleInput.value = commifyNumber(CurrentScale);
			ScaleInput.originalValue = CurrentScale;
		}
		ScaleInput.setAttribute('id', ScaleInputId);
		p.appendChild(ScaleInput);

		var ScaleGo = document.createElement('input');
		ScaleGo.onclick = changeScale;
		if(document.all) {
			ScaleGo.style.height = '22px';
		}
		ScaleGo.style.fontSize = '13px';
		ScaleGo.value = 'Go!';
		ScaleGo.type = 'button';
		p.appendChild(ScaleGo);
		ScaleGo = null; /* Clean up the JS object */

		var ScaleJumper = document.createElement('div');
		ScaleJumper.style.zIndex = 10000;
		ScaleJumper.style.border = 'solid 3px black';
		ScaleJumper.style.visibility = 'hidden';
		ScaleJumper.style.position = 'absolute';
		ScaleJumper.style.bottom = '1px';
		ScaleJumper.style.height = 'auto';
		ScaleJumper.style.background = 'white';
		ScaleJumper.setAttribute('id', ScaleJumperId);
		if(document.all) {
			document.getElementsByTagName('body')[0].appendChild(ScaleJumper);
		} else {	
			p.appendChild(ScaleJumper);
		}

		ScaleJumper.onfocus = onFocus;
		ScaleInput.onfocus = onFocus;
		
		populateScaleJumper(ScaleInput, ScaleJumper);

		ScaleInput = null;
		ScaleJumper = null;
	}

	this.initializeEvents = function() {
		EventManager.addEventListener('navigate', ScaleBoxId, MySelf.onNavigate);
	}
}
