var Fader = new Class({ 
	Implements: Options, 
	options: { 
		pause: 5000, 
		duration: 1000, 
		width: 200,
		height: 100,
		loop: true, 
		remove: null, //this is the fail-over image that should be removed
		showMenu: true,
		onComplete: null, 
		onStart:  null //Class.empty
	}, 
	initialize: function(container,options) { 
		this.setOptions(options); 
		this.container = document.id(container);
		this.container.getElements('ul').setStyle('display','none')
		this.titles = this.container.getElements('ul li h2');
		this.descs = this.container.getElements('ul li p');
		this.links = this.container.getElements('ul li a');
		this.menu = document.id('faderMenu');
		if(!this.options.showMenu) this.menu.setStyle('display','none');
		this.imgCtr = new Element('div',{'styles': {'position':'relative','clear':'both'}}); 
		this.imgCtr.injectInside(this.container); 
		var imgList = [];
		this.menuBtns = [];
		this.imgLinks = [];
		this.links.each(function(el,idx){
			this.menuBtns[idx] = new Element('a',{'html': idx+1}).inject(this.menu); 
			this.imgLinks[idx] = new Element('a',{
				'href' : el.get('href'),
				'title': this.titles[idx].get('html')+' - '+this.descs[idx].get('html'), 
				'styles':{ 'position':'absolute', 'top':0, 'left':0, 'opacity':0 }
			}).inject(this.imgCtr); 
			imgList.push(el.get('rel'));

		}.bind(this))
		this.next = 0; 
		this.menuBtns[this.next].addClass('active'); 
		new Asset.images(imgList,{
			onComplete: function(i){
				imgList.each(function(imgSrc,index){
					new Element('img',{ 
						src:imgSrc, 
						'width':this.options.width, 
						'height':this.options.height, 
						'alt': this.titles[index].get('html')+' - '+this.descs[index].get('html')
					}).inject(this.imgLinks[index]);
				}.bind(this));
				this.imgLinks[0].setStyle('opacity',1); 
				if(document.id(this.options.remove))document.id(this.options.remove).destroy();
				this.menuBtns.each(function(el,index){
					el.addEvent('click',function(e,el){
						 new Event(e).stop();
						 this.stop(index);
					 }.bind(this))
				}.bind(this))
				this.start();
				this.container.addEvent('mouseover',function(el){
					this.stop(-1);
				}.bind(this))
				this.container.addEvent('mouseout',function(el){
					this.start();
				}.bind(this))
/*
		*/
			}.bind(this)
		})
	}, 
	start: function() { 
		this.show(); 
		this.periodical = this.show.bind(this).periodical(this.options.pause); 
	}, 
	stop: function(idx) { 
		$clear(this.periodical);
		if(idx>0){
			this.next = idx; 
			this.imgLinks[this.next].fade('in'); 
			this.imgLinks.each(function(el,index){if(index!=this.next)el.fade('out')}.bind(this)); 
			this.menuBtns.each(function(el){el.removeClass('active')});
			this.menuBtns[this.next].addClass('active'); 
		}
	}, 
	show: function() { 
		if (!this.options.loop && this.next==this.imgLinks.length-1) this.stop(); 
		var prev = (this.next==0)?this.imgLinks.length-1:this.next-1; 
		this.imgLinks[this.next].fade('in'); 
		this.imgLinks[prev].fade('out'); 
		this.menuBtns.each(function(el){el.removeClass('active')});
		this.menuBtns[this.next].addClass('active'); 
		this.next = (this.next==this.imgLinks.length-1)?0:++this.next; 
	} 
});