//  JavaScript Document

	//
	//	GaleriaJavascript.js
	//	Fecha de creacion: 08 / 07 / 2010
	//	Descripcion: Clase que controla una galeria de imágenes
	//
	
	//
	//  Versión 1.0 (Original)
	//  Versión 1.01 (9/7/2010)   :: Se ha añadido la funcionalidad de acceder a una foto en particular
	//  Versión 1.02 (21/9/2010)  :: Soporta añadir o no información adicional al pasapáginas
	//  Versión 1.03 (01/12/2010) :: Utiliza la librería JQuery con animaciones más curradas
	//

	//  CLASE
	
	
	var claseGaleria = null;

	function GaleriaJavascript ( desplazamientoCoordX , desplazamientoCoordY , tiempoEventoTransicion , tiempoTransicion ) 
	{
		tiempoEventoTransicion 	= typeof(tiempoEventoTransicion) != 'undefined' ? tiempoEventoTransicion : 20000;
  		tiempoTransicion 		= typeof(tiempoTransicion) 		 != 'undefined' ? tiempoTransicion : 1000;
		
		this.galimagenes		= new Array();
		this.galdescripcion 	= new Array();
		this.galbuttons			= new Array();
		this.galbuttonsclass	= new Array();
		this.galdivbuttons		= null;
		this.galnumimagenes		= 0;
		this.galimagenActual	= 0;
		this.desplazamientoX 	= desplazamientoCoordX;
		this.desplazamientoY 	= desplazamientoCoordY;
		this.tiempoEvento 		= tiempoEventoTransicion;
		this.tiempoTrans 		= tiempoTransicion;
		this.bloqueado			= false;
		this.tieneBotones		= false;
		this.jQueryAnim			= true;
		this.transEasing		= "easeOutQuart";
		this.timer				= self.setTimeout ( 'claseGaleria.siguienteImagenAutoGaleria()' , this.tiempoEvento );
		
		claseGaleria			= this;
		
		this.addImagenGaleria = function addImagenGaleria ( idImagen , idDescripcion , idButton , divclassButton , jQueryAnim )
		{
			idButton 			= typeof(idButton) != 'undefined' ? idButton : null;
			divclassButton		= typeof(divclassButton) != 'undefined' ? divclassButton : null;
			this.jQueryAnim		= typeof(jQueryAnim) != 'undefined' ? jQueryAnim : true;
			
			this.galimagenes	[ this.galnumimagenes ]	= idImagen;
			this.galdescripcion	[ this.galnumimagenes ]	= idDescripcion;
	
			if ( idButton != null )
			{
				this.galbuttons	[ this.galnumimagenes ]			= idButton;
				this.galbuttonsclass [ this.galnumimagenes ]	= divclassButton;
				this.tieneBotones 								= true;
			}
	
			this.galnumimagenes++;
		}
		
		this.pausarTemporizador = function pausarTemporizador ()
		{
			clearTimeout ( this.timer );
		}
		
		this.insertDivButtons = function insertDivButtons ( nameDivButtons )
		{
			if ( this.galnumimagenes <= 1 ) return;
			
			this.galdivbuttons	= nameDivButtons;
			
			var divBotones	= document.getElementById ( nameDivButtons );
			
			for ( var i = ( this.galnumimagenes - 1 ) ; i >= 0 ; i-- )
			{
				var nuevoBoton 	= document.createElement('div');
				nuevoBoton.setAttribute ( "id" , this.galbuttons[i] );
				nuevoBoton.setAttribute ( "border" , 0 );
				nuevoBoton.className = this.galbuttonsclass[i];
				nuevoBoton.onclick = function () 
				{
					var posicionBoton = claseGaleria.obtenerPosicionBotonByDiv ( this.id )

					claseGaleria.gotoImagenGaleriaNumero(posicionBoton);
					
					return false;
				}
				
				var nuevoEnlace = document.createElement('a');
				nuevoEnlace.setAttribute('href', '#');

				nuevoEnlace.appendChild(nuevoBoton)
				divBotones.appendChild(nuevoEnlace);	
			}
			
			this.resaltarBoton ( this.galbuttons[0] );
		}
		
		this.siguienteImagenAutoGaleria = function siguienteImagenAutoGaleria ()
		{
			if ( this.galnumimagenes <= 1 )  return false;
			
			// Programamos reloj
			this.timer = self.setTimeout ( 'claseGaleria.siguienteImagenAutoGaleria()' , this.tiempoEvento );
			
			this.siguienteImagenGaleria ();
		}
		
		this.anteriorImagenManualGaleria = function anteriorImagenManualGaleria ()
		{
			if ( this.galnumimagenes <= 1 )  return false;
			
			// Reiniciamos reloj
			self.clearTimeout ( this.timer );
			this.timer = self.setTimeout ( 'claseGaleria.siguienteImagenAutoGaleria()' , this.tiempoEvento );
			
			this.anteriorImagenGaleria ();
		}
		
		this.siguienteImagenManualGaleria = function siguienteImagenManualGaleria ()
		{
			if ( this.galnumimagenes <= 1 )  return false;
			
			// Reiniciamos reloj
			self.clearTimeout ( this.timer );
			this.timer = self.setTimeout ( 'claseGaleria.siguienteImagenAutoGaleria()' , this.tiempoEvento );
			
			this.siguienteImagenGaleria ();
		}
		
		this.anteriorImagenGaleria = function anteriorImagenGaleria ()
		{
			if ( this.galnumimagenes <= 1 )  return false;
			if ( this.galimagenActual == 0 ) return false;
			
			if ( !document.getElementById ( this.galimagenes	[ this.galimagenActual ] ) )		return false;
			if ( !document.getElementById ( this.galimagenes	[ this.galimagenActual - 1 ] ) )	return false;
			
			//if ( !document.getElementById ( this.galdescripcion [ this.galimagenActual ] ) )		return false;
			//if ( !document.getElementById ( this.galdescripcion [ this.galimagenActual - 1 ] ) )	return false;
			
			var imagenActual 	= document.getElementById ( this.galimagenes	[ this.galimagenActual ] );
			var imagenAnterior	= document.getElementById ( this.galimagenes	[ this.galimagenActual - 1 ] );
			
			if ( this.bloqueado ) 	return false;
			else					this.bloqueado = true;
	
			if ( this.jQueryAnim == false ) 
			{
				new Effect.Move ( imagenAnterior , { x: this.desplazamientoX , y: this.desplazamientoY , duration: this.tiempoTrans } );
				new Effect.Move ( imagenActual ,   { x: this.desplazamientoX , y: this.desplazamientoY , duration: this.tiempoTrans , afterFinish: ( function(){ claseGaleria.desbloquear (); }) } );
			}
			else
			{
				jQuery( "#" + this.galimagenes [ this.galimagenActual - 1 ] ).animate ({left: "+=" + this.desplazamientoX + "px" }, { duration: this.tiempoTrans , easing: this.transEasing } );
				jQuery( "#" + this.galimagenes [ this.galimagenActual ] ).animate     ({left: "+=" + this.desplazamientoX + "px" }, { duration: this.tiempoTrans , easing: this.transEasing , complete: function(){ claseGaleria.desbloquear(); } } );
			}
			
			if ( ( document.getElementById ( this.galdescripcion [ this.galimagenActual ] ) ) && ( document.getElementById ( this.galimagenActual - 1 ) ) )
			{
				var descripActual 	= this.galdescripcion [ this.galimagenActual ];
				var descripAnterior	= this.galdescripcion [ this.galimagenActual - 1 ];
				
				this.transicionEntreBloques(descripAnterior, descripActual);
			}
			
			if ( this.tieneBotones )
			{
				var botonActual 	= this.galbuttons [ this.galimagenActual ];
				var botonAnterior	= this.galbuttons [ this.galimagenActual - 1 ];
				
				this.resaltarBoton ( botonAnterior );
				this.atenuarBoton  ( botonActual );
			}
			
			this.galimagenActual--;
		}
		
		this.siguienteImagenGaleria = function siguienteImagenGaleria ()
		{
			if ( this.galnumimagenes <= 1 )  return false;
			if ( this.galimagenActual >= ( this.galnumimagenes - 1 ) )
			{
				this.siguienteImagenGaleriaLoop ();
				
				return;
			}
			
			if ( !document.getElementById ( this.galimagenes    [ this.galimagenActual ] ) )		return false;
			if ( !document.getElementById ( this.galimagenes    [ this.galimagenActual + 1 ] ) )	return false;
			
			//if ( !document.getElementById ( this.galdescripcion [ this.galimagenActual ] ) )		return false;
			//if ( !document.getElementById ( this.galdescripcion [ this.galimagenActual + 1 ] ) )	return false;
	
			var imagenActual 		= document.getElementById ( this.galimagenes    [ this.galimagenActual ] );
			var imagenSiguiente		= document.getElementById ( this.galimagenes    [ this.galimagenActual + 1 ] );
			
			if ( this.bloqueado ) 	return false;
			else					this.bloqueado = true;
			
			if ( this.jQueryAnim == false ) 
			{
				new Effect.Move ( imagenSiguiente , { x: -this.desplazamientoX, y: -this.desplazamientoY , duration: this.tiempoTrans } );
				new Effect.Move ( imagenActual ,    { x: -this.desplazamientoX, y: -this.desplazamientoY , duration: this.tiempoTrans , afterFinish: ( function(){ claseGaleria.desbloquear (); }) } );
			}
			else
			{
				jQuery( "#" + this.galimagenes [ this.galimagenActual + 1 ] ).animate ({left: "-=" + this.desplazamientoX + "px" }, { duration: this.tiempoTrans , easing: this.transEasing } );
				jQuery( "#" + this.galimagenes [ this.galimagenActual ] ).animate     ({left: "-=" + this.desplazamientoX + "px" }, { duration: this.tiempoTrans , easing: this.transEasing , complete: function(){ claseGaleria.desbloquear(); } } );
			}
				
			if ( ( document.getElementById ( this.galdescripcion [ this.galimagenActual ] ) ) && ( document.getElementById ( this.galdescripcion [ this.galimagenActual + 1 ] ) ) )
			{
				var descripActual 		= this.galdescripcion [ this.galimagenActual ];
				var descripSiguiente	= this.galdescripcion [ this.galimagenActual + 1 ];
				
				this.transicionEntreBloques(descripActual, descripSiguiente);
			}
			
			if ( this.tieneBotones )
			{
				var botonActual 	= this.galbuttons [ this.galimagenActual ];
				var botonSiguiente	= this.galbuttons [ this.galimagenActual + 1 ];
				
				this.resaltarBoton ( botonSiguiente );
				this.atenuarBoton  ( botonActual );
			}
			
			this.galimagenActual++;
		}
		
		this.gotoImagenGaleriaNumero = function gotoImagenGaleriaNumero ( numImagen )
		{
			if ( this.galnumimagenes <= 1 )  			return false;
			if ( numImagen >= this.galnumimagenes )		return false;
			if ( numImagen == this.galimagenActual )	return false;
			
			if ( numImagen > this.galimagenActual )
			{
				var initCount		= this.galimagenActual;
				var finishCount		= numImagen;
				var fordward		= true;
			}
			else
			{
				var initCount		= numImagen;
				var finishCount		= this.galimagenActual;
				var fordward		= false;
			}
			
			if ( this.bloqueado ) 	return false;
			else					this.bloqueado = true;
			
			if ( ( document.getElementById ( this.galdescripcion [ this.galimagenActual ] ) ) && ( document.getElementById ( this.galdescripcion [ numImagen ] ) ) )
			{
				var descripActual 		= this.galdescripcion [ this.galimagenActual ];
				var descripSiguiente	= this.galdescripcion [ numImagen ];
				
				this.transicionEntreBloques(descripActual, descripSiguiente);
			}
			
			for ( var count = initCount; count <= finishCount; count++ ) 
			{
				if (!document.getElementById(this.galimagenes[count])) 
				{
					this.bloqueado = false;
					return false;
				}
				
				imagenActual = document.getElementById(this.galimagenes[count]);
				
				if ( fordward )
				{
					if ( this.jQueryAnim == false ) 
					{
						if 		( count == initCount )		new Effect.Move(imagenActual, { x: -this.desplazamientoX, y: -this.desplazamientoY, duration: this.tiempoTrans });
						else if	( count == finishCount )	new Effect.Move(imagenActual, { x: -this.desplazamientoX, y: -this.desplazamientoY, duration: this.tiempoTrans, afterFinish: ( function(){ claseGaleria.desbloquear (); }) });
						else								new Effect.Move(imagenActual, { x: -(this.desplazamientoX * 2), y: -(this.desplazamientoY * 2), duration: this.tiempoTrans });
					}
					else
					{
						if 		( count == initCount )		jQuery( "#" + this.galimagenes [ count ] ).animate ({left: "-=" + this.desplazamientoX + "px" }, { duration: this.tiempoTrans , easing: this.transEasing } );
						else if	( count == finishCount )	jQuery( "#" + this.galimagenes [ count ] ).animate ({left: "-=" + this.desplazamientoX + "px" }, { duration: this.tiempoTrans , easing: this.transEasing , complete: function(){ claseGaleria.desbloquear(); } } );
						else								jQuery( "#" + this.galimagenes [ count ] ).animate ({left: "-=" + ( this.desplazamientoX * 2 ) + "px" }, { duration: this.tiempoTrans , easing: this.transEasing } );
					}
				}
				else
				{
					if ( this.jQueryAnim == false ) 
					{
						if 		( count == initCount )		new Effect.Move(imagenActual, { x: this.desplazamientoX, y: this.desplazamientoY, duration: this.tiempoTrans });
						else if	( count == finishCount )	new Effect.Move(imagenActual, { x: this.desplazamientoX, y: this.desplazamientoY, duration: this.tiempoTrans, afterFinish: ( function(){ claseGaleria.desbloquear (); }) });
						else								new Effect.Move(imagenActual, { x: (this.desplazamientoX * 2), y: (this.desplazamientoY * 2), duration: this.tiempoTrans });
					}
					else
					{
						if 		( count == initCount )		jQuery( "#" + this.galimagenes [ count ] ).animate ({left: "+=" + this.desplazamientoX + "px" }, { duration: this.tiempoTrans , easing: this.transEasing } );
						else if	( count == finishCount )	jQuery( "#" + this.galimagenes [ count ] ).animate ({left: "+=" + this.desplazamientoX + "px" }, { duration: this.tiempoTrans , easing: this.transEasing , complete: function(){ claseGaleria.desbloquear(); } } );
						else								jQuery( "#" + this.galimagenes [ count ] ).animate ({left: "+=" + ( this.desplazamientoX * 2 ) + "px" }, { duration: this.tiempoTrans , easing: this.transEasing } );
					}
				}
			}
			
			if ( this.tieneBotones )
			{
				var botonActual 	= this.galbuttons [ this.galimagenActual ];
				var botonSiguiente	= this.galbuttons [ numImagen ];
				
				this.resaltarBoton ( botonSiguiente );
				this.atenuarBoton  ( botonActual );
			}
			
			// Reiniciamos el reloj
			self.clearTimeout ( this.timer );
			this.timer = self.setTimeout ( 'claseGaleria.siguienteImagenAutoGaleria()' , this.tiempoEvento );
			
			this.galimagenActual = numImagen;
		}
		
		this.siguienteImagenGaleriaLoop = function siguienteImagenGaleriaLoop ()
		{
			if ( this.galnumimagenes <= 1 )  return false;
			
			if ( this.galimagenActual == ( this.galnumimagenes - 1 ) )
			{
				var imagenActual = null;
				
				if ( this.bloqueado ) 	return false;
				else					this.bloqueado = true;
				
				if ( ( document.getElementById ( this.galdescripcion [ this.galimagenActual ] ) ) && ( document.getElementById ( this.galdescripcion [ 0 ] ) ) )
				{
					var descripActual 		= this.galdescripcion [ this.galimagenActual ];
					var descripSiguiente	= this.galdescripcion [ 0 ];
					
					this.transicionEntreBloques(descripActual, descripSiguiente);
				}
				
				for ( var count = ( this.galnumimagenes - 1 ); count >= 0; count-- ) 
				{
					if (!document.getElementById(this.galimagenes[count])) 
					{
						this.bloqueado = false;
						return false;
					}
					
					imagenActual = document.getElementById(this.galimagenes[count]);
					
					if ( this.jQueryAnim == false ) 
					{
						if 		( count == 0 ) 								new Effect.Move(imagenActual, { x: this.desplazamientoX, y: this.desplazamientoY, duration: this.tiempoTrans, afterFinish: ( function(){ claseGaleria.desbloquear (); }) });
						else if	( count == ( this.galnumimagenes - 1 ) )	new Effect.Move(imagenActual, { x: this.desplazamientoX, y: this.desplazamientoY, duration: this.tiempoTrans, afterFinish: ( function(){ claseGaleria.desbloquear (); }) });
						else												new Effect.Move(imagenActual, { x: (this.desplazamientoX * 2), y: (this.desplazamientoY * 2), duration: this.tiempoTrans });
					}
					else
					{
						if 		( count == 0 ) 								jQuery( "#" + this.galimagenes [ count ] ).animate ({left: "+=" + this.desplazamientoX + "px" }, { duration: this.tiempoTrans , easing: this.transEasing , complete: function(){ claseGaleria.desbloquear(); } } );
						else if	( count == ( this.galnumimagenes - 1 ) )	jQuery( "#" + this.galimagenes [ count ] ).animate ({left: "+=" + this.desplazamientoX + "px" }, { duration: this.tiempoTrans , easing: this.transEasing , complete: function(){ claseGaleria.desbloquear(); } } );
						else												jQuery( "#" + this.galimagenes [ count ] ).animate ({left: "+=" + ( this.desplazamientoX * 2 ) + "px" }, { duration: this.tiempoTrans , easing: this.transEasing } );
					}
				}
				
				if ( this.tieneBotones )
				{
					var botonActual 	= this.galbuttons [ this.galimagenActual ];
					var botonSiguiente	= this.galbuttons [ 0 ];
					
					this.resaltarBoton ( botonSiguiente );
					this.atenuarBoton  ( botonActual );
				}
				
				this.galimagenActual = 0;
			}
		}
	
	
		// Funciones privadas para la propia clase
		
		this.obtenerPosicionBotonByDiv = function obtenerPosicionBotonByDiv ( idBoton )
		{
			var posicion = 0;
			
			for ( var count = 0 ; count < this.galnumimagenes ; count++ )
			{
				if ( this.galbuttons[count] == idBoton )
				{
					posicion = count; 
					break;
				}
			}
			
			return posicion;
		}
	
		this.desbloquear = function desbloquear ()
		{
			this.bloqueado = false;	
		}
		
		this.resaltarBoton = function resaltarBoton ( idBoton )
		{
			//$(idBoton).setStyle({border: '1px solid #e85b14'});
			//$(idBoton).setStyle({'background-color': '#e85b14' });
			
			if ( document.getElementById(idBoton).style.setAttribute ) 
			{
				document.getElementById(idBoton).style.setAttribute ('border', '1px solid #e85b14');
				document.getElementById(idBoton).style.setAttribute ('backgroundColor', '#e85b14');
			}
			else
			{
				document.getElementById(idBoton).style.setProperty  ('border', '1px solid #e85b14', '!important');
				document.getElementById(idBoton).style.setProperty  ('background-color', '#e85b14', '!important');
			}
			
			document.getElementById(idBoton).className = "destacadoGrandeNavegadorBotonSelected";
		}
		
		this.atenuarBoton = function atenuarBoton ( idBoton )
		{
			//$(idBoton).setStyle({border: '1px solid #616b55' });
			//$(idBoton).setStyle({'background-color': '#616b55' });
		
			if ( document.getElementById(idBoton).style.setAttribute ) 
			{
				document.getElementById(idBoton).style.setAttribute ('border', '1px solid #616b55');
				document.getElementById(idBoton).style.setAttribute ('backgroundColor', '#616b55');
			}
			else
			{
				document.getElementById(idBoton).style.setProperty  ('border', '1px solid #616b55', '!important');
				document.getElementById(idBoton).style.setProperty  ('background-color', '#616b55', '!important');
			}
			
			document.getElementById(idBoton).className = "destacadoGrandeNavegadorBoton";
		}
		
		this.transicionEntreBloques = function transicionEntreBloques ( idBloqueDesaparece , idBloqueAparece )
		{
			
			if ( this.jQueryAnim == false ) 
			{
				$(idBloqueDesaparece).setStyle({display: 'none'});
				
				Effect.Fade( idBloqueAparece , { 	duration: this.tiempoTrans, 
											 		from: 0,
											 		to: 1,
											 		afterUpdate: ( function(){ $(idBloqueAparece).setStyle({display: 'block'}); })
				});
			}
			else
			{
				$(idBloqueDesaparece).setStyle({display: 'none'});
					
				jQuery( "#" + idBloqueAparece ).fadeIn ( this.tiempoTrans );;
			}			
		}
		
		this.apareceBloque = function apareceBloque ( idBloque )
		{
			$(idBloque).setStyle({display: 'block'});
		}
		
		this.desapareceBloque = function desapareceBloque ( idBloque )
		{
			$(idBloque).setStyle({display: 'none'});
		}
	}