// 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( $ ){
	
	/**
	 * No need to have only one element in view, you can use it for slideshows or similar.
	 * In this case, clicking the images, scrolls to them.
	 * No target in this case, so the selectors are absolute.
	 */
	
	$('#slideshow').serialScroll({
		items:'li',
		//prev:'#screen2 .prev',
		//items:'#screen2 .next',
		offset:0, //when scrolling to photo, stop 230 before reaching it (from the left)
		start:0, //as we are centering it, start at the 2nd
		force:false,
		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
		exclude:0
	});

  $('#screen2 .prev').click(function(){
		$('#slideshow').scrollTo( '-=196px', 600, {axis:'x', easing:'easeOutQuart', onAfterFirst:slidermarker('-')});
	});
  
  $('#screen2 .next').click(function(){
		$('#slideshow').scrollTo( '+=196px', 600, {axis:'x', easing:'easeOutQuart', onAfterFirst:slidermarker('+')});
	});	  	

  $('#slidermarker1').click(function(){
		$('#slideshow').scrollTo( 0 , 800, {axis:'x', easing:'easeOutQuart', onAfterFirst:slidermarker(1)});
	});	
	
  $('#slidermarker2').click(function(){
		$('#slideshow').scrollTo( 195 , 600, {axis:'x', easing:'easeOutQuart', onAfterFirst:slidermarker(2)});
	});	

	
  $('#slidermarker3').click(function(){
		$('#slideshow').scrollTo( 390 , 800, {axis:'x',  easing:'easeOutQuart', onAfterFirst:slidermarker(3)});
	});	
		
});

var slidepos = 1;
  
function slidermarker(x) {


  if (x == '+')
  {
    if (slidepos == 3) return false;
    slidepos++;
  }
  else if (x == '-')
  {
    if (slidepos == 1) return false;  
    slidepos--;
  }
  else slidepos = x;               
  
  if (slidepos == 1) {
    document.getElementById('slidermarker1').style.backgroundImage = "url('img/slider1_1.png')";
    document.getElementById('slidermarker2').style.backgroundImage = "url('img/slider2_0.png')";
    document.getElementById('slidermarker3').style.backgroundImage = "url('img/slider3_0.png')";
    return true;      
  }
  if (slidepos == 2) {
    document.getElementById('slidermarker1').style.backgroundImage = "url('img/slider1_0.png')";
    document.getElementById('slidermarker2').style.backgroundImage = "url('img/slider2_1.png')";
    document.getElementById('slidermarker3').style.backgroundImage = "url('img/slider3_0.png')";
    return true;      
  }
  if (slidepos == 3) {
    document.getElementById('slidermarker1').style.backgroundImage = "url('img/slider1_0.png')";
    document.getElementById('slidermarker2').style.backgroundImage = "url('img/slider2_0.png')";
    document.getElementById('slidermarker3').style.backgroundImage = "url('img/slider3_1.png')";
    return true;      
  }              
}