$( document ).ready( function() 
  {
    var SPEED = 1000;
    
    var carousel = $( '#highlights' );
    var outer = $( '<div id="highlights-outer"></div>' );
    var wrapper = $( '<div id="highlights-wrapper"></div>' );
    var highlights = carousel.find( '.highlight' );
    
    var arrowRight = $( '<div id="highlights-arrow-right">&rArr;</div>' );
    var arrowLeft = $( '<div id="highlights-arrow-left">&lArr;</div>' );
    
    var indicator = $( '<ol id="highlights-indicator"></ol>');
    
    var maxHeight = 0;
    var maxMargin = 0;
    var maxWidth = 0;
    
    var index = 0;
    
    // prepare each highlight
    highlights.each( function( i )
      {
        // increase header margin
        $( this ).attr( 'rel', i ).find( 'h2' ).css( 'margin-bottom', '35px' );
        
        // find height of the highlight and if its heigher than maxHeight set it
        var h = $( this ).outerHeight( );
        maxHeight = h > maxHeight ? h : maxHeight;
        
        var w = $( this ).outerWidth( );
        maxWidth = w > maxWidth ? w : maxWidth;
        
        var m = parseInt( $( this ).css( 'margin-bottom' ) );
        maxMargin = m > maxMargin ? m : maxMargin;
        
        var spot = $( '<li class="indicator"></li>' ).attr( 'rel', i ).html( i ).click( function( )
          {
            animate( parseInt( $( this ).html( ) ) );
          }
        );
        indicator.append( spot );
      }
    );
    
    // configure each highlight
    highlights.each( function( i )
      {
        $( this ).height( maxHeight ).width( maxWidth ).css( { 'float': 'left', 'display': 'none' } );
      }
    );
    
    // prepare carousel area
    carousel.height( maxHeight ).css( { 'margin-bottom': maxMargin, 'position': 'relative' } );
    outer.height( maxHeight ).css( { 'margin-bottom': maxMargin, 'position': 'relative' } );
    carousel.append( outer );
    outer.append( wrapper )
    carousel.append( arrowRight ).append( arrowLeft ).append( indicator );
    wrapper.css( { 'position': 'absolute', 'width': maxWidth*3 } ).append( highlights );
    var indicators = $( '.indicator' );
    
    function next( )
    {
      animate( index + 1 );
    }
    
    function prev( )
    {
      animate( index - 1 );
    }
    
    function animate( nextIndex )
    {
      var toTheLeft = nextIndex < index;
      
      nextIndex = nextIndex >= highlights.length ? 0 : nextIndex;
      nextIndex = nextIndex < 0 ? highlights.length - 1 : nextIndex;
      if( nextIndex == index ) return;
      
      animationStart( );
      
      var first = $( '.highlight[rel="'+index+'"]' ).css( 'display', 'block' );
      var last = $( '.highlight[rel="'+nextIndex+'"]' ).css( 'display', 'block' );
      
      // animate prev
      if( toTheLeft )
      {
        wrapper.prepend( first );
        wrapper.prepend( last );
        wrapper.css( 'left', -maxWidth );
        wrapper.animate( { 'left': 0 }, SPEED, animationComplete );
      }
      // animate next
      else
      {
        wrapper.prepend( last );
        wrapper.prepend( first );
        wrapper.css( 'left', 0 );
        wrapper.animate( { 'left': -maxWidth }, SPEED, animationComplete );
      }
      
      indicators.each( function( i ) 
        {
          $( this ).removeClass( 'active' );
          if( i == nextIndex )
            $( this ).addClass( 'active' );
        }
      );
      
      index = nextIndex;
    }
    
    function animationStart( )
    {
      arrowRight.css( 'display', 'none' );
      arrowLeft.css( 'display', 'none' );
      indicator.css( 'display', 'none' );
      
    }
    
    function animationComplete( )
    {
      /*
      arrowRight.css( 'display', 'block' );
      arrowLeft.css( 'display', 'block' );
      indicator.css( 'display', 'block' );
      */
      arrowRight.fadeIn( SPEED/2 );
      arrowLeft.fadeIn( SPEED/2 );
      indicator.fadeIn( SPEED/2 );
      
      if( index == 0 ) clearInterval( autoTimer );
    }
    
    arrowRight.click( function( )
      {
        clearInterval( autoTimer )
        next( );
      } 
    );
    arrowLeft.click( function( )
      {
        clearInterval( autoTimer )
        prev( );
      } 
    );
    
    $( '.highlight[rel="0"]' ).css( 'display', 'block' );
    $( '.indicator[rel="0"]' ).addClass( 'active' );
    
    var autoTimer = setInterval( next, 5000 );
  }
);