/************************************************
** VERSION: 0.31
** FECHA: 25/06/2009
** AUTOR: UBALDO COTTA
* Modificado fer

  Ejemplos:

  CSS:
	.thumbnails { height: 180px; width: 270px; background: #282828; }
	.thumbnails img { margin: 2px }
	.barsup { clear: both; height: 40px; width: 300px}
	.activa { opacity: 0.5!important; border: 1px solid red; filter: alpha(opacity = 50)}
	#navegador { float: right }
	#playstop { float: left}

  jQuery:
  	$('#container').visorObras({
		thumbnails: '.thumbnails',
		thumbnails_split: 6,
		nav_layer: '#navegador',
		play_seconds: 4000,
		start_image: 0,
		use_anchor: 1
	});
	
  HTML:
    <div id='container'>
	<div class='barsup'>
		<p id='navegador'></p>
		<p id='playstop'><a href='#'>Play</a> <a href='#'>Stop</a></p>
	</div>
	<div style='clear: both'></div>
	<div class='thumbnails'>
		<div>
			<img src="thumbnail.jpeg"><img src="thumbnail.jpeg"><img src="thumbnail.jpeg"><img src="thumbnail.jpeg">
			<img src="thumbnail.jpeg"><img src="thumbnail.jpeg"><img src="thumbnail.jpeg"><img src="thumbnail.jpeg">
			<img src="thumbnail.jpeg"><img src="thumbnail.jpeg"><img src="thumbnail.jpeg"><img src="thumbnail.jpeg">			
		</div>
	</div>

	<div id='visor'></div>
	<div class='imagenes'>
		<div><img src='' alt='imagen.jpg' title="titulo"><br>texto y descripcion</div>
		<div><img src='' alt='imagen.jpg' title="titulo"><br>texto y descripcion</div>
		<div><img src='' alt='imagen.jpg' title="titulo"><br>texto y descripcion</div>
		<div><img src='' alt='imagen.jpg' title="titulo"><br>texto y descripcion</div>
		[...]
		<div><img src='' alt='imagen.jpg' title="titulo"><br>texto y descripcion</div>
	</div>
	
</div>	


  
*/

(function($) {	  
	$.fn.visorObras = function(options) {
		var opts = $.extend({}, $.fn.visorObras.defaults, options);
		var timer = null;
		var tabActual = 0;
		var imagenActual = 0;
		var totalImagenes = 0;
		var totalTabs = 0;
		var objImagen = new Image();
		var visorHTML = "";
		objImagen.onload = continuaCambio;
		
		// Funciones públicas
		$.fn.visorObras.paraTimer = function() { paraTimer(); }	
		$.fn.visorObras.siguienteImagen = function() { siguienteImagen(); }	
		$.fn.visorObras.anteriorImagen = function() { anteriorImagen(); }
		$.fn.visorObras.anteriorTab = function() { anteriorTab(); }
		$.fn.visorObras.posteriorTab = function() { posterioTab(); }			
					
		return this.each(function() {
			// Creamos una instancia por cada elemento que cumpla la selección.
			
			if (opts.thumbnails_split > 0) {
				splitThumbnails();
				showNavigator();
			}

			$(opts.thumbnails + " img").mouseover( imgMouseOver );
			$(opts.thumbnails + " img").mouseout( imgMouseOut );
			$(opts.thumbnails + " img").click( imgMouseClick );
			$(opts.thumbnails + " img").each(function(i) { this.posicion = i; });
			
			// Ocultamos todas las capas
			$(opts.data_layer + " " + opts.data_box).hide();
			totalImagenes = $(opts.thumbnails + " img").length;
			
			if (opts.use_anchor)
				checkAnchor();
			else
				cambiaImagen(opts.start_image);
			
			$(opts.playstop_class + " a").click( toggleTimer );
			// Mostramos la primera
			$('#playstop a:gt(1)').hide();
			//debug($(this).attr('href'));
			//this.togglee = $($(this).attr('href')).hide();
			//debug(this.togglee);
			//$(this).click(onClick);
			if (opts.autoplay)
				iniciaTimer();
			else {
				$('#playstop a:eq(1)').hide();
				$('#playstop a:eq(2)').show('slow');
			}
		});
		
		function checkAnchor() {
			// Comprobamos si hay un ancha y es un número, si es así comenzamos desde ahí.
			var anchor = String(window.location).split("#");
			if (anchor.length > 1) {
				var n = Number(anchor[1]);
				if (typeof(n) == 'number') {
					cambiaImagen(n)
					return;
				}
			}
			cambiaImagen(opts.start_image);
		}
		// Procesamiento de los Thumbnails y sus eventos
		function imgMouseOver() {
			$(this).stop();
			$(this).fadeTo(200, 0.6);
		}
		function toggleTimer() {
			if (timer) {
				// Apagamos el timer
				paraTimer();
				$('#playstop a:eq(1)').hide();
				$('#playstop a:eq(0)').show('slow');
				
			} else {
				// Cambiamos la imagen e iniciamos
				iniciaTimer();
				$('#playstop a:eq(0)').hide();
				$('#playstop a:eq(1)').show('slow');
				siguienteImagen2();
			}
		
		}
		function imgMouseOut() {
			$(this).stop();
			$(this).fadeTo(600, 1);
		}
		function imgMouseClick() {
			paraTimer();
			cambiaImagen(this.posicion);
		}
		function paraTimer() {
		    debug('timer parado');
			if (timer) {
				clearInterval(timer);
				$('#playstop a').hide();
				$('#playstop a:eq(0)').show();
			}
			timer = null; 
		}
		function iniciaTimer() {
			timer = this.setInterval(siguienteImagen2, opts.play_seconds);
			$('#playstop a:eq(0)').hide();
			$('#playstop a:eq(1)').show();
		}
		function forzarCambiarImagen() { paraTimer(); siguienteImagen(); }
		function siguienteImagen() { paraTimer(); cambiaImagen(imagenActual + 1); }
		function siguienteImagen2() { cambiaImagen(imagenActual + 1);}
		function anteriorImagen() { paraTimer(); cambiaImagen(imagenActual - 1); }
		
		function cambiaImagen(id) {
			// Comprobamos que no sobrepase la última imagen.
			if (id == totalImagenes) id = 0;
			if (id == -1) id = totalImagenes - 1;


			// ¿Es necesario cambiar la pestaña?
			var idtab = Math.floor(id / opts.thumbnails_split);
			if (idtab != tabActual)
				nuevoTab(idtab);
				
			// Actualizamos estilos de activo
			$(opts.thumbnails + " img:eq(" + imagenActual + ")").removeClass(opts.thumbnails_class_active);
			imagenActual = id;
			$(opts.thumbnails + " img:eq(" + imagenActual + ")").addClass(opts.thumbnails_class_active);
			debug($(opts.thumbnails + " img:eq(" + imagenActual + ")"));
			
			// Ocultamos, asignamos nueva imagen y la mostramos.
			$(opts.display_layer).stop().fadeTo(0,0);
			$(opts.display_layer).html('<img src="' + opts.loader_image + '" style="' + opts.loader_css + '">');
			visorHTML = $(opts.data_layer + " " + opts.data_box + ":eq(" + id + ")").html();
			
			// Cargamos la imagen
			$(opts.display_layer).fadeTo(200,1);
			objImagen.src = $(opts.data_layer + " " + opts.data_box + ":eq(" + id + ") img").attr('alt');
			
			// Activamos eventos
			$(opts.display_layer + ' img').click(forzarCambiarImagen);
			
		}
		function continuaCambio() {
			$(opts.display_layer).stop();
			$(opts.display_layer).fadeTo(0, 0);
			$(opts.display_layer).html(visorHTML);
			$(opts.display_layer + " img").attr('src', objImagen.src);
			
			// Activamos eventos (de nuevo)
			$(opts.display_layer + ' img').click(forzarCambiarImagen);
			$(opts.display_layer).fadeTo(1000,1);
		
		}
		function nuevoTab(id) {
			$(opts.thumbnails + " div").stop();
			$(opts.thumbnails + " div").hide();
			$(opts.thumbnails + " div:eq(" + id + ")").fadeTo(0, 0);
			$(opts.thumbnails + " div:eq(" + id + ")").show();
			$(opts.thumbnails + " div:eq(" + id + ")").fadeTo(500, 1);
			tabActual = Number(id);
			$(opts.nav_layer + ' span').removeClass(opts.group_active);
			debug(tabActual);
			// Cuando hay más de un tab tenemos el span de navegación delante, lo contamos
			if (totalTabs > 2) 
				$(opts.nav_layer + " span:eq(" + (tabActual+1) + ")").addClass(opts.group_active);		
			else
				$(opts.nav_layer + " span:eq(" + (tabActual) + ")").addClass(opts.group_active);		
		}
		function anteriorTab() {
			if (tabActual == 0) 
				nuevoTab(totalTabs - 1);
			else 
				nuevoTab(tabActual - 1);
		}
		function posteriorTab() {
			if (tabActual + 1 == totalTabs)
				nuevoTab(0);
			else
				nuevoTab(tabActual + 1);
		}
		
		function showNavigator() {
			var i=0;
			var total = $(opts.thumbnails + " div").length;
			totalTabs = total;
			if (totalTabs == 1) 
				return;
			if (total > 2)
				$(opts.nav_layer).append('<span style="margin-right:10px;"><a><img src="/ar/flecha_izda.gif" alt="PREV"></a></span>');
			
			for (var i=0; i < total; i++) {
				$(opts.nav_layer).append("<span><a rel='" + i + "'> " + (i + 1)  + " </a></span>");
				$(opts.nav_layer + " a:last").click(function (i) { paraTimer();	nuevoTab(i.currentTarget.rel); });
			}
			if (totalTabs > 2) {
				$(opts.nav_layer + " span:eq(1)").addClass(opts.group_active);
			} else {
				$(opts.nav_layer + " span:eq(0)").addClass(opts.group_active);		
			}
			// Ponemos botones anterior y siguiente
			if (total > 2) {
				$(opts.nav_layer).append('<span style="margin-left:3px;"><a><img src="/ar/flecha_decha.gif" alt="NEXT"></a></span>');
				$(opts.nav_layer + " a:first").click(anteriorTab);
				$(opts.nav_layer + " a:last").click(posteriorTab);
			}
			$(opts.nav_layer + " span").mouseover(function () { $(this).addClass('grupoHover'); });
			$(opts.nav_layer + " span").mouseout(function () { $(this).removeClass('grupoHover'); });
		}
		function splitThumbnails() {
			/*
				Convert: <div> <img> <img> <img> <img> </div>
				to: <div> <div> <img> <img> </div>  <div> <img> <img> </div> </div>
			*/
			var total = $(opts.thumbnails + ' img').length;
			var n = 0;
			$(opts.thumbnails + " " + opts.thumbnails_layer).after('<div id="tmplayer"></div>');
			$("#tmplayer").append('<div></div>\n');
			
			for (var i=0; i < total; i++) {
				if (n == opts.thumbnails_split) {
					n=0;
					$("#tmplayer").append('<div></div>\n');
				}
				$("#tmplayer div:last").append($(opts.thumbnails + ' img:eq(' + i + ')').clone());
				n++;
			}
			$(opts.thumbnails + " div:first").remove();
			$(opts.thumbnails).html($('#tmplayer').html());
			// Hide all layers except first
			$(opts.thumbnails + " div:gt(0)").hide();
		}
	
		function debug(obj) {
			if (window.console && window.console.log)
				window.console.log(obj);	
		}	
	}
  
	$.fn.visorObras.defaults = {
		nav_layer: '',
		thumbnails: '',
		thumbnails_split: 0,
		thumbnails_layer: 'div',
		thumbnails_class_active: 'activa',
		display_layer: '#visor',
		data_layer: '.imagenes',
		data_box: 'div',
		autoplay: 1,
		group_active: 'grupoActivo',
		playstop_class: '#playstop',
		play_seconds: 4000,
		start_image: 0,
		loader_image: '/ar/loader.gif',
		loader_css: 'margin: 100px 0px',
		use_anchor: 1 // If an anchor is loaded, start in this posicion: #12
	};
})(jQuery);