// JavaScript Document

window.onload = timeline;

function timeline() {
	
	var objBody = document.getElementsByTagName('body')[0];
	
	//get the events
	var national = getPlots('national');
	var regional = getPlots('regional');	
	var local = getPlots('local');
	
	//sort the events
	national.sort(sortNumber);
	regional.sort(sortNumber);
	local.sort(sortNumber);
	
	//draw the events and attach the onmouseover/onmouseout for the description
	drawPlots(national);
	drawPlots(regional);
	drawPlots(local);
	
	//get the mouse position
	document.body.onmousemove = getMouse;
	window.onmousemove = getMouse;
	var mouseX;
	var mouseY;
	
	//allow drag
	var centerX = null;
	var centerY = null;
	var leftScroll = null;
	var topScroll = null;
	var dragging = 0;
	
	setDrag();
		
	function drawPlots(plots) {
		
		for (var x = 0; x < plots.length; x++) {
			plots[x].value = x;
			
			var plotID = plots[x].getElementsByTagName('div')[0].firstChild.nodeValue;			
			
			plots[x].style.left = (plotID - 1940) * 175 + 150 + "px"; //makes each year 175px
			
			if (x > 0 && plots[x-1].offsetLeft >= plots[x].offsetLeft - 150) {
				plots[x].style.top = plots[x-1].offsetTop + plots[x-1].offsetHeight + 10 + "px";
			}
			
			plots[x].description = plots[x].getElementsByTagName('div')[2];
			
			var closeDescription = document.createElement('a');
			plots[x].description.insertBefore(closeDescription, plots[x].description.firstChild);
			closeDescription.innerHTML = 'x';
			closeDescription.style.border = "1px solid #f7f7f7";
			closeDescription.style.padding = "4px 10px";
			closeDescription.style.position = "absolute";
			closeDescription.style.right = "0px";
			closeDescription.style.top = "0px";
			closeDescription.style.background = "#fcfcfc";		
			closeDescription.style.color = "#ccc";
			closeDescription.style.fontWeight = "bold";
			closeDescription.setAttribute('href','javascript:;');
			closeDescription.style.textDecoration = "none";										
			closeDescription.onclick = function() { this.parentNode.style.display = 'none'; };
			
			plots[x].onclick = function() {
				
				var relativeX = mouseX - plots[this.value].parentNode.parentNode.offsetLeft;		
				var frameWidth = plots[this.value].parentNode.parentNode.offsetWidth;	
				var relativeY = mouseY - plots[this.value].parentNode.parentNode.offsetTop;
				var frameHeight = plots[this.value].parentNode.parentNode.offsetHeight;
				
				
				plots[this.value].description = objBody.appendChild(plots[this.value].description); 
				
				plots[this.value].description.style.left = mouseX + "px"; 
				plots[this.value].description.style.top = mouseY + "px"; 
				
				plots[this.value].description.style.display = 'block';	
				plots[this.value].description.onmousedown = stopProp;
				
				//flip origin from left to right if on the right side of the frame
				if(relativeX < frameWidth * .66) {
					plots[this.value].description.style.left = mouseX + "px"; 	
				}
				else {
					plots[this.value].description.style.left = mouseX - plots[this.value].description.offsetWidth + "px"; 	
				}
				//flip origin from top to bottom if on the bottom side of the frame
				if(relativeY < frameHeight * .66) {
					plots[this.value].description.style.top = mouseY + "px"; 	
				}
				else {
					plots[this.value].description.style.top = mouseY - plots[this.value].description.offsetHeight + "px";
				}
								
			};
		}
		
			
		objBody.onmousedown = function() {
		var divs = document.getElementsByTagName('div');
			for (var i = 0; i < divs.length; i++) {
				if (divs[i].className == 'description'){
					divs[i].style.display = "none";
				}
			}
		}
		
	}
	
	function getPlots(level) {
	
		var divs = document.getElementsByTagName('div');
		
		var i = 0;
		var plots = new Array;
		
		for (var x = 0; x < divs.length; x++) {		
			var div = divs[x];
					
			if (div.className == 'plot' && div.parentNode.getAttribute('id') == level) {
				plots[i] = divs[x];
				i++;
			}
		}
		return plots;
	}
	
	function sortNumber(a, b) {
		return a.getElementsByTagName('div')[0].firstChild.nodeValue - b.getElementsByTagName('div')[0].firstChild.nodeValue;
	}
	
	function getMouse(ev) {
		var ev = ev || window.event;
		
		if(ev.pageX || ev.pageY) {
			mouseX = ev.pageX;
			mouseY = ev.pageY;
		}
		else {
			mouseX = ev.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
			mouseY = ev.clientY + document.documentElement.scrollTop + document.body.scrollTop;	
		}
		
		drag();
	}

	function setDrag() {
	
		var frame = document.getElementById('frame');
		
		frame.onmousedown = function() { 
			var frame = document.getElementById('frame');
			centerX = mouseX; 
			centerY = mouseY; 
			leftScroll = frame.scrollLeft; 
			topScroll = frame.scrollTop;
			dragging = 1;
		};
		frame.onmouseup = stopDrag;
		document.body.onmouseup = stopDrag;
		window.onmouseup = stopDrag;
		
	}
	
	function drag() {
		if(dragging == 1) {
			document.getElementById('frame').scrollLeft = leftScroll - (mouseX - centerX);
			//timeline_outer.scrollTop = topScroll - (mouseY - centerY);
		}
	}
	
	function stopDrag() {
		dragging = 0;
	}
	
	function stopProp(ev) { 
		var ev = ev || window.event; 
		if(ev.stopPropogation) { ev.stopPropagation(); }
		ev.cancelBubble = true; 
	}
}