$(document).ready(function() {
	var spacing = 245;
	$('#carousel').css({
		'width': '981px',
		'height': '240px',
		'overflow': 'hidden'
		}).find('.carouselItems a').css({
			'float': 'none',
		'position': 'absolute',
		'left': 1000
	});

	var setUpCarouselItems = function() {
		var $carouselItems = $('#carousel .carouselItems a');
		$carouselItems.unbind('click mouseenter mouseleave');
		// Left image; scroll right (to view images on left).
		$carouselItems.eq(0).css('left', 0).click(function(event) {
			
		$carouselItems.eq(0).animate({'left': spacing}, 'fast');
		$carouselItems.eq(1).animate({'left': spacing * 2}, 'fast');
		$carouselItems.eq(2).animate({'left': spacing * 3}, 'fast');
		$carouselItems.eq(3).animate({'left': spacing * 4}, 'fast');
		$carouselItems.eq($carouselItems.length - 1)
		.css('left', -spacing)
		.animate({'left': 0}, 'fast', function() {
		$(this).prependTo('#carousel .carouselItems');
		setUpCarouselItems();
		});
		
		event.preventDefault();
		}).hover(function() {
		$leftRollover.appendTo(this).show();
		}, function() {
		$leftRollover.hide();
		});
		// Right image; scroll left (to view images on right).
		$carouselItems.eq(3)
		.css('left', spacing * 3)
		.click(function(event) {
		$carouselItems.eq(0)
		.animate({'left': -spacing}, 'fast', function() {
		$(this).appendTo('#carousel .carouselItems');
		setUpCarouselItems();
		});
		$carouselItems.eq(1).animate({'left': 0}, 'fast');
		$carouselItems.eq(2).animate({'left': spacing}, 'fast');
		$carouselItems.eq(3).animate({'left': spacing*2}, 'fast');
		$carouselItems.eq(4)
		.css('left', spacing * 4)
		.animate({'left': spacing * 3}, 'fast');
		event.preventDefault();
		}).hover(function() {
		$rightRollover.appendTo(this).show();
		}, function() {
		$rightRollover.hide();
		});
		// Center image.
		$carouselItems.eq(1)
		.css('left', spacing)
		.hover(function() {
		$enlargeRollover.appendTo(this).show();
		}, function() {
		$enlargeRollover.hide();
		});
		
		$carouselItems.eq(2)
		.css('left', spacing*2)
		.hover(function() {
		$enlargeRollover.appendTo(this).show();
		}, function() {
		$enlargeRollover.hide();
		});
	};

	setUpCarouselItems();

	function createControl(src) {
		return $('<img/>')
		.attr('src', src)
		.addClass('control')
		.css('opacity', 0.6)
		.css('display', 'none');
	}

	var $leftRollover = createControl('images/left.gif');
	var $rightRollover = createControl('images/right.gif');
	var $enlargeRollover = createControl('images/enlarge.gif');
});