var $imgCarouselWrapper = {};

$(document).ready(function(){
	// Get the wrapper obj and only set the ID once
	$imgCarouselWrapper = $('#imgCarousel');

	$("ul li", $imgCarouselWrapper).each(function() {
		$(this).css("left", $(this).index()*150);
	});

	// hide the "dim" on the middle image
	$("ul li:eq(1) div[class=dim]", $imgCarouselWrapper).css("visibility", "hidden");
	
	$("ul li", $imgCarouselWrapper).css("z-index", 1);
	$("ul li:eq(1)", $imgCarouselWrapper).css("z-index", 100);
	
	$("ul li:eq(0) *", $imgCarouselWrapper).css("width", '306px').css("height", '172px');
	$("ul li:eq(0) div[class=shadow]", $imgCarouselWrapper).css("top", '172px');
	$("ul li:eq(0)", $imgCarouselWrapper).css("left", "0").css("top", "32px");
	
	$("ul li:eq(2) *", $imgCarouselWrapper).css("width", '306px').css("height", '172px');
	$("ul li:eq(2) div[class=shadow]", $imgCarouselWrapper).css("top", '172px');
	$("ul li:eq(2)", $imgCarouselWrapper).css("left", "430px").css("top", "32px");
	
	setSlidesClick(1);
});

function setSlidesClick(centerSlide) {
	var rightSlide = centerSlide + 1;
	var leftSlide = centerSlide - 1;
	
	if(rightSlide > 2) rightSlide = 0;
	if(leftSlide < 0) leftSlide = 2;

	$(".dim, a", $imgCarouselWrapper).unbind("click");
	
	var easingStyle = "easeOutBack";
	
	$(".dim, a", $("ul li:eq(" + leftSlide + ")", $imgCarouselWrapper)).click(function () {
		$("ul li:eq(" + centerSlide + ")", $imgCarouselWrapper).animate({top: '32px', left: 430}, 300, easingStyle);
		$("ul li:eq(" + centerSlide + ") div[class=dim]", $imgCarouselWrapper).animate({width: '306px', height: '172px'}, 300, easingStyle);
		$("ul li:eq(" + centerSlide + ") img", $imgCarouselWrapper).animate({width: '306px', height: '172px'}, 300, easingStyle);
		$("ul li:eq(" + centerSlide + ") div[class=shadow]", $imgCarouselWrapper).animate({width: '306px', top: '172px'}, 300, easingStyle);
		$("ul li:eq(" + centerSlide + ") div[class=dim]", $imgCarouselWrapper).css("visibility", "visible");
		$("ul li:eq(" + centerSlide + ")", $imgCarouselWrapper).css("z-index", 2);
		
		$("ul li:eq(" + rightSlide + ")", $imgCarouselWrapper).animate({top: '32px', left: 0}, 500, easingStyle);
		$("ul li:eq(" + rightSlide + ") div[class=dim]", $imgCarouselWrapper).animate({width: '306px', height: '172px'}, 500, easingStyle);
		$("ul li:eq(" + rightSlide + ") img", $imgCarouselWrapper).animate({width: '306px', height: '172px'}, 500, easingStyle);
		$("ul li:eq(" + rightSlide + ") div[class=shadow]", $imgCarouselWrapper).animate({width: '306px', top: '172px'}, 500, easingStyle);
		$("ul li:eq(" + rightSlide + ") div[class=dim]", $imgCarouselWrapper).css("visibility", "visible");
		$("ul li:eq(" + rightSlide + ")", $imgCarouselWrapper).css("z-index", 1);
		
		$("ul li:eq(" + leftSlide + ")", $imgCarouselWrapper).animate({top: '0px', left: 150}, 600, easingStyle);
		$("ul li:eq(" + leftSlide + ") div[class=dim]", $imgCarouselWrapper).animate({width: '438px', height: '247px'}, 600, easingStyle);
		$("ul li:eq(" + leftSlide + ") img", $imgCarouselWrapper).animate({width: '438px', height: '247px'}, 600, easingStyle);
		$("ul li:eq(" + leftSlide + ") div[class=shadow]", $imgCarouselWrapper).animate({width: '438px', top: '247px'}, 600, easingStyle);
		$("ul li:eq(" + leftSlide + ") div[class=dim]", $imgCarouselWrapper).css("visibility", "hidden");
		$("ul li:eq(" + leftSlide + ")", $imgCarouselWrapper).css("z-index", 100);			
		
		setSlidesClick(leftSlide);
		
		return false;
	});
	
	$(".dim, a", $("ul li:eq(" + rightSlide + ")",$imgCarouselWrapper)).click(function () {
		$("ul li:eq(" + centerSlide + ")", $imgCarouselWrapper).animate({top: '32px', left: 0}, 300, easingStyle);
		$("ul li:eq(" + centerSlide + ") div[class=dim]", $imgCarouselWrapper).animate({width: '306px', height: '172px'}, 300, easingStyle);
		$("ul li:eq(" + centerSlide + ") img", $imgCarouselWrapper).animate({width: '306px', height: '172px'}, 300, easingStyle);
		$("ul li:eq(" + centerSlide + ") div[class=shadow]", $imgCarouselWrapper).animate({width: '306px', top: '172px'}, 300, easingStyle);
		$("ul li:eq(" + centerSlide + ") div[class=dim]", $imgCarouselWrapper).css("visibility", "visible");
		$("ul li:eq(" + centerSlide + ")", $imgCarouselWrapper).css("z-index", 2);
		
		$("ul li:eq(" + leftSlide + ")", $imgCarouselWrapper).animate({top: '32px', left: 430}, 500, easingStyle);
		$("ul li:eq(" + leftSlide + ") div[class=dim]", $imgCarouselWrapper).animate({width: '306px', height: '172px'}, 500, easingStyle);
		$("ul li:eq(" + leftSlide + ") img", $imgCarouselWrapper).animate({width: '306px', height: '172px'}, 500, easingStyle);
		$("ul li:eq(" + leftSlide + ") div[class=shadow]", $imgCarouselWrapper).animate({width: '306px', top: '172px'}, 500, easingStyle);
		$("ul li:eq(" + leftSlide + ") div[class=dim]", $imgCarouselWrapper).css("visibility", "visible");
		$("ul li:eq(" + leftSlide + ")", $imgCarouselWrapper).css("z-index", 1);
		
		$("ul li:eq(" + rightSlide + ")", $imgCarouselWrapper).animate({top: '0px', left: 150}, 600, easingStyle);
		$("ul li:eq(" + rightSlide + ") div[class=dim]", $imgCarouselWrapper).animate({width: '438px', height: '247px'}, 600, easingStyle);
		$("ul li:eq(" + rightSlide + ") img", $imgCarouselWrapper).animate({width: '438px', height: '247px'}, 600, easingStyle);
		$("ul li:eq(" + rightSlide + ") div[class=shadow]", $imgCarouselWrapper).animate({width: '438px', top: '247px'}, 600, easingStyle);
		$("ul li:eq(" + rightSlide + ") div[class=dim]", $imgCarouselWrapper).css("visibility", "hidden");
		$("ul li:eq(" + rightSlide + ")", $imgCarouselWrapper).css("z-index", 100);
		
		setSlidesClick(rightSlide);

		return false;
	});
}