/******************************************************************/
/*            Plugin GALERIA  --  Galerí(v.0.1)          */
/******************************************************************/
/*                   Hecho el dia: 21/06/2010                     */
/*              Modificado el dia: 21/06/2010                     */
/*                                                                */
/******************************************************************/

(function($) {
	$.fn.galeria = function(options) {
		var defaults = {
			nombre_contenedora:		".imagenes",	/* Nombre de la clase que contendrá los elementos flotantes. La mascara la realizará la capa sobre la que se le aplique el plugin */
			nombre_items:			".imagen",		/* Nombre de la clase de los elementos que estaran flotando a la izquierda sobre la capa contenedora */
			link_ampliar:			"",				/* Nombre de la clase del link que activara prettyphoto en la imagen actual */
			slideshow: 				true, 			/* Si esto esta activo las imagenes iran cambiando automaticamente */
			slideshow_delay:		3000,			/* Tiempo de espera entre imagenes al cambiar automaticamente */
			control:				true,			/* Si esta activo muestra el control para cambiar de imagenes */
			esconder_control:		false,			/* Si esto esta activo, el control aparecera cuando pase el raton por el objeto, y desaparecera cuando salga*/
			margen_control:			50,				/* Margen inferior de el control. El control es absoluto y su top es: item.height - margen_control */
			efecto:					1,				/* Efecto 1: CARRUSEL HORIZONTAL   ( CAPA MASCARA( overflow,tamaño especifico ) + CAPA ITEMS ( Ancho muy largo ) + CAPAS ITEM ) */  /* Efecto 2: FADE IN  */
			velocidad:1500
		};
		/* Extendemos nuevas opciones. */
		var options = $.extend(defaults, options);
		/* Devolvemos resultado (recorremos todos los elementos tipos). */
    	return this.each(function() {
			/* Objeto actual. */
			var obj = $(this);
			/* Inicializamos variables. */
			var body 			= obj.html();
			var slideshow_delay = options.slideshow_delay;
			var capa_control	= options.control;
			var Contenedora		= obj.find(options.nombre_contenedora);
			var Items			= options.nombre_items;
			var Control			= obj.find("control");
			var total_imagenes	= obj.find(Items).size();
			/* Si es internet explorer 6 escondemos control */
			var is_ie6 = ('ActiveXObject' in window && !('XMLHttpRequest' in window));
			if (is_ie6) options.control=false;
			/* Si hay mas de 1 imagen aplicamos galeria */
			if (total_imagenes>1){
				var imagen_actual	= 0;
				var parar_intervalo = false;
				/* Si esta activo el efecto 2 ocultamos todas las imagenes, y mostramos la primera */
				if (options.efecto==2){
					obj.find(Items).hide();
					obj.find(Items +':eq('+ imagen_actual +')').show();
				}
				/* Evento MOSTRAR item. */
				var Mostrar = function(num){
					/* Si se quiere mostrar una imagen que no existe, pasamos a 0 */
					if (num>=total_imagenes) {
						num=0;
					}
					if (options.link_ampliar != "") obj.find(options.link_ampliar).attr("href",$(''+ Items +':eq('+ num +') a').attr("href"));
					/* Mostramos el item y igualamos la imagen actual a la que nos estamos moviendo */
					imagen_actual=num;
					/* EFECTO 1: movemos la capa contenedora, hasta para que muestre el item seleccionado */
					if (options.efecto==1){
						Contenedora.stop().animate({
							left:Math.round(-$(''+ Items +':eq('+ imagen_actual +')').position().left)
						}, options.velocidad );
					/* EFECTO 2: Ocultamos los items que esten visibles, y mostramos el seleccionado */
					}else if (options.efecto==2)
					{
						obj.find(Items+':visible').fadeOut(options.velocidad);
						obj.find(Items +':eq('+ imagen_actual +')').fadeIn(options.velocidad);
					}
					
					
					/* Renovamos link seleccionado en control */
					if (options.control){
						obj.find('.control').find("a").attr("class","");
						obj.find('.control').find("a#"+num).attr("class","select");
					}
				};
				
				/* Si esta activado el slideshow, Creamos contador que cambiara las imagenes segun el tiempo indicado en slideshow_delay */
				if (options.slideshow){
					var intervalo = setInterval(function(){
						/* parar intervalo controlara si se acaba de cambiar de imagen mediante links, para que se cambie en la siguiente iteracion */
						if (parar_intervalo==true){
							parar_intervalo=false;
						}
						else
						{
							Mostrar(imagen_actual+1);
						}
					},slideshow_delay);
				}
				/* Si control esta activo, mostramos capa control */
				if (options.control){
					/* Añadimos capa control y un span para facilitar la personalizacion */
					obj.prepend('<div class="control"></div>');
					/* Añadimos links para todas las imagenes */
					for(i=1;i<=total_imagenes;i++) {
						obj.find('.control').append('<a href="#" id="'+(i-1)+'">'+ (i-1) +'</a>');
					}
					/* Añadimos span izquierda para facilitar la personalizacion */
					obj.find('.control').append('<span class="izquierda"></span>');
					/* Al hacer click en uno de los links, mostramos la imagen correspondiente, y paramos la proxima iteracion de el slideshow */
					obj.find('.control').find("a").click(function(){
						if ($(this).attr("class") != "select"){
							Mostrar(parseInt($(this).attr("id")));
							parar_intervalo=true;
						}
						return(false);
					});
					/* Seleccionamos el primer elemento */
					obj.find('.control').find("a#0").attr("class","select");
					/* Alineamos control al final de la capa, y aplicamos el margen seleccionado */
					obj.find('.control').height(1);
				}
				if (!options.esconder_control){
						obj.find('.control').height(27);
				}
				/* Si esta activo esconder control, y esta activo el control */
				if (options.esconder_control && options.control){
					/* Aplicamos eventos onEnter y onLeave */			
					obj.bind("mouseenter", function(event){
						obj.find('.control').stop().animate({
							height: 27
						},{ duration:1000 });
					});
					obj.bind("mouseleave", function(event){
						obj.find('.control').stop().animate({
							height: 1
						},{duration:1000 });
					});
				}
			}
		});
	};
})(jQuery);