var topPos = 0; //initialize global var
var current = 0; //Array index of currently showing image
var posFull = 614; //Double image height for seamless wrap around
var minFull = -614; 
var posHalf = 302;//Single image height for non wrapping scrolls
var minHalf = -302;
var clickSwitch = 0; //Switch that turns off Click function while scrolling

window.onload = function() {
	var compare = index(current);
	topPos = gety(document.getElementById("pic")); //detects distance from top of browser to top of pic element ( different for every browser)
	document.getElementById("featurePic").onclick = play;
	document.getElementById("up").onclick = moveUp; 
	document.getElementById("down").onclick = moveDown;
	index(current);
}

function resetSwitch(){clickSwitch = 0;} //resets switch once scroll is finished

//Sniffs for distance from scroll div to browser edge
function gety(e){
	var y = 0;
	while(e){
		y += e.offsetTop;
		e = e.offsetParent;
	}
	return y;
}

function moveUp(){
	
	if (clickSwitch == 0){
		
		//switch off click event while scrolling 
		clickSwitch = 1;
		
		if (current + 1  == index(current)){
								
			//animate out of frame
			var currentPos = gety(document.getElementById("pic")) - topPos;
			var end = currentPos - 302;
			var scroll = $('pic').effect('top', {duration:400, transition: Fx.Transitions.Quad.easeIn});
			scroll.start(currentPos, end);
			
			//delay, animate back in
			window.setTimeout( function(){
					var newTop ="-302px";
					document.getElementById("pic").style.top = newTop;
					current = 0 ;
					index(current);
					var currentPos = gety(document.getElementById("pic")) - topPos;
					var end = currentPos + detect(posFull, 1);
					var scroll = $('pic').effect('top', {duration:400, transition: Fx.Transitions.Quad.easeOut, onComplete:resetSwitch});
					scroll.start(302, 0);
				}
			, 401);

		}
		else{
			current += 1;
			index(current);
			var currentPos = gety(document.getElementById("pic")) - topPos;
			var end = currentPos - detect(posFull, 1);
			var scroll = $('pic').effect('top', {duration:800, transition: Fx.Transitions.Quad.easeInOut, onComplete:resetSwitch});
			scroll.start(currentPos, end);
		
		}
	}
}	

function moveDown(){
		if (clickSwitch == 0){
			//switch off event
			clickSwitch = 1;
			if (current == 0){ //loop back to bottom of list
				
				//animate out of frame
				var currentPos = gety(document.getElementById("pic")) - topPos;
				var end = currentPos + posHalf;
				var scroll = $('pic').effect('top', {duration:400, transition: Fx.Transitions.Quad.easeIn});
				scroll.start(currentPos, end);
				
				//delay, animate back in
				window.setTimeout( function(){
						var newTop = detect(minFull, 2) * index(current)-1 + "px";
						document.getElementById("pic").style.top = newTop;
						current = index(current) - 1;
						index(current);
						var currentPos = gety(document.getElementById("pic")) - topPos;
						var end = currentPos + detect(posFull, 0);
						var scroll = $('pic').effect('top', {duration:400, transition: Fx.Transitions.Quad.easeOut, onComplete:resetSwitch});
						scroll.start(currentPos, end);
					}
				, 401);
				
			}
			else{
				current -= 1;	
				index(current);
				var currentPos = gety(document.getElementById("pic")) - topPos;
				var end = currentPos + detect(posFull, 0);
				var scroll = $('pic').effect('top', {duration:800, transition: Fx.Transitions.Quad.easeInOut, onComplete:resetSwitch});
				scroll.start(currentPos, end);
			}
		}
	}
	
	function index (current){
		
		//Index Title
		var pics = document.getElementById("pic");
		var pa = pics.getElementsByTagName("img");
		var alt = pa[current].getAttribute('alt');
		document.getElementById("picLabel").firstChild.nodeValue = alt;
		
		//Index Description
		if (current == 0){
			inner("Dialogue, Sound Design, Foley and Underscore");}
		if (current == 1){
			inner("Original Theme and Underscore");}
		if (current == 2){
			inner("ADR, Sound Design, Foley and Underscore");}
		if (current == 3){
			inner("ProMax/BDA Award winning Original Music and Sound Design, Mix");}
		if (current == 4){
			inner("Gemini nominated Original Theme and Underscore");}
		if (current == 5){
			inner("Dialogue, ADR, Original Music and Sound Design");}
		if (current == 6){
			inner("Emmy nominated Original Theme and Underscore, Voice Record, Sound Design, Mix");}
		
		return pa.length;
		
	}
	
	function inner(text){
		document.getElementById("description").innerHTML = text
	}
	
	//Passes arguments to Mediabox Plugin
	function play(){
		if (current == 0){
			Mediabox.open('phoneBomb.html', 'Phone Bomb', 'mediabox[660 510]')
		}
		if (current == 1){
			Mediabox.open('tdi.html', 'Total Drama Island', 'mediabox[660 510]')
		}
		if (current == 2){
			Mediabox.open('eb.html', 'Eating Buccaneers', 'mediabox[660 510]')
		}
		if (current == 3){
			Mediabox.open('teletoon.html', 'Teletoon', 'mediabox[660 510]')
		}
		if (current == 4){
			Mediabox.open('jt.html', 'Johnny Test', 'mediabox[660 510]')
		}
		if (current == 5){
			Mediabox.open('aubergine.html', 'Aubergine', 'mediabox[660 510]')
		}
		if (current == 6){
			Mediabox.open('geted.html', 'Get Ed', 'mediabox[660 510]')
		}
	}
//Hack for Internet explorer to line up images correctly upon scrolling	
function detect(input, dir){
	if(navigator.appName == 'Microsoft Internet Explorer' && dir == 1){
		return(input + 3);
	}
	if(navigator.appName == 'Microsoft Internet Explorer' && dir == 0){
		return(input + 3);
	}
	if(navigator.appName == 'Microsoft Internet Explorer' && dir == 2){
		return(input - 3);
	}
	else{
		return(input);
	}
}