var cuadroDestacados = new Class ({
	elementoActual: 1,
	pasePeriodico: null,
	
	initialize: function(contenedorDestacados, claseElementos, listaPestanas){
		this.contenedor = $(contenedorDestacados);
		this.elementosDestacados = $$("." + claseElementos);
		this.elementosDestacados.each(function(elemento, indice){
			if (indice!=0)
				elemento.set("opacity", 0);
		});
		this.pestanas = $(listaPestanas).getChildren();
		this.comienza();
		
		this.contenedor.addEvent("mouseover", function(){
			$clear(this.pasePeriodico);
		}.bind(this));
		this.contenedor.addEvent("mouseout", function(){
			this.comienza();
		}.bind(this));
		
		this.pestanas.each(function(elemento, indice){
			elemento.addEvent("click", function(evento){
				evento.stop();
				this.muestraElemento(indice);
			}.bind(this));
			
			elemento.addEvent("mouseover", function(){
				$clear(this.pasePeriodico);
			}.bind(this));
			elemento.addEvent("mouseout", function(){
				this.comienza();
			}.bind(this));
			
		}, this);
	},
	
	comienza: function(){
		this.pasePeriodico = this.muestraSigElemento.periodical(10000,this);
	},
	
	muestraSigElemento: function(){
		this.muestraElemento(this.elementoActual);
		this.elementoActual = (this.elementoActual + 1)%this.elementosDestacados.length;
	},
	
	muestraElemento: function(indice){
		elementoAnterior = (this.elementoActual+this.pestanas.length - 1) % this.pestanas.length;
		this.elementosDestacados[elementoAnterior].fade("out");
		
		this.elementosDestacados.each(function(elemento, indiceAct){
			if (indiceAct!=indice){
				elemento.set.delay(500,elemento,["styles", {"display": "none"}]);
			}
		}, this);
		
		this.elementosDestacados[indice].set.delay(600,this.elementosDestacados[indice],["styles", {"display": "block"}]);
		this.elementosDestacados[indice].fade.delay(600,this.elementosDestacados[indice],"in");
		
		this.pestanas[indice].addClass.delay(600,this.pestanas[indice],"activa");
		this.pestanas.each(function(elemento, indiceAct){
			if (indiceAct!=indice){
				elemento.removeClass.delay(600,elemento,"activa");
			}
		}, this);
		
		
		this.elementoActual = indice;
	}
});