// JavaScript Document

//Clase para realizar un fundido entre varios elementos de una misma clase
//situados en el mismo lugar con position absolute

//los parametros seran el identificador de la clase de los elementos 
//y el nombre del div donde están los controles

	function cambiaElementos(clase,contenedor) {
	
	//atributo con la clase que vamos a cambiar
	this.elementos = $('.'+clase);
	
	//numero de elementos que forman la clase
	this.numeroElementos = this.elementos.length;
	
	//seleccionamos el primer elemento y lo hacemos visible
	//por defecto están invisibles (no ocultos)
	this.primerElemento = this.elementos[0];
	$(this.primerElemento).addClass("mostrar"); 
	$(this.primerElemento).siblings().addClass("ocultar");
	
	//añadimos los atributos que recogerán el elemento que se muestra actualmente
	
	this.elementoActual = $('.'+clase+'.mostrar');
	
	//así como su posición en la matriz de elementos
	this.posicionActual = ($('.'+clase).index(this.elementoActual)+1);
	
	//atributo que recoge el elemento donde se ubnican los controles
	this.contenedorControles = contenedor;

	
	//atributos para recoger los elementos que harán de botón 
	this.avanzarElemento = $('#'+this.contenedorControles+' .boton_siguiente');
	this.retrocederElemento = $('#'+this.contenedorControles+' .boton_retroceder');
	this.detenerElemento = $('#'+this.contenedorControles+' .boton_pausa');
	
	//creamos un contador con el número de elemento actual y el total
	$('#'+this.contenedorControles).prepend('<div class="contenedor_contador"><p class="contador"><span class="contador_posicion">'+this.posicionActual+'</span><span>/</span><span>'+this.numeroElementos+'</span></p></div>');
	
	//variable que almacena el objeto para la closure
	var obj = this;
	
	//el método para mostrar el elemento siguiente y ocultar el actual
	this.avanzarElemento.click ( function () {
		//ocultamos el elemento actual
		obj.elementoActual.animate({opacity: 0}, 500, function () {
			obj.elementoActual.removeClass("mostrar");
			obj.elementoActual.addClass("ocultar");
		
			//si el índice del elemento es menor que el total
			//seleccionamos el siguiente elemento
			if (obj.posicionActual < (obj.numeroElementos)) {		
				obj.elementoActual = obj.elementoActual.next();
				obj.posicionActual = obj.elementos.index(obj.elementoActual)+1;
	
				//de lo contrario, seleccionamos el primero del conjunto
			} else {
				obj.elementoActual = obj.elementos.eq(0);
				obj.posicionActual = 0+1;
			}
		
			//cambiamos la visibilidad del elemento seleccionado
			obj.elementoActual.removeClass("ocultar");
			obj.elementoActual.addClass("mostrar");
			//importante devolver la opacidad a 1 
			//pues el fade aplica al elemento una opacidad = 0 al desvanecerlo
			obj.elementoActual.css ('opacity','1'); 
		
			//cambiamos el índice del contador al elemento actual
			$('#'+obj.contenedorControles+' .contador_posicion').text(obj.posicionActual);
		});
	});
	
	//el método para mostrar el elemento anterior
	this.retrocederElemento.click ( function () {
		//ocultamos el elemento actual
		obj.elementoActual.animate({opacity: 0}, 500, function () {
		obj.elementoActual.removeClass("mostrar")
		obj.elementoActual.addClass("ocultar")
		
		
		//si el índice del elemento es mayor que 1
		//seleccionamos el elemento anterior
		if (obj.posicionActual > 1) {		
		obj.elementoActual = obj.elementoActual.prev();
		obj.posicionActual = obj.elementos.index(obj.elementoActual)+1;
		
		
		//de lo contrario, seleccionamos el ultimo del conjunto
		} else {
		obj.elementoActual = obj.elementos.eq(obj.numeroElementos-1);
		obj.posicionActual = obj.numeroElementos;
		}
		
		//cambiamos la visibilidad del elemento seleccionado
		obj.elementoActual.removeClass("ocultar");
		obj.elementoActual.addClass("mostrar");
		obj.elementoActual.css ('opacity','1'); 
		
		//cambiamos el índice del contador al elemento actual
		$('#'+obj.contenedorControles+' .contador_posicion').text(obj.posicionActual);
	});
	
	
	
	
});

};