var Slider = new Class({
  Implements: [Options],
  options: {
    slides: [],
    controlHeight: 40
  },


  initialize: function(options)
  {
    this.setOptions( options );

    if ( this.options.slides.length < 2 )
    {
      return;
    }

    this.prepareSlider();

    this.fx = new Fx.Morph( this.$slideContent, { duration: 'long', link: 'cancel' } );
    this.scrollFx = new Fx.Scroll(window, { duration: 'short', link: 'cancel' });

    this.$leftButton.addEvent( 'click', this.previous.bind( this ) );
    this.$rightButton.addEvent( 'click', this.next.bind( this ) );

    this.index = 0;
  },


  prepareSlider: function()
  {
    this.$element = new Element( 'div', {
     'class': 'slider'
    });

    this.$slideContent = new Element( 'div', {
      'class': 'slideContent'
    });

    this.$slideControl = new Element( 'div', {
      'class': 'slideControl',
      'styles': {
        'height': this.options.controlHeight
      }
    });

    this.$leftButton = new Element( 'a', {
      'class': 'leftButton button',
      'href': '#'
    });

    this.$rightButton = new Element( 'a', {
      'class': 'rightButton button',
      'href': '#'
    });

    var $leftButtonLabel = new Element( 'span', {
      'text': 'Previous'
    });

    var $rightButtonLabel = new Element( 'span', {
      'text': 'Next'
    });

    var $slideLink;
    this.$slideLinks = new Element( 'div', {
      'class': 'pager',
      'styles': {
       'width': 23 * this.options.slides.length
      }
    });

    for ( i = 0; i < this.options.slides.length; i++ )
    {
      (function(i){
        $slideLink = new Element( 'a', {
            'text': i + 1,
            'href': '#'
        });

        $slideLink.addEvent( 'click', function(event){
          event.stop();
          this.index = i;
          this.change();
        }.bind( this ));

        $slideLink.inject( this.$slideLinks );
      }.bind( this ))(i);
    }

    this.$slideLinks.getElement( 'a' ).addClass( 'active' );

    var size = this.options.slides[0].getSize();
    this.$element.setStyles({ 
      width: size.x
    });

    var totalWidth = size.x * this.options.slides.length;

    this.$slideContent.setStyles({ 
      width: totalWidth,
      height: size.y
    });

    this.options.slides.each( function( $slide, i ){
      $slide.setStyles({
      'width': size.x,
      'float': 'left'
      });
    }.bind( this ));

    this.$element.inject( this.options.slides[0], 'before' );
    this.$slideContent.inject( this.$element );
    this.$slideControl.inject( this.$element );
    this.$leftButton.inject( this.$slideControl );
    this.$rightButton.inject( this.$slideControl );
    $leftButtonLabel.inject( this.$leftButton );
    $rightButtonLabel.inject( this.$rightButton );
    this.$slideLinks.inject( this.$slideControl );
    this.$slideContent.adopt( this.options.slides );
    this.width = size.x;
  },


  previous: function( event )
  {
    event.stop();
    this.index -= 1;
    if ( this.index < 0 )
    {
      this.index = this.options.slides.length - 1;
    }

    this.change();
  },


  next: function( event )
  {
    event.stop();
    this.index += 1;
    if ( this.index > this.options.slides.length - 1 )
    {
      this.index = 0;
    }

    this.change();
  },


  change: function()
  {
    this.center();
    this.fx.start({ 'margin-left': this.width * -this.index, 'height': this.options.slides[ this.index ].getSize().y });
    this.$slideLinks.getElement( '.active' ).removeClass( 'active' );
    this.$slideLinks.getElements( 'a' )[ this.index ].addClass( 'active' );
  },

  
  center: function()
  {
    // taille de la page
    var docHeight = $( document ).getScrollSize().y;

    // taille de la fenetre
    var winHeight = $( window ).getSize().y;

    // taille de la fenetre - taille de la page
    var topPosition = docHeight - winHeight;

    // element.top < précédent ?
    var elementY = this.$element.getPosition().y;
    if ( elementY < topPosition  && $( window ).getScroll().y > elementY )
    {
      this.scrollFx.start( 0, elementY - 25 );
    }
  }
});



$( document ).addEvent( 'domready', function(){
  if ( ! Browser.Engine.trident4 )
  {
    var slides    = $$( '.slide' );
    var processed = [];
    var sliders   = [];

    slides.each( function( $slide, i ){
      if ( processed.contains( $slide ) )
      {
        return;
      }

      var slide_group = [ $slide ];
      processed.include( $slide );
      var $next;

      while ( ( $next = $slide.getNext() ) && $next.hasClass( 'slide' ) )
      {
        slide_group.include( $next );
        processed.include( $next );
        $slide = $next;
      }

      sliders.include( new Slider({ slides: slide_group }) );
    });
  }
});