var OusliSlideShow = Class.create();
	OusliSlideShow.prototype = {
		initialize: function(elto, sources) {
			this.elto   = $(elto);			
			this.sources = sources || new Array();
			this.images = new Array();
						
			this.idx    = 0;  // Indice da imaxen actual
			this.pexec  = null;  // Referencia a PeriodicalExecuter
			this.loaded = 0;  // Contador de imaxes precargadas
			
			this.delay = 3.0; // Segundos entre imagen e imagen, no inferior a animacion
			this.timeAnimation = 1.0; // Segundos de animacion 
			
			// Comezar precarga
			this.preload();
		},
		
		preload: function() {			
			this.elto.innerHTML = '<div class="contidoimaxeSS">'+this.elto.innerHTML+'</div>';
			this.elto.onclick = this.click.bindAsEventListener(this);
			
			for(var i=0; i<this.sources.length; i++) {
				this.images[i] = new Image();
				this.images[i].onload = this.preloadImage.bindAsEventListener(this);
				
				this.images[i].src = this.sources[i]; 
			}
		},	
		
		preloadImage: function(evt) {
			this.loaded += 1;
		},
		
		isPreloaded: function() {
			return( this.loaded == this.sources.length );
		},
		
		play: function() {
			// Si no están precargadas las imagenes esperar
			if(!this.isPreloaded()) {
				this.wait();
				return(0);
			}
			
			// Si todas las están precargadas lanzar el PeriodicalExecuter
			this.pexec = setInterval(this.next.bind(this), parseInt(this.delay*1000));
		},
		
		next: function() {			
            this.idx++;			
			this.idx = (this.idx % this.sources.length);
			
			// El más viejo
			var divs = this.elto.getElementsByTagName('DIV');
			var older = divs[0];
			older.style.zIndex = 100;
			// Eliminar otros divs perdidos
			for(var j=1; j<divs.length; j++) {
			     divs[j].parentNode.removeChild( divs[j] );
            }
			
			// Creamos el nuevo e insertamos después
			var current = document.createElement('DIV');
			current.className = 'contidoimaxeSS';
			current.style.zIndex = 200;
			current.style.display = 'none';
			var htmlString = '<img src="' + this.sources[this.idx] + '" border="0" />';
			current.innerHTML = htmlString;
			
			// Añadimos la imagen a mostrar			
			older.parentNode.appendChild(current); 			
			new Effect.Appear(current, { duration: this.timeAnimation, 
					afterFinish: function(effect) { 
						older.parentNode.appendChild(older); 						
					}  
				});
		},
		
		wait: function() {
			setTimeout(this.play.bind(this), 500);
		},
		
		stop: function() {
			clearInterval( this.pexec );
			this.pexec = null;
		},
		
		click: function() {
			if(this.pexec == null) {
				this.play();
			} else {
				this.stop();
			}
		}
	};