var Carousel = new Class({
    Implements:[Options],
    options:{},
    initialize: function(el, options){
      this.setOptions(options);
      this.currentIndex;
      this.fx;
      this.timer;
      if(el){
        this.setContainer(el);
      }
    },
    setContainer: function(el){
      this.container = $(el);
      this.slides = el.getChildren();
      this.slides.setStyles({'opacity':0});
      this.slides.getElement('.banner').setStyles({'width':0,'overflow':'hidden'});
    },
    start: function(){
      this.currentIndex = 0;
      this.show(this.currentIndex);
    },
    getNextIndex: function(){
      var c = this.currentIndex;
      c++;
      return c > this.slides.length-1 ? 0 : c;
    },
    getPrevioustIndex: function(){
      var c = this.currentIndex;
      c--;
      return c < 0 ? this.slides.length-1 : c;
    },
    next: function(){
      this.currentIndex = this.getNextIndex();
      this.show(this.currentIndex);
    },
    show: function(index){
      var slide = this.slides[index];
      slide.setStyles({'opacity':0,'z-index':101});
      if(this.currentSlide){
        this.fx = new Fx.Elements([this.currentSlide, slide]).start({'0':{'opacity':0},'1':{'opacity':1}}).chain(function(){ this.onShown(); }.bind(this));
      }else{
        slide.get('tween').start('opacity', 1).chain(function(){ this.onShown(); }.bind(this));
      }
      this.currentIndex = index;
      this.currentSlide = slide;
    },
    onShown: function(){
      var slide = this.currentSlide,
          banner = slide.getElement('.banner');
      slide.setStyles({'z-index':100});
      banner.get('tween').start('width', banner.getScrollSize().x).chain(function(){ }.bind(this));

      var prevSlide = this.slides[this.getPrevioustIndex()],
          prevBanner = prevSlide.getElement('.banner');
      prevBanner.setStyles({'width':0});

      this.timer = this.next.delay(6000, this);
    }
  });

  var dropIn = function(container){
    var item = container.getLast();
    item.setStyles({'overflow':'hidden','height':0});
    container.grab(item,'top');
    item.tween('height',item.getScrollSize().y)
  };
  window.addEvent('domready',function(){
    $$('ul[class*="dropin-list"]').each(function(el){
      el.setStyles({'overflow':'hidden'});
      var time = /dropin-list\:(\d+)/i.exec(el.getProperty('class'));
      time = time && time.length > 1 && parseInt(time[1]) ? parseInt(time[1]) : 5000;
      dropIn.periodical(time, null, [el]);
    });

    if($('carousel')){
      var carousel = new Carousel($('carousel'));
      carousel.start();
    }
  });