<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="moofader.js"></script>
<script>
var images = Array('<?=implode("','",glob('images/*.JPG'));?>');
window.addEvent('load', function(){ new mooFader('fader',images); } );
</script>

<div style="position: relative; width: 390px; height: 390px;" id="fader">
	<img src="images/rado.JPG">
</div>

var mooFader = new Class({

	Implements: [Events, Options],

	options:{
		duration: 2000,
		fade: 1000
	},

	initialize: function(el,im,options) {
		this.setOptions(options);
		this.holder = $(el);
		if(!this.holder) return;
		this.starter = this.holder.getElement('img');
		this.starter.setStyle('position','absolute');
		this.im = im;
		this.faders = [];
		this.images = im.length;
		this.counter = 0;
		this.change.periodical(this.options.duration,this);
		new Asset.image(this.im[this.counter]);
	},

	change: function(){
		if(this.counter > this.images-1) this.counter = 0;
		var img = new Element('img',{
			'src'	: this.im[this.counter],
			'styles': { 'position':'absolute' }
		}).injectTop(this.holder);
		var fader = img.getNext();
		new Fx.Tween(fader,{ duration:this.options.fade, onComplete: function(el){ fader.dispose(); } }).start('opacity', 1, 0);
		this.counter++;
		new Asset.image(this.im[this.counter]);
	}
});