/*	---------------------------------------------------------------------------
	CLASS:		Fader(container[,options]);
	OPTIONS:	pause: amount of time each image appears onscreen in milliseonds (default: 5000)
				duration: animation speed in milliseconds (default: 1000)
				loop: true=repeat indefinitely, false=show each image once (default: true)
	EVENTS:		onComplete
				onStart
	AUTHOR:		Ryan J. Salva, http://www.capitolmedia.com
	LICENSE:	MIT License, <http://en.wikipedia.org/wiki/MIT_License>	
	REVISED:	January 2008
	EXAMPLE:	<div id="Gallery"><img src="A.jpg" /><img src="B.jpg" /><img src="C.jpg" /></div>
				var gallery = new Fader('Gallery');
				gallery.start()
*/

var Fader = new Class({
	Implements: [Options, Events],
	options: {
		pause: 5000,
		duration: 1000,
		loop: true,
		onComplete: $empty,
		onStart: $empty
	},
	initialize: function(container,options) {
		this.setOptions(options);
		this.container = $(container);
		this.imgs = this.container.getElements('img');
		this.imgs.setStyles({
			'position':'absolute',
			'top':0,
			'left':0,
			'opacity':0,
			'display': 'block'
		});
		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;
		this.start();
	},
	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;
		
		this.imgs[this.next].tween('opacity',1);

		var prev = (this.next==0)?this.imgs.length-1:this.next-1;
		this.imgs[prev].tween('opacity',0);
	}
});