(function($){
	//Carousel
	$.fn.carousel = function() {

		var carouselItems = [];

		$(this).each(function() {
			var $carousel = $(this);

			//Get initial values
			var carHeight = $carousel.height();
			var carWidth = $carousel.width();

			//[x,y,multiplier,zIndex,scale]
			var positions = [
				[carWidth-30,0,0,10,.6],
				[carWidth-10,carHeight/2,.5,5,.4],
				[carWidth-30,carHeight,1,11,.6],
				[carWidth-80,carHeight/2,.5,20,1]
			]

			$carousel.append('<span id="carouselNext">Next</span><span id="carouselPrev">Previous</span>');
			$carousel.find('li').css({position:'absolute'});

			$carousel.find('li').each(function(index){
				var $elem = $(this);

				var orgSize = [$elem.outerWidth(), $elem.outerHeight()]

				var newWidth = positions[index][4] * $elem.outerWidth();
				var newHeight = positions[index][4] * $elem.outerHeight();
				var multiplier = positions[index][2];
				var fontSize = positions[index][4] * 100;

				var left = positions[index][0] - newWidth;
				var top = positions[index][1] - (newHeight * multiplier);
				var zIndex = positions[index][3];

				$elem.find('.caption').css({'font-size':fontSize+'%'});
				$elem.css({top:top,left:left,width:newWidth,'z-index':zIndex});

				carouselItems.push({
					item:$elem,
					originalSize:orgSize,
					position:index
				});

			});

			$('#carouselNext').click(function(){
				$carousel.find('li').each(function(index) {
					var $elem = $(this);
					carouselItems[index].position++;
					
					if(carouselItems[index].position >= positions.length)
						carouselItems[index].position = 0;

					var position = carouselItems[index].position;					

					var newWidth = positions[position][4] * carouselItems[index].originalSize[0];
					var newHeight = positions[position][4] * carouselItems[index].originalSize[1];
					var multiplier = positions[position][2];
					var fontSize = positions[position][4] * 100;

					var left = positions[position][0] - newWidth;
					var top = positions[position][1] - (newHeight * multiplier);
					var zIndex = positions[position][3];

					$elem.css({'z-index':zIndex});
					$elem.find('.caption').animate({'font-size':fontSize+'%'});
					$elem.animate({top:top,left:left,width:newWidth});
					
				});
			});

			$('#carouselPrev').click(function(){
				$carousel.find('li').each(function(index) {
					var $elem = $(this);
					carouselItems[index].position--;

					if(carouselItems[index].position < 0)
						carouselItems[index].position = positions.length - 1;

					var position = carouselItems[index].position;

					var newWidth = positions[position][4] * carouselItems[index].originalSize[0];
					var newHeight = positions[position][4] * carouselItems[index].originalSize[1];
					var multiplier = positions[position][2];
					var fontSize = positions[position][4] * 100;

					var left = positions[position][0] - newWidth;
					var top = positions[position][1] - (newHeight * multiplier);
					var zIndex = positions[position][3];

					$elem.css({'z-index':zIndex});
					$elem.find('.caption').animate({'font-size':fontSize+'%'});
					$elem.animate({top:top,left:left,width:newWidth});
				});
			});
		});
	};
})(jQuery);

//Using $(window).load to ensure images are loaded before initilising the carousel
$(window).load(function() {
	$('#carousel').carousel();
});