$(function() {
	
	var totalPanels			= $(".scrollContainer").children().size();
	var totalPanels2		= $(".scrollContainer2").children().size();
	var totalPanels3		= $(".scrollContainer3").children().size();
		
	var regWidth			= $(".panel").css("width");
	var regImgWidth			= $(".panel img").css("width");
	var regTitleSize		= $(".panel h2").css("font-size");
	var regParSize			= $(".panel p").css("font-size");
	
	var movingDistance	    = 206;
	var movingDistance2	    = 200;
	var movingDistance3	    = 209; // taken from movingDistance2, for lack of a better idea ~Ingrid
	
	var curWidth			= 200;
	
	var curImgWidth			= 200;    
	var curTitleSize		= "20px"; 
	var curParSize			= "12px"; 

	var $panels				= $('#slider .scrollContainer > div');
	var $panels2			= $('#slider2 .scrollContainer2 > div');
	var $panels3			= $('#slider3 .scrollContainer3 > div');
	var $container			= $('#slider .scrollContainer');
	var $container2			= $('#slider2 .scrollContainer2');
	var $container3			= $('#slider3 .scrollContainer3');

	$panels.css({'float' : 'left','position' : 'relative'});
	$panels2.css({'float' : 'left','position' : 'relative'});	
	$panels3.css({'float' : 'left','position' : 'relative'});
    
	$("#slider").data("currentlyMoving", false);
	$("#slider2").data("currentlyMoving", false);	
	$("#slider3").data("currentlyMoving", false);

	$container
		.css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
		.css('left', "-325px"); /* for middle image */
	
	$container2
		.css('width', ($panels2[0].offsetWidth * $panels2.length) + 100 )
		.css('left', "-300px"); /* for middle image */
		
	$container3
		.css('width', ($panels2[0].offsetWidth * $panels2.length) + 100 )
		.css('left', "-325px"); /* for middle image - I took this from $container2, lacking any better ideas ~Ingrid */

	var scroll = $('#slider .scroll').css('overflow', 'hidden');
	var scroll2 = $('#slider2 .scroll').css('overflow', 'hidden');
	var scroll3 = $('#slider3 .scroll').css('overflow', 'hidden');

	function returnToNormal(element) {
		$(element)
			.animate({ width: regWidth })
			.find("img")
			.animate({ width: regImgWidth })
		    .end()
			.find("h2")
			.animate({ fontSize: regTitleSize })
			.end()
			.find("p")
			.animate({ fontSize: regParSize });
	};
	
	function growBigger(element) {
		$(element)
			.animate({ width: curWidth })
			.find("img")
			.animate({ width: curImgWidth })
		    .end()
			.find("h2")
			.animate({ fontSize: curTitleSize })
			.end()
			.find("p")
			.animate({ fontSize: curParSize });
	}
	
	//direction true = right, false = left
	function change(direction, source) {

		if(source == 1){
			//if not at the first or last panel
			if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }	
			
			//if not currently moving
			if (($("#slider").data("currentlyMoving") == false)) {
				
				$("#slider").data("currentlyMoving", true);
				
				var next         = direction ? curPanel + 1 : curPanel - 1;
				var leftValue    = $(".scrollContainer").css("left");
				var movement	 = direction ? parseFloat(leftValue, 1) - movingDistance : parseFloat(leftValue, 1) + movingDistance;
			
				$(".scrollContainer")
					.stop()
					.animate({
						"left": movement
					}, function() {
						$("#slider").data("currentlyMoving", false);
					});
				
				returnToNormal("#panel_"+curPanel);
				growBigger("#panel_"+next);
				
				curPanel = next;
				
				//remove all previous bound functions
				$("#panel_"+(curPanel+1)).unbind();	
				
				//go forward
				$("#panel_"+(curPanel+1)).click(function(){ change(true,1); });
				
				//remove all previous bound functions															
				$("#panel_"+(curPanel-1)).unbind();
				
				//go back
				$("#panel_"+(curPanel-1)).click(function(){ change(false,1); }); 
				
				//remove all previous bound functions
				$("#panel_"+curPanel).unbind();
			}
		} else if(source == 2){

			//if not at the first or last panel
			if((direction && !(curPanel2 < totalPanels2)) || (!direction && (curPanel2 <= 1))) { return false; }	
			
			//if not currently moving
			if (($("#slider2").data("currentlyMoving") == false)) {
				
				$("#slider2").data("currentlyMoving", true);
				
				var next         = direction ? curPanel2 + 1 : curPanel2 - 1;
				var leftValue    = $(".scrollContainer2").css("left");
				var movement	 = direction ? parseFloat(leftValue, 1) - movingDistance2 : parseFloat(leftValue, 1) + movingDistance2;
			
				$(".scrollContainer2")
					.stop()
					.animate({
						"left": movement
					}, function() {
						$("#slider2").data("currentlyMoving", false);
					});
				
				returnToNormal("#panel_"+curPanel2+"a");
				growBigger("#panel_"+next+"a");
				
				curPanel2 = next;
				
				//remove all previous bound functions
				$("#panel_"+(curPanel2+1)+"a").unbind();	
				
				//go forward
				$("#panel_"+(curPanel2+1)+"a").click(function(){ change(true,2); });
				
				//remove all previous bound functions															
				$("#panel_"+(curPanel2-1)+"a").unbind();
				
				//go back
				$("#panel_"+(curPanel2-1)+"a").click(function(){ change(false,2); }); 
				
				//remove all previous bound functions
				$("#panel_"+curPanel2+"a").unbind();
			}
		} else if(source == 3){

			//if not at the first or last panel
			if((direction && !(curPanel3 < totalPanels3)) || (!direction && (curPanel3 <= 1))) { return false; }	
			
			//if not currently moving
			if (($("#slider3").data("currentlyMoving") == false)) {
				
				$("#slider3").data("currentlyMoving", true);
				
				var next         = direction ? curPanel3 + 1 : curPanel3 - 1;
				var leftValue    = $(".scrollContainer3").css("left");
				var movement	 = direction ? parseFloat(leftValue, 1) - movingDistance3 : parseFloat(leftValue, 1) + movingDistance3;
			
				$(".scrollContainer3")
					.stop()
					.animate({
						"left": movement
					}, function() {
						$("#slider3").data("currentlyMoving", false);
					});
				
				returnToNormal("#panel_"+curPanel3+"b");
				growBigger("#panel_"+next+"b");
				
				curPanel3 = next;
				
				//remove all previous bound functions
				$("#panel_"+(curPanel3+1)+"b").unbind();	
				
				//go forward
				$("#panel_"+(curPanel3+1)+"b").click(function(){ change(true,3); });
				
				//remove all previous bound functions															
				$("#panel_"+(curPanel3-1)+"b").unbind();
				
				//go back
				$("#panel_"+(curPanel3-1)+"b").click(function(){ change(false,3); }); 
				
				//remove all previous bound functions
				$("#panel_"+curPanel3+"b").unbind();
			}
		}
	}
	
	// Set up "Current" panel and next and prev
	growBigger("#panel_3");
	growBigger("#panel_3a");
	growBigger("#panel_3b");
	var curPanel = 3;
	var curPanel2 = 3;
	var curPanel3 = 3;
	
	$("#panel_"+(curPanel+1)).click(function(){ change(true,1); });
	$("#panel_"+(curPanel2+1)+"a").click(function(){ change(true,2); });
	$("#panel_"+(curPanel3+1)+"b").click(function(){ change(true,3); });
	$("#panel_"+(curPanel-1)).click(function(){ change(false,1); });
	$("#panel_"+(curPanel2-1)+"a").click(function(){ change(false,2); });
	$("#panel_"+(curPanel3-1)+"b").click(function(){ change(false,3); });
	
	//when the left/right arrows are clicked
	$(".right").click(function(){ change(true,1); });
	$(".right2").click(function(){ change(true,2); });
	$(".right3").click(function(){ change(true,3); });
	$(".left").click(function(){ change(false,1); });
	$(".left2").click(function(){ change(false,2); });
	$(".left3").click(function(){ change(false,3); });
	

	$(window).keydown(function(event){
	  switch (event.keyCode) {
			case 13: //enter
				$(".right").click();
				break;
			case 32: //space
				$(".right").click();
				break;
	    case 37: //left arrow
				$(".left").click();
				break;
			case 39: //right arrow
				$(".right").click();
				break;
	  }
	});
	
});