$(function() {
	if($(".scrollContainer").length > 0){	
		var totalPanels			= $(".scrollContainer").children().size();
	
		var regWidth			= $(".panel").css("width");
		var regImgWidth			= $(".panel img").css("width");
		var regImgHeight		= $(".panel img").css("height");
		var regTitleSize		= $(".panel h2").css("font-size");
		var regParSize			= $(".panel p").css("font-size");
		
		var movingDistance	    = 150;
		
		var curWidth			= 200;
		var curImgWidth			= 200;
		var curImgHeight		= 267;
		var curTitleSize		= "20px";
		var curParSize			= "15px";
	
		var $panels				= $('#slider .scrollContainer > div');
		var $container			= $('#slider .scrollContainer');
	
		$panels.css({'float' : 'left','position' : 'relative'});
	    
		$("#slider").data("currentlyMoving", false);
	
		$container
			.css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
			.css('left', "-20px");
	
		var scroll = $('#slider .scroll').css('overflow', 'hidden');
	
		function returnToNormal(element) {
			$(element)
				.animate({ width: regWidth })
				.find("img")
				.animate({ width: regImgWidth, height: regImgHeight })
			    .end()
				.find("h2")
				.animate({ fontSize: regTitleSize })
				.end()
				.find("p")
				.animate({ fontSize: regParSize });
		};
		
		function growBigger(element) {
			$(element)
				.animate({ width: curWidth })
				.find("img")
				.animate({ width: curImgWidth, height: curImgHeight })
			    .end()
				.find("h2")
				.animate({ fontSize: curTitleSize })
				.end()
				.find("p")
				.animate({ fontSize: curParSize });
		}
		
		//direction true = right, false = left
		function change(direction) {
		   
		    //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, 10) - movingDistance : parseFloat(leftValue, 10) + 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); });
				
	            //remove all previous bound functions															
				$("#panel_"+(curPanel-1)).unbind();
				
				//go back
				$("#panel_"+(curPanel-1)).click(function(){ change(false); }); 
				
				//remove all previous bound functions
				$("#panel_"+curPanel).unbind();
			}
		}
		
		// Set up "Current" panel and next and prev
		growBigger("#panel_3");	
		var curPanel = 3;
		
		$("#panel_"+(curPanel+1)).click(function(){ change(true); });
		$("#panel_"+(curPanel-1)).click(function(){ change(false); });
		
		//when the left/right arrows are clicked
		$(".right").click(function(){ change(true); });	
		$(".left").click(function(){ change(false); });
		
		$(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;
		  }
		});
	}
});