var SimpleFader = new Class({
	
	Implements: [Options,Events],
	
	options: {
		duration: 500,
		time: 2000,
		'z-index': 2/*,
		onAttached: function(){}*/
	},
	
	initialize: function(options){
		this.setOptions(options);
		this.elements = [];
	},
	
	attach: function(element){
		element = this.element = document.id(element);
		if (element) {
			element.getElements('div').each(this.addElement.bind(this));
			var pos = element.getStyle('position');
			if (pos != 'absolute' && pos != 'relative') {
				element.setStyles({
					position: 'relative'
				});
			}
			this.set(0);
		}
		this.fireEvent('attach');
		return this;
	},
	
	addElement: function(el){
		this.elements.push(el);
		var self = this;
		el.setStyles({
			position: 'absolute',
			top: 0,
			left: 0
		}).set('tween', {
			duration: this.options.duration,
			onComplete: function(el){
				self.current = el;
				el.setStyle('opacity',1);
				self.fireEvent('change',el);
			}
		});
		return this;
	},
	
	removeElement: function(el){
		if($type(el) == 'number') el = this.elements[el];
		if (this.elements.contains(el)) {
			this.elements.erase(el);
		}
		return this;
	},
	
	fade: function(el){
		return this.set(el,true);
	},
	
	set: function(el,fade){
		if($type(el) == 'number') el = this.elements[el];
		if(!this.elements.contains(el)) return this;
		
		var current = this.current;
		if(current == el) return this;		

		if(fade) el.setStyle('opacity',0);

		var zindex = this.options['z-index'];
		this.elements.each(function(elmt){
			var index = elmt == el ? zindex+2 : (elmt == current ? zindex+1 : zindex);
			elmt.setStyle('z-index',index);
		}.bind(this));
		
		if(fade){
			el.tween('opacity',1);
		}else{
			el.setStyle('opacity',1);
			this.current = el;
			this.fireEvent('change',el);
		}
		return this;
	},
	
	next: function(){
		var elmts = this.elements;
		var i = elmts.indexOf(this.current) + 1;
		if(i > elmts.length - 1) i = 0;

		this.fade(i);
		return this;
	},
	
	previous: function(){
		var elmts = this.elements;
		var i = elmts.indexOf(this.current) - 1;
		if(i < 0) i = elmts.length - 1;
		this.fade(i);
		return this;
	},
	
	start: function(){
		if(!this.isPlaying()){
			this.timer = this.next.periodical(this.options.time,this);
			this.fireEvent('start');
		}
		return this;
	},
	
	stop: function(){
		this.pause();
		this.current = this.elements[0];
		this.fireEvent('stop');
		return this;
	},
	
	pause: function(){
		$clear(this.timer);
		this.timer = null;
		this.fireEvent('pause');
		return this;
	},
	
	reverse: function(){
		this.elements.reverse();
		this.fireEvent('reverse');
		return this;
	},
	
	isPlaying: function(){
		return !!this.timer;
	},
	
	toElement: function(){
		return this.element;
	}
	
});


SimpleFader.Images = new Class({
	
	Extends: SimpleFader,
	
	options: {
		loader: false
	},
	
	attachImages: function(element,images){
		var self = this,
			element = this.element = document.id(element),
			pos = element.getStyle('position');

		if (pos != 'absolute' && pos != 'relative') {
			element.setStyles({
				position: 'relative'
			});
		}
		
		if(this.options.loader){
			var loader = new Element('div',{
				styles: {
					'background': 'url('+this.options.loader+') center center no-repeat'
				}				
			});
			element.adopt(loader);
			self.addElement(loader);
		}
		
		new Asset.images(images,{
			onComplete: function(){
				images.each(function(image){
					if (loader) {
						self.removeElement(loader);
						loader.dispose();
					}
					
					var el = new Element('div',{
						styles: {
							'background-image': 'url('+image+')'
						}
					});
					element.adopt(el);
					self.addElement(el);
				});
				self.set(0);
				self.fireEvent('attach');
			}
		});
		
		return this;
	}	
	
});