$(window).load(function() {
	
	var totalPanels			= $(".scrollContainer").children().size();
	var initPanel			= Math.round(totalPanels/2);

	var regWidth			= $(".panel").eq(0).width();
		
	var regImgWidth			= $(".panel img").width();
		
	var focusWidth			= 192;
	var focusImgWidth		= 184;

	var $panels				= $('#slider .scrollContainer > div');
	var $container			= $('#slider .scrollContainer');
    
	$("#slider").data("currentlyMoving", false);
	
	var sliderWidth = (regWidth * totalPanels) + (focusWidth - regWidth);
	var containerWidth = $(".scrollContainer").width();

	$container
		.css('width', sliderWidth )
		.css('left', (containerWidth - sliderWidth)*.5 );

	$('.scrollContainer img').each(function() {
		var imgHeight = $(this).height();
		var margTop = Math.round(300 - imgHeight)/2;
		$(this).css("margin-top",margTop+"px").data("marg",margTop);
	});
	
	function returnToNormal(element) {
		var regMargin = $(element).find('img').data('marg');
		$(element)
			.animate({ width: regWidth })
			.find("img")
			.animate({ width: regImgWidth }, {queue:false, duration:500 }).animate({marginTop: regMargin + "px"});
	};
	
	function growBigger(element) {
		var title = $(element)
			.animate({ width: focusWidth })
			.find("img")
			.animate({ width: focusImgWidth }, {queue:false, duration:500 }).animate({marginTop:"0px"})
			.end().find("a").attr("title");
		var titleArr = title.split(":");
		$("#sliderTitle").html("<cite>" + titleArr[0] + "</cite>" + ":" + titleArr[1]);
	}
	
	//direction true = right, false = left
	function change(direction) {
	   
	    //if not at the first or last panel
		if((direction && !(focusPanel < totalPanels)) || (!direction && (focusPanel <= 1))) { return false; }	
        
        //if not currently moving
        if (($("#slider").data("currentlyMoving") == false)) {
            
			$("#slider").data("currentlyMoving", true);
			
			var next         = direction ? focusPanel + 1 : focusPanel - 1;
			var leftValue    = parseFloat($(".scrollContainer").css("left"));
			var movement	 = direction ? leftValue - regWidth : leftValue + regWidth;
		
			$(".scrollContainer")
				.stop()
				.animate({
					"left": movement
				}, function() {
					$("#slider").data("currentlyMoving", false);
				});
			
			returnToNormal("#panel_"+focusPanel);
			growBigger("#panel_"+next);
			
			focusPanel = next;
			
			//remove all previous bound functions
			$("#panel_"+(focusPanel+1)).unbind();	
			
			//go forward
			$("#panel_"+(focusPanel+1)).click(function(){ change(true); });
			
            //remove all previous bound functions															
			$("#panel_"+(focusPanel-1)).unbind();
			
			//go back
			$("#panel_"+(focusPanel-1)).click(function(){ change(false); }); 
			
			//remove all previous bound functions
			$("#panel_"+focusPanel).unbind();
		}
	}
	
	// Set up "Current" panel and next and prev
	growBigger("#panel_"+initPanel);
	var focusPanel = initPanel;
	
	//$("#panel_"+(focusPanel+1)).click(function(){ change(true); return false });
	//$("#panel_"+(focusPanel-1)).click(function(){ change(false); return 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;
	  }
	});
	
});