//___________________________________ INICIO DE LA PAGINA ______________________________________________


//___________________________________ TODAS LAS FUNCIONES QUE UTILIZO ___________________________________

var altura_cabecera_abierta=155;
var altura_cabecera_cerrada=50;

//======================== funcion que se encarga de desplegar o recoger el menu ========================  
	function menu_desplegable(estado_menu){
		var enlaces_de_cabecera=$$('#cabecera .nivel1 a');
		if($('cabecera') == null)return;
		
		//--- cuando entras en la pagina define el alto de la cabecera y los estados del menu ---
		if(estado_menu=='abierto'){
			$('cabecera').setStyle('height', altura_cabecera_abierta);
		}else{
			$('cabecera').setStyle('height', altura_cabecera_cerrada);
			enlaces_de_cabecera.each(function(item, index){
	    		if(!item.hasClass('selected')){
	    			item.getParent().setStyle('height',0);
	    			item.getParent().setStyle('opacity',0);
	    			if(Browser.Engine.trident){ item.getParent().setStyle('display','none'); }
	    		}
	    		//--- cuando pasas por encima de cada opcion del menu
	    		item.addEvent('mouseenter', function(){
		    		//--- primero encuentras el padre
		    		var padre = item.getParent('ul');
		    		var hijo = item.getNext('ul');
		    		//---- si se trata del nivel 1, oculta nivel2 y 3
		    		if(padre.hasClass('nivel1')){
		    		 	var niveles_hijos=$$('.nivel2','.nivel3');
		    		 	niveles_hijos.each(function(item){ item.setStyle('display','none'); }); 	
		    		}
		    		//--- si se trata del nivel 2, oculta nivel3
		    		if(padre.hasClass('nivel2')){
		    			var niveles_hijos=$$('.nivel3');
		    			niveles_hijos.each(function(item){ item.setStyle('display','none');	});
		    		}
						//--- finalmente si la opcion tiene algun hijo lo muestro
		    		if(hijo!=null) hijo.setStyle('display','block');
		    		
		    		//--- comprobamos la altura del nivel 3 una vez mostrado
		    		if(padre.hasClass('nivel3')){
		    		 	var altura_nivel3 = padre.offsetHeight;
		    		}else{
		    			if(hijo){
		    				var altura_nivel3 = hijo.offsetHeight;
		    			}
		    		}
		    		//alert(altura_nivel3);
		    		//--- si su altura es mayor se modifica la cabecera
		    		if (altura_nivel3 > altura_cabecera_abierta) {
							altura_cabecera_abierta = altura_nivel3;
							$('cabecera').tween('height', altura_cabecera_abierta);
						}else{
							//--- sólo cambia el alto cuando estemos sobre nivel 1 ó nivel2 y desaparezca nivel 3 
							if ((padre.hasClass('nivel1') || padre.hasClass('nivel2')) && document.getElement('.nivel3').getStyle('display') == 'none'){
								altura_cabecera_abierta = 155;
								$('cabecera').tween('height', altura_cabecera_abierta);
							}
							/*if (document.getElement('.nivel3').getStyle('display') == 'none'){
								alert("OCULTO");
								altura_cabecera_abierta = 155;
								$('cabecera').tween('height', altura_cabecera_abierta);
							}*/
						}
	    		});
			});
		}
		
		//--- despues define el alto del contenedor
		ajusta_altura_contenedor();
		
		//--- efectos para la cabecera ---
		$('cabecera').set('tween', {duration: 400,transition:Fx.Transitions.Cubic.easeOut});
		$('contenedor').set('tween', {duration: 400,transition:Fx.Transitions.Cubic.easeOut});
		
		//--- efecto cuando entras ---
		$('contenedor_menu').addEvent('mouseenter', function(event){
		//$('contenedor_menu').addEvent('mouseover', function(event){
			
			//--- bajo fondo degradado a la cabecera
			$('degradado_negro').tween('top','0px');
			//--- crece la cabecera
			$('cabecera').tween('height', altura_cabecera_abierta);
			
			//--- mengua el cuerpo
			ajusta_altura_contenedor('abrir');
			
			//--- crecen y aparecen todos los links menos el que tenga la clase selected
			enlaces_de_cabecera.each(function(item, index){
	    		if(!item.hasClass('selected')){
	    			if(Browser.Engine.trident){ item.getParent().setStyle('display','block');}
					item.getParent().set('tween', {duration: 400,transition:Fx.Transitions.Cubic.easeOut, link:'chain'});
					item.getParent().tween('height', 15.8667).tween('opacity', 1);
					//item.getParent().setStyle('height','auto').tween('opacity', 1);
	    		}
			});
		});
		
		//--- efecto cuando sales ---
		$('cabecera').addEvent('mouseleave', function(event){		
			
			//--- subo fondo degradado a la cabecera
			$('degradado_negro').tween('top','-300px');
			
			//--- vuelve a poner visibles las opciones del menu que estaban seleccionadas
			var ul_seleccionados=$$('#contenedor_menu ul .selected');
			ul_seleccionados.each(function(item, index){ item.setStyle('display','inline');});
			
			//--- mengua la cabecera despues de 400milisegundos (por el efecto)
			(function(){
				//-- mengua la cabecera
				$('cabecera').tween('height', altura_cabecera_cerrada);
				//--- reset de la altura abierta
				altura_cabecera_abierta = 155;
				
				//-- crece el contenedor
				ajusta_altura_contenedor('cerrar');
			}).delay(400);
			
			//--- menguan y desaparecen todos los links menos el que tenga la clase selected
			enlaces_de_cabecera.each(function(item, index){
	    		if(!item.hasClass('selected')){
					item.getParent().set('tween', {duration: 400,transition:Fx.Transitions.Cubic.easeOut, link:'chain', onComplete: function(response){ } });
					item.getParent().tween('opacity', 0).tween('height', 0);
					if(Browser.Engine.trident){ item.getParent().setStyle('display','none'); }
	    		}
			});
			
			//--- me aseguro que solo se quede visible los ul(nivel2) que tienen clase selected
			$$('.nivel2').each(function(item, index){
				if(!item.hasClass('selected')){ item.setStyle('display','none');}
			});
			//--- me aseguro que solo se quede visible los ul(nivel3) que tienen clase selected
			$$('.nivel3').each(function(item, index){
				if(!item.hasClass('selected')){ item.setStyle('display','none');}
			});
			
		});
		
		//--- evento al entrar en nivel 1 (si existe filtrado)
		if ($('paginacion_por_anio')) {
			$$('.nivel1').addEvent('mouseenter', function(event){
				//--- Desaparece el criterio de filtrado (Mosaico >)
				$('paginacion_por_anio').tween('opacity', 0);
			});
		}
		
		//--- evento al salir de nivel 1 (si existe filtrado)
		if ($('paginacion_por_anio')) {
			$$('.nivel1').addEvent('mouseleave', function(event){
				//--- Reaparece el criterio de filtrado (Mosaico >)
				$('paginacion_por_anio').tween('opacity', 1);
			});
		}
	}
	
//======================== funcion que activa EL MENU del mosaico (el de la dcha/superior de la pantalla) ======
function menu_mosaico(){
	//------ Oculto las opciones de visualizacion del mosaico
	$$('#cabecera #opciones_ordenar li').setStyle('display', 'none');
	if($chk($('ordenar'))){
		$('ordenar').addEvent('mouseenter', function(){ $$('#cabecera #opciones_ordenar li').setStyle('display', 'block'); this.removeClass('flecha_blanca'); });
		$('ordenar').addEvent('mouseleave', function(){ $$('#cabecera #opciones_ordenar li').setStyle('display', 'none'); this.addClass('flecha_blanca'); });
	}
}

//======================== funcion que hace el pase de fotos en la página home ======================
	var index_imagen_galeria_home=-1;
	var imagen_galeria_home_activa=true;
	function galeria_home(){
		var imagenes = $$('#fondo img');
		if (imagenes.length <= 1 ) return;
		if(imagen_galeria_home_activa){
			index_imagen_galeria_home=index_imagen_galeria_home+1;
			if( index_imagen_galeria_home>(imagenes.length-1) ){index_imagen_galeria_home=0}
			//alert('flag2');
			imagenes.setStyle('opacity', 0);
			//imagenes[index_imagen_galeria_home].setStyle('opacity', 1);
			if(imagenes!='') imagenes[index_imagen_galeria_home].tween('opacity', 1);
		}
		(function(){ galeria_home(); }).delay(6000);
	}

//========================  funcion que se encarga de mostrar el contenido en cada celda del mosaico ========================
	var myMask;
	var ruta= 'http://ah.zorraquino.info/';
	function over_celda_mosaico(){
		var celdas=$$('.celda a');
		celdas.each(function(item, index){
			
			item.getParent().setStyle('opacity', 0.6);
			//item.getParent().set('tween', {duration: 600,transition:Fx.Transitions.Cubic.easeOut});
			//-- la hace opaca
			item.getParent().addEvent('mouseenter', function(){this.tween('opacity', 1); });
			//item.getParent().addEvent('mouseenter', function(){this.setStyle('opacity', 1);});
			//-- la hace transparente
			item.getParent().addEvent('mouseleave', function(){this.tween('opacity', 0.6);});
			//item.getParent().addEvent('mouseleave', function(){this.setStyle('opacity', 0.6);});
			
			//---
			//item.get('src');
			//var tag = item.get('src');
			//item.set('href', item.get('href')+'?iframe=si');

			
			//---
			item.addEvent('click', function(event){
				//Paramos los swf en ejecución
				//$('audioObject').StopPlay();
				//--- averiguo el tipo de contenido que tiene
				var info_tipo = this.getNext('.tipo');
				//--- si no tiene tipo o el tipo es pdf no hago nada
				if(info_tipo.innerHTML=='' || info_tipo.innerHTML=='pdf')	return;
				
				//--- intercepto el evento click y lo corto
				event.stopPropagation();
				event.stop();
				
				//--- esta es la condicion buena cuando "video" este preparado, despues de navidad
				if(info_tipo.innerHTML!='pdf'){
				//if(info_tipo.innerHTML!='audio' && info_tipo.innerHTML!='pdf' && info_tipo.innerHTML!='video'){
				
						if(info_tipo.innerHTML!='galeria'){
							$('cerrar_contenido').setStyle('display','block');
						}
						// Cargamos un loader de fondo mientras carga el iframe
						$('contenido_final').set('class', 'loader');
						//--- averiguo la ruta del iframe
						var ruta_iframe = this.getNext('.ruta');
						//--- averiguo el titulo y el subtitulo
						var titulo = this.getNext('.celda_titulo').innerHTML;
						var subtitulo = this.getNext('.celda_subtitulo').innerHTML;
						
						
						//--- seteo el iframe
						$('iframe_contenido').setStyle('opacity', 0);
						$('iframe_contenido').set('src',ruta_iframe.innerHTML+'?iframe=si');
						//alert($('iframe_contenido').get('src'));
						$('iframe_contenido').addEvent('load', function(event){
							this.tween('opacity', 1);
						})
						
						//--- seteo la info que se muestra bajo el iframe
						$('linea_info1').innerHTML=titulo;
						$('linea_info1').setStyle('display', 'none');
						if($chk($('linea_info2'))) $('linea_info2').dispose();
						
						//--- calculo el tamanio del contenedor
						var info_tamano = this.getNext('.tamano');
						switch (info_tamano.innerHTML){
							case '1x1':
								$('contenido_final').setStyles({width: 200, height: 210});
								//background: url(../imagenes/bg/loader.gif)  center center no-repeat;
								//(function(){ $('iframe_contenido').setStyles({width: 200, height: 160}); }).delay(10);
								$('iframe_contenido').setStyles({width: 200, height: 160});
								break;
							case '2x1':
								$('contenido_final').setStyles({width: 400, height: 210});
								//(function(){ $('iframe_contenido').setStyles({width: 200, height: 160}); }).delay(10);
								$('iframe_contenido').setStyles({width: 200, height: 160});
								break;
							case '3x1':
								$('contenido_final').setStyles({width: 600, height: 210});
								//(function(){ $('iframe_contenido').setStyles({width: 600, height: 160}); }).delay(10);
								$('iframe_contenido').setStyles({width: 600, height: 160});
								break;
							case '4x1':
								$('contenido_final').setStyles({width: 800, height: 210});
								//(function(){ $('iframe_contenido').setStyles({width: 800, height: 160}); }).delay(10);
								$('iframe_contenido').setStyles({width: 800, height: 160});
								break;
							case '1x2':
								$('contenido_final').setStyles({width: 200, height: 420});
								//(function(){ $('iframe_contenido').setStyles({width: 200, height: 370}); }).delay(10);
								$('iframe_contenido').setStyles({width: 200, height: 370});
								break;
							case '2x2':
								$('contenido_final').setStyles({width: 400, height: 420});
								//(function(){ $('iframe_contenido').setStyles({width: 400, height: 370}); }).delay(10);
								$('iframe_contenido').setStyles({width: 400, height: 370});
								break;
							case '3x2':
								$('contenido_final').setStyles({width: 600, height: 420});
								//(function(){ $('iframe_contenido').setStyles({width: 600, height: 370}); }).delay(10);
								$('iframe_contenido').setStyles({width: 600, height: 370});
								break;
							case '4x2':
								$('contenido_final').setStyles({width: 800, height:420});
								//(function(){ $('iframe_contenido').setStyles({width: 800, height: 370}); }).delay(10);
								$('iframe_contenido').setStyles({width: 800, height: 370});
								break;
							default:
								$('contenido_final').setStyles({width: 200, height: 210});
								$('contenido_final').set('class', 'loaderup');
								//(function(){ $('iframe_contenido').setStyles({width: 200, height: 160}); }).delay(10);
								$('iframe_contenido').setStyles({width: 200, height: 160});
						}
						
						
						//---Antes de nada reseteo el 'contenido final'
						$('contenido_final').setStyle('display','none');
						//$('contenido_final').set('html', '');
						$('contenido_final').setStyles({left: 0, right: '' });
						$('contenido_final').setStyles({top: 0, bottom: '' });
						$('contenido_final').setStyle('margin-right', 0);
										
						//--- muevo el 'contenido_final' a la celda que acabo de clickar
						$('contenido_final').inject(this,'before');
						$('contenido_final').setStyle('display','block');
						var coordenadas_lateral = $('contenido_final').getCoordinates($('mosaico'));
						var coordenadas_vertical= $('contenido_final').getCoordinates($('contenedor'));
						
						//-- ajusto hacia izq o dcha
						if(coordenadas_lateral.right>800){
							$('contenido_final').setStyles({right: 0, left: ''});
						}else{
							$('contenido_final').setStyles({right: '', left: 0});
						}
						
						//-- en caso de que el contenido sea de 4 hay que calcular el right(para que siempre este pegado a la izq
						if($('contenido_final').getSize().x >= $('mosaico').getSize().x && $('contenido_final').getStyle('left')!='0px'){
							$('contenido_final').setStyles({right: $('contenido_final').getCoordinates($('mosaico')).left, left: ''});
						}

						
						
						//-- ajusto arriba y abajo
						if(coordenadas_vertical.bottom>$('contenedor').getSize().y && !($('contenido_final').getSize().y>$('contenedor').getSize().y)){
							$('contenido_final').setStyles({bottom: 0, top: ''});
						}else{
							$('contenido_final').setStyles({bottom: '', top: 0});
						}
						
						//-- si es explorer hago el iframeshim
						var myFloatingDivShim = new IframeShim('contenido_final', {
						    display: true,
						    className: 'myFloatingDivShimClass'
						});
						
						
						myMask = new Mask($('fondo'),{hideOnClick:true});
						myMask.addEvent('click', function(event){
							//$('contenido_final').setStyle('display', 'none');
							//myMask.destroy();
							cerrar_contenido_final();
						});
						myMask.show();
						//-- hago la animacion de entrada
						var ancho = $('contenido_final').getSize().x;
						var alto = $('contenido_final').getSize().y;
						
						//-- animacion del recuadro
						//$('contenido_final').setStyles({width:0,height:0});
						//$('contenido_final').morph({height: alto, width: ancho});
						
						//-- tamanio del recuadro SIN ANIMACION
						$('contenido_final').setStyles({width:ancho,height:alto});
						
						//-- para evitar problemas de transparencia saco el contenido final de dentro del li y lo meto en contenedor
						(function(){
							var coordenadas = $('contenido_final').getPosition( $$('body'));
							$('contenido_final').setStyle('display', 'none');
							$('contenido_final').setStyle('z-index', 1000);
							$$('body').grab($('contenido_final'),'top');
							$('linea_info1').setStyle('display', 'block');
							//$('linea_info2').setStyle('display', 'block');
							var linea_info2 = new Element('div', {id: 'linea_info2', html:subtitulo});
							linea_info2.inject($('contenido_final'));
							
							$('contenido_final').setStyles({top: coordenadas.y, left: coordenadas.x, display: 'block' });
							
							//--- Si es galería se centra
							//if (info_tipo.innerHTML=='galeria') {
								if (info_tamano.innerHTML == '2x2' || info_tamano.innerHTML == '3x2') {
									$('contenido_final').setStyles({right: '', left: '370px'});
								}
							//}
							//myMask.show();
						}).delay(10);
						
						$('cerrar_contenido').addEvent('click', function(event){
							cerrar_contenido_final();
						});
						
						if (Browser.Engine.webkit) {
							$('iframe_contenido').addEvent('load', function(event){
								this.setStyle('display','none');
								this.setStyle('display','block');
							});
						};
				}else{
					$('contenido_final').setStyle('display','none');
				} //--- fin del if 
			}); //--- fin del evento click
		}); //--- fin del each
		
	}
//========================  cerrar el contenido del mosaico =====================================


function cerrar_contenido_final(){
	$('contenido_final').setStyle('display','none');
	$('iframe_contenido').setStyles({width: 0, height: 0});
	$$('.mask').dispose();
	$('cerrar_contenido').setStyle('display','none')

}


//========================  funcion que ajusta el tamanio del contenedor ======================== 
	function ajusta_altura_contenedor(estado){
		//-- calcula las medidas que voy a usar
		var cuerpo=$$('body');
		var alto_pagina=cuerpo[0].getSize().y;
		var alto_cabecera=$('cabecera').getSize().y;
		var alto_pie= $('pie').getSize().y;
		$('contenedor').setStyle('height', alto_pagina-(alto_cabecera+alto_pie));
		switch(estado){
			case 'abrir': //-- si el estado es abrir hago el calculo y la animacion
				var altura_final_cuerpo=alto_pagina-(alto_pie+altura_cabecera_abierta+38);		
				$('contenedor').tween('height',altura_final_cuerpo);
				break;
			case 'cerrar': //-- si el estado es cerrar hago el calculo y la animacion
				var altura_final_cuerpo=alto_pagina-(alto_pie+altura_cabecera_cerrada+38);
				$('contenedor').tween('height',altura_final_cuerpo);
				break;
			default: //-- si no hay estado clavo la altura sin animacion
				$('contenedor').setStyle('height', alto_pagina-(alto_cabecera+alto_pie));
		}
	}

//======================== scroll del mosaico ==================================
	var mySlide;
	function scroll_mosaico(){

		//-- calcular el numero de pasos del scroll
		numero_de_celdas=$$('.celda').length;
		
		//--- quitar el scroll que hay por defecto
		$('contenedor').setStyle('overflow', 'hidden');
		
		if(numero_de_celdas<=4) return;
		pasos_de_scroll=Math.ceil(numero_de_celdas/4)-1;
		
		
		//--- crear e insertar el scroll ---
		var scroll_area = 	new Element('div', {	'id': 'scroll_area'	});
		var knob = 			new Element('div', {	'id': 'knob' });
		var flecha_up = 	new Element('div', {	'id': 'flecha_up' });
		var flecha_down = 	new Element('div', {	'id': 'flecha_down' });
		
		flecha_up.inject(knob);
		flecha_down.inject(knob);
		knob.inject(scroll_area);
		scroll_area.inject($('contenedor'),'bottom');
		

		//--- ajustar la altura del scroll
		altura_contenedor=$('contenedor').getStyle('height').toInt();
		scroll_area.setStyle('height',altura_contenedor+'px');
		
		//-- calcular el numero de pasos del scroll
		numero_de_celdas=$$('.celda').length;
		pasos_de_scroll=Math.ceil(numero_de_celdas/4)-1;
		
		//-- calcular la altura del knob
		altura_knob=altura_contenedor/pasos_de_scroll;
		if(altura_knob==altura_contenedor)altura_knob=altura_knob/2;
		if(altura_knob<=50)altura_knob=50;
		$('knob').setStyle('height', altura_knob+"px");
		$('knob').setStyle('opacity', 0.5);
		
		//--- definir el comportamiento del scroll
		mySlide = new Slider(scroll_area, knob, {
			mode:'vertical',
			steps: pasos_de_scroll,
			wheel:true,
			onChange: function(pos){
				//$('chivato').set('html',pos);
				$('mosaico').tween('margin-top', pos*-210);
	
			}
		}).set(0);

		//--- le añado eventos de rueda del raton al contenedor para poder hacer scroll sobre el contenido
		$('contenedor').addEvent('mousewheel', function(e){
			e = new Event(e).stop();
			if(e.wheel>0){
				mySlide.set(mySlide.step-1);
			}else{
				mySlide.set(mySlide.step+1);
			}
		});
		
		
		//--- le pongo el evento mouseenter al knob para que cambie de color
		//scroll_area.addEvent('mouseenter', function(){	$('knob').tween('background-color', '#CCC');	});
		//scroll_area.addEvent('mouseleave', function(){	$('knob').tween('background-color', '#333');	});
		scroll_area.addEvent('mouseenter', function(){	$('knob').tween('opacity', 1);	});
		scroll_area.addEvent('mouseleave', function(){	$('knob').tween('opacity', 0.5);	});
	}
	
	

//======================== ajusta_scroll ==============================
function ajusta_scroll(){
	if($('scroll_area')==null) return;
	$('scroll_area').destroy();
	scroll_mosaico();
	
	if( $('mosaico').getStyle('display')== 'block') $('scroll_area').setStyle('display','block');
	//if($('scroll_area.setStyle')!=null)	$('scroll_area.setStyle').setStyle('display','block');
	//alert('fib');
}



//======================== scroll del iframe ==================================
function makeScrollbar(content,scrollbar,handle,horizontal,ignoreMouse){
		var steps = (horizontal?(content.getScrollSize().x - content.getSize().x):(content.getScrollSize().y - content.getSize().y))
		var slider = new Slider(scrollbar, handle, {    
				steps: steps,
				mode: (horizontal?'horizontal':'vertical'),
				onChange: function(step){
						// Scrolls the content element in x or y direction.
						var x = (horizontal?step:0);
						var y = (horizontal?0:step);
						content.scrollTo(x,y);
				}
		}).set(0);
		if( !(ignoreMouse) ){
				// Scroll the content element when the mousewheel is used within the 
				// content or the scrollbar element.
				$$(content, scrollbar).addEvent('mousewheel', function(e){  
						e = new Event(e).stop();
						var step = slider.step - e.wheel * 30;  
						slider.set(step);               
				});
		}
		// Stops the handle dragging process when the mouse leaves the document body.
		//$(document.body).addEvent('mouseleave',function(){slider.drag.stop()});
		handle.setStyle('opacity', 0.5);
		scrollbar.addEvent('mouseenter', function(){	handle.tween('opacity', 1);	});
		scrollbar.addEvent('mouseleave', function(){	handle.tween('opacity', 0.5);	});
}



//======================== fondo de la pagina ==================================
	var index_imagen_fondo=0;
	function fondo_pagina(){
		
		//--- recupero las imagenes del fondo
		var lista_imagenes = $$('#fondo img');
		//lista_imagenes.reverse();
		//alert(lista_imagenes.get('src'));
		//alert(lista_imagenes.reverse().get('src'));
		
		//--- si existe alguna imagen
		if(lista_imagenes.length>0){
			
			//--- oculto el mosaico
			if($('mosaico')!=null)	$('mosaico').setStyle('display', 'none');
			
			
			//--- muevo la capa de fondo al principio de la pagina
			var cuerpo = $$('body');
			$('fondo').inject(cuerpo[0], 'top');
			
			//--- hago visible la paginacion de la galeria
			$('contenedor_paginacion_galeria').setStyle('display', 'block');
			
			//--- le aplico el javascript a cada imagen para que se vea a pantalla completa
			lista_imagenes.each(function(imagen, index){
				
				//alert(index +'----'+imagen.get('src'));
				
				imagen.setStyle('opacity', 0);
				imagen.set('tween', {transition: 'Quad:out', duration:'500', fps:'100'});
				
				var myBg = new Wallpaper(imagen);
				
				//--- y creo una etiqueta span con el numero(ordinal) de la imagen 
				var mySpan = new Element('span', {
				    'html': (index+1)+' ',
				    'events': {
				        //--- cuando clickas cada numero muestra la imagen correspondiente
				        'click': function(){
				            //alert('clicked');
				            show_image(index);
				            index_imagen_fondo=index;
				        }
				    }
				});
				
				//--- inserto la etiqueta span en su contenedor
				mySpan.inject($('paginacion_galeria'));
				
				
				//Creamos el efecto que hará transparente el fondo
				var efecto = new Fx.Tween("fondo",{
					property: 'opacity'
				});
				//Evento al completar la transparencia
				efecto.addEvent("complete", function(){
					$('mosaico').setStyle('display', 'block')
				});
				//--- asigno comportamiento al span "texto_detalle" y "texto_volver_galeria"
				$('texto_detalle').addEvent('click', function(){				
					$$('#contenedor_paginacion_galeria span').setStyle('display', 'none');
					$('texto_volver_galeria').setStyle('display', 'inline');
					
					efecto.start(0);
					
					//--- oculto el fondo
					//$('fondo').set('tween', { onComplete: $('mosaico').setStyle('display', 'block') }); 
					//$('fondo').tween('opacity', 0);
					//--- muestro el mosaico
					//$('mosaico').setStyle('display', 'block');
					//if($('scroll_area')!=null) $('scroll_area').setStyle('display', 'block');
					//--- muestro el scroll
					if($('scroll_area')!=null) $('scroll_area').setStyle('display', 'block');
				});
				$('texto_volver_galeria').addEvent('click', function(){
					$$('#contenedor_paginacion_galeria span').setStyle('display', 'inline');
					this.setStyle('display', 'none');
					//--- muestro el fondo
					$('fondo').tween('opacity', 1);
					//--- oculto el mosaico
					$('mosaico').setStyle('display', 'none');
					//if($('scroll_area')!=null) $('scroll_area').setStyle('display', 'none');
					//--- oculto el scroll
					if($('scroll_area')!=null) $('scroll_area').setStyle('display', 'none');
				});
				 
			});
			
			var listo = 0;
			
			//--- cuando la ultima imagen termine de ajustarse al fondo, hago el fundido
			lista_imagenes[0].addEvent('completed', function(){
				this.tween('opacity', 1);
				
				var existe_mosaico=$defined($('mosaico'));
				if(existe_mosaico && lista_imagenes.length>1){
					//--- pongo las flechas de siguiente anterior al fondo de la imagen
					var img_next = 	new Element('div',{	'id':'img_next_fondo'	});
					var img_prev = 	new Element('div',{	'id':'img_prev_fondo'	});
					
					img_next.inject($('fondo') );
					img_prev.inject($('fondo') );
					
					$(document.body).addEvent('mousemove',function(e) { 
						var mitad= Math.round(this.offsetWidth/2);
						if(e.page.x<=mitad){
							$('img_next_fondo').setStyle('display', 'none');
							$('img_prev_fondo').setStyle('display', 'block');
						}else{
							$('img_next_fondo').setStyle('display', 'block');
							$('img_prev_fondo').setStyle('display', 'none');
						}
					});
				
					//--- cuando haces click sobre el fondo pasa a la imagen sig/anterior
					//$(document.body).addEvent('click',function(e) {
					$$('#contenedor').addEvent('click',function(e) {
						//--- me aseguro que el click se haga sobre la pagina y no sobre la cabecera.
						//--- para ello el click debe ser a mas altura de 100px
						if(e.page.y>100){
							if( $('img_next_fondo').getStyle('display')=='block'){
								index_imagen_fondo = index_imagen_fondo+1;
								show_image(index_imagen_fondo);
							}
							if( $('img_prev_fondo').getStyle('display')=='block'){
								index_imagen_fondo = index_imagen_fondo-1;
								show_image(index_imagen_fondo);
							}
						}
					});
				}
			
			});
		
			
		
		//--- si no existe ninguna imagen
		}else{
			$$('#contenedor_paginacion_galeria span').setStyle('display', 'none');
			$('texto_volver_galeria').setStyle('display', 'inline');
			
			//--- muevo la capa de fondo al principio de la pagina
			var cuerpo = $$('body');
			$('fondo').inject(cuerpo[0], 'top');
			
			//--- oculto el fondo
			$('fondo').tween('opacity', 0);
			//--- muestro el mosaico
			if($chk( $('mosaico'))) $('mosaico').setStyle('display', 'block');
			if($('scroll_area')!=null) $('scroll_area').setStyle('display', 'block');
			//--- muestro el scroll
			if($('scroll_area')!=null) $('scroll_area').setStyle('display', 'block');
		}
		
		
		
		
		//var myBg = new Wallpaper('imagen_fondo');
		
		/*
		var myResize = $('fondo').makeResizable({
		    onResize: function(){
		        myBg.setDimensions();
		    }
		});
		*/
		
	

	

	
	}
//===============================
function show_image(n_imagen){
	//--- recupero las imagenes del fondo
	var lista_imagenes = $$('#fondo img');
	if(n_imagen>lista_imagenes.length-1){n_imagen=0;}
	if(n_imagen<0){n_imagen=lista_imagenes.length-1;}
	index_imagen_fondo=n_imagen;
	//lista_imagenes.reverse();
	lista_imagenes.each(function(imagen, index){
		imagen.setStyle('opacity', 0);
	});
	
	
	//lista_imagenes[n_imagen].set('tween', {transition: 'Quad:out', duration:'500', fps:'100'});

	lista_imagenes[n_imagen].tween('opacity', 1);
}

//============================= monta la galeria que se muestra en el detalle de las celdas ======
var index_imagen_galeria=0;
function monta_galeria_contenido(){
	
	var imagenes = $$('img');
	imagenes.setStyles({
	    position: 'absolute',
	    left: 0,
	    top: 0,
	    opacity: 0
	});
	
	imagenes[0].setStyles({
	    position: 'absolute',
	    left: 0,
	    top: 0,
	    opacity: 1
	});
	
	var img_next = 	new Element('div',{	'id':'img_next'	});
	var img_prev = 	new Element('div',{	'id':'img_prev'	});
	var img_cerrar = 	new Element('div',{	'id':'img_cerrar'	});
	
	var div_next = 	new Element('div',{ 
		'id':'div_next',
		'styles': {
			'display': 'block',
	    'position': 'absolute',
	    'left': '0px',
	    'top':'0px',
	    'width': '100%',
	    'height': '100%',
	    'height': '100%',
	    'cursor': 'pointer'
   	}
  });
	
	var div_galeria = new Element('div', { 
		'id':'div_galeria',
		'styles': {
			'display': 'block',
	    'position': 'absolute',
	    'left': '0px',
	    'top':'0px',
	    'width': '100%',
	    'height': '100%',
	    'height': '100%',
	    'cursor': 'pointer'
    }
	});
	
	
	img_next.addEvent('click', function(){
		index_imagen_galeria=index_imagen_galeria+1;
		if( index_imagen_galeria>(imagenes.length-1) ){index_imagen_galeria=0}
		imagenes.tween('opacity', 0);
		//imagenes[index_imagen_galeria].setStyle('opacity', 1);
		imagenes[index_imagen_galeria].tween('opacity', 1);
	});
	
	div_next.addEvent('click', function(){
		index_imagen_galeria=index_imagen_galeria+1;
		if( index_imagen_galeria>(imagenes.length-1) ){index_imagen_galeria=0}
		imagenes.tween('opacity', 0);
		//imagenes[index_imagen_galeria].setStyle('opacity', 1);
		imagenes[index_imagen_galeria].tween('opacity', 1);
	});
	
	
	div_galeria.addEvent('mouseenter', function(){
		$('img_cerrar').setStyles({'display': 'block','opacity': '0.9'}),
		$('img_prev').setStyles({'display': 'block','opacity': '0.9'}),
		$('img_next').setStyles({'display': 'block','opacity': '0.9'})
	});
	
	div_galeria.addEvent('mouseleave', function(){
		$('img_cerrar').setStyle('display', 'none'),
		$('img_prev').setStyle('display', 'none'),
		$('img_next').setStyle('display', 'none')
	});
	
	img_cerrar.addEvent('mouseenter', function(){
		this.setStyle('opacity', '1');
	});	
	img_cerrar.addEvent('mouseleave', function(){
		this.setStyle('opacity', '0.9');
	});
	
	img_prev.addEvent('mouseenter', function(){
		this.setStyle('opacity', '1');
	});
	img_prev.addEvent('mouseleave', function(){
		this.setStyle('opacity', '0.9');
	});
	
	img_next.addEvent('mouseenter', function(){
		this.setStyle('opacity', '1');
	});
	img_next.addEvent('mouseleave', function(){
		this.setStyle('opacity', '0.9');
	});
	
	
	img_prev.addEvent('click', function(){
		index_imagen_galeria=index_imagen_galeria-1;
		if( index_imagen_galeria<0 ){index_imagen_galeria=imagenes.length-1}
		imagenes.tween('opacity', 0);
		//imagenes[index_imagen_galeria].setStyle('opacity', 1);
		imagenes[index_imagen_galeria].tween('opacity', 1);
	});
	
	img_cerrar.addEvent('click', function(){
		//alert($(parent.document.body).getSelectedText());
		//$('contenido_final').setStyle('display','none');
		//$('iframe_contenido').setStyles({width: 0, height: 0});
		//$$('.mask').dispose();
		
		//Declaramos en una variable la ventana superior al iframe
		var objRef = (window.opener ? window.opener : window.parent);
		
		objRef.document.getElementById('contenido_final').setStyle('display','none');
		objRef.document.getElementById('iframe_contenido').setStyles({width: 0, height: 0});
		objRef.document.getElement('.mask').dispose();
		//objRef.document.getElementById('cerrar_contenido').setStyle('display','block');
	});
	
	div_galeria.inject($('contenedor'), 'bottom');
	
	div_next.inject($('div_galeria'), 'bottom');
	img_cerrar.inject($('div_galeria'), 'bottom');
	img_prev.inject($('div_galeria'), 'bottom');
	img_next.inject($('div_galeria'), 'bottom');
	//div_next.inject($('contenedor'), 'bottom');
	//div_prev.inject($('contenedor'), 'bottom');
}