/*$(document).ready( function(){
	//var tira_fotos = $("ul.tira_fotos li");
	var trim=setTimeout("montar_galeria()", 500);
});*/
var trim=null;
$(window).load(function () {
	var tira_fotos = $("ul.tira_fotos li");
	trim=setTimeout("montar_galeria()", 0);
	//alert("sdd");
})

if ($.browser.msie){
	//var tira_fotos = $("ul.tira_fotos li");
	//var trim=setTimeout("montar_galeria()", 1000);
}
	
	/*var longitud_tira=0;
	var margen_entre_fotos = 10;
	var anchuras = new Array();*/
function montar_galeria(){

	var tira_fotos = $("ul.tira_fotos li");
//alert("dfd");
       	var tira_fotos = $("ul.tira_fotos li");
	var altura_tira = 60;
	var margen_entre_fotos = $("#tira_fotos li").css("margin-right");//coge el margen del valor que le viene desde adclik.css
		margen_entre_fotos = parseInt(margen_entre_fotos.replace("px",""));
	var longitud_tira = 0;
	var mini_actual;//índice de la miniatura seleccionada, desde 0 hasta el número de miniaturas - 1
	var anchuras = new Array();//la anchura de cada miniatura (con margen incluido) en función del índice
	var ultima_anchura;//para que al clicar el primer elemento se desplace los px del último
	var pos_actual=0;//tal vez obsoleto
	
	function comprobar_posicion_adelante(despl){//si la tira_fotos que contiene las 3 tiras se desplaza dos veces el tamaño de una tira 
									//a la izq, mueve la tira1 detrás de tira3 y renombra los ids, y desplaza la tira_fotos despl pxs.
		pos = $("#tiras").css("left");
		if (parseInt(pos) < (longitud_tira * (-2))){
			$("#tiras").append($("#tira1"));
			$("#tira1").attr("id","tiraaux");
			$("#tira2").attr("id","tira1");
			$("#tira3").attr("id","tira2");
			$("#tiraaux").attr("id","tira3");
			$("#tiras").css("left","-"+(longitud_tira + despl)+"px");
			if (($.browser.msie)&&($.browser.version == 6)){//corrige la posición de la tira para IE6, aunque no sé de dónde viene el desajuste
				$("#tiras").animate({//tal vez se podría incrementar sin animate, con css
						left: '-=10'
				}, 0, function() {
			});
		}
		}
	}
	function comprobar_posicion_atras(){//análogo a comprobar_posicion_adelante (sólo se activa cuando se clica el botón atrás)
		pos = $("#tiras").css("left");
		if (parseInt(pos) >= 0){
			$("#tiras").append($("#tira1"));
			$("#tiras").append($("#tira2"));
			$("#tira3").attr("id","tiraaux");
			$("#tira2").attr("id","tira3");
			$("#tira1").attr("id","tira2");
			$("#tiraaux").attr("id","tira1");
			$("#tiras").css("left","-"+longitud_tira+"px");
			if (($.browser.msie)&&($.browser.version == 6)){//corrige la posición de la tira para IE6, aunque no sé de dónde viene el desajuste
				$("#tiras").animate({//tal vez se podría incrementar sin animate, con css
						left: '-=10'
				}, 0, function() {
			});
		}
		}
	}
	function mostrar_imagen(i){//cambia la imagen grande
		//actual.css("display","none");
		actual.fadeOut(400);
		//alert($('.panel[img|='+i+']'));
		a = $('.panel[img|='+i+']');
		//alert($('.panel[img|='+i+']'));
		//foto = $('.panel[img|='+i+']');//selecciona la imagen grande que corresponde
		//foto.css("display","block");//la hace visible
		
		
		a.fadeIn(400);
		$("span.romano").html(romanos[i]);
		$("#anno_perdido").html(anno_perdido[i]);
		$("#anno_lugar").html(anno_lugar[i]);
		$("#sb-piefoto-perdido").html("Perdido "+romanos[i]+'<span style="font-style:normal;">, '+anno_perdido[i]+"</span>");
		$("#sb-piefoto-lugar").html("Lugar "+romanos[i]+'<span style="font-style:normal;">, '+anno_lugar[i]+"</span>");
		//$("#sb-piefoto-lugar").html("Lugar "+romanos[i]+", "+anno_lugar[i]);
		
		//if (foto.find("img").height() < 362){
			//$(".margen"+i).css("height",((362 - foto.find("img").height()) / 2)+"px");
		//}
		//foto.css("top",((362 - foto.find("img").height()) / 2)+"px");//otra medida fija, cuidado si se cambia la altura de la caja
		//if(foto.find("img").height() <= 30){foto.css("top",0);}//Para Opera. Las imágenes de menos de 30px (que se supone que es porque no han cargado todavía)
																//se colocan arriba del todo. Es un apaño que habría que corregir con load() que
																//no funciona para Opera
		actual = a;
	}
	function calcular_nueva_pos(ascendente,pos_actual){//para actualizar el índice teniendo en cuenta los cambios entre tiras
		if (ascendente){
			if (pos_actual >= anchuras.length - 1){return 0;}else{return (pos_actual + 1);}
		}else{
			if (pos_actual <= 0){return (anchuras.length - 1);}else{return (pos_actual - 1)}
		}
	}
	function redimens_recuadro(){//el recuadro sobre la miniatura seleccionada
		//$("#selec").css("width",(anchuras[mini_actual] - margen_entre_fotos - 2)+"px");
		//var ancho = ;
		$("#selec").animate({
			width: (anchuras[mini_actual] - margen_entre_fotos - 4)+"px"
			}, 500, function(){
			
		});
	}
	
	function montar_tira(destino){
		var tira_fotos_aux = tira_fotos.clone();//hace una copia de la tira de fotos
		tira_fotos_aux.each(function(i){
			//var anchura_img = $(this).find("img").width();//no es necesario, pero de todos modos no funciona
			$(this).click(function(){
				mostrar_imagen(i);//cambia a la imagen grande correspondiente
				function calcular_distancia(pos1,pos2){//para cuando se calculan distancias entre miniaturas de distintas tiras
					if (pos1 > pos2){return (anchuras.length - pos1 + pos2)}else{return (pos2 - pos1)}
				}
				var despl_normal = 0;//para controlar el desplazamiento cuando las miniaturas son de la misma tira
				var despl_fin_de_tira = 0;//para controlar el desplazamiento cuando las miniaturas son de distintas tiras
				for (j=mini_actual;j<(mini_actual+calcular_distancia(mini_actual,i));j++){
					despl_normal += anchuras[calcular_nueva_pos(true,j - 1)];
					if (mini_actual > i){//si son miniaturas de distintas tiras
						if(j>=anchuras.length){//sólo suma la anchura de las miniaturas de la segunda tira
							despl_fin_de_tira += anchuras[calcular_nueva_pos(true,j - 1)];
						}
					}
				}
				var guarda_mini = mini_actual;//necesaria porque hace la comprobación en la función de animate, es decir,
												//cuando ya ha calculado la nueva mini_actual. Importante.
				$("#tiras").animate({//desplaza la tira de fotos
					left: '-='+despl_normal+"px"
					}, 500, function() {
						if (guarda_mini > mini_actual){comprobar_posicion_adelante(despl_fin_de_tira);
						}else{comprobar_posicion_adelante(despl_normal);}
				});
				mini_actual = i;//actualiza el índice
				redimens_recuadro();
			});
		});
		tira_fotos_aux.appendTo(destino);
	}
	
	tira_fotos.each(function(i){
		var anchura_img = $(this).find("img").width();
		$(this).attr("posicion",longitud_tira);//tal vez obsoleto, quitar
		longitud_tira += (anchura_img + margen_entre_fotos);
		anchuras[i] = (anchura_img + margen_entre_fotos);
		ultima_anchura = anchura_img;//sobreescribe y se queda con el valor de la última miniatura
		i++;//tal vez obsoleto, creo que jquery ya lo aumenta automáticamente
	});
	
	$("#tiras").css("width",(longitud_tira * 4)+"px");//para que quepan las 3 tiras, por si acaso * 4
	
	actual = $('.panel[img|=0]');//selecciona la primera imagen grande
	actual.css("display","block");//y la hace visible
	
	if (longitud_tira > 409){//el número es fijo, cuidado si se cambia. Es el ancho de #tira_fotos
		montar_tira("#tira1");
		montar_tira("#tira2");
		montar_tira("#tira3");
		
		tira_fotos.each(function(){//oculta las miniaturas originales, aunque quizá se podrían destruir
			$(this).css("display","none");
		});
		$("#tiras").css("left","-"+longitud_tira+"px");//coloca la tira al comienzo de la segunda tira
		if (($.browser.msie)&&($.browser.version == 6)){//corrige la posición de la tira para IE6, aunque no sé de dónde viene el desajuste
			$("#tiras").animate({//tal vez se podría incrementar sin animate, con css
					left: '-=10'
			}, 0, function() {
			});
		}
		mini_actual=0;//la primera imagen que se muestra es la 0
		redimens_recuadro();//pone el recuadro con la anchura de la primera imagen

		$("#boton_adelante").click(function(){
			var despl = anchuras[mini_actual];
			mini_actual = calcular_nueva_pos(true,mini_actual);//suma 1 al índice
			$("#tiras").animate({
					left: '-='+despl
			}, 500, function() {
				comprobar_posicion_adelante(anchuras[0]);//comprueba si la tira se ha salido y hay que recolocarla
			});
			redimens_recuadro();
			mostrar_imagen(mini_actual);
		});
		$("#boton_atras").click(function(){
			mini_actual = calcular_nueva_pos(false,mini_actual);//resta 1 al índice
			var despl = anchuras[mini_actual];
			$("#tiras").animate({
					left: '+='+despl
			}, 500, function() {
				comprobar_posicion_atras();//comprueba si la tira se ha salido y hay que recolocarla
				
			});
			redimens_recuadro();
			mostrar_imagen(mini_actual);
		});
		$("#selec").css("left","0");//para IE6 e IE7
		//alert($("ul.tira_fotos li").css("display","block"));
	}else{
		mini_actual = 0;
		$("#tira_fotos ul.tira_fotos").css("left",((409 - longitud_tira) / 2)+"px");//centra la tira. Anchura fija, cuidado si se cambia
		$("#tiras").css("display","none");//quitar la capa que de otro modo quedaría por encima
		$("#boton_atras").attr("src","../img/botones/flecha_izq_desact.gif");//cambia las imágenes de los botones
		$("#boton_adelante").attr("src","../img/botones/flecha_dcha_desact.gif");
		$("#selec").css("display","none");
		tira_fotos.each(function(i){
			$(this).click(function(){
				if (!(mini_actual == i)){mostrar_imagen(i);}//cambia a la imagen grande correspondiente sólo si no es la actual
				$(".mini"+mini_actual).css("border","none").css("margin-top","0");//le quita el borde a la anterior
				mini_actual = i;//actualiza el índice
				$(this).find("img").css("border","2px solid white").css("margin-top","-2px");//y le pone borde a la actual
			});
		});
	}
	//alert($("ul.tira_fotos").css("width")+"dd");
	//montar_galeria();
	//foto = $('.panel[img|=0]');//selecciona la primera imagen para mostrarla
	$("span.romano").html(romanos[0]);
	$("#anno_perdido").html(anno_perdido[0]);
	$("#anno_lugar").html(anno_lugar[0]);
	$("#sb-info-inner").append('<span id="sb-piefoto-perdido"></span>');
	$("#sb-nav").append('<span id="sb-piefoto-lugar"></span>');
	$("#sb-piefoto-perdido").html("Perdido "+romanos[0]+'<span style="font-style:normal;">, '+anno_perdido[0]+"</span>");
	$("#sb-piefoto-lugar").html("Lugar "+romanos[0]+'<span style="font-style:normal;">, '+anno_lugar[0]+"</span>");
	//$("#sb-piefoto-lugar").html("Lugar "+romanos[0]+", "+anno_lugar[0]);
	
	//$(".panel img").click(function (){$("#cabecera").css("opacity","0.2");$("#contenido").css("opacity","0.2");});
	
	clearTimeout(trim);

}