$(document).ready(function(){
  $('#thumbnails').append('<ul>')
  $('#slideshow').cycle({ 
    fx:     'fade', 
    speed:  '4000', 
    next:   '#slideshow img',
    timeout: 0,
    pager:  '#thumbnails ul', 
    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
      var images = $(slide).children('img')
      return '<li><a href="#"><img src="' + images[0].src + '" height="68" alt="" /> <img src="' + images[1].src + '" height="68" alt="" /></a></li>'; 
    }
  });
  $('#leftSlideshow').cycle({ 
    fx:     'fade', 
    delay:  -4000,
    pause: 1
  });
  $('#rightSlideshow').cycle({ 
    fx:     'fade', 
    delay:  -2000,
    pause: 1
  });
  
  $(function(){
  	$('#scroller').jScrollPane({showArrows:true,scrollbarWidth:9,arrowSize:16});
  });
});

jQuery(function($){
	$('#thumbnails').serialScroll({
		items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
		prev:'a#prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
		next:'a#next',// Selector to the 'next' button (absolute too)
		axis:'x',// The default is 'y' scroll on both ways
		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)
	});
});