$(document).ready(function() {
		

 		//
		//// SET UP THUMBNAIL CAROUSEL
		//


		// Dynamically set the width of the carousel panel (the sliding container), 
		// based on the number thumbnails there are for the selected album.
		var width = 0;
		$('.carousel .thumbnails a').each(function(i){
				width += $(this).outerWidth(true);
			});
		$('.carousel .carousel-panel').width(width);
//		alert("Total width of panel is: " + $('.carousel .carousel-panel').width() + " pixels.");
		
		// Assign these elements to variables, just for convenience (multiple use).
		var $prev = $('.carousel .carousel-previous');
		var $next = $('.carousel .carousel-next');

		// Set up the carousel scroller.
		$('.carousel').serialScroll({
			target:'.carousel-viewport',
			items:'li', //selector to the items ( relative to the matched elements, '.carousel' in this case )
			prev:'a.carousel-previous',//selector to the 'prev' button (absolute!, meaning it's relative to the document)
			next:'a.carousel-next',//selector to the 'next' button (absolute too)
			event:'click',//on which event to react (click is the default, you probably won't need to specify it)
			duration:500,//length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
			start: 0, //on which element (index) to begin ( 0 is the default, redundant in this case )
			force:true, //force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
			cycle:false,//cycle endlessly ( constant velocity, true is the default )
			step:3, // How many items to scroll each time ( 1 is the default, no need to specify )
			jump:false, //if true, items become clickable (or w/e 'event' is, and when activated, the pane scrolls to them)
			lazy:false,//(default) if true, the plugin looks for the items on each event(allows AJAX or JS content, or reordering)
			constant:true,
			onBefore:function( e, elem, $pane, $items, pos ){
/*
				// This handles updates of the carousel 'status' information,
				// paging and previous/next controls.
				$('.carousel .carousel-page').text(pos + 1);
				if (pos == 0) {
					$prev.addClass("disabled");
				} else {
					$prev.removeClass("disabled");
				}
				if (pos + 1 == $items.length) {
					$next.addClass("disabled");
				} else {
					$next.removeClass("disabled");
				}
*/
			}
		});
		
		// Initialise slideshow-related behaviour of thumbnail links
		// This *ONLY* sets up the click- and response-based behaviour
		// as relates to the interaction with the ssp component.
		$(".carousel .thumbnails li a")
			// Remove hardcoded link behaviour on all thumbnail links.
			.attr("href", "#")
			.each(function(i) {
				// Set new onclick action on each link to load image.
				$(this).bind("click", {index: i}, function(event) {
					//event.preventDefault();
					sspLoadImage(event.data.index);
					//return false;
				});
				// Set up each link to respond to changes in ssp display. 
				$(this).bind('sspImageSelected', {index: i}, function(event, index) {
					$(this).parent().removeClass('active');
					if (event.data.index == index) {
						$(this).parent().addClass('active');
					}
	
				});
			});
		$(".carousel").bind('sspImageSelected', function(event, index){
				$('.carousel-viewport', $(this)).trigger('goto', [index]);
			});
	});