/*******************************************************************************
jrMiniGaleria v 1.0 (07-09-2009)
- Es un plugin de jQuery creado por Jorge Rojo
- Este script fué creado con la inteción de hacer "slide show" rotativo en el que cada foto
será ampliada porteriormente haciendo click en el enlace que contiene la imagen utilizado el plugin de jQuery "colorbox" o similar.
--------------------------------- FUNCIONAMIENTO --------------------------------
- 1º Cargar la librería jQuery con <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- 2º Cargar este script.
- 3º Cargar el fichero css jrminiGaleria.css
- 4º crear la estructura html de la siguiente forma:

	<div class="jrMinigaleriaRight" id="minigaleria_1" style="width:(ancho del slide)px">
    	<ul>
        	<li>
            	<a href="foto.jpg" rel="colorbox" title="título de la foto">
                	<img src="thumb.jpg" width="300" height="230" alt="texto alternativo"/>
              	</a>
           	</li>
			<li>
            	<a href="foto.jpg" rel="colorbox" title="título de la foto">
                	<img src="thumb.jpg" width="300" height="230" alt="texto alternativo"/>
              	</a>
           	</li>
			<li>
            	<a href="foto.jpg" rel="colorbox" title="título de la foto">
                	<img src="thumb.jpg" width="300" height="230" alt="texto alternativo"/>
              	</a>
           	</li>
			...
    	</ul>
	</div>

- 5º hacer las siguientes lineas de script:

	$(document).ready(function(){
							   
		$("#minigaleria_1").jrMiniGaleria({
			autoMovimiento : true,
			retardoEntreFotos : 8000
		});
		
	});
	
----------------------- PECULIARIDADES -------------------------------------------
- la estructura html es muy importante, si la cambias es posible que ocurran cosas inesperadas 

Con javascript se crean dinamicamnete algunos elementos html que pueden dar lugar a
confusión a la hora de maquetar, porque aunque no se ponen en el código fuente al
crear la estuctura html, luego si que tienen un aspecto css.
Son los siguienetes:
- Un elemento "div" que contiene al ul, este div tiene la class="contJrMiniGaleria", 
	tiene el color de fondo y enmascara la lista de fotos.
- Dos elementos "a" para mover el slide show con las class="ctrlLeftJrMiniGaleria" y class="ctrlRightJrMiniGaleria", 
	restan ancho al slide y tb tienen maquetación.

- Este plugin solo tiene dos posibles parametros de configuración, que son:
	- autoMovimiento: es un boleano que indica si el slide show se mueve el solo, cada cierto tiempo.
	- retardoEntreFotos: milisegundos que tardará en moverse el slide show cuando "autoMovimiento" sea true

- En el fichero "jrminiGaleria.css" se ecuentran tres posiciones posibles para la minigalería y especificaciones de conficuración
	- jrMinigaleriaLeft
	- jrMinigaleriaRight
	- jrMinigaleriaCenter
	
- Todas las imágenes de la lista heredan las dimensiones del la primera, por esto es importante que todas sean del mismo alto y ancho.
	
********************************************************************************/

( function($) {
		   
	// constructor
    $.fn.jrMiniGaleria = function(settings){
		// reseteanado
        var settings = $.extend( $.fn.jrMiniGaleria.settings, settings );
		// iniciando cada elemento
        return this.find("ul").each( function(i){
		 					   
          	var jrMiniGaleria = $(this);
		  	jrMiniGaleria.attr({"id":"jrMiniGaleria_"+i});
			jrMiniGaleria.addClass("jrMiniGaleria");
			
			$(jrMiniGaleria).find("li a").bind("mouseup", function(){ $(this).addClass("itemActivo");});
			
			var anchoFotosJrMiniGaleria =  jrMiniGaleria.find("li:first-child a:first img:first").width();
			var altoFotosJrMiniGaleria =  jrMiniGaleria.find("li:first-child a:first img:first").height();
			
			jrMiniGaleria.find("img").width(anchoFotosJrMiniGaleria);
			jrMiniGaleria.find("img").height(altoFotosJrMiniGaleria);
			$('<div id="contJrMiniGaleria_'+i+'" class="contJrMiniGaleria"></div>').insertAfter(this);
			var contJrMiniGaleria = $('#contJrMiniGaleria_'+i);
			contJrMiniGaleria.append(jrMiniGaleria);
			
			var marginLeftLiJrMiniGaleria = parseInt( jrMiniGaleria.find("li:first-child").css("margin-left").split("px").shift() );
			var marginRightLiJrMiniGaleria = parseInt( jrMiniGaleria.find("li:first-child").css("margin-right").split("px").shift() );
				
		 	if( ( anchoFotosJrMiniGaleria * jrMiniGaleria.find("li").size() ) >= jrMiniGaleria.parent().width() ){
				
				$(jrMiniGaleria).find("li a").each(function(i){
					$(this).append('<span class="nFoto">'+(i+1)+'</span>');
				});
				
				$('<a id="ctrlLeftJrMiniGaleria_'+i+'" class="ctrlLeftJrMiniGaleria" 	title="&lsaquo;&lsaquo; Prev">&lsaquo;&lsaquo; Prev<span class="es_su_iz"></span><span class="es_in_iz"></span></a>').insertBefore('#contJrMiniGaleria_'+i);
				$('<a id="ctrlRightJrMiniGaleria_'+i+'" class="ctrlRightJrMiniGaleria"  title="Next &rsaquo;&rsaquo;">Next &rsaquo;&rsaquo;<span class="es_su_de"></span><span class="es_in_de"></span></a>').insertAfter('#contJrMiniGaleria_'+i);
				
				var borderWidthContJrMiniGaleria = parseInt(contJrMiniGaleria.css("border-left-width").split("px").shift() ) * 2;
				var anchoContJrMiniGaleria = contJrMiniGaleria.parent().width() - ( $('#ctrlLeftJrMiniGaleria_'+i).outerWidth() + $('#ctrlRightJrMiniGaleria_'+i).outerWidth() +borderWidthContJrMiniGaleria );
				
				contJrMiniGaleria.width( anchoContJrMiniGaleria );
				$('#ctrlLeftJrMiniGaleria_'+i+' , #ctrlRightJrMiniGaleria_'+i).height( altoFotosJrMiniGaleria );
				
				
				var anchoLiJrMiniGaleria = jrMiniGaleria.find("li:first-child").width();
				var anchoJrMiniGaleria = ( marginLeftLiJrMiniGaleria + marginRightLiJrMiniGaleria +  anchoLiJrMiniGaleria ) * jrMiniGaleria.find("li").size() ;
				
				jrMiniGaleria.width(anchoJrMiniGaleria);
				
				var cantMovJrMiniGaleria = anchoLiJrMiniGaleria + marginLeftLiJrMiniGaleria + marginRightLiJrMiniGaleria;
				var maxCantMovJrMiniGaleria = Math.ceil(((cantMovJrMiniGaleria *  jrMiniGaleria.find("li").size()) - anchoContJrMiniGaleria)/ cantMovJrMiniGaleria ) * -1;
				
				
				var irJrMiniGaleria =  true;
				var timeoutId =  null;
				var Nfoto = 0;
			
				// transición
				var irJrMiniGaleria =  true;
				
				function hacerTransicion(){
					clearTimeout(timeoutId);
					if( irJrMiniGaleria ){								  
						if( Nfoto <= maxCantMovJrMiniGaleria ){
							irJrMiniGaleria =  false;
						}
					}
					if( !irJrMiniGaleria ){								  
						if(  Nfoto >= 0 ){
							irJrMiniGaleria =  true;
						}
					}
					if( irJrMiniGaleria ){
						Nfoto --;
					}else{ Nfoto ++; 
					}
					
					jrMiniGaleria.animate({ left : ( cantMovJrMiniGaleria * Nfoto ) }, "slow", function(){ 
						if( settings.autoMovimiento ){
							timeoutId = setTimeout( hacerTransicion , settings.retardoEntreFotos );
						} 
					});
				}
				
				if( settings.autoMovimiento ){
					timeoutId = setTimeout( hacerTransicion , settings.retardoEntreFotos );
				}
			 
				// botones adelante y atras
				$('#ctrlLeftJrMiniGaleria_'+i).bind("click", function(){
					
					if( Nfoto < 0  ){
						clearTimeout(timeoutId);
						irJrMiniGaleria =  false;
						hacerTransicion(); 
					}
				});
				
				$('#ctrlRightJrMiniGaleria_'+i).bind("click", function(){
					if( Nfoto > maxCantMovJrMiniGaleria ){
						clearTimeout(timeoutId);
						irJrMiniGaleria =  true;
						hacerTransicion(); 
					}
				});
			}else{
				var marLeftJrMiniGaleria = (contJrMiniGaleria.parent().width() - ( jrMiniGaleria.width() + marginLeftLiJrMiniGaleria ) ) / 2;
				contJrMiniGaleria.width( contJrMiniGaleria.parent().width() - marLeftJrMiniGaleria );
				contJrMiniGaleria.css({"padding-left":marLeftJrMiniGaleria+"px"});
			}
		   
        });
    };
	
	//settings
    $.fn.jrMiniGaleria.settings = {
		autoMovimiento : true, // si quieres que las fotos se desplacen solas
        retardoEntreFotos : 5000 // milisegundos entre foto y foto
    };
	
})(jQuery);