// Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.
var listadoSelects=new Array();
listadoSelects[0]="opciones";
listadoSelects[1]="dos";
listadoSelects[2]="tres";
//var xmlhttp

var Fotos = new Array();
var Paginas = new Array();
var numMiniaturasxFilaMax = 2;
var numFilasMax = 3;
var numMiniaturasxPgMax = (numMiniaturasxFilaMax * numFilasMax);
var numMiniaturasxPg = numMiniaturasxPgMax;
var pxMiniaturaMax = '150';
var pxFotoMax = '500';
var pruebaVisualizada = "";
var divisorPgs= "|";
var paginaActual = 0;
var inicial = null;
var pathFotos = "../imagenes/actividades/";
var pathMiniaturas = "../imagenes/mini/";

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}



function nuevoAjax()
{
	/* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por
	lo que se puede copiar tal como esta aqui */
	var xmlhttp=false;
	try
	{
		// Creacion del objeto AJAX para navegadores no IE
		xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
			//alert("hemos creado objeto ajax para NO IE");
	}
	catch(e)
	{
		try
		{
			// Creacion del objet AJAX para IE
			xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			//alert("hemos creado objeto ajax para IE");
		}
		catch(E)
		{
			if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest();
		}
	}
	return xmlhttp; 
}

function defFoto(id, edicion, pathfoto, miniatura, descripcion, tipo, observaciones, orientacion, asignado, orden, width, height, widthm, heightm, exif )
{
	this.id	= id;
	this.edicion = edicion;
	this.pathfoto = pathfoto;
	this.miniatura = miniatura;
	this.descripcion= descripcion;
	this.tipo= tipo;
	this.observaciones = observaciones;
	this.orientacion = orientacion;
	this.asignado = asignado;
	this.orden = orden;
	this.width = width;
	this.height = height;
	this.widthm = widthm;
	this.heightm = heightm;
	this.exif = exif;
}

function buscarEnArray(array, dato)
{
	// Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra
	var x=0;
	while(array[x])
	{
		if(array[x]==dato) return x;
		x++;
	}
	return null;
}

function cargaContenido(idSelectOrigen)
{
	//alert("entra en cargaContenido con idSelectOrigen= "+idSelectOrigen); //la primera vez entra con valor 'opciones'
	// Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba
	var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1;
	// Obtengo el select que el usuario modifico
	var selectOrigen=document.getElementById(idSelectOrigen);
	// Obtengo la opcion que el usuario selecciono
	var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value;
	// Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..."
	if(opcionSeleccionada==0)
	{
		//alert("has seleccionado la opción ELIGE en el SELECT: "+idSelectOrigen);
		var x=posicionSelectDestino, selectActual=null;
		// Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito
		while(listadoSelects[x])
		{
			selectActual=document.getElementById(listadoSelects[x]);
			selectActual.length=0;
			
			var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción...";
			selectActual.appendChild(nuevaOpcion);	selectActual.disabled=true;
			x++;
		}
	}
	// Compruebo que el select modificado no sea el ultimo de la cadena
	else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1])
	{
		//alert("has seleccionado una opción que no es 0 en un SELECT que no es el último: "+idSelectOrigen);
		// Obtengo el elemento del select que debo cargar
		var idSelectDestino=listadoSelects[posicionSelectDestino];
		var selectDestino=document.getElementById(idSelectDestino);
		//alert("Vamos a cargar el select con id: "+idSelectDestino);
		// Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen
		var ajax=nuevoAjax();
		ajax.open("GET", "proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true);
		ajax.onreadystatechange=function() 
		{ 
			if (ajax.readyState==1)
			{
				// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
				selectDestino.length=0;
				var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando...";
				selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true;	
			}
			if (ajax.readyState==4)
			{
				selectDestino.parentNode.innerHTML=ajax.responseText;
			} 
		}
		ajax.send(null);
	}else {
		//alert("has seleccionado una opción válida: "+ opcionSeleccionada+ " en el último select " + idSelectOrigen);
		//creamos las miniaturas en la parte izda. Para ello debemos leer la BD datos mediante AJAX y presentar las miniaturas
        var xmlhttp=GetXmlHttpObject();
        if (xmlhttp==null)
        {
            alert ("Tu navegador no soporta AJAX!");
            return;
        }
      //  xmlhttp.onreadystatechange=stateChanged;
       // xmlhttp.send(null);

		//var ajax=nuevoAjax();
	   //	alert("llamamos a proceso.php con variables GET ?select= "+ divDestino.id+ " &opcion=" + opcionSeleccionada);
		//ajax.open("GET", "proceso.php?select="+divDestino.id+"&opcion="+opcionSeleccionada, true);
        var divDestino = document.getElementById("titulo_izda");
		//if(divDestino == null) alert("divDestino es null en linea 165");
		//alert("opcionSeleccionada es "+opcionSeleccionada);
        xmlhttp.open("GET", "proceso.php?select="+divDestino.id+"&opcion="+opcionSeleccionada, true);
		xmlhttp.onreadystatechange=function()
		{
			if (xmlhttp.readyState==1)
			{
				// Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..."
				divDestino.innerHTML="";
				var textoInformativo=document.createElement("P");
                textoInformativo.innerHTML="Cargando diapositivas...";
				divDestino.appendChild(textoInformativo);	
			}
			if (xmlhttp.readyState==4)
			{
			   //if(xmlhttp.status == 200) alert("contenido devuelto por AJAX: "+xmlhttp.responseText);
			   //alert("Fotos.length antes del splice: "+Fotos.length);
			   Fotos.splice(0,Fotos.length);
			   //alert("Fotos.length después del splice: "+Fotos.length);
				// var	datos=ajax.responseXML.documentElement;
			   var datos=xmlhttp.responseXML;
				//declaramos un array
                //alert("llegamos a donde hay que leer la variable datos, que es un archivo xml");
			  	//alert(datos.getElementsByTagName("foto").length);
                //alert(datos.getElementsByTagName("id").item[0].firstChild.data);
               // alert(datos.getElementsByTagName("id").item[1].firstChild.data);
                //var strHTML = "";
				//var coleccion = new Array();
				//datos.setHeader("charset","iso-8859-1");
				//datos.setHeader("charset","utf-8");
				var coleccion = datos.documentElement;
				//no va con lagos, siempre indica con lagos que es null
				if(coleccion == null) alert("coleccion es null");
				//en la 2ª vuelta falla aquí con la de ezcaray, dicr: se requiere un objeto
				//en la 1ª y cuando no hay fotos vale 1
				var along = coleccion.childNodes.length;
				//alert(along);
				
				//var mixml = coleccion.getElementsByTagName("xml");
				//if(mixml == null) alert("mixml es null");
				//var mifoto = mixml[0].getElementsByTagName("foto");
				//if(mifoto == null) alert("mifoto es null");
				var flong = coleccion.getElementsByTagName("foto").length;
				//alert("flong -coleccion de fotos- vale "+flong);
				//alert("along -childnodes de coleccion- vale "+along);
				var afoto, id, edicion, pathfoto, miniatura, descripcion, tipo, observaciones, orientacion, asignado, orden, width, height, widthm, heightm, exif;
				for(i=0;i<flong;i++)
				{
				     afoto = coleccion.getElementsByTagName("foto")[i];
					//ponemos getAttribute en lugar de hasAttribute por compatibilidad con IE, que no soporta hasAttribute
					 if(afoto.getAttribute("id")){
                     	id = afoto.getAttribute("id");
						 //alert("tiene id y vale "+id);
					 }else{
						id = ""; 
					 }
					 if(afoto.getAttribute("edicion")){
                     	edicion = afoto.getAttribute("edicion");
						 //alert("tiene edicion y vale "+edicion);
					 }else{
						edicion = ""; 
					 }
					 if(afoto.getAttribute("pathfoto")){
                     	pathfoto = afoto.getAttribute("pathfoto");
						// alert("tiene pathfoto y vale "+pathfoto);
					 }else{
						pathfoto = ""; 
					 }
					 if(afoto.getAttribute("miniatura")){
                     	miniatura = afoto.getAttribute("miniatura");
						// alert("tiene miniatura y vale "+miniatura);
					 }else{
						miniatura = ""; 
					 }
					 if(afoto.getAttribute("descripcion")){
                     	descripcion = afoto.getAttribute("descripcion");
						// alert("tiene descripcion y vale "+descripcion);
					 }else{
						descripcion = ""; 
					 }
					 if(afoto.getAttribute("tipo")){
                     	tipo = afoto.getAttribute("tipo");
						// alert("tiene tipo y vale "+tipo);
					 }else{
						tipo = ""; 
					 }
					 if(afoto.getAttribute("observaciones")){
                     	observaciones = afoto.getAttribute("observaciones");
						// alert("tiene observaciones y vale "+observaciones);
					 }else{
						observaciones = ""; 
					 }
					 if(afoto.getAttribute("orientacion")){
                     	orientacion = afoto.getAttribute("orientacion");
						// alert("tiene orientacion y vale "+orientacion);
					 }else{
						orientacion = ""; 
					 }
					 if(afoto.getAttribute("asignado")){
                     	asignado = afoto.getAttribute("asignado");
						// alert("tiene asignado y vale "+asignado);
					 }else{
						asignado = ""; 
					 }
					 if(afoto.getAttribute("orden")){
                     	orden = afoto.getAttribute("orden");
						// alert("tiene orden y vale "+orden);
					 }else{
						orden = ""; 
					 }
					 if(afoto.getAttribute("width")){
                     	width = afoto.getAttribute("width");
						 //alert("tiene width y vale "+width);
					 }else{
						 //alert(id+" no tiene width");
						 width = ""; 
					 }
					 if(afoto.getAttribute("height")){
                     	height = afoto.getAttribute("height");
						//alert("tiene orden y vale "+height);
					 }else{
						height = ""; 
					 }
					 if(afoto.getAttribute("widthm")){
                     	widthm = afoto.getAttribute("widthm");
						//alert("tiene orden y vale "+widthm);
					 }else{
						widthm = ""; 
					 }
					 if(afoto.getAttribute("heightm")){
                     	heightm = afoto.getAttribute("heightm");
						 //alert("tiene orden y vale "+heightm);
					 }else{
						heightm = ""; 
					 }
					 if(afoto.getAttribute("exif")){
                     	exif = afoto.getAttribute("exif");
					//	 alert("tiene exif y vale "+exif);
					 }else{
						exif = ""; 
					 }
                    Fotos[i] = new defFoto(id, edicion, pathfoto, miniatura, descripcion, tipo, observaciones, orientacion, asignado, orden, width, height, widthm, heightm, exif );
			   	}
				//obtenemos la información de las páginas
				rellenarArrayPaginas();
				paginaActual = 0;
				inicial = null;
				presentarGaleria();
			} 
		}
		xmlhttp.send(null);
	}
	
}
function presentarGaleria()
{
	// presenta la galeria con las fotos del array global Fotos
	var divFoto=document.getElementById("foto");
	divFoto.innerHTML = "";
	var divTxtFoto=document.getElementById("txtfoto");
	divTxtFoto.innerHTML = "";
	var divTituloIzda = document.getElementById("titulo_izda");
	divTituloIzda.innerHTML = "";
	if(Fotos.length == 0){
		//alert("no hay fotos en esta prueba");
		divTituloIzda.innerHTML = "<h4>No hay fotos para esta prueba</h4>";
	var divInfoPaginas = document.getElementById("info_paginas");
	divInfoPaginas.innerHTML = "";
	var divNumPaginas = document.getElementById("num_paginas");
	divNumPaginas.innerHTML = "";
	var divBotones = document.getElementById("botones");
	divBotones.innerHTML = "";
	var divMiniaturas = document.getElementById("miniaturas");
	divMiniaturas.innerHTML = "";
		//return(parrafo);
	}else{
		//hay fotos. Ponemos título y fecha de la prueba
		//alert("la fwecha es "+Fotos[0].exif);
		divTituloIzda.innerHTML = "<h4>"+Fotos[0].edicion+"</h4><h4>"+Fotos[0].exif+"</h4>";
		cargarPagina(0);
	} //del if de ver si hay fotos
} // presentarGaleria 

function rellenarArrayPaginas() {
	Paginas.splice(0,Paginas.length);
	var j = 0;
	for(var i = 0;i<=Fotos.length;i+=numMiniaturasxPgMax) {
		Paginas[j] = i;
		j++;
	}
}
function crearNuevoLI(foto) {
	//foto es el índice de la foto en el Array de fotos
	var texto = "<li id='"+Fotos[foto].id+"' onclick='cargarFoto("+foto+")'>";
	texto += "<img src='"+pathMiniaturas+Fotos[foto].miniatura+"' alt='"+Fotos[foto].descripcion+"' title='"+Fotos[foto].descripcion;
	texto += "' width ='"+Fotos[foto].widthm+"' height='"+Fotos[foto].heightm+"' class='instant' /></li>";
	return(texto);
}
function cargarFoto(foto) {
	var divFoto=document.getElementById("foto");
	var texto = "<img src='"+pathFotos+Fotos[foto].pathfoto+"' alt='"+Fotos[foto].descripcion+"-"+Fotos[foto].pathfoto+"' title='"+Fotos[foto].descripcion+"-"+Fotos[foto].pathfoto;
	texto += "' width ='"+Fotos[foto].width+"' height='"+Fotos[foto].height+"'/>";
	divFoto.innerHTML = texto;
	var divTxtFoto=document.getElementById("txtfoto");
	divTxtFoto.innerHTML = "<p>Nombre de la foto: "+Fotos[foto].pathfoto+"</p><p>"+Fotos[foto].descripcion+"</p><p>"+Fotos[foto].observaciones+"</p>";
	ajustarSeparador();

}
function saludos() {
	alert("saludos cordiales");
}
function cargarPagina(pagina) {
	//si la pg es la misma no hacemos nada
	var pgAntigua = null;
	//alert("entramos en cargarPagina con pagina="+pagina);	
	//alert("entramos en cargarPagina con paginaActual="+paginaActual);
	if(paginaActual) {
		var objPaginaActual = document.getElementById("pg"+paginaActual);
		//alert(objPaginaActual.innerHTML);
		//podría usar luego este objeto
	}
	//alert("entramos en cargarPagina con pgAntigua="+pgAntigua);		
	if(pgAntigua)  {
		var objPaginaAntigua = document.getElementById("pg"+pgAntigua);
		//alert(objPaginaAntigua.innerHTML);
	}
	//alert("entramos en cargarPagina con inicial="+inicial);	
  if((pagina != paginaActual) || (inicial == null)) {
	pgAntigua = paginaActual;
	//alert("pagina, que vale="+pagina+" es distinta de inicial, que vale="+inicial);	
	//alert("ahora pgAntigua vale="+pgAntigua);	
	paginaActual = pagina;
	//alert("ahora paginaActual vale="+paginaActual);
	//alert("ahora paginaAntigua vale="+pgAntigua);
	var strHTML = "";
	// calculamos en numMiniaturasxPg el número de miniaturas que tiene esta pg
	if(Fotos.length < Paginas[paginaActual]+numMiniaturasxPgMax) {
			numMiniaturasxPg =  (Fotos.length-Paginas[paginaActual]);
	}else{
			numMiniaturasxPg =  numMiniaturasxPgMax;
	}
	//alert("número de Miniaturas en esta Pg: "+numMiniaturasxPg);
	
	//información de páginas
	var divInfoPaginas = document.getElementById("info_paginas");
	strHTML = "<h4>Est&aacute;s en la p&aacute;gina "+(paginaActual+1)+" de "+Paginas.length+"</h4>";
	strHTML += "<h4>Fotos "+(Paginas[paginaActual]+1)+" a "+(Paginas[paginaActual]+numMiniaturasxPg)+" de "+Fotos.length+" fotos</h4>";
	divInfoPaginas.innerHTML = strHTML;
	
	if(inicial == null) {
		// escritura de los números de páginas
		//alert("inicial es null");	
		var divNumPaginas = document.getElementById("num_paginas");
		strHTML = "<ul id='ulpaginas0'>";
		for(var i = 1;i<=Paginas.length;i++) {
			
			
			strHTML += "<li id='pg"+i+"' onclick='cargarPagina("+(i-1)+")'>";
			if(i==(paginaActual+1)) {
				//alert("escribimos la página actual: "+(paginaActual+1));
				strHTML += "<strong>"+i+"</strong></li>";
			}else {
				//alert("escribimos la página : "+i);
				strHTML += i+"</li>";
			}
			if(i+1 <=Paginas.length) {
				//alert("escribimos caracter de separación de páginas : "+divisorPgs);
				strHTML += "<li>"+divisorPgs+"</li>";
			}
			//si el número de páginas es > de 8, nuevo ul
			if((i>7) && ((i % 8)==0)) {
				strHTML += "</ul><ul id='ulpaginas"+Math.floor(i/8)+"'>";
			}

			
		}
		strHTML += "</ul>";
		divNumPaginas.innerHTML= strHTML;
		
		var divBotones = document.getElementById("botones");
		divBotones.innerHTML = "<ul id='ulbotones'><li id='anterior'></li><li id='siguiente'></li></ul>";

	}
	
	//encuadramos la página actual
	var numUL = Math.floor((paginaActual+1)/8);
	//alert("estamos en el ulpaginas"+numUL);
	if((paginaActual+1)%8 == 0) {
		var ulpaginas = document.getElementById("ulpaginas"+(numUL-1));
		var elementoPg = 7;
	}else{
		var ulpaginas = document.getElementById("ulpaginas"+numUL);
		var elementoPg = ((paginaActual+1)%8)-1 ;
	}
	
	//if (ulpaginas !null) {	//alert("el UL con id = ulpaginas es null");
	var LIPagina = ulpaginas.getElementsByTagName("LI");
	//alert("Páginas en el UL actual: "+ulpaginas.id);
	//for(var j = 0;j<8;j++){
	//	alert("con índice = "+j+" tenemos el LI con id="+LIPagina[j].id);
	//}
	//}else{
	//	LIPagina = null;
	//	alert("el UL con id = ulpaginas es null");
	//}
	
	//if (LIPagina == null) alert("el array de LIs es null");
	//ponemos el strong y el marco en la página actual
	//alert("intentamos acceder al LI con índice = "+(pagina*2)+" de los números de página para resaltarlo y enmarcarlo");
	//LIPagina[pagina*2].innerHTML = "";
	//LIPagina[pagina*2].innerHTML = "<strong>"+(pagina+1)+"</strong>";
	//LIPagina[pagina*2].style.border = "1px solid white";
	LIPagina[elementoPg*2].innerHTML = "";
	LIPagina[elementoPg*2].innerHTML = "<strong>"+(pagina+1)+"</strong>";
	LIPagina[elementoPg*2].style.border = "1px solid white";
	
	if(inicial != null) {
		//quitamos el strong y el enmarque
		//alert("intentamos acceder al LI con índice = "+(inicial*2)+" de los números de página para quitar resalte y enmarque");
		//alert("inicial NO es null, y vale="+inicial);	
		//alert("pgAntigua vale="+pgAntigua);
		numUL = Math.floor((pgAntigua+1)/8);
		if((pgAntigua+1)%8 == 0) {
			ulpaginas = document.getElementById("ulpaginas"+(numUL-1));
			elementoPg = 7;
		}else{
			ulpaginas = document.getElementById("ulpaginas"+numUL);
			elementoPg = ((pgAntigua+1)%8)-1 ;
		}
		LIPagina = ulpaginas.getElementsByTagName("LI");
		LIPagina[elementoPg*2].innerHTML = "";
		LIPagina[elementoPg*2].innerHTML = pgAntigua+1;
		LIPagina[elementoPg*2].style.border = "none";
	}
	inicial = 0;
	//alert("ahora inicial vale="+inicial);	
//botones
	var ulBotones = document.getElementById("ulbotones");
	//if (ulBotones == null) alert("el UL con id = ulbotones es null");
	var LIBotones = ulBotones.getElementsByTagName("LI");
	//if (LIBotones == null) alert("el array de LIs es null");
	//alert("intentamos acceder al LI del botón anterior con subindice 0");
	//alert("html del LI del botón anterior con subindice 0 es "+LIBotones[0].innerHTML);
	//alert("html del LI del botón anterior con subindice 0 ahora es "+LIBotones[0].innerHTML);
	if(Paginas[paginaActual]){
			//creamos botón para ir a la página anterior
			strHTML = "";
			strHTML += "<img src='../imagenes/anterior.gif' alt='anterior' onclick='cargarPagina("+(paginaActual-1)+")'/>";
			LIBotones[0].innerHTML = strHTML;
			LIBotones[0].style.visibility ="visible";
	} else {
			LIBotones[0].style.visibility ="hidden";
	}
	//alert("intentamos ahora acceder al LI del botón siguiente con subindice 1");
	//alert("html del LI botón siguiente con subindice 1 es "+LIBotones[1].innerHTML);
	LIBotones[1].innerHTML = "";
	//alert("html del LI del botón siguiente con subindice 1 ahora es "+LIBotones[1].innerHTML);
	if(paginaActual!=(Paginas.length-1)){
			//creamos botón para ir a la página siguiente
			strHTML = "";
			strHTML += "<img src='../imagenes/siguiente.gif' alt='siguiente' onclick='cargarPagina("+(paginaActual+1)+")'/>";
			LIBotones[1].innerHTML = strHTML;
			LIBotones[1].style.visibility ="visible";
	} else {
			LIBotones[1].style.visibility ="hidden";
	}
		
// 	colocamos las miniaturas
	var divMiniaturas = document.getElementById("miniaturas");
	divMiniaturas.innerHTML = "";
	for(var k = Paginas[paginaActual];k <(Paginas[paginaActual]+numMiniaturasxPg);k+=2) {
			strHTML = "";
			var ul = document.createElement("UL");
			//ul.id = "ul"+k;
			strHTML += crearNuevoLI(k);
			//var li = crearNuevoLI(k);
			//ul.appendChild(li);
			if(k+1 <Paginas[paginaActual]+numMiniaturasxPg) {
				//var li = crearNuevoLI(k+1);
				//ul.appendChild(li);
				strHTML += crearNuevoLI(k+1);
			}
			ul.innerHTML = strHTML;
			//alert(ul.innerHTML);
			divMiniaturas.appendChild(ul);
	}
	ajustarSeparador();
} else { 
	  //del if se si son iguales las páginas nueva y anterior
	 pgAntigua = paginaActual;
  	//alert("la página nueva es la misma que la anterior");
}
}