var Framework = {
  items   : [],
  images  : [],
  current : null,
  timer   : null,
  init : function(){
    this.items  = $$('#top_slider .item');
    this.images = $$('#top_slider .panel-image img');
    if(!this.items.length || !this.images.length) return;
    this.slide();
  },

  slide : function(){
    this.items.each(function(item, id){
      if(!this.images[id]) return;
      item.store('image-slide', this.images[id]);
      item.addEvents({
        'click'      : this.show.pass(id, this),
        'mouseenter' : function(){if(!this.hasClass('active')){this.addClass('hover')}},
        'mouseleave' : function(){this.removeClass('hover')}
      });
      item.fade(0.4);
      document.id(this.images[id]).fade('hide');
    }, this);

    this.show(0);
  },

  anim : function(){
    var id = (this.current+1 == this.items.length) ? 0 : this.current+1;
    this.show(id);
  },

  show : function(id){
    $clear(this.timer);
    
    if(id != this.current){
      var currentItem = document.id(this.items[this.current]);
      if(currentItem){
        currentItem.removeClass('active');
        currentItem.fade(0.4);
        currentItem.retrieve('image-slide').fade('out');
      }
    }
    var item = this.items[id];
    if(item){
      item.addClass('active');
      item.fireEvent('mouseleave');
      item.fade(1);
      item.retrieve('image-slide').fade('in');
      this.current = id;

      this.timer = this.anim.delay(6000, this);
    }
    return false;
  }
}

window.addEvent('domready', function(){
  Framework.init();
});