(function($)
{
  scroller = function()
  {
    $('#scroller')
      .append( '<span id="shadowLeft"><!-- cosmetic --></span>' )
      .append( '<span id="shadowRight"><!-- cosmetic --></span>' );
    
    var totalPanels     = $('.scrollPane').children().size();
    var regWidth        = $('.panel').css('width');
    var regImgWidth     = $('.panel img').css('width');
    var regParSize      = $('.panel p').css('font-size');
    var movingDistance  = 320;
    var curWidth        = 499;
    var curImgWidth     = 485;
    var curParSize      = '1.2em';
    
    var $panels         = $('#scroller .scrollPane > div');
    var $wrapper        = $('#scroller .scrollPane');
    
    $panels.css( { 'float':'left','position':'relative' } );
    
    $('#scroller').data( 'currentlyMoving',false );
    
    var left = ( totalPanels % 2 ) ? 82 - ( ( Math.ceil( totalPanels / 2 ) - 1 ) * movingDistance ) : 82 - ( Math.ceil( totalPanels / 2 ) * movingDistance );
    
    $wrapper
      .css( 'width',( $panels[0].offsetWidth*$panels.length )+199 )
      .css( 'left',left+'px' );
    
    var scroll = $('#scroller .scroll').css( 'overflow','hidden' );
    
    $('span#totalItems').html( totalPanels );
    
    if ( totalPanels > 1 )
    {
      $('div.scroll').before( '<a id="scrollLeft" title="Scroll Left">Scroll Left</a>' );
      $('div.scroll').after ( '<a id="scrollRight" title="Scroll Right">Scroll Right</a>' );
    }
    
    // Add panel id's
    for ( i=0; i<totalPanels; i++ )
    {
      $('#scroller .scrollPane > div:eq('+i+')').attr( 'id','panel_'+(i+1) );
    }
    
    function returnToNormal ( element )
    {
      $(element)
        .animate( { width: regWidth } )
        .find('img')
        .animate( { width: regImgWidth } )
          .end()
        .find('p')
        .animate( { fontSize: regParSize } );
    };
    
    function growBigger ( element )
    {
      $(element)
        .animate( { width: curWidth } )
        .find('img')
        .animate( { width: curImgWidth } )
          .end()
        .find('p')
        .animate( { fontSize: curParSize } );
    }
    
    function change ( direction ) // direction true = right, false = left
    {
      // if not currently moving
      if ( ( $('#scroller').data('currentlyMoving') == false ) )
      {
        $('#scroller').data( 'currentlyMoving',true );
        
        if ( direction && curPanel == totalPanels ) // Last panel going right, flip to first...
        {
          var next       = 1;
          var leftValue  = 82 + movingDistance;
        }
        else if ( !direction && curPanel == 1 ) // First panel going left, flip to last...
        {
          var next       = totalPanels;
          var leftValue  = 82 - ( totalPanels * movingDistance );
        }
        else // In between...
        {
          var next       = direction ? curPanel + 1 : curPanel - 1;
          var leftValue  = $('.scrollPane').css('left');
        }
        
        var movement   = direction ? parseFloat( leftValue,10 ) - movingDistance : parseFloat( leftValue,10 ) + movingDistance;
        
        $('.scrollPane')
          .stop()
          .animate(
            {
              'left': movement
            },function()
              {
                $('#scroller').data( 'currentlyMoving',false );
              }
            );
        
        returnToNormal( '#panel_'+curPanel );
        growBigger( '#panel_'+next );
        
        curPanel = next;
        
        $('span#currentItem').html( curPanel );
        
        // remove all previous bound functions
        $( '#panel_'+(curPanel+1) ).unbind();
        
        // go forward
        $( '#panel_'+(curPanel+1) ).click( function() { change( true ); } );
        
        // remove all previous bound functions
        $( '#panel_'+(curPanel-1) ).unbind();
        
        // go back
        $( '#panel_'+(curPanel-1) ).click( function() { change( false ); } ); 
        
        // remove all previous bound functions
        $( '#panel_'+curPanel ).unbind();
      }
    }
    
    // Set up "Current" panel and next and prev
    var curPanel = ( totalPanels % 2 ) ? Math.ceil( totalPanels / 2 ) : Math.ceil( totalPanels / 2 ) + 1;
    growBigger( '#panel_'+curPanel );
    
    $('span#currentItem').html( curPanel );
    
    $( '#panel_'+(curPanel+1) ).click( function() { change( true  ); } );
    $( '#panel_'+(curPanel-1) ).click( function() { change( false ); } );
    
    $( 'a#scrollRight' ).click( function() { change( true  ); } );
    $( 'a#scrollLeft'  ).click( function() { change( false ); } );
  }
})(jQuery);