// ### SLIDER PROPIO ###
/* Se trata de un slider personalizado propio, creado por ensten TECHNOLOGIES para utilizarlo en nuestros desarrollos web. */
	
/* El slider funciona de la siguiente manera:
	1) Con jQuery se mueve el último item del slider al principio, por delante del item que se muestra (actual).
	2) Cada vez que se hace click, se utiliza jQuery para recolocar todos los items de forma que siempre quede
		que el anterior por delante del que se ve (actual) */



// Declaración clase eSlider para el slider

function eSlider() {
	/* Del slider necesitamos:
		· div que contiene al slider (contenedor)
		· boton next (Der)
		· boton prev (Izq)
		· div que contiene a cada item (items)
		*/
	this.contenedor	= '';				// STRING con el selector css del div que contiene el slider
	this.slider		= '';				// STRING con el selector css del div que es el slider
	this.items		= Array();			// Array con los selectores css de los divs que contienen los items
	this.botonIzq	= 'eSlider_btnIzq';	// STRING con el selector css del div que contiene el boton izquierdo
	this.botonDer	= 'eSlider_btnDer';	// STRING con el selector css del div que contiene el boton derecho
	this.numItems	= 0;				// Número de items calculado a partir del número de elementos del array items
}


// Métodos de la clase:

// Este método sirve para trasladar el último item del slider a la primera posición
eSlider.prototype.trasladoLtoF = function () {
	// Recogemos los parámetros del objeto en variables
	var slider = this.slider;
	var items = this.items;
	var recuento = this.numItems;
	var itemF = items[0];
	var itemL = items[recuento-1];
	
	// Movemos el último item al principio
	$(itemL).insertBefore(itemF);
	
	// Para que siga viéndose el primer item y no el último, hay que desplazar este último item hacia la izquierda un -100%
	$(slider).css('margin-left','-'+100+'%');
	
	// Se tiene que actualizar también el array de items
	/* Nota: La instrucción splice funciona así:
		splice ( posicion en el array , numero de elementos a eliminar , elemento a insertar ); */
	// Primero se inserta el último item del slider en primera posicion
	items.splice(0,0,itemL);
	// Y después se elimina el última item del slider para que no esté repetido
	items.splice(recuento,1); //En este caso la variable recuento no lleva -1 porque el array está incrementado en 1
};

// Este método sirve para trasladar el primer item del slider a la última posición
eSlider.prototype.trasladoFtoL = function () {
	// Recogemos los parámetros del objeto en variables
	var slider = this.slider;
	var items = this.items;
	var recuento = this.numItems;
	var itemF = items[0];
	var itemL = items[recuento-1];
	
	// Movemos el primer item al final
	$(itemF).insertAfter(itemL);
	
	// Para que siga viéndose el primer item y no el último, hay que desplazar este último item hacia la izquierda un -100%
	$(slider).css('margin-left','-'+100+'%');
	
	// Se tiene que actualizar también el array de items
	// Primero se inserta el primer item del slider en la última posicion
	items.splice(recuento,0,itemF); //En este caso la variable recuento no lleva -1 porque el nuevo elemento se inserta a partir del final
	// Y después se elimina el primer item del slider para que no esté repetido
	items.splice(0,1);
};

// Este método sirve para mover el slider a la izquierda
eSlider.prototype.moverIzq = function () {
	// Recogemos los parámetros del objeto en variables
	var slider = this.slider;
	
	// Guardamos el objeto en una variable temporal para evitar la confusion con $(this) en las funciones internas de este método
	var esteObj = this;
	
	// Utilizamos la funcion 'animate' para animar la transición entre items
	// Para que se produzca el cambio de item hacia la izquierda hay que situar el margen izquierdo a -200% (ya estaba al -100%)
	// La animación tiene una duración establecida de 700 milisegundos
	$(slider).animate({marginLeft:'-'+200+'%'} , 700 , function() {
		// Cuando la animación termina se ejecuta una función de callback para reorganizar los items
		// Para conseguirlo reutilizamos las funciones iniciales para mover los items y cambiar el margen izquierdo
		esteObj.trasladoFtoL();
	});
	
};

// Este método sirve para mover el slider a la derecha
eSlider.prototype.moverDer = function () {
	// Recogemos los parámetros del objeto en variables
	var slider = this.slider;
	
	// Guardamos el objeto en una variable temporal para evitar la confusion con $(this) en las funciones internas de este método
	var esteObj = this;
	
	// Utilizamos la funcion 'animate' para animar la transición entre items
	// Para que se produzca el cambio de item hacia la derecha hay que situar el margen izquierdo a 0%
	// La animación tiene una duración establecida de 700 milisegundos
	$(slider).animate({marginLeft:0+'%'} , 700 , function() {
		// Cuando la animación termina se ejecuta una función de callback para reorganizar los items
		// Para conseguirlo reutilizamos las funciones iniciales para mover los items y cambiar el margen izquierdo
		esteObj.trasladoLtoF();
	});
	
};

// Este método sirve para crear los botones de control del slider
eSlider.prototype.crearBotones = function () {
	// Recogemos los parámetros del objeto en variables
	var slider = this.slider;
	var botonIzq = this.botonIzq;
	var botonDer = this.botonDer;
	//var htmlBotones = $('<div id="'+botonIzq+'">&lt;</div><div id="'+botonDer+'">&gt;</div>');
	var htmlBotones = $('<div class="'+botonIzq+'"></div><div class="'+botonDer+'"></div>');
	
	// Creamos el boton a continuación del slider
	htmlBotones.insertAfter(slider);
};

// Este método sirve para poner en marcha todos los demás al crear el objeto
eSlider.prototype.arrancar = function () {
	// Recogemos los parámetros del objeto en variables
	var botonIzq = this.botonIzq;
	var botonDer = this.botonDer;
	
	// Guardamos el objeto en una variable temporal para evitar la confusion con $(this) en las funciones internas de este método
	var esteObj = this;
	
	// Ordenes de creación de los botones y posicionado del último item al principio
	esteObj.crearBotones();
	esteObj.numItems = esteObj.items.length;
	esteObj.trasladoLtoF();
	
	// Ordenes de ejecución sobre eventos
	$("."+botonIzq).on('click',function() {
		esteObj.moverDer();
	});
	
	$("."+botonDer).on('click',function() {
		esteObj.moverIzq();
	});
	
	// Movimiento automatico
	function autoplay() {
		var interval = setInterval(function() {
			esteObj.moverIzq();
		}, 5000);
	}
	
	//autoplay();
};








// #### #### ####
// Creamos una nueva instancia (nuevo objeto) de la clase 'eSlider' que almacenará los datos del slider actual
// AVISO! Esto debe ir en el archivo js que llame al plugin, como creación de un nuevo slider
/* Instrucciones para llamar al plugin:
	1.- Es importante que el slider tenga una estructura HTML similiar a:
		<div id='contenedor_slider'>
			<div id='slider'>
				<div class='item' id='item1'>
					...lo que sea...
				</div>
			</div>
		</div>
		· donde contenedor es la caja que contiene a todo el slider, y
		· cada item es cada una de las páginas del slider que van a ir pasando
	2.- Hay que llamar al plugin creando una nueva instacia (nuevo objeto) de la clase 'eSlider'
	3.- Hay que pasarle al nuevo objeto los detalles siguientes:
		· selector CSS del div que contiene el slider (como parámetro contenedor del objeto)
		· selector CSS del div que es el slider (como parámetro slider del objeto)
		· array que contiene los selectores CSS de los divs que a su vez contienen los distintos items del 
			slider (como parámetro items del objeto)
	4.- Hay que arrancar los métodos llamando al método final $(this).arrancar();
 */
/*
$(document).ready(function(e) {
	slider1 = new eSlider();
	
	slider1.contenedor = '#contenedor_slider';
	slider1.slider = '#slider';
	slider1.items = Array('#item1','#item2','#item3','#item4');
	slider1.arrancar();

});
*/
// #### #### ####