var XFade = new Class({
	Implements: [Options, Events],
	
	options:{
		delay:10000,
		duration: 'normal'
	},
	
	initialize: function(element, options){
		this.element = $(element);
		this.setOptions(options);
		
		this.slides = this.element.getChildren();
		if (this.slides.length < 2) return;
		
		this.slides.setStyle('display', 'none');
		this.activeSlide = this.slides[0];
		this.activeSlide.setStyle('display', 'block');
		
		this.slides.set('tween', {
			duration:this.options.duration
		});
		
		this.element.addEvents({
			'mouseenter':this.pause.bind(this),
			'mouseleave':this.pause.bind(this)
		});
		
		this.start();
	},
	
	change: function(){
		var nextSlide = $A(this.slides).erase(this.activeSlide).getRandom();
		
		this.activeSlide.set('tween', {
			onComplete:this._fadeIn(nextSlide).bind(this)
		});
		
		this.activeSlide.tween('opacity', 1, 0);
	},
	
	_fadeIn: function(nextSlide){
		return function(){
			this.activeSlide.setStyle('display', 'none');
			
			nextSlide.setStyles({
				'display': 'block',
				'opacity': 0
			});
			
			nextSlide.tween('opacity', 0, 1);
			
			this.activeSlide.get('tween').removeEvents('complete');
			
			this.activeSlide = nextSlide;
			this.fireEvent('change', this.activeSlide);
		}
	},
	
	pause: function(){
		$clear(this.timer);	
	},
	
	start: function(){
		this.timer = this.change.periodical(this.options.delay, this);
	}
	
});