// 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;
};

/********************************************
Snippet for jQuery.SerialScroll
--Manipulate SerialScroll with the keyboard--

Note that this also applies to the mouse,
just trigger prev or next whenever you want
*********************************************/

jQuery(function( $ ){
	var $pane = $('#slideshow');//let's save it, the element being scrolled
	
	
	$pane.serialScroll({
	items:'li',
		prev:'div.previous_button',
		next:'div.next_button',
		offset:-15, //when scrolling to photo, stop 230 before reaching it (from the left)
		start:0, //as we are centering it, start at the 2nd
		duration:300,
		force:true,
		stop:true,
		lock:false,
		cycle:false, //don't pull back once you reach the end
		easing:'easeOutQuart', //use this easing equation for a funny effect
		jump: false //click on the images to scroll to them 
		
		
	});
	
	 $(document).keyup(function(e){
        switch( e.keyCode ){
        	case 39://right (->)
        		$pane.trigger('next');
        	break;
        	case 37://left (<-)
        		$pane.trigger('prev');
        	break;
			case 38://up 
				$pane.trigger(".next_job");
	    	break;
			case 40://down
				$pane.trigger(".previous_job");
			break;
        }
    });
	

	/**
	 * Demo binding and preparation, no need to read this part
	 */
		//borrowed from jQuery easing plugin
		//http://gsgd.co.uk/sandbox/jquery.easing.php
		$.easing.elasout = function(x, t, b, c, d) {
			var s=1.70158;var p=0;var a=c;
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
		};
		$('a.back').click(function(){
			$(this).parents('div.pane').scrollTo( 0, 800, { queue:true } );
			$(this).parents('div.section').find('span.message').text( this.title );
			return false;
		});
		//just for the example, to stop the click on the links.
		$('ul.links').click(function(e){
			e.preventDefault();
			var link = e.target;
			link.blur();
			if( link.title )
				$(this).parent().find('span.message').text(link.title);
		});
	
	//by default, the scroll is only done vertically ('y'), change it to both.
	$.scrollTo.defaults.axis = 'xy'; 			
	//this one is important, many browsers don't reset scroll on refreshes
	$('div.pane').scrollTo( 0 );//reset all scrollable panes to (0,0)
	$.scrollTo( 0 );//reset the screen to (0,0)
	
	//TOC, shows how to scroll the whole window
	$('#toc a').click(function(){//$.scrollTo works EXACTLY the same way, but scrolls the whole screen
		$.scrollTo( this.hash, 1500, { easing:'elasout' });
		$(this.hash).find('span.message').text( this.title );
		return false;
	});
	
	//Target examples bindings
	var $paneTarget = $('#slideshow');			
	



$('#relative-selector-1').click(function(){$('#slideshow').scrollTo( 'li:eq(0)', 800, {axis:'x', offset:-15} );});
$('#relative-selector-2').click(function(){$('#slideshow').scrollTo( 'li:eq(1)', 800, {axis:'x', offset:-15} );});
$('#relative-selector-3').click(function(){$('#slideshow').scrollTo( 'li:eq(2)', 800, {axis:'x', offset:-15});});
$('#relative-selector-4').click(function(){$('#slideshow').scrollTo( 'li:eq(3)', 800, {axis:'x', offset:-15});});
$('#relative-selector-5').click(function(){$('#slideshow').scrollTo( 'li:eq(4)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-6').click(function(){$('#slideshow').scrollTo( 'li:eq(5)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-7').click(function(){$('#slideshow').scrollTo( 'li:eq(6)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-8').click(function(){$('#slideshow').scrollTo( 'li:eq(7)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-9').click(function(){$('#slideshow').scrollTo( 'li:eq(8)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-10').click(function(){$('#slideshow').scrollTo( 'li:eq(9)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-11').click(function(){$('#slideshow').scrollTo( 'li:eq(10)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-12').click(function(){$('#slideshow').scrollTo( 'li:eq(11)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-13').click(function(){$('#slideshow').scrollTo( 'li:eq(12)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-14').click(function(){$('#slideshow').scrollTo( 'li:eq(13)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-15').click(function(){$('#slideshow').scrollTo( 'li:eq(14)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-16').click(function(){$('#slideshow').scrollTo( 'li:eq(15)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-17').click(function(){$('#slideshow').scrollTo( 'li:eq(16)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-18').click(function(){$('#slideshow').scrollTo( 'li:eq(17)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-19').click(function(){$('#slideshow').scrollTo( 'li:eq(18)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-20').click(function(){$('#slideshow').scrollTo( 'li:eq(19)', 800, {axis:'x', offset:-15}   );});
$('#relative-selector-21').click(function(){$('#slideshow').scrollTo( 'li:eq(20)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-22').click(function(){$('#slideshow').scrollTo( 'li:eq(21)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-23').click(function(){$('#slideshow').scrollTo( 'li:eq(22)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-24').click(function(){$('#slideshow').scrollTo( 'li:eq(23)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-25').click(function(){$('#slideshow').scrollTo( 'li:eq(24)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-26').click(function(){$('#slideshow').scrollTo( 'li:eq(25)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-27').click(function(){$('#slideshow').scrollTo( 'li:eq(26)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-28').click(function(){$('#slideshow').scrollTo( 'li:eq(27)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-29').click(function(){$('#slideshow').scrollTo( 'li:eq(28)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-30').click(function(){$('#slideshow').scrollTo( 'li:eq(29)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-31').click(function(){$('#slideshow').scrollTo( 'li:eq(30)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-32').click(function(){$('#slideshow').scrollTo( 'li:eq(31)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-33').click(function(){$('#slideshow').scrollTo( 'li:eq(32)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-34').click(function(){$('#slideshow').scrollTo( 'li:eq(33)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-35').click(function(){$('#slideshow').scrollTo( 'li:eq(34)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-36').click(function(){$('#slideshow').scrollTo( 'li:eq(35)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-37').click(function(){$('#slideshow').scrollTo( 'li:eq(36)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-38').click(function(){$('#slideshow').scrollTo( 'li:eq(37)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-39').click(function(){$('#slideshow').scrollTo( 'li:eq(38)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-40').click(function(){$('#slideshow').scrollTo( 'li:eq(39)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-41').click(function(){$('#slideshow').scrollTo( 'li:eq(40)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-42').click(function(){$('#slideshow').scrollTo( 'li:eq(41)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-43').click(function(){$('#slideshow').scrollTo( 'li:eq(42)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-44').click(function(){$('#slideshow').scrollTo( 'li:eq(43)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-45').click(function(){$('#slideshow').scrollTo( 'li:eq(44)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-46').click(function(){$('#slideshow').scrollTo( 'li:eq(45)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-47').click(function(){$('#slideshow').scrollTo( 'li:eq(46)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-48').click(function(){$('#slideshow').scrollTo( 'li:eq(47)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-49').click(function(){$('#slideshow').scrollTo( 'li:eq(48)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-50').click(function(){$('#slideshow').scrollTo( 'li:eq(49)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-51').click(function(){$('#slideshow').scrollTo( 'li:eq(50)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-52').click(function(){$('#slideshow').scrollTo( 'li:eq(51)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-53').click(function(){$('#slideshow').scrollTo( 'li:eq(52)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-54').click(function(){$('#slideshow').scrollTo( 'li:eq(53)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-55').click(function(){$('#slideshow').scrollTo( 'li:eq(54)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-56').click(function(){$('#slideshow').scrollTo( 'li:eq(55)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-57').click(function(){$('#slideshow').scrollTo( 'li:eq(56)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-58').click(function(){$('#slideshow').scrollTo( 'li:eq(57)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-59').click(function(){$('#slideshow').scrollTo( 'li:eq(58)', 800, {axis:'x' , offset:-15} );});
$('#relative-selector-60').click(function(){$('#slideshow').scrollTo( 'li:eq(59)', 800, {axis:'x' , offset:-15} );});


	

});



/************************************************
If you want to use up and down:
- use 38(up), and 40(down).

To see other keyCodes, check: http://rurl.org/pdl
*************************************************/