jQuery(function( $ ){
	
	$('#home-slideshow').serialScroll({
		target:'#home-slideshow-viewport',
		items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
		prev:'.home-slideshow-prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
		next:'.home-slideshow-next',// Selector to the 'next' button (absolute too)
		navigation:'#home-slideshow-counter li a',
		duration:700,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
		force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
		interval:10000, // It's the number of milliseconds to automatically go to the next
		cycle: true,
		
		onBefore:function( e, elem, $pane, $items, pos ){
			e.preventDefault();
			if( this.blur )
				this.blur();
			$("#home-slideshow-navigation").animate({opacity: 0.0}, 100);
			$("#slide-info div").fadeOut('medium');
		},
		onAfter:function( elem ){
			//'this' is the element being scrolled ($pane) not jqueryfied
			$('#home-slideshow-counter a.selected').removeClass('selected');
			var $slideid = $(elem).attr('class').substr(6);
			$('#home-slideshow-counter a.'+$slideid).addClass('selected');
			
			// update the slide info box
			$(".slide-info-"+$slideid).fadeIn('slow');
			// re-show navigation
			$("#home-slideshow-navigation").animate({opacity: 1.0}, 300);
		}
	});
	
	
	// give the left/right arrow buttons some fade-in class
	
	$('.home-slideshow-arrow').hover(
		function(){
			$(this).css('opacity', '0.0').animate({opacity: 1.0}, 300);
		},
		function(){
			//$(this).animate({opacity: 0.0}, 300);
		}
	);
	
	
	// handle playing & pausing
	
	$('#home-slideshow-vcr-pause').live('click', function(){
		$('#home-slideshow-viewport').trigger('stop');
		$(this).attr('id', 'home-slideshow-vcr-play');
	});
	
	$('#home-slideshow-vcr-play').live('click', function(){
		$('#home-slideshow-viewport').trigger('start');
		$(this).attr('id', 'home-slideshow-vcr-pause');
	});
	
	
});