// ------------------------------------------------------------------ 
//     	USEAGE: 
//      <div id="Container"> 
//              <img src="1.jpg" /><img src="2.jpg" /><img src="3.gif" /> 
//      </div> 
//
//      <script type="text/javascript"> 
//			window.addEvent('domready',function() { 
//				var f = new Fader('Container', { 
//						pause: 5000, 
//						duration: 3000, 
//						selector: 'img'
//				}); 
//				f.start();
//			}); 
//			</script>

var Fader = new Class({ 
	Implements: Options, 
	options: { 
		pause: 5000, 
		duration: 1000, 
		loop: true, 
		onComplete: Class.empty, 
		onStart: Class.empty,
		selector: 'img'
	}, 
	initialize: function(container,options) { 
		this.setOptions(options); 
		this.container = $(container); 
		this.imgs = this.container.getElements(this.options.selector); 
		this.imgs.setStyles({ 
			'position':'absolute', 
			'top':0, 
			'left':0, 
			'opacity':0 
		}); 
		this.imgs[0].setStyle('opacity',1); 
		this.el = new Element('div',{'styles': { 
			'position':'relative' 
		}}); 
		this.el.injectInside(this.container); 
		this.el.adopt(this.imgs); 
		this.next = 0; 
	}, 
	start: function() { 
		this.show(); 
		this.periodical = 
		this.show.bind(this).periodical(this.options.pause); 
	}, 
	stop: function() { 
		$clear(this.periodical); 
	}, 
	show: function() { 
		if (!this.options.loop && this.next==this.imgs.length-1) 
		$clear(this.periodical); 
		this.next = (this.next==this.imgs.length-1)?0:this.next+1; 

		var appear = new Fx.Morph(this.imgs[this.next], { duration: this.options.duration });
		appear.start({ opacity:1 });
		//var appear = this.imgs[this.next].effect('opacity', {'duration': this.options.duration}); 
		//appear.start(0,1); 

		var prev = (this.next==0)?this.imgs.length-1:this.next-1; 
		var disappear = new Fx.Morph(this.imgs[prev], { duration: this.options.duration });
		disappear.start({ opacity:0 });
		//var disappear = this.imgs[prev].effect('opacity', {'duration':this.options.duration}); 
		//disappear.start(1,0) 
	} 

});