var Carousel = new Class( {

  options: {
    nextButton: '.nextBtn',
    prevButton: '.prevBtn',
    autoScroll: 2000,
    visibleItems: 4,
    slideDuration: 1000
  },

  initialize: function( carID, options )
  {
    this.carFx = $H();

    this.currentPos = 1
    this.carID = carID;
    this.car = $( carID );
    this.setOptions( options );

    this.carSize = this.car.getCoordinates();

    // get elements
    var elements = $$( '#'+this.carID+' li' );
    this.elements = Array( );
    this.elements[0] = '';

    // show first visibleItems
    var i = 0;
    elements.each( function( el ) {
      this.elements[ ++i ] = el.clone();
      if( i > this.options.visibleItems )
        el.remove();
    }.bind(this) );
    this.numElements = this.elements.length-1;

    // must be more elements then visibleItems
    if( this.numElements <= this.options.visibleItems )
      return;

    // add next prev button
    var btnNext = new Element( 'div', {
      'class': 'nextBtn',
      'events': {
        'click': this.next.bind(this)
      }
    } );
    btnNext.setHTML( 'Volgende' );
    btnNext.injectBefore( this.car );

    // add prev prev button
    var btnPrev = new Element( 'div', {
      'class': 'prevBtn',
      'events': {
        'click': this.prev.bind(this)
      }
    } );
    btnPrev.setHTML( 'Vorige' );
    btnPrev.injectBefore( this.car );

  },

  /**
   * next - scroll to the right
   */
  next: function()
  {
    // prevent double actions
    if( this.car.getElements( 'ul' ).length > 1 )
      return;

    // posCount - first new image in elements
    var posCount = this.currentPos + this.options.visibleItems;
    this.currentPos = posCount = ( ( posCount>this.numElements ) ? ( posCount%this.numElements ) : posCount );

    var oldEl = this.car.getElement( 'ul' );
    var newUl  = new Element( 'ul',
    {
      'styles': {
        'width': oldEl.getStyle('width'),
        'left': this.carSize.width
      }
    });

    // insert new images
    for( var shownItems = 0; shownItems < this.options.visibleItems; shownItems++ )
    {
      if( posCount > this.numElements )
        posCount = 1;

      var temp = this.elements[ posCount++ ].clone();
      temp.injectInside( newUl );

      if( posCount > this.numElements )
        posCount = 1;
    }

    newUl.injectInside( this.car );

    // start animation
    if( this.carFx.hasKey( 'slide' ) )
      this.carFx.get( 'slide' ).stop();
    if( this.carFx.hasKey( 'slide2' ) )
      this.carFx.get( 'slide2' ).stop();

    this.carFx.set( 'slide', new Fx.Style( oldEl, 'left', {duration: this.options.slideDuration} ).start( -this.carSize.width ).chain(function(){
      // remove old ul
      oldEl.remove();
    }.bind(this) ) );
    this.carFx.set( 'slide2', new Fx.Style( newUl, 'left', {duration: this.options.slideDuration} ).start( 0 ) );

    newUl = temp = null;
  },

  /**
   * prev - scroll to the left
   */
  prev: function()
  {
    // prevent double actions
    if( this.car.getElements( 'ul' ).length > 1 )
      return;

    // posCount - first new image in elements
    var posCount = this.currentPos - 1;
    posCount = ( ( posCount<1 ) ? this.numElements : posCount );

    var oldEl = this.car.getElement( 'ul' );
    var newUl  = new Element( 'ul',
    {
      'styles': {
        'width': oldEl.getStyle('width'),
        'left': -this.carSize.width
      }
    });

    // insert new images
    for( var shownItems = 0; shownItems < this.options.visibleItems; shownItems++ )
    {
      if( posCount < 1 )
        posCount = this.numElements;

      var temp = this.elements[ posCount-- ].clone();
      temp.injectTop( newUl );

      if( posCount < 1 )
        posCount = this.numElements;
    }

    this.currentPos = posCount+1;

    newUl.injectTop( this.car );

    // start animation
    if( this.carFx.hasKey( 'slide' ) )
      this.carFx.get( 'slide' ).stop();
    if( this.carFx.hasKey( 'slide2' ) )
      this.carFx.get( 'slide2' ).stop();

    this.carFx.set( 'slide', new Fx.Style( oldEl, 'left', {duration: this.options.slideDuration} ).start( this.carSize.width ).chain(function(){
      // remove old ul
      oldEl.remove();
    }.bind(this) ) );

    this.carFx.set( 'slide2', new Fx.Style( newUl, 'left', {duration: this.options.slideDuration} ).start( 0 ) );

    newUl = temp = null;
  }

} );
Carousel.implement(new Options);