var BanneriZee=new Class({
	l:new Array(),
	n:0,
	d:0,
	i:'',
	initialize:function(id,delay){
		this.l=new Array();
		this.d=delay;
		this.i=id;
		this.pe();
	},
	pe:function(){
		$(this.i).set('morph',{ duration:this.d*0.2, link:'cancel' ,transition:'quad:out' });
		$(this.i).addEvents({
							m:function(img){
								this.style.backgroundImage='url('+img+')';
								this.morph({opacity:[0,1]});
							},
							c:function(img){
								$(this.i).morph({opacity:[1,0]});
								$(this.i).fireEvent('m',img,this.d*0.15);
							}.bind(this)
							});
		$$('#'+this.i+' img.load-this').each(function(e){
			e.src = e.src.split('?').length==1 ? e.src+'?nocache='+ Math.random() : e.src+'&nocache='+ Math.random();
			e.addEvent('load',function(){
				this.add(e.src);
			}.bind(this));
			e.style.display='none';
		}.bind(this));
	},
	add:function(img){
		this.l.push(img);
		if(this.l.length==1){	
			this.run(this);
		}
	},
	run:function(root){
		$(root.i).fireEvent('c',root.l[root.n]);
		var f=function(){
			root.n=root.n==root.l.length-1?0:root.n+1;
			$(root.i).fireEvent('c',root.l[root.n]);
		}.periodical(root.d);
	}
});

/*
	Bannerize:	
	Carga Imagenes de fondo una tras otra en un Div segun una lista de imagenes dentro de él
	
	Uso: 
	new BanneriZee(id,delay);
		id 		: <String> 	ID del div que cargara las imagenes;
		delay	: <Int>		Tiempo en milisegundos en cargar la siguiente imagen
		
	Se espera:
	<div id="id">
		<img src="img.jpg" />
		<img src="img.jpeg" />
		<img src="img.bmp" />
		<img src="img.gif" />
		<img src="img.png" />
	</div>
*/