
var MAP_SLIDER_INSTANCE = 0;
function MapSlider (EventManager,SliderMap) {
	var id = 'MapSlider-'+MAP_SLIDER_INSTANCE;
	var ParentId;

	var HoleSize = 14;

	MAP_SLIDER_INSTANCE++;

	function hideTitle() {
		this.title = this.innerHTML;
		this.innerHTML = '';
		this.className = 'MapSliderHole';
	}

	function showTitle() {
		this.className += ' MapSliderHoleTitle';
		this.innerHTML = this.title;
		this.title = '';
	}

	function jumpToScale() {
		EventManager.changePointScale(SliderMap.getCenterPoint(), inchScaleToPixelScale(SliderMap, this.scale));
	}

	this.onNavigate = function(PointScale) {
		var scale = Math.floor(pixelScaleToInchScale(SliderMap, PointScale.Radius));
		var scalePosition = 0;
		for(var i = 0; i < MAP_NAVIGATOR_SCALES.length; i++) {
			if(scale <= MAP_NAVIGATOR_SCALES[i].scale) {
				scalePosition = i;
			}
		}
		var hole = document.getElementById(MAP_NAVIGATOR_SCALES[scalePosition][id]);
		var peg = document.getElementById(id+'peg');
		peg.style.top = hole.offsetTop+'px';
		peg.position = scalePosition;
	}

	function bumpUp() {
		var peg = document.getElementById(id+'peg');
		if(peg.position + 1 < MAP_NAVIGATOR_SCALES.length) {
			EventManager.changePointScale(SliderMap.getCenterPoint(), inchScaleToPixelScale(SliderMap, MAP_NAVIGATOR_SCALES[peg.position+1].scale));
		}
	}

	function bumpDown() {
		var peg = document.getElementById(id+'peg');
		if(peg.position - 1 >= 0) {
			EventManager.changePointScale(SliderMap.getCenterPoint(), inchScaleToPixelScale(SliderMap, MAP_NAVIGATOR_SCALES[peg.position-1].scale));
		}
	}


	function pan(percentEast, percentNorth) {
		var pointScale = SliderMap.getPointScale();
		var mapDimension = SliderMap.getMapSize();
		pointScale.Center.x += (mapDimension.x*percentEast*pointScale.Radius);
		pointScale.Center.y += (mapDimension.y*percentNorth*pointScale.Radius);
		EventManager.triggerEvent('navigate', pointScale);
	}

	function panEast() {
		pan(-EAST_WEST_PERCENTAGE,0);
	}

	function panWest() {
		pan(EAST_WEST_PERCENTAGE,0);
	}

	function panSouth() {
		pan(0,-NORTH_SOUTH_PERCENTAGE);
	}

	function panNorth() {
		pan(0,NORTH_SOUTH_PERCENTAGE);
	}


	function dropPeg() {
		var peg = document.getElementById(id+'peg');
		var found = false;
		var firstHole = document.getElementById(MAP_NAVIGATOR_SCALES[MAP_NAVIGATOR_SCALES.length-1][id]);
		var lastHole = document.getElementById(MAP_NAVIGATOR_SCALES[0][id]);
		var min = firstHole.offsetTop;
		var max = lastHole.offsetTop+lastHole.offsetHeight;

		var scalePosition = 0;
		for(var i = 0; i < MAP_NAVIGATOR_SCALES.length && !found; i++) {
			var hole = document.getElementById(MAP_NAVIGATOR_SCALES[i][id]);
			if(hole && peg.offsetTop >= hole.offsetTop && 
				peg.offsetTop < hole.offsetTop+hole.offsetHeight) {
					found = true;
					scalePosition = i;
			}
		}

		if(peg.offsetTop > max) {
			scalePosition = 0;
		}
		if(peg.offsetTop < min) {
			scalePosition = MAP_NAVIGATOR_SCALES.length - 1;
		}
		EventManager.changePointScale(SliderMap.getCenterPoint(), inchScaleToPixelScale(SliderMap, MAP_NAVIGATOR_SCALES[scalePosition].scale));
	}

	this.setParent = function(pId) {
		ParentId = pId;

		var p = document.getElementById(ParentId);
		var mapSliderHolder = document.createElement('div');
		mapSliderHolder.className = 'MapSliderHolder';
		mapSliderHolder.id = id+'Holder';
		p.appendChild(mapSliderHolder);

		var zoomIn = document.createElement('div');
		zoomIn.className = 'MapSliderZoomIn';
		mapSliderHolder.appendChild(zoomIn);
		zoomIn.onclick = bumpUp;


		for(var i = MAP_NAVIGATOR_SCALES.length - 1; i >= 0; i--) {
			var hole = document.createElement('div');
			mapSliderHolder.appendChild(hole);
			hole.className = 'MapSliderHole';
			/*hole.style.top = HoleSize*(MAP_NAVIGATOR_SCALES.length-i)+'px';*/
			hole.scale = MAP_NAVIGATOR_SCALES[i].scale;
			hole.title = MAP_NAVIGATOR_SCALES[i].label;
/*
			if(MAP_NAVIGATOR_SCALES[i].label) {
				hole.title = MAP_NAVIGATOR_SCALES[i].label.replace(/ /g,'&nbsp;');
			}
			hole.onmouseover = showTitle;
			hole.onmouseout = hideTitle;
*/
			hole.onclick = jumpToScale;

			hole.id = id+'hole'+i;
			MAP_NAVIGATOR_SCALES[i][id] = hole.id;
		}

		var zoomOut = document.createElement('div');
		zoomOut.className = 'MapSliderZoomOut';
		mapSliderHolder.appendChild(zoomOut);
		zoomOut.onclick = bumpDown;
		/*zoomOut.style.top = (MAP_NAVIGATOR_SCALES.length + 1) * HoleSize + 'px';*/

		var sliderPeg = document.createElement('div');
		sliderPeg.className = 'MapSliderPeg';
		sliderPeg.id = id+'peg';
		/*sliderPeg.style.top = (MAP_NAVIGATOR_SCALES.length) * HoleSize + 'px';*/
		sliderPeg.position = MAP_NAVIGATOR_SCALES.length - 1;
		mapSliderHolder.appendChild(sliderPeg);

		var pegDragger = new Draggable(sliderPeg.id, sliderPeg, false, true, true, true);
		attachEvent(sliderPeg, 'mouseup', dropPeg);

		var collection = document.createElement('div');
		collection.className = 'MapSliderNavCollection';
		mapSliderHolder.appendChild(collection);

		var north = document.createElement('div');
		collection.appendChild(north);
		north.className = 'MapSliderNorth';
		north.onclick = panNorth;

		var south = document.createElement('div');
		collection.appendChild(south);
		south.className = 'MapSliderSouth';
		south.onclick = panSouth;

		var east = document.createElement('div');
		collection.appendChild(east);
		east.className = 'MapSliderEast';
		east.onclick = panEast;

		var west = document.createElement('div');
		collection.appendChild(west);
		west.className = 'MapSliderWest';
		west.onclick = panWest;
	}

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