/*----------------------------
	Load modal with timeline. Move timeline based on mouse movement. 
	Developed: Codin Pangell, 2009
----------------------------*/

//globally used vars
var currentImagePosition=0;
var viewportWidth=0;
var viewportHeight=0;
var leftBound=0;
var rightBound=0;
var w=0; //width of image
var boundWidth=0;
var mousePos=0;
var lastMousePos=0;
var trackInterval;


$(document).ready(function() {
	$('#timeline-btn').mouseover(function() {
		$(this).attr('style', 'color:#FFFFFF;');
	});
	$('#timeline-btn').mouseout(function() {
		$(this).attr('style', 'color:#AEAEAE;');
	});
	$('#timeline-btn').click(function() {
		ModalController.init();
		ModalController.openModal(document.getElementById('timeline-modal'));
		$('#modal-close-btn').click(function() {
			ModalController.closeModal();
			clearInterval(trackInterval);
		});
		//determine the width of the image
		w=document.getElementById('imageWidth').value; //for some reason IE was having an issue reading the width of the image so I put it in a input box.
		if (w.toString().indexOf('px')>0){
			w=w.toString().split('px').join('');
			w=parseInt(w);
		}
		
		viewportWidth = $(window).width();  
		viewportHeight = $(window).height();  
		//start image at right side of image
		var start=0;
		if (w>viewportWidth){
			start=viewportWidth-w;
		}else{start=w}
		$('#timeline').css("left",start);
		//now tween from the far right to the desired marker point (dynamically controlled in DCMS)
		currentImagePosition=-document.getElementById('stop_at_pixel_number').value;
		$("#timeline").animate({ left:currentImagePosition+"px" }, 1750, 
			function(){
				//display mouse directions
				$("#mouse-directions").fadeIn("slow");
				setTimeout('directionsOutAndStartTracking()',3000);
			}
		);
	});
	
});

function directionsOutAndStartTracking(){
	$("#mouse-directions").fadeOut("slow");
	//determine mouse bounds to start movement.
	boundWidth = viewportWidth/3;
	leftBound=boundWidth;
	rightBound=(boundWidth*2);
	
	//now track mouse movement
	$().mousemove(function(e){
		mousePos=e.pageX;
	});
	
	trackInterval = setInterval(TrackMovement, 50);
}


function TrackMovement(){
	//determine current timeline position
	var timelinePos=document.getElementById('timeline').style.left;
	if (timelinePos.toString().indexOf('px')>0){
		timelinePos=timelinePos.toString().split('px').join('');
		timelinePos=parseInt(timelinePos);
	}
	
	if (mousePos<=leftBound){//move image left	
		if ((timelinePos*-1)<=0){ //dont move past left zero
			document.getElementById('timeline').style.left=0+"px";
		}else{
			currentImagePosition+=50;
			document.getElementById('timeline').style.left=currentImagePosition+"px";
		}
	}else if (mousePos>=rightBound){//move image right
		//alert("w:"+w+" vp:"+viewportWidth)
		if ((timelinePos*-1)>=(w-viewportWidth)){ //dont move past right side of image
			document.getElementById('timeline').style.left= -(w-viewportWidth)+"px";
		}else{
			currentImagePosition-=50;
			document.getElementById('timeline').style.left=currentImagePosition+"px";
			//alert(document.getElementById('timeline').style.left)
		}
		
	}
}