/*
**  Plugin para crear efecto slider
*/

(function($) {
	$.fn.sliderEC = function(options){
		var defaults = {
			anchoSlider: 215,
			visibles: 1,
			listadoSliders: 'galeriaSliders',
			tipoAnimacion: 'DeslizarVertical',
			usarFlechas: true,
			idFlechaAnt: 'sliderFlechaAnterior',
			idFlechaSig: 'sliderFlechaSiguiente',
			usarMiniaturas: false,
			miniaturas: 'sliderMiniaturas',
			cicloInfinito: false,
			autoSlide: false,
			tiempoAutoSlide: 2000,
			tiempoAutoSlideLargo: 2000,
			beforeChange: function(){},
			afterChange: function(){}
		};
		
		var options = $.extend(defaults, options);
		
		return this.each(function(){
			
			var obj = $(this), //objeto slider
			listadoSliders = $('.' + options.listadoSliders, obj), //elementos galeria sliders
			numSliders = $('.slider', listadoSliders).length, //num elementos galeria sliders
			posActual = 0,
			visiblesActual = options.visibles,
			enMovimiento = false, //variable que marca si está animado o no
			intervalID; //para el autoslide
			$.fn.sliderEC.propiedades = {
				posActual: posActual,
				visibles: visiblesActual,
				numElem: numSliders
			};

			obj.css({'position':'relative','overflow':'hidden'});
			
			//generamos estilos según animación
			var animacion = options.tipoAnimacion;
			$('img', listadoSliders).css('vertical-align','top');
			switch (animacion) {
				case 'Deslizar':
					listadoSliders.css({'position':'relative','overflow':'hidden','width': '32000px'});
					$('.slider', listadoSliders).css({'position':'relative','float':'left','left':'0','top':'0'});
					break;
				
				case 'DeslizarVertical':
					var alturaSlider = listadoSliders.innerHeight();
					listadoSliders.css({'position':'relative','overflow':'hidden','width': options.anchoSlider, 'height':(alturaSlider*numSliders)});
					$('.slider', listadoSliders).css({'position':'relative','float':'none','left':'0','top':'0'});
					break;
				
				case 'Fade':
					listadoSliders.css({'position':'relative','overflow':'hidden','width': options.anchoSlider});
					$('.slider', listadoSliders).css({'position':'absolute','left':'0','top':'0','display':'none'});
					$('.slider:first', listadoSliders).css({'display':'block'});
					break;
			}			
			
			// FUNCION QUE INICIA EL PROCESO DE MOVIMIENTO
			function mueveSlider(posNueva,animacion){
				//Callback
				if (options.beforeChange) {
					options.beforeChange.call(this); //
				}
				switch (animacion) {
					case 'Deslizar':
						deslizar(posNueva);
						break;
					case 'DeslizarVertical':
						deslizarVertical(posNueva);
						break;
					case 'Fade':
						fade(posNueva);
						break;
				}
				if(posNueva >= numSliders){
					posActual = posNueva - numSliders;
				} else if(posNueva < 0) {
					posActual = numSliders - (posNueva*-1);
				} else {
					posActual = posNueva;
				}
			}			
			
			//FUNCIONES AUXILIARES	
			function actualizarPaginador(posNueva) {
				if(posNueva == numSliders) {
					posNueva = 0;
				} else if(posNueva < 0) {
					posNueva = numSliders-1;
				}
				//modificamos las clases de los botones de posición del slider
				//a la posición actual añadimos la clase común de los botones
				$(".numero-actual", obj).addClass("numero");
				//a la posición actual quitamos la clase especial de "posición actual"
				$(".numero-actual", obj).removeClass("numero-actual");
				//a la nueva posición actual quitamos la clase común de los botones
				$(".num-"+posNueva, obj).removeClass("numero");
				//a la nueva posición actual añadimos la clase especial de "posición actual"
				$(".num-"+posNueva, obj).addClass("numero-actual");
			}
			
			//se llama a esta función al finalizar la animación				
			function postMov(posicionNueva)
			{
				enMovimiento = false;
				actualizarPaginador(posicionNueva);
				if(!options.cicloInfinito && options.usarFlechas) {
					comprobarFlechas();
				}
				
				$.fn.sliderEC.propiedades = {
					posActual: posActual
				};
				
				//Callback
				if (options.afterChange) {
					options.afterChange.call(this); //
				}
			}
			
			function comprobarFlechas() {
				if(visiblesActual < numSliders) {
					if( (posActual+(visiblesActual-1)) >= numSliders-1) {
						flechaSig.hide();
						flechaAnt.show();
					} else if ( posActual <= 0 ) {
						flechaSig.show();
						flechaAnt.hide();
					} else {
						flechaSig.show();
						flechaAnt.show();
					}
				} else {
					flechaSig.hide();
					flechaAnt.hide();
				}
			}
			
			/******************************** ANIMACIONES ***********************/
			function deslizar(posNueva) {
				posDif = parseInt(posNueva) - posActual; //numero de posiciones de diferencia
				if(posDif > 0){ //si la diferencia es mayor que 0, avanzamos
					//desplazamos el contenedor hacia la izquierda tanto como sea necesario
					//cuando finalice el efecto asignamos a la variable 'enMovimiento' un 'false'. Esto será utilizado para controlar que solo se ejecute el script cuando todas las animaciones hayan terminado
					$('.slider:lt('+(posDif)+')', listadoSliders).clone(true).insertAfter($('.slider:last', listadoSliders)); //clonamos todo lo anterior a la posición actual y lo colocamos al final del listado
					listadoSliders.animate({ left:-options.anchoSlider*(posDif)	}, "slow", //movemos el contenedor hacia la izquierda tanto como sea necesario
						function(){
							$('.slider:lt('+(posDif)+')', listadoSliders).remove(); // Cuando la animación termina, quitamos las imágenes del inicio que ya están copiadas al final
							listadoSliders.css({'left':0}); //recolocamos el contenedor a la posición inicial de 0px
							postMov(posNueva);
						});
					//mientras la animación se ejecuta, la variable se mantiene como true (esto durará lo que dure la animación)
					enMovimiento = true;
				}
				//si la diferencia es menor que 0, avanzamos
				else if(posDif < 0){
					posDif = posDif*-1; //hacemos la diferencia positiva
					//desplazamos el contenedor hacia la izquierda tanto como sea necesario
					//cuando finalice el efecto asignamos a la variable 'enMovimiento' un 'false'. Esto será utilizado para controlar que solo se ejecute el script cuando no todas las animaciones hayan terminado
					$('.slider:gt('+( numSliders-(posDif+1) )+')', listadoSliders).clone(true).insertBefore($('.slider:first', listadoSliders)); //clonamos todo lo psoterior a la posición actual y lo colocamos al inicio del listado
					listadoSliders.css('left',-(options.anchoSlider*(posDif))) //colocamos el contenedor en la posición donde se encuentra nuestra foto inicial, pero tras clonar contenido al inicio del contenedor
						.animate({ left:0 }, "slow", // animamos hasta posicion inicial del contenedor, donde ahora se encontrará nuestra imagen destino
							function(){
								$('.slider:gt('+(numSliders-1)+')', listadoSliders).remove(); // Cuando la animación termina, quitamos las imágenes del final que ya están copiadas al inicio
								postMov(posNueva);
							});
						//mientras la animación se ejecuta, la variable se mantiene como true (esto durará lo que dure la animación)
						enMovimiento = true;
				}
			}
			
			function deslizarVertical(posNueva) {
				posDif = parseInt(posNueva) - posActual;
				if(posDif > 0){
					$('.slider:lt('+(posDif)+')', listadoSliders).clone(true).insertAfter($('.slider:last', listadoSliders));
					listadoSliders.animate({ top:-alturaSlider*(posDif)	}, "slow",
						function(){
							$('.slider:lt('+(posDif)+')', listadoSliders).remove();
							listadoSliders.css({'top':0});
							postMov(posNueva);
						});
					enMovimiento = true;
				}
				else if(posDif < 0){
					posDif = posDif*-1;
					$('.slider:gt('+( numSliders-(posDif+1) )+')', listadoSliders).clone(true).insertBefore($('.slider:first', listadoSliders));
					listadoSliders.css('top',-(alturaSlider*(posDif)))
						.animate({ top:0 }, "slow",
							function(){
								$('.slider:gt('+(numSliders-1)+')', listadoSliders).remove();
								postMov(posNueva);
							});
						enMovimiento = true;
				}
			}
			
			function fade(posNueva) {
				if(posNueva == numSliders) {
					posNueva = 0;
				} else if(posNueva < 0) {
					posNueva = numSliders-1;
				}
				var sliderON =  $('.pos-'+posNueva, listadoSliders);
				var sliderOFF =  $('.pos-'+posActual, listadoSliders);

				sliderOFF.css('z-index', 3);
				sliderON.css('z-index', 2);
				sliderON.css('display', 'block');
				
				sliderOFF.fadeOut('slow', function(){
					sliderOFF.css( {'display':'none','z-index':'1'} );
					postMov(posNueva);
				});
				enMovimiento = true;				
			}
						
			/**************************************************************************************/
			
			/****************************************************************************************/
			//INICIO
			//generamos objetos y eventos para flechas y miniaturas
			if(options.usarFlechas) {
				var flechaAnt = $('.' + options.idFlechaAnt, obj);
				var flechaSig = $('.' + options.idFlechaSig, obj);
				if(!options.cicloInfinito && options.usarFlechas) {
					comprobarFlechas();
				}
				flechaAnt.click(function(event){
					if (!enMovimiento) {
						pausarAutoSlide();
						mueveSlider(posActual-1,animacion);
					}
					event.preventDefault();
				});				
				flechaSig.click(function(event){
					if (!enMovimiento) {
						pausarAutoSlide();
						mueveSlider(posActual+1,animacion);
					}
					event.preventDefault();
				});				
			} else {
				var flechaAnt = $('.' + options.idFlechaAnt, obj);
				var flechaSig = $('.' + options.idFlechaSig, obj);
				flechaAnt.css('display','none');
				flechaSig.css('display','none');
			}
			if(options.usarMiniaturas) {
				var listadoMiniaturas = $('.' + options.miniaturas, obj)
				listadoMiniaturas.find('.sliderMiniatura').click(function(event){
					if (!enMovimiento) {
						pausarAutoSlide();
						var contador = parseInt($(this).attr("rel"));
						if(contador != posActual) {
							mueveSlider(contador,animacion);
						}
					}
					event.preventDefault();
				});
			}
			
			
			/*************************/
			
			if(options.autoSlide) {
				var intervalID = window.setTimeout(desplazarAuto, options.tiempoAutoSlide);
			}
			function desplazarAuto() {
				mueveSlider(posActual+1,animacion);
				intervalID = window.setTimeout(desplazarAuto, options.tiempoAutoSlide);
			}
			function pausarAutoSlide(){
				if(options.autoSlide){
					clearTimeout(intervalID);
					if(options.tiempoAutoSlideLargo > options.tiempoAutoSlide){
						intervalID = window.setTimeout(desplazarAuto, options.tiempoAutoSlideLargo);
					} else {
						intervalID = window.setTimeout(desplazarAuto, options.tiempoAutoSlide);
					}
				}
			}
		
		});
		
	};
	
	//Variable pública que va a guardar las propiedades básicas del objeto sliderEC
	$.fn.sliderEC.propiedades = {
		posActual: 0,
		visibles: 1,
		numElem: 1
	};
	
	$.fn.sliderEC.avanzar = function() {
		flechaSig.click();
	};
	
})(jQuery);