$(document).ready(function() {
	$("#slider").slider({	// this must be called before the carousel is initialized
		value: 20,			// serves only as a default value at this point as it is overriden later by jCarousel_initCallback
		min: 1,
		max: 40, 			// serves only as a default value at this point as it is overriden later by jCarousel_initCallback
		animate: true
	});
	
	$("#image-carousel").jcarousel({
		scroll: 1,
		visible: 4,
		initCallback: jCarousel_initCallback,
        itemFirstInCallback: jCarousel_itemFirstInCallback
	});
	
	function jCarousel_initCallback(carousel, carouselState) {
    	$("#slider").slider('option', 'max', (carousel.size() - 3) * 5);
    	$("#slider").slider('option', 'value', $("#slider").slider('option', 'max') / 2);

		$("#slider").bind("slidechange", function(event, ui) {
			carousel.scroll(Math.ceil($("#slider").slider('option', 'value') / 5));
		});

		carousel.options.start = Math.ceil($("#slider").slider('option', 'value') / 5);
	}

	function jCarousel_itemFirstInCallback(carousel, carouselItem, itemIndex, carouselState) {
		var totalItems = carousel.size() - 3;
		
		if (Math.ceil($("#slider").slider('option', 'value') / 5) != itemIndex)
			//$("#slider").slider('option', 'value', (itemIndex * 5) - ((totalItems - itemIndex) / totalItems * 4));
			$("#slider").slider('value', (itemIndex * 5) - ((totalItems - itemIndex) / totalItems * 4));
	}
	
	$("#image-carousel li").hover(
		function () {
			$(this).css('height', 250); // temporarily increase the height of the li to allow for captions to be displayed
			$(this).children("div").children("div.caption").fadeIn('fast');
		},
		function () {
			$(this).children("div").children("div.caption").fadeOut('fast', function () {
				$(this).parent("div").parent("li").css('height', 118); // reset the li's height back to its original state *after* animation
			});
		}
	);
});