// Easing equation, borrowed from jQuery easing plugin
// http://gsgd.co.uk/sandbox/jquery/easing/
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
	return -c * ((t=t/d-1)*t*t*t - 1) + b;
};







jQuery(function( $ ){
	/**
	 * Most jQuery.serialScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
	 * @see http://flesler.demos.com/jquery/scrollTo/
	 * You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.serialScroll.
	 */
	
	/**
	 * The plugin binds 6 events to the container to allow external manipulation.
	 * prev, next, goto, start, stop and notify
	 * You use them like this: $(your_container).trigger('next'), $(your_container).trigger('goto', [5]) (0-based index).
	 * If for some odd reason, the element already has any of these events bound, trigger it with the namespace.
	 */		
	
	/**
	 * IMPORTANT: this call to the plugin specifies ALL the settings (plus some of jQuery.ScrollTo)
	 * This is done so you can see them. You DON'T need to specify the commented ones.
	 * A 'target' is specified, that means that #screen is the context for target, prev, next and navigation.
	 */
	 
	 // dichiarazione variabili
	 
	var $prev = $('#prev'),//prev button
		$next = $('#next');//next button


	// rende invisibile prev al caricamento della pagina
	 $prev.hide();
	 
	 
	$('#screen').serialScroll({
							  
		target:'#sections',
		items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
		prev:'img.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
		next:'img.next',// Selector to the 'next' button (absolute too)
		axis:'x',// The default is 'y' scroll on both ways
		duration:600,// 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)
		
		//queue:false,// We scroll on both axes, scroll both at the same time.
		//event:'click',// On which event to react (click is the default, you probably won't need to specify it)
		//stop:false,// Each click will stop any previous animations of the target. (false by default)
		//lock:true, // Ignore events if already animating (true by default)		
		//start: 0, // On which element (index) to begin ( 0 is the default, redundant in this case )		
		//cycle:true,// Cycle endlessly ( constant velocity, true is the default )
		//step:1, // 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)
		//interval:1000, // It's the number of milliseconds to automatically go to the next
		//constant:true, // constant speed
		

		// rende invisibile la freccia quando raggiunge l'ultima slide

		onBefore:function( e, elem, $screen, $items, pos ){
			$prev.add($next).show();
			if( pos == 0 )
				$prev.hide();
			else if( pos == $items.length-1 )
				$next.hide();
		}


/****************************************************************************
Instead of hide and show, you can use fadeIn and fadeOut or whatever you want.
To hide the left arrow when the page loads, use css, or hide it with jQuery
*****************************************************************************/

		});
	
	
	/* 
	
	roll over per le frecce dello slide principale.
	
	le immagini si devono per forza chiamare right-.gif e left-.gif
	
	*/
	
	
	$("#next").hover(function() {
    $(this).attr("src", $(this).attr("src").split("-").join("-hover"));
  	}, 
	
	function() {
    $(this).attr("src", $(this).attr("src").split("-hover.").join("-."));
  });

	
	
	$("#prev").hover(function() {
    $(this).attr("src", $(this).attr("src").split("-").join("-hover"));
  	}, 
	
	function() {
    $(this).attr("src", $(this).attr("src").split("-hover.").join("-."));
  });
	
	
});