// crazy awesome custom transition
// slideshow ships with plenty of defaults
// (push, slide, blind, fade, crossFade, etc.)
// but you can define your own for awesome
$.rf.slideshow.defineTransition( 'headSlide', function( params, direction ){
  var half = params.duration / 2,
      opp = direction === 'right' ? -1 : 1,
      width = params.instance.element.width();

  params.next.find( '.element' ).each(function( i, node ){
    var el = $(node),
        data = el.data( direction ).split( ':' ),
        delay = parseInt( data[1], 10 ) / 100,
        to = parseInt( data[0], 10 ) + width,
        old = parseInt( el.css( 'left' ), 10 );

    el.css('left', (to * opp) + 'px' );
    setTimeout(function (){
      el.animate( {left: old + 'px'}, half );
    }, half + (half * delay) );
  });
  
  params.previous.find( '.element' ).each(function( i, node ){
    var el = $(node),
        data = el.data( direction ).split( ':' ),
        delay = parseInt( data[1], 10 ) / 100,
        to = parseInt( data[0], 10 ) + width,
        old = el.css( 'left' );

    setTimeout(function (){
      el.animate( {left: (to * -opp) + 'px'}, half );
    }, half * delay );

    setTimeout(function (){
      el.css( 'left', old );
    }, params.duration + 15);
  });
});

var slideshow;

$(function(){

  var el = $('#slideshow');

  // create a slideshownav instance and then pull the instance
  // out of the element data
  slideshow = el.slideshownav({
    transition: 'headSlide(left)',
    selector: '.slide',
    duration: 1500,
    delay: 8000,
    autoPlay: true
  }).data('slideshownav');

  // bind the click event of the slideshownav object on the element
  el.bind('slideshownavclick', function (){
    // manage the state of the slideshow object
    // (after click, quit autoplay)
    slideshow.stop();
    // dynamically figure out the direction
    slideshow.options.transition = 'headSlide(#{direction})';
  });
	
});