// para utilizar esta libreria hace falta tener tb referenciada la libreria:
//		- dhtmllib_v2.js
function Dibujar()
	{
	var intI = this.Buscar_Posicion_Pagina()
	this.indiceNavegacion = intI
	var strImg = "", strAux =""
	var strHTML = "", strHTMLconSpan = ""
	strHTMLconSpan +="<span id = 'spanNavegacion" + this.Nombre + "' style = '" 
	if (this.EstiloCelda == "") {this.EstiloCelda = "objNavCelda"}
	
//	varImg = getImage(this.imgPosicion);
//	alert("getImagePageLeft(varImg): " + getImagePageLeft(varImg) + "\ngetImageLeft(varImg): " + getImageLeft(varImg))
//	alert("getImagePageTop(varImg): " + getImagePageTop(varImg) + "\ngetImageTop(varImg): " + getImageTop(varImg))
	if (this.imgPosicion != "")
		{var varImg = getImage(this.imgPosicion);
		strHTMLconSpan +="position:absolute; top: " + (getImageTop(varImg) + 2) + "; left: " + getImageLeft(varImg)}
//		strHTML +="position:absolute; top: 0px; left: 0px"
	strHTMLconSpan +="'>"
	strHTML +="<table id ='tablaNavegacion' width='155px' border = '0' cellpadding='0' cellspacing='0' style = 'border:0px solid;'>\n"
	strHTML +="		<tr>\n"
//	strHTML +="<td class = '" + this.EstiloCelda + "' style='text-align:right; ' >\n"
	//Si no existen elementos en arrayDatos no muestro la numeración
//	if (this.arrayDatos.length == 0)
//		 {strHTML += ""}
//	else
//		{
//		strTitle = ((this.LiteralAlt == "")?"Elemento":this.LiteralAlt) + " número " + this.indiceNavegacion + " de " + (this.arrayDatos.length - 1) + " posibles."
//		//strHTML +="	<span title ='" + strTitle + "'  class='textoBotonera' style = ' position:relative;top:-1px;left:-5px;color:silver;'>" 
//		//strHTML +=	"(#" + this.indiceNavegacion  + "/" + (this.arrayDatos.length - 1)  + ")</span></td>"
//		}
	strHTML +="			<td class = '" + this.EstiloCelda + "' style='text-align:center;'>\n"
	//if (this.arrayDatos.length > 2 )
	if (this.arrayDatos.length <= 2 )
		{strHTML +="<div style = 'width:30px;'>&nbsp;</div>"}
	else
		{
		strHTML +="				<select name = 'cbo_" + this.Nombre + "' style = 'font-size:8px; color:#000000; font-weight:bold; position:relative; top:-1px;' " + 
								" onchange = '" + this.Nombre + ".Posicionar(this.selectedIndex - " + (this.indiceNavegacion - 1) + ")' >"
		for (i=1; i < this.arrayDatos.length; i+=1 )
			{strHTML +="				<option value = \"" + this.arrayDatos[i] + "\" style = 'width: 30px;'>" + i + " / " + (this.arrayDatos.length - 1) + "</option>"}
		strHTML +="				</select>"
		}
	strHTML +="			</td>\n"
	strHTML +="			<td class = '" + this.EstiloCelda + "' style='text-align:center;'>\n"
	if (intI > 1)// Esto engloba la primera pág, la pág 0 (la de la lista) o la de por defecto (-1)
		{strHTML +="				<a href='javascript:" + this.Nombre + ".Posicionar(\"Inicio\");' onfocus ='this.blur()' style = 'padding:0px;' "
		strHTML +="					onmouseover='document.images.FlechaInicio" + this.Nombre + ".src=\"" + this.RutaImagenes + "Flecha_Inicio_Resaltada.gif\"'"
		strHTML +="					onmouseout='document.images.FlechaInicio" + this.Nombre + ".src=\"" + this.RutaImagenes + "Flecha_Inicio_Normal.gif\"'>\n"
		strImg = "Flecha_Inicio_Normal.gif"}
	else
		{strImg = "Flecha_Inicio_Plana.gif"}
	strHTML +="					<img name = 'FlechaInicio" + this.Nombre + "' src='" + this.RutaImagenes + strImg + "' alt='Primera " + this.LiteralAlt + "'"
	strHTML +=					 "width='12' height='11' border='0'></a></td>\n"
	strHTML +="			<td class = '" + this.EstiloCelda + "' style='text-align:center;'>\n"

	if (intI > 1)// Esto engloba la primera pág, la pág 0 (la de la lista) o la de por defecto (-1)
		{strHTML +="				<a href='javascript:" + this.Nombre + ".Posicionar(-1);' onfocus ='this.blur()' style = 'padding:0px;' "
		strHTML +="					onmouseover='document.images.FlechaAnterior" + this.Nombre + ".src=\"" + this.RutaImagenes + "Flecha_Anterior_Resaltada.gif\"'"
		strHTML +="					onmouseout='document.images.FlechaAnterior" + this.Nombre + ".src=\"" + this.RutaImagenes + "Flecha_Anterior_Normal.gif\"'>\n"
		strImg = "Flecha_Anterior_Normal.gif"}	
	else
		{strImg = "Flecha_Anterior_Plana.gif"}
	strHTML +="					<img name = 'FlechaAnterior" + this.Nombre + "' src='" + this.RutaImagenes + strImg + "' alt='Anterior " + this.LiteralAlt + "'"
	strHTML +=					 " width='12' height='11' border='0'></a></td>\n"
	strHTML +="			<td class = '" + this.EstiloCelda + "' style='text-align:center;'>\n"
	if (this.arrayDatos[0] != "" && this.arrayDatos[0] != null )//Si se ha definido el elemento de Lista como "" se pone siempre planos
		{strHTML +="				<a href='javascript:" + this.Nombre + ".Posicionar(\"Lista\");' onfocus ='this.blur()' style = 'padding:0px;' "
		strHTML +="					onmouseover='document.images.FlechaLista" + this.Nombre + ".src=\"" + this.RutaImagenes + "Flecha_Lista_Resaltada.gif\"'"
		strHTML +="					onmouseout='document.images.FlechaLista" + this.Nombre + ".src=\"" + this.RutaImagenes + "Flecha_Lista_Normal.gif\"'>\n"
		strImg = "Flecha_Lista_Normal.gif"}
	else
		{strImg = "Flecha_Lista_Plana.gif"}		
	strHTML +="					<img name = 'FlechaLista" + this.Nombre + "' src='" + this.RutaImagenes + strImg + "' alt='Lista' "
	strHTML +=					 "width='12' height='11' border='0'></a></td>\n"
	strHTML +="			<td class = '" + this.EstiloCelda + "' style='text-align:center;'>\n"
	
	if (intI < this.arrayDatos.length - 1)
		{strHTML +="				<a href='javascript:" + this.Nombre + ".Posicionar(1);' onfocus ='this.blur()' style = 'padding:0px;' "
		strHTML +="					onmouseover='document.images.FlechaSiguiente" + this.Nombre + ".src=\"" + this.RutaImagenes + "Flecha_Siguiente_Resaltada.gif\"'"
		strHTML +="					onmouseout='document.images.FlechaSiguiente" + this.Nombre + ".src=\"" + this.RutaImagenes + "Flecha_Siguiente_Normal.gif\"'>\n"
		strImg = "Flecha_Siguiente_Normal.gif"}
	else
		{strImg = "Flecha_Siguiente_Plana.gif"}		
	strHTML +="					<img name = 'FlechaSiguiente" + this.Nombre + "' src='" + this.RutaImagenes + strImg + "' alt='Siguiente " + this.LiteralAlt + "'"
	strHTML +=					 "width='12' height='11' border='0'></a></td>\n"
	strHTML +="			<td class = '" + this.EstiloCelda + "' style='text-align:center;'>\n"
	
	if (intI < this.arrayDatos.length - 1)
		{strHTML +="				<a href='javascript:" + this.Nombre + ".Posicionar(\"Fin\");'onfocus ='this.blur()' style = 'padding:0px;' "
		strHTML +="					onmouseover='document.images.FlechaFin" + this.Nombre + ".src=\"" + this.RutaImagenes + "Flecha_Fin_Resaltada.gif\"'"
		strHTML +="					onmouseout='document.images.FlechaFin" + this.Nombre + ".src=\"" + this.RutaImagenes + "Flecha_Fin_Normal.gif\"'>\n"
		strImg = "Flecha_Fin_Normal.gif"}
	else
		{strImg = "Flecha_Fin_Plana.gif"}				
	strHTML +="					<img name = 'FlechaFin" + this.Nombre + "' src='" + this.RutaImagenes + strImg + "' alt='Última " + this.LiteralAlt + "'"
	strHTML +=					 "width='12' height='11' border='0'></a></td>\n"
	strHTML +="</tr></table>"
	strHTMLconSpan += strHTML + "</span>"
	
//	if (document.all.tablaNavegacion == null)
	
	if (document.getElementById("spanNavegacion" + this.Nombre) == null)
//	if (XX("spanNavegacion") == null)
		{
		document.write (strHTMLconSpan)
		}
	// se supone que las siguientes líneas son para cuando quiera recargar el objeto (p.e: una img) sin recargar la página)
	//pero las comente porque dan problemas 
	else
		{
		XX("spanNavegacion" + this.Nombre).innerHTML = strHTML
		//oculto la capa prcpal con la siguiente línea ya que en IE hace un extraño y redibuja el objeto antes de volver a cargar la página y hace mal efecto.
		//document.all.spanNavegacion.style.visibility = "hidden"
		//document.all.spanNavegacion.innerHTML = strHTML
		//ojo: si pongo el tiempo mas bajo se muestra un error javascript ya que la anterior línea no le ha dado tiempo a ejecutarse
		//setTimeout("document.all.spanNavegacion.style.visibility = 'visible';", 400) //falta de probar que esta línea funcione.
		}
	//situo el cbo que me permite navegar entre los elementos en la opción correcta
	if (document.getElementsByName("cbo_" + this.Nombre).length > 0)
		{document.getElementsByName("cbo_" + this.Nombre)[0].selectedIndex = (this.indiceNavegacion - 1)}
	}	
	
function Buscar_Posicion_Pagina()
	{
	var i, blnEncontrado = false, objContenedor, strElementoArrayDatos
	//Buscamos el nombre de la página cargada entre los q haya en arrayDatos
	objContenedor = unescape(eval(this.ObjetoContenedor))
//	alert(objContenedor)
	strAlert = ""
	strAlert += "objContenedor (" + this.ObjetoContenedor + "): " + objContenedor+ "\n"
	for (i=0; (i<this.arrayDatos.length && !blnEncontrado); i +=1 )
		{
		strAlert += "this.arrayDatos[" + i + "]: " + this.arrayDatos[i] + "\n"
		//Evitamos la comparación cuando se obvia el indice (posición 0) mediante la cadena vacia.
		if (this.arrayDatos[i] != "")
			{
			strElementoArrayDatos = this.arrayDatos[i]
			if (this.TextoAIgnorarEnLaBusqueda != "") {strElementoArrayDatos = strElementoArrayDatos.replace(this.TextoAIgnorarEnLaBusqueda, "")}
			//alert("objContenedor: " + objContenedor + "\nthis.arrayDatos[" + i + "]: " +this.arrayDatos[i])
			if (objContenedor.indexOf(strElementoArrayDatos)!=-1) blnEncontrado=true}
		}
//	alert(strAlert)
	return (blnEncontrado == true) ?(i - 1) : 0;
	}
	
function Posicionar(prmtrSalto)
	{
	var intPosPagina = this.Buscar_Posicion_Pagina()
	//alert("prmtrSalto: " + prmtrSalto + "\nintPosPagina:" + intPosPagina)
	this.indiceNavegacion = intPosPagina 
	var strElementoACargar = "", objContenedor
	if (typeof(prmtrSalto) == "number") // Ctrlo q el salto no se salga del arrayDatos
		{
		if (intPosPagina + prmtrSalto == 0) prmtrSalto = "Lista"
		if (intPosPagina + prmtrSalto <= 1) prmtrSalto = "Inicio"
		if (intPosPagina + prmtrSalto >= (this.arrayDatos.length - 1)) prmtrSalto ="Fin"				
		}
	//Dependiendo de cual sea la posición de la página actual en el array resaltamos los botones o no
	if (prmtrSalto == "Inicio") 
		{strElementoACargar = this.arrayDatos[1]}
	else if (prmtrSalto == "Lista")
		{
		if (this.arrayDatos[0] == "") // Si no hemos definido un elemento para la lista se deja la imágen/página donde está
			{strElementoACargar = this.arrayDatos[this.indiceNavegacion]}
		else //Cargamos el elemento de Lista si es que se ha definido
			{// Cuando vamos a saltar a la Lista, siempre será una pagina por lo que lo hacemos a lo bruto e ignoramos ObjetoContenedor
			document.location.href = this.arrayDatos[0]
			return // abandono la función para que no ejecute lo siguiente, ya que he conseguido mi propósito
			//strElementoACargar = this.arrayDatos[0]
			}
		}
	else if (prmtrSalto == "Fin")
		{strElementoACargar = this.arrayDatos[this.arrayDatos.length - 1]}
	else
		{strElementoACargar = this.arrayDatos[intPosPagina + prmtrSalto]}
	// Si deseamos añadir, por ejemplo, el resto de una url cuando estamos navegando entre páginas tiene sentido la siguiente línea
	strElementoACargar +=this.RestoURL
//	alert(this.ObjetoContenedor + "\n\n" + strElementoACargar)
	eval(this.ObjetoContenedor + " = \"" + strElementoACargar + "\"")
	if (this.EjecutarContenido) 
		{eval(strElementoACargar)}

	this.Dibujar()
	//objContenedor = strElementoACargar
	}

	
function objNavegacion(prmtrNombre)
	{
	//array q contiene las páginas a traves de las cuales me puedo mover 
	this.arrayDatos = new Array()
	
	this.Nombre = prmtrNombre;

	// Dependiendo de si queremos 
	//  ..cargar distintas páginas sobre la actual (acción por defecto)
	//  ..cargar distintas imagenes sobre una <img...> 
	//cambiamos la siguiente  referencia al objeto q contiene los elementos de la lista sobre la q navegamos.
	//this.ObjetoContenedor = "document.location.href"
	this.ObjetoContenedor = ""
	this.indiceNavegacion = 1
	this.RutaImagenes = ""
	this.EstiloCelda = ""
	// aqui ponemos el literal que deseamos que aparezca en el "alt" (falta de ctrlar el género)
	this.LiteralAlt = ""
	//El siguiente atributo solo tiene razón de ser, por ahora,  cuando estemos navegando entre páginas
	this.RestoURL = ""
	this.imgPosicion = "" //esta propiedad permite indicar una imagen en cuya posición queremos que se situe el objNavegacion
	this.TextoAIgnorarEnLaBusqueda = "" //este texto será ignorado al posicionarnos
	this.EjecutarContenido = false
	
	this.Dibujar = Dibujar;
	this.Buscar_Posicion_Pagina = Buscar_Posicion_Pagina;
	this.Posicionar = Posicionar;
	}
	
/* 
Memoria de mejoras introducidas en cada versión

Versión: v2a
	- Agrego la propiedad "this.EjecutarContenido"... se utiliza cuando queremos llamar a alguna al navegar con lo que ademas de 
	  cargar en ObjetoContenedor (normalmente una vble para saber donde estoy) ejecuta la posición que corresponda de arrayDatos
	- Introduzco la propiedad  "this.LiteralAlt" 
Versión: v2b
	- Arreglo inconsistenciás a la hora de dibujar los botones de navegación.
Versión: v2c
	- Añado un atributo nuevo "this.RestoURL" que permite agregar "querystring" a cada página que se carge.
Versión: v2d
	- Agrego la propiedad "TextoAIgnorarEnLaBusqueda"
	- Cuando voy a la "Lista" siempre, aunque esté navegando entre imágenes cargo una página, nunca una imágen.
	- Añado <span style = 'position:absolute '> antes de dibujar la tabla de forma que no produce salto de línea
	- creo la propiedad this.imgPosicion
	- pongo title al "# 1/20"
	- alineo verticalmente el "# 1/20"
	- posibilito acceder a la posición que quiera con un desplegable.
*/