//Esta variable indica identificador de usuario en Flickr
//del cual se mostrarán sus fotos.
//Obten tu identificador para mostrar tu propia galería de fotografias
var id_user="65439435@N00";

// default
var api_key="87733f5c2cfba6a135927d6668bc172c";
var miniaturas_expositor=8;
var total_fotos_disponibles=0;
var pagina_inicio=1;
var ultima_pagina_cargada=0;
var filtro_busqueda="";
var filtro_busqueda_activo="";

contiene_miniatura=new Array;
miniatura=new Array;
//FIXME:esta variable es necesaria para centrar las fotografias en el div que las alberga y debe coincidir con el valor indicado en el CSS
var ancho_visible_miniatura = 90;

// Funciones
//Al cargarse la página (event:onload) se descarga el perfil de usuario de Flickr
// y su lista de sets fotograficos
function iniciador() {
	cargarPerfil();
	buscarMiniaturas(miniaturas_expositor, pagina_inicio, filtro_busqueda);
}


function cargando(txt, auto) {
	if( auto=="auto") var ocultarLoading=setTimeout("cargado()", 5000);
	if( txt=="" ) txt="Cargando datos...";
	$("div#loading").html(txt).animate({"left": "-5px"}, {queue:false, duration:100});
}

function cargado() {
	$("div#loading").animate({"left": "-140px"}, {queue:false, duration:600});
}
//Carga el perfil de usuario, el sets de fotos
// y activa el input buscardor de fotografías
function cargarPerfil() {
	cargando("Cargando perfil","");
	var url_sets_flickr="http://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key="+api_key+"&user_id="+id_user+"&format=json&jsoncallback=?";
	$.getJSON(url_sets_flickr, function(data){
		if( data.stat != "fail")
		{
			if (data.photosets.photoset.length < 1)
				$("ul#listaSets").html("<li>El autor no ha creado ningún sets o no son de acceso público</li>");
			else
			{
				var listaSets="";
				for (set in data.photosets.photoset ) { listaSets+="<li>"+data.photosets.photoset[set].title._content+"</li>"; }
				$("ul#listaSets").html(listaSets);
			}
		}
		else
			$("ul#listaSets").html("Error al recibir los datos");

	});

	var url_perfil_flickr="http://api.flickr.com/services/rest/?method=flickr.people.getInfo&api_key="+api_key+"&user_id="+id_user+"&format=json&jsoncallback=?";
	$.getJSON(url_perfil_flickr, function(data){
		if( data.stat != "fail") {
			document.title="Album fotografico de "+data.person.username._content+" en Flickr";
			$("div#headerAutor").html("<a class='accesoSubMenu'><img src='http://farm"+data.person.iconfarm+".static.flickr.com/"+data.person.iconserver+"/buddyicons/"+data.person.nsid+".jpg'/>"+data.person.username._content+"</a><ul><li><a href='"+data.person.photosurl._content+"'>Mi galeria en Flickr</a></li><li><a href='"+data.person.profileurl._content+"'>Mi perfil</a></li><li>Localización: "+data.person.location._content+"</li></ul>");
		}
		else
			$("div#headerAutor").html("<li>Hubo un error al comunicar con Flickr. Recarga esta página para reintentar la conexión.</li>");
	});

	$("div#headerBuscar input#buscarTermino").attr("onChange", "buscarMiniaturas(miniaturas_expositor, 1, this.value)");
	cargado();
}

//Realiza una busqueda en Flickr y rellena el expositor deslizante con el resultado.
//TODO: no admite errores en la consulta todavía
function buscarMiniaturas(total_miniaturas, pagina, filtro_busqueda) {
	cargando("Miniaturas...","");
	if ( filtro_busqueda == null ) filtro_busqueda=="";
	if( filtro_busqueda != filtro_busqueda_activo )
		{
// 		alert("Ha cambiado el criterio de busqueda de "+filtro_busqueda_activo+" a "+filtro_busqueda);
		$("div#expositorDeslizante").empty().css("left", "0px");
		ultima_pagina_cargada=0; filtro_busqueda_activo=filtro_busqueda;
		$("div#headerBuscar a.accesoSubMenu").text("Buscar: "+filtro_busqueda_activo);
		$("div#headerBuscar input").attr("value", filtro_busqueda_activo);
		}

  //FIXME: esto se debe mover al interior del IF para el caso de que la llamada de getJSON devuelve errores
  ultima_pagina_cargada++;
  var url_buscar_flickr="http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key="+api_key+"&user_id="+id_user+"&extras=url_s,url_m,url_l&per_page="+(total_miniaturas+1)+"&content_type=1&text="+filtro_busqueda_activo+"&page="+pagina+"&format=json&jsoncallback=?";
  $.getJSON(url_buscar_flickr, function(data){
	$.each(data.photos.photo, function(n, photo){
		//creamos el div sobre el que insertaremos la foto
		contiene_miniatura[n]=document.createElement("div");
		contiene_miniatura[n].className="contieneMiniatura";
		contiene_miniatura[n].id="contieneMiniatura_"+photo.id;
		contiene_miniatura[n].style.display="none";
 		$(contiene_miniatura[n]).hover(
			function() { $(this.childNodes[0]).animate( {"left": "0px"}, {queue:true, duration:500}); },
			function() { $(this.childNodes[0]).animate( {"left": "-"+(this.childNodes[0].width - 100)/2+"px" }, {queue:true, duration: 500}); }
			).bind("click", function(e) { ampliarFotografia(photo.id,photo.url_m,photo.width_m,photo.height_m,photo.url_l,photo.width_l,photo.height_l,e.pageX,e.pageY); });

		//creamos la miniatura
		miniatura[n]=new Image();
		miniatura[n].src=photo.url_s;
		miniatura[n].id="miniatura_"+photo.id;
		if ( photo.height_s < 160 ) { miniatura[n].height="160";} else { miniatura[n].height=photo.height_s;}
		miniatura[n].style.position="absolute"; miniatura[n].style.left="-" + (photo.width_s - ancho_visible_miniatura)/2 + "px";

		$(contiene_miniatura[n]).html(miniatura[n]).fadeIn({queue:false, duration:1000});
		$("div#expositorDeslizante").append(contiene_miniatura[n]).css("width", parseInt($("div#expositorDeslizante > div").length + 1) * 100);
		});
	total_fotos_disponibles=data.photos.total;
	crearPaginador(ultima_pagina_cargada);
  });
}

// Desliza el expositor de miniaturas a izquierda y derecha
// y si es necesario realiza una búsqueda de la siguiente página de miniaturas_expositor
function paginarExpositor(pagina_actual, direccion) {
	posicion_actual_deslizante=parseInt($("div#expositorDeslizante").css("left").replace("px",""));
	switch (direccion)
	{
		case "siguiente":
			pagina_destino=pagina_actual + 1;
			if ( pagina_destino > ultima_pagina_cargada )
				buscarMiniaturas(miniaturas_expositor,pagina_destino,filtro_busqueda_activo);
			else
				crearPaginador(pagina_destino);
			posicion_siguiente_deslizante = posicion_actual_deslizante - (miniaturas_expositor * 100);
			$("div#expositorDeslizante").animate({left: posicion_siguiente_deslizante + "px"}, "slow");
		break;
		case "anterior":
			pagina_destino=pagina_actual - 1;
			posicion_siguiente_deslizante = posicion_actual_deslizante + (miniaturas_expositor * 100);
			$("div#expositorDeslizante").animate({left: posicion_siguiente_deslizante + "px"}, "slow");
			crearPaginador(pagina_destino);
		break
	}
}
//Controla el contenido de los botones de manejo del expositor deslizante
// asi como el texto de pie de página
function crearPaginador(pagina_actual) {
	var ultima_foto_expositor = (pagina_actual * miniaturas_expositor);
	var primera_foto_expositor = ultima_foto_expositor - ( miniaturas_expositor - 1 );

	if (ultima_foto_expositor >= total_fotos_disponibles ) var paginacion="ultima";
	if (pagina_actual==1 && total_fotos_disponibles >= ultima_foto_expositor ) var paginacion="primera";
	if (pagina_actual==1 && total_fotos_disponibles <= ultima_foto_expositor ) var paginacion="unica";
	if (pagina_actual==1 && total_fotos_disponibles=="0" ) var paginacion="nula";

	switch (paginacion)
		{
		case "nula":
		$("div#botonAnterior").removeClass("activo").addClass("innactivo").unbind("click");
		$("div#paginador").html("No hay fotos");
		$("div#botonPosterior").removeClass("activo").addClass("innactivo").unbind("click");
		break;

		case "unica":
		$("div#botonAnterior").removeClass("activo").addClass("innactivo").unbind("click");
		$("div#paginador").html(total_fotos_disponibles + " fotos disponibles");
		$("div#botonPosterior").removeClass("activo").addClass("innactivo").unbind("click");
		break;

		case "primera":
		$("div#botonAnterior").removeClass("activo").addClass("innactivo").unbind("click");
		$("div#paginador").html("fotos " + primera_foto_expositor + " a " + ultima_foto_expositor + " de " + total_fotos_disponibles + " fotografias.");
		$("div#botonPosterior").addClass("activo").unbind("click").bind("click", function(){ paginarExpositor(pagina_actual, "siguiente"); });
		break;

		case "ultima":
		$("div#botonAnterior").removeClass("innactivo").addClass("activo").unbind("click").bind("click", function(){ paginarExpositor(pagina_actual, "anterior"); });
		$("div#paginador").html("fotos " + primera_foto_expositor + " a " + total_fotos_disponibles + " de " + total_fotos_disponibles + " fotografias.");
		$("div#botonPosterior").removeClass("activo").addClass("innactivo").unbind("click");
		break;

		default:
		$("div#botonAnterior").removeClass("innactivo").addClass("activo").unbind("click").bind("click", function(){ paginarExpositor(pagina_actual, "anterior"); });
		$("div#paginador").html("fotos " + primera_foto_expositor + " a " + ultima_foto_expositor + " de " + total_fotos_disponibles + " fotografias.");
		$("div#botonPosterior").removeClass("innactivo").addClass("activo").unbind("click").bind("click", function(){ paginarExpositor(pagina_actual, "siguiente"); });
		break;
		}
		cargado();
}

//Creamos el div conteniendo la fotografía a 500px
function ampliarFotografia(id_fotografia, url_fotografia, w_fotografia, h_fotografia, urll_fotografia, wl_fotografia, hl_fotografia, eX, eY) {
	//si la fotografía ya está en el visor, simplemente reordenamos los zindex
	if ( $("div#fotografiaAmpliada_"+id_fotografia).length > 0 )
		ordenarAmpliadas( $("div#fotografiaAmpliada_"+id_fotografia) );
		else
		{
		cargando("Cargando imagen...");
		anchura_contenedor=$("div#visor").css("width").replace("px", "");
		altura_contenedor=$("div#visor").css("height").replace("px", "");

		var contiene_foto_ampliada = document.createElement("div");
		contiene_foto_ampliada.id="fotografiaAmpliada_"+id_fotografia;
		contiene_foto_ampliada.className="contieneFotoAmpliada";
		contiene_foto_ampliada.style.position="absolute";
		contiene_foto_ampliada.style.top=eY+"px";
		contiene_foto_ampliada.style.left=(eX-(ancho_visible_miniatura/2))+"px";
// 		contiene_foto_ampliada.style.top=parseInt(altura_contenedor-160)+"px"
// 		contiene_foto_ampliada.style.left=parseInt(anchura_contenedor/2)+"px";
		contiene_foto_ampliada.style.opacity="0.1";

		decoracion_foto ="";
		decoracion_foto += "<table>";
		decoracion_foto += "<tr>";
		if( wl_fotografia != "undefined" && wl_fotografia != null && Number(wl_fotografia) > Number(w_fotografia) )
			decoracion_foto += "<td id='aa_"+id_fotografia+"' class='aa zoom' title='Ampliar la imagen' onclick='superAmpliacion(\""+id_fotografia+"\", \""+url_fotografia+"\", "+w_fotografia+", "+h_fotografia+", \""+urll_fotografia+"\", "+wl_fotografia+", "+hl_fotografia+");' onmouseover='$(this).addClass(\"over\");' onmouseout='$(this).removeClass(\"over\");'>&#160;</td>";
			else
			decoracion_foto += "<td id='aa_"+id_fotografia+"' class='aa nozoom' title='No hay ampliaciones disponibles'>&#160;</td>";
		decoracion_foto += "<td class='ab'></td>";
		decoracion_foto += "<td class='ac' onclick='mostrarMetadatos("+id_fotografia+")' onmouseover='$(this).addClass(\"over\");' onmouseout='$(this).removeClass(\"over\");'></td>";
		decoracion_foto += "</tr>";
		decoracion_foto += "<tr><td class='ba'></td>";
		decoracion_foto += "<td class='bb' id='bb_"+id_fotografia+"'><img src='"+document.getElementById("miniatura_"+id_fotografia).src+"' id='ampliada_"+id_fotografia+"' class='cortinilla' style='width:0px; height:0px;'/></td>";
		decoracion_foto += "<td class='bc'></td></tr>";
		decoracion_foto += "<tr><td class='ca'></td><td class='cb' id='cb_"+id_fotografia+"'></td><td class='cc'></td></tr>";
		decoracion_foto += "</table>";

		//centramos la nueva fotografía en el visor
		px=(anchura_contenedor / 2) - ( w_fotografia / 2 );
		px=px+((Math.random()*(px/3))-(px/4))
		py=(((altura_contenedor / 2) - (altura_contenedor / 8))- ( h_fotografia / 2 ));
		py=py+((Math.random()*(py/3))-(py/2))

		//por fin lo añadimos al visor
		$("div#visor").append(contiene_foto_ampliada);

		$(contiene_foto_ampliada).html(decoracion_foto).animate({"opacity": "1", "top": py+"px", "left": px+"px"}, 750).bind("click", function(){
			ordenarAmpliadas(this);
			}).bind("dblclick", function(){
				$(this).remove();
				}).draggable();

		//animamos el escaslado de la cortinilla
		$("img#ampliada_"+id_fotografia).animate({"width": w_fotografia+"px", "height": h_fotografia+"px"}, 1000, function(e) {
			var foto_ampliada=new Image();
			$(foto_ampliada).bind('load', function (){ $("img#ampliada_"+id_fotografia).fadeOut(600, function(){ cargado(); } );});
			foto_ampliada.src=url_fotografia;
			$("td#bb_"+id_fotografia).css("width", w_fotografia+"px").css("height", h_fotografia+"px").css("background-image", "url("+foto_ampliada.src+")");
			cargando("Cargando metadatos");
			mostrarMetadatos(id_fotografia, "precarga");
			});
		}
}

//Si hay disponible un tamaño superior, amplía la fotografia a LARGE
function superAmpliacion(id_fotografia, url_fotografia, w_fotografia, h_fotografia, urll_fotografia, wl_fotografia, hl_fotografia) {
	anchura_contenedor=$("div#visor").css("width").replace("px", "");
	altura_contenedor=$("div#visor").css("height").replace("px", "");

	if( $("td#bb_"+id_fotografia+" img").css("width") == wl_fotografia+"px" ) zoom="reducir"; else zoom="ampliar";
	switch (zoom)
		{
		case "ampliar":
			cargando("cargando ampliación...");
			px=((anchura_contenedor / 2) - ( wl_fotografia / 2 ))+"px";
			py=((altura_contenedor / 2) - (( hl_fotografia + 75 )/ 2 ))+"px";

			//actualiza la altura de los metadatos
			$("div#metaDatos_"+id_fotografia+".metaDatos").hide().css("height" , hl_fotografia+"px");
			//asigna a background el nuevo fondo

			//actualizamos y animamos cortinilla
			$("img#ampliada_"+id_fotografia).attr("src", url_fotografia).fadeIn( 1000, function(e){
				$("div#fotografiaAmpliada_"+id_fotografia).animate({"top":py, "left": px},1000);
				$(this).animate({"width": wl_fotografia+"px", "height": hl_fotografia+"px"},1000, function(e) {
					var superfotografia_ampliada=new Image();
					$(superfotografia_ampliada).bind('load', function(){ $("img#ampliada_"+id_fotografia).fadeOut(600, function(){ cargado();});});
					superfotografia_ampliada.src=urll_fotografia;
					$("td#bb_"+id_fotografia).css("width", wl_fotografia+"px").css("height", hl_fotografia+"px").css("background-image", "url("+superfotografia_ampliada.src+")");

					});
			});
		break;
		case "reducir":
			px=((anchura_contenedor / 2) - ( w_fotografia / 2 ))+"px";
			py=(((altura_contenedor / 2) - (altura_contenedor / 8))- ( h_fotografia / 2 ))+"px";

			//actualiza la altura de los metadatos
			$("div#metaDatos_"+id_fotografia+".metaDatos").hide().css("height" , h_fotografia+"px");

			$("img#ampliada_"+id_fotografia).fadeIn( function(e){
				$("td#bb_"+id_fotografia).css("width", w_fotografia+"px").css("height", h_fotografia+"px");
				$("div#fotografiaAmpliada_"+id_fotografia).animate({"top":py, "left": px},1000);
				$("td#bb_"+id_fotografia).css("background-image", "url("+url_fotografia+")");
				$(this).animate({"width": w_fotografia+"px", "height": h_fotografia+"px"},1000, function(e){
					$(this).fadeOut();
				});
			});
		break;
		}
}

//Ordena los z-index de las fotografia ampliadas al cliquear sobre una foto_ampliada
//asegurando que esta permanezca en primer plano
//TODO: se debe mejorar el orden de presentación para respetar el cliqueo de fotos anteriores del usuario
function ordenarAmpliadas(fotoActiva) {
	$.each( $("div.contieneFotoAmpliada"), function() {
		$(this).css("z-index", "1");
	});
	$(fotoActiva).css("z-index", "2");
}

//Anima el desplazamiento de las miniaturas al hacer mouser over
function animarFondoMiniatura(miniatura_activa, tipo) {
	imagen_a_mover=miniatura_activa.childNodes[0];
	posicion_inicio=imagen_a_mover.style.left.replace("px","");
	switch (tipo) {
		case "scroll":
		$(imagen_a_mover).animate({"left": "0px"}, 2000, function(){ $(this).animate({"left": (posicion_inicio*2)+"px"}, 4000 , function(){ $(this).animate({"left": posicion_inicio+"px"}, 2000); }); }  );
		break;

		case "reset":
		$(imagen_a_mover).animate({"left": posicion_inicio+"px"}, "fast");
		break;
	}
}

//Carga información de la fotografia y la muestra bajo solicitud
function mostrarMetadatos(id_fotografia, accion) {
	if ( accion == null || accion == undefined) accion="mostrar";

	if ( document.getElementById("metaDatos_"+id_fotografia) )
		$("div#metaDatos_"+id_fotografia).slideToggle("fast");
	else
		{
		var url_info_flickr="http://api.flickr.com/services/rest/?method=flickr.photos.getInfo&api_key="+api_key+"&photo_id="+id_fotografia+"&format=json&jsoncallback=?";
		$.getJSON(url_info_flickr, function(data){
			var pie_foto = document.createElement("div");
			pie_foto.id = "pieFoto_"+id_fotografia;
			pie_foto.className = "pieFoto";
			$(pie_foto).html("<p class='pieTitulo'>"+data.photo.title._content.toLowerCase()+"</p><p class='pieFecha'>"+data.photo.dates.taken.replace(/([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})/g, '$3.$2.$1')+"</p>");
			$("td.cb#cb_"+id_fotografia).append(pie_foto);

			var meta_datos = document.createElement("div");
			meta_datos.id = "metaDatos_"+id_fotografia;
			meta_datos.className = "metaDatos";
			meta_datos.style.width="100%";
			meta_datos.style.height=$("td#bb_"+id_fotografia).css("height");

			meta_datos._content="";
			meta_datos._content+="<p><a href='"+data.photo.urls.url[0]._content+"'>Página en Flickr</a></p>";
			meta_datos._content+="<p class='metaAnotacion'><b>Anotación</b>:<br/>";
			meta_datos._content+=data.photo.description._content;
			meta_datos._content+="</p>";
			meta_datos._content+="<p class='metaEtiquetas'><b>Etiquetas</b>:<br/>";
			if (data.photo.tags.tag.length > 0)
				for (var etiqueta in data.photo.tags.tag ) { meta_datos._content+="<a onclick=javascript:buscarMiniaturas(miniaturas_expositor,1,\""+data.photo.tags.tag[etiqueta]._content+"\")>"+data.photo.tags.tag[etiqueta]._content+"</a>, "; }
				else
				meta_datos._content+="Sin etiquetas";
			meta_datos._content+="</p>";
			meta_datos._content+="<p class='metaGeo'><b>Geolocalización</b>:<br/>";
			if (data.photo.location != undefined)
				{
				switch (data.photo.location.accuracy) {
					case "16":
					meta_datos._content+=data.photo.location.neighbourhood._content+", "+data.photo.location.locality._content;
					break;
					case "15":
					meta_datos._content+=data.photo.location.neighbourhood._content+", "+data.photo.location.locality._content;
					break;
					case "14":
					meta_datos._content+=data.photo.location.locality._content+", "+data.photo.location.county._content;
					break;
					case "13":
					meta_datos._content+=data.photo.location.locality._content+", "+data.photo.location.county._content;
					break;
					case "12":
					meta_datos._content+=data.photo.location.county._content+", "+data.photo.location.region._content;
					break;
					case "11":
					meta_datos._content+=data.photo.location.region._content+", "+data.photo.location.country._content;
					break;
					case "10":
					meta_datos._content+=data.photo.location.county._content+", "+data.photo.location.region._content;
					break;
					default:
					meta_datos._content+=data.photo.location.country._content+".";
					alert(data.photo.location.accuracy);
					break;
					}
				}
				else
				meta_datos._content+="No hay datos de geolocalización";
			meta_datos._content+="</p>";
			meta_datos._content+="<p class='metaVarios'><b>Varios</b>:<br/>Visitas:"+data.photo.views+", Comentarios:"+data.photo.comments._content+", Notas:"+data.photo.notes.note.length+", Favoritos:"+data.photo.isfavorite+"</p>";
			meta_datos._content+="";

			$(meta_datos).html(meta_datos._content);
			$("td#bb_"+id_fotografia).append(meta_datos);
				if(accion=="mostrar") $("div#metaDatos_"+id_fotografia).slideToggle("fast");
			cargado();
			});
		}
}