var thumbslider = new Class({
  
  Implements: [Events, Options],
  
  options: {
    auto: true,
    autostart: true,
    autointerval: 6000,
    transition: 'fade',
    tween: { duration: 500 },
    bg: {'class': 'background', html: '<div class="inner"></div>', morph: {link: 'cancel'}},
    start: 0
  },
  

  initialize: function(menu, images, loader, options){
    var self = this;
    this.options.transition = options.transition;
    this.options.auto = options.auto;
    this.element = $(menu);		
    this.items = this.element.getChildren().addEvents({
			mouseenter: function(ev){ self.onClick(ev, this); },
			mouseleave: function(){ self.morphTo(self.current); },
			click: function(ev){ self.onRealClick(ev, this); }
		});   
		this.bg = new Element('li', this.options.bg).inject(this.element).fade('hide');
		this.images = $(images);
		if (options.start)
      this.setCurrent(this.items[options.start]);
		else
      this.setCurrent(this.items[this.options.start]);
    this.imagesitems = this.images.getChildren().fade('hide');
    $(loader).fade('in');
    new Asset.images(this.images.getElements('img').map(function(el) { return el.setStyle('display', 'none').get('src'); }), { onComplete: function() {
      this.loaded = true;      
      $(loader).fade('out');
      //if (this.current) this.show(this.items.indexOf(this.current));
      this.show(this.items.indexOf(this.current));
      //if (this.options.auto && this.options.autostart) this.progress();
    }.bind(this) });
    this.options.transition = $lambda(this.options.transition);
  },
  
  killtimer: function(){
    $clear(this.autotimer);
  },
  
  auto: function(){
    if (!this.options.auto) return false;
    $clear(this.autotimer);
    this.autotimer = this.progress.delay(this.options.autointerval, this);
  },
  			
  onClick: function(event, item){
    this.setCurrent(item, true).fireEvent('click', [event, item]);
    event.stop();
    this.show(this.items.indexOf(item));
    $clear(this.autotimer);
  },
  
  onRealClick: function(event, item){
    event.stop();
    $clear(this.autotimer);
    window.location = mediafiles[this.items.indexOf(item)][4];
  },
  
  morphTo: function(to){
		if (to){
			var c = to.getCoordinates(this.element);
			delete c['right']; delete c['bottom'];
			this.bg.morph(c);
			this.fireEvent('morph', to);
		}
		return this;
	},
	
	setCurrent: function(el, effect){  
		if (el && !this.current){
			this.bg.set('styles', el.getCoordinates(this.element));
			(effect) ? this.bg.fade('in') : this.bg.fade('show');
		}
		if (this.current) this.current.removeClass('current');
		if (el) this.current = el.addClass('current');    
		return this;
	},   
  
  show: function(index) {
    //alert(index);
    if (!this.loaded) return;
    var image = this.imagesitems[index];    
		if (image == this.curimage) return;
		image.set('tween', this.options.tween).dispose().inject(this.curimage || this.images.getFirst(), this.curimage ? 'after' : 'before').fade('hide');
		image.getElement('img').setStyle('display', 'block');
		var s = mediafiles[index][3];
		if (s.length>0)
		{
		  $('overlaytxt').set('html',s);
		  $('overlay').setStyle('display','');
		  $('overlaytxt').setStyle('display','');
		}
		else
		{
		  $('overlay').setStyle('display','none');
		  $('overlaytxt').setStyle('display','none');
		}
		//if ($('lastcommentsdiv')) $('lastcommentsdiv').set('html',mediafiles[index][5]);
    if (mediafiles[index][0].length > 0)
      $('startbtn').fade('show');
    else
      $('startbtn').fade('hide');
		var trans = this.options.transition.run(null, this).split('-');
    switch(trans[0]){
      case 'slide': 
        var dir = $pick(trans[1], 'left');
        var prop = (dir == 'left' || dir == 'right') ? 'left' : 'top';
        image.fade('show').setStyle(prop, image['offset' + (prop == 'left' ? 'Width' : 'Height')] * ((dir == 'bottom' || dir == 'right') ? 1 : -1)).tween(prop, 0); 
        break;
      case 'fade': image.fade('in'); break;
    }
    image.get('tween').chain(function(){ 
      this.auto();
      this.fireEvent('show', image); 
    }.bind(this));
    this.curimage = image;
    this.setCurrent(this.items[index])
    this.morphTo(this.items[index]);
		return this;
  },
  
  progress: function(){
    var curindex = this.imagesitems.indexOf(this.curimage);
    b = this.imagesitems.length;
    if (b>itemsinbox) b=itemsinbox;
    this.show((this.curimage && (curindex + 1 < b)) ? curindex + 1 : 0);
  }
  
});