// JavaScript Document
$previous_position = 0;

jQuery(function( $ ){


	$('#screen').serialScroll({
		target:'#sections',
		items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
		next:'img.next',// Selector to the 'next' button (absolute too)
		axis:'xy',// The default is 'y' scroll on both ways
		navigation:'#navigate_scroller 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)
		
		onBefore:function( e, elem, $pane, $items, pos ){
			/**
			 * 'this' is the triggered element 
			 * e is the event object
			 * elem is the element we'll be scrolling to
			 * $pane is the element being scrolled
			 * $items is the items collection at this moment
			 * pos is the position of elem in the collection
			 * if it returns false, the event will be ignored
			 */
			 //those arguments with a $ are jqueryfied, elem isn't.
			e.preventDefault();
			if( this.blur ){
				this.blur();
			}
				
			$("#navigate_scroller li a img").eq($previous_position).attr("src","images/star_green.png");
			$("#navigate_scroller li a img").eq(pos).attr("src","images/star_cream.png");
			$previous_position = pos;
			$(".text").fadeOut();
		},
		onAfter:function( elem ){
			//'this' is the element being scrolled ($pane) not jqueryfied
			$(".text").fadeIn();
			

		}
	});

});