//
//INICIALIZAMOS VARIABLES
//inicializamos el objeto XMLHttpRequest
var peticion=null;
var numTotalCriaturas=150;
//URL BASE del sitio
var url="http://www.enciclopediadecriaturas.com/ajax/";			//Producción
//var url="http://enciclopedia-version-ajax/";							//Local
//
/*var sustituirCaracteres = {	'á' : '\u00e1', 'é' : '\u00e9', 'í' : '\u00ed', 'ó' : '\u00f3', 'ú' : '\u00fa', 
							'Á' : '\u00c1', 'É' : '\u00c9', 'Í' : '\u00cd', 'Ó' : '\u00d3', 'Ú' : '\u00da', 
							'ä' : '\u00E4', 'ë' : '\u00EB', 'ï' : '\u00EF', 'ö' : '\u00F6', 'ü' : '\u00FC',
							'Ä' : '\u00C4', 'Ë' : '\u00CB', 'Ï' : '\u00CF', 'Ö' : '\u00D6', 'Ü' : '\u00CC',
							'î' : '\u00EE', 'û' : '\u00FB', 'Î' : '\u00CE', 'Û' : '\u00DB',
							'ñ' : '\u00f1', 'Ñ' : '\u00d1', '¿' : '\u00BF'};*/
//
//SUSTITUCIÓN DE CARACTERES EXTRAÑOS (para la URL de las imágenes de cada criatura)
//el array de pares-valor a sustituir en una cadena (con su valor UNICODE) 
var CharsTranslation = {'\u00e1' : 'a', '\u00e9' : 'e', '\u00ed' : 'i', '\u00f3' : 'o', '\u00fa' : 'u', 
						'\u00c1' : 'A', '\u00c9' : 'E', '\u00cd' : 'I', '\u00d3' : 'O', '\u00da' : 'U', 
						'\u00E4' : 'a', '\u00EB' : 'e', '\u00EF' : 'i', '\u00F6' : 'o', '\u00FC' : 'u',
						'\u00C4' : 'A', '\u00CB' : 'E', '\u00CF' : 'I', '\u00D6' : 'O', '\u00CC' : 'U',
						'\u00EE' : 'i', '\u00FB' : 'u', '\u00CE' : 'I', '\u00DB' : 'U', '\u00f1' : 'n', 
						'\u00d1' : 'N', ' ': '-'};
//
//
//CARGAMOS los TIPOS DE CRIATURAS
function cargaFamilias(){
	new Ajax.Request("auxiliar/cargaFamilias.php?nocache=" + Math.random(), {
		method: 'GET',	   
		onSuccess: muestraFamilias}
	);
}
//
//CARGAMOS las CRIATURAS
function cargaCriaturas(){
		new Ajax.Request("auxiliar/cargaCriaturas.php?nocache=" + Math.random(), {
		method: 'POST',
		postBody: 'familia='+$F("familia"),
		onSuccess: muestraCriaturas
		});
}
//
//CARGAR INICIO
function cargaInicio(){
		new Ajax.Request("auxiliar/inicio.html", {
		method: 'GET',
		onSuccess: muestraInicio
		});
}
//
//CARGAR GUÍA
function cargaGuia(){
		new Ajax.Request("auxiliar/guia.html", {
		method: 'GET',
		onSuccess: muestraGuia
		});
}
//
//CARGAMOS los DATOS de la Criatura elegida desde la LISTA
function cargaDatosCriatura(){
	var lista = $("criatura");
	var nombreCriatura = lista.options[lista.selectedIndex].text;
	new Ajax.Request("auxiliar/cargaDatosCriatura.php?nocache=" + Math.random(), {
	method: 'POST',
	postBody: 'nombreCriatura='+nombreCriatura,
	onCreate : startLoading,	   
	onSuccess: muestraDatosCriatura,
	onComplete : stopLoading
	});
}

//CARGAMOS los DATOS de la Criatura elegida desde BUSCAR -desde autocompletar.js-
function cargarCriaturaBuscar(){
	new Ajax.Request("auxiliar/cargaDatosCriatura.php?nocache=" + Math.random(), {
	method: 'POST',
	postBody: 'nombreCriatura='+criaturaSeleccionada,
	onCreate : startLoading,	   
	onSuccess: muestraDatosCriatura,
	onComplete : stopLoading
	});
}

//CARGAMOS los DATOS de la Criatura elegida desde la variable de SESIÓN
function cargarCriaturaDesdeSesion(){
	new Ajax.Request("auxiliar/cargaDatosCriatura.php?nocache=" + Math.random(), {
		method: 'POST',
		postBody: 'nombreCriatura='+sessvars.criatura,
		onCreate : startLoading,	   
		onSuccess: muestraDatosCriatura,
		onComplete : stopLoading
		});
}

//
//
//CARGAMOS los DATOS de la Criatura ALEATORIA elegida desde el enlace
function cargarCriaturaAleatoria() {
	//consulta el numero de campos de la BD: generamos un valor aleatorio entre 0 y el número de campos y se lo pasamos para que busque por 'id'
	var numAleatorio=Math.floor(Math.random()*numTotalCriaturas);
	//
	new Ajax.Request("auxiliar/cargaDatosCriatura.php?nocache=" + Math.random(), {		//usamos nomenclatura Prototype
		method: 'POST',
		postBody: 'numAleatorio=' + numAleatorio,
		onCreate : startLoading,	   
		onSuccess: muestraDatosCriatura,
		onComplete : stopLoading
		});
}
//
//CARGAMOS los DATOS de la Criatura elegida desde la variable de SESIÓN
//y asignamos la funcionalidad de los ENLACES ANTERIOR/SIGUIENTE
function cargarCriaturaPorID(event)
{
	var element=Event.element(event);	//capturamos el elemento que produce el evento
	//
	if (sessvars.idCriatura==1)
	{
		if (element.className=="anterior")			//si es el de id anterior...
		{
			var idCriatura=sessvars.NumTotalCriaturas;	//sacamos el id de la variable de sesión y lo decrementamos
			sessvars.idCriatura=idCriatura;					//volvemos a actualizar la variable de sesión con el nuevo id
		}
		else if (element.className=="siguiente")	//si es el de id siguiente...
		{
			var idCriatura=parseInt(sessvars.idCriatura)+1;		//sacamos el id de la variable de sesión y lo incrementamos
			sessvars.idCriatura=idCriatura;						//volvemos a actualizar la variable de sesión con el nuevo id
		}
	}		
	else if (sessvars.idCriatura==sessvars.NumTotalCriaturas)
	{
		if (element.className=="anterior")			//si es el de id anterior...
		{
			var idCriatura=parseInt(sessvars.idCriatura)-1;	//sacamos el id de la variable de sesión y lo decrementamos
			sessvars.idCriatura=idCriatura;					//volvemos a actualizar la variable de sesión con el nuevo id
		}
		else if (element.className=="siguiente")	//si es el de id siguiente...
		{
			var idCriatura=1;		//sacamos el id de la variable de sesión y lo incrementamos
			sessvars.idCriatura=idCriatura;						//volvemos a actualizar la variable de sesión con el nuevo id
		}
	}		
	else
	{
		if (element.className=="anterior")			//si es el de id anterior...
		{
			var idCriatura=parseInt(sessvars.idCriatura)-1;	//sacamos el id de la variable de sesión y lo decrementamos
			sessvars.idCriatura=idCriatura;					//volvemos a actualizar la variable de sesión con el nuevo id
		}
		else if (element.className=="siguiente")	//si es el de id siguiente...
		{
			var idCriatura=parseInt(sessvars.idCriatura)+1;		//sacamos el id de la variable de sesión y lo incrementamos
			sessvars.idCriatura=idCriatura;						//volvemos a actualizar la variable de sesión con el nuevo id
		}
	}
	//
	new Ajax.Request("auxiliar/cargaDatosCriatura.php?nocache=" + Math.random(), {
		method: 'POST',
		postBody: 'idCriatura='+idCriatura,
		onCreate : startLoading,	   
		onSuccess: muestraDatosCriatura,
		onComplete : stopLoading
		});	
}
//
//MOSTRAR las FAMILIAS de Criaturas
function muestraFamilias(peticion)
{
	//var oJSON=peticion.responseText;		//recuperamos el objeto JSON
	if (!+"\v")	var familias=eval('(' + peticion.responseText + ')');	//ese ñordo sólo es 'true' en IE
	else var familias=JSON.parse(peticion.responseText);
	//
	var desgloseFamilias=$H(familias);		//usaremos Prototype para tener bien desglosados los datos selecionados (por clave-valor)
	var claves=desgloseFamilias.keys();
	var valores=desgloseFamilias.values();
	//
	$("familia").options[0] = new Option("- Tipo de criaturas -");
	for(var i=0;i<desgloseFamilias.size();i++)
	{
		$("familia").options[i+1] = new Option(valores[i], claves[i]);
	}
}

//MOSTRAR las CRIATURAS
function muestraCriaturas(peticion)
{
		//var oJSON=peticion.responseText;		//recuperamos el objeto JSON
		if (!+"\v")	var criaturas=eval('(' + peticion.responseText + ')');
		else var criaturas=JSON.parse(peticion.responseText);
		//
		var desgloseCriatura=$H(criaturas);		//usamos Prototype para tener bien desglosados los datos selecionados (por clave-valor)
		var claves=desgloseCriatura.keys();
		var valores=desgloseCriatura.values();
		//	
		$("criatura").options.length=0;			//reiniciamos la lista para adecuarla al nuevo número de elementos
		$("criatura").options[0] = new Option("- Criatura -");
		for(var i=0;i<desgloseCriatura.size();i++)
		{
			$("criatura").options[i+1] = new Option(valores[i], claves[i]);
		}
}

//MOSTRAR los DATOS de la criatura elegida
function muestraDatosCriatura(peticion)
{
		var oJSON=peticion.responseText;				//recuperamos el objeto JSON
		var datosCriatura=JSON.parse(oJSON);
		//
		var desgloseDatosCriatura=$H(datosCriatura);	//usaremos Prototype para tener bien desglados los datos seleccionados (por clave-valor)
		var claves=desgloseDatosCriatura.keys();
		var valores=desgloseDatosCriatura.values();
		//
		for(var i=0;i<desgloseDatosCriatura.size();i++)	//y vamos rellenando cada campo
		{
			switch(claves[i])
			{
				case "id":
					//guardamos el id de la criatura para posteriormente poder acceder a la anterior/ siguiente											
					sessvars.idCriatura=valores[i];
					//y habilitamos la funcionalidad ANTERIOR/SIGUIENTE
					var siguienteAnterior=$$("#content .guia ul li");
					siguienteAnterior.each(function(siguienteAnterior)
					{
						siguienteAnterior.style.display="inline";
						siguienteAnterior.style.cursor="pointer";	//emulamos que sean pinchables
						siguienteAnterior.style.cursor="hand";		//les asignamos cursor, ya que no son enlaces normales y por defecto no lo tienen					
						Event.observe(siguienteAnterior, "click", cargarCriaturaPorID);
					});
					break;
				case "nombre":																	
					$(claves[i]).innerHTML="";					//reiniciamos nombre
					var letrasNombre=valores[i].toArray();
					for(var j=0;j<letrasNombre.size();j++)		//y colocamos el nombre letra por letra con gracia... xD
					{
						var numAleatorio=Math.floor(Math.random()*5+1);
						$(claves[i]).innerHTML +="<span id='letra"+numAleatorio+"'>"+letrasNombre[j]+"</span>";
					}
					//también aprovechamos para adjuntar la IMAGEN (por el nombre)						
					var imagen=sustituirCaracteresChungos(valores[i], CharsTranslation);						
					$("imagen").innerHTML="<a href=\"imagenes/criaturas/" + imagen.toLowerCase() + 
					".jpg\" rel=\"lightbox\"><img width=\"400\" height=\"400\" border=\"0\" src=\"imagenes/criaturas/" + imagen.toLowerCase() + ".jpg\" /></a>";
					//y finalmente guardamos el nombre de la criatura en una variable de SESIÓN (gracias a sessvars.js) 
					//para poder después recuperarla si cambias de pestaña
					sessvars.criatura = valores[i];
					break
				case "intro":
					$(claves[i]).innerHTML=valores[i];						
					break;
				case "descripcion":
				case "notas":
					var subtitulo=primeraMayuscula(claves[i]);
					$(claves[i]).innerHTML="<h2>"+subtitulo+":</h2>"+valores[i];
					break;					
				case "color0":
					sessvars.color0="#"+valores[i];
					break;
				case "color1":
					sessvars.color1=valores[i];					
					break;						
				case "color2":
					sessvars.color2="#"+valores[i];						
					//aplicamos los colores (mediante estilos CSS)
					actualizarColores();
					break;
				case "familia":
					$("tipo").innerHTML="<u>Tipo:</u> "+valores[i];
					$("tipo").style.display="block";
					break;						
				case "NumTotalCriaturas":
					sessvars.NumTotalCriaturas=valores[i];
				case "restriccion":
					var valorRestriccion=parseInt(valores[i]);
					var lista="<ul>\n<li id='claveRestriccion'>"+primeraMayuscula(claves[i])+":</li>";
					for(var j=0; j<10; j++) 
					{
						if(j < valorRestriccion) 
						{
						  lista +="<li class=\"lleno\"></li>\n";
						}
						else {
						  lista +="<li class=\"vacio\"></li>\n";
						}
					}
					lista +="</ul>\n";
					//
					$(claves[i]).innerHTML=lista;
					//						
					var claseLleno=$$("#restriccion ul li.lleno");
					var claseVacio=$$("#restriccion ul li.vacio");
					for(var k=0; k<claseLleno.size(); k++) 
					{
						claseLleno[k].style.background=datosCriatura.color1;
					}
					for(var c=0; c<claseVacio.size(); c++) 
					{
						claseVacio[c].style.background=datosCriatura.color1;
						claseVacio[c].style.opacity=0.3;
					}
					break;
				default:
					break;	
			}
		}
}

//
//MOSTRAR INICIO
function muestraInicio(peticion)
{
	if ($("content"))	$("content").innerHTML="";
	if ($("texto"))	$("texto").remove();
	if ($("imagenes"))	$("imagenes").remove();
	//
	var texto=Builder.node("div", {id: "texto"});
	$("content").appendChild(texto);
	$("texto").innerHTML=peticion.responseText;
	//
	/*
	new Insertion.Top("texto", Builder.node("div", {id: "imagenes"}));	//maravillosa funcionalidad: ofrece versatilidad y además lo que buscaba!
	//inicializamos el contenedor de imágenes aleatorias
	var numCriaturasEnBanner=30;
	var inicializaCriaturaAleatoria=Math.floor(Math.random()*numCriaturasEnBanner);
	if (inicializaCriaturaAleatoria==inicializaCriaturaAleatoria)
	$("imagenes").innerHTML="<img width='300' height='300' border='0' src='imagenes/banner/"+inicializaCriaturaAleatoria+".jpg' />";
	//
	var pe=new PeriodicalExecuter(function (){
		if ($("imagenes")){
			var criaturaAleatoria=Math.floor(Math.random()*numCriaturasEnBanner);
			$("imagenes").innerHTML="<img width='300' height='300' border='0' src='imagenes/banner/"+criaturaAleatoria+".jpg' />";
			new Effect.Opacity('imagenes', { from: 0, to: .7, duration: 0.5 });
			new Effect.Shake("imagenes", {duration: 0.3, distance: 5});
		}
	}, 3);
	*/
	//
	actualizarColores();
}
//
//MOSTRAR INICIO
function muestraGuia(peticion)
{
	if ($("texto"))	$("texto").remove();
	if ($("imagenes"))	$("imagenes").remove();
	var texto=Builder.node("div", {id: "texto"});
	$("content").appendChild(texto);
	$("texto").innerHTML=peticion.responseText;
	actualizarColores();
}
//
//MOSTRAR DATOS ROL
function muestraDatosRol()
{
	var orbe=Builder.node("div", {id: "orbe"},
			[Builder.node("img", {id: "dragonover", src: "imagenes/rol/dragonover.png"}),
			 Builder.node("img", {id: "dragonout", src: "imagenes/rol/dragonout.png"})
			 ]);
	$("content").appendChild(orbe);
	Event.observe("orbe", "mouseover", dragonover);
	Event.observe("orbe", "mouseout", dragonout);
}
//
function dragonover()
{
	new Effect.Opacity("dragonout", { from: .8, to: 0, duration: 1 });
}
//
function dragonout()
{
	new Effect.Opacity("dragonout", { from: 0, to: .8, duration: 1 });
}
//
//funciones para el MANEJO de las diferentes fases de la petición
//cuando empiece la carga reiniciamos el contenido ('content') e indicamos que está cargando la información con 'loading.gif'
function startLoading() 
{
	$("content").remove();
	reiniciarTabs("Criatura", "datosRol", "Galer\u00edas", "Criatura");
	armarContentCriatura();
	$("imagen").style.background="#ffffff";
	$("imagen").innerHTML = "<img src='framework/loading.gif' class='loading'>";
}
//cuando acabe la carga mostramos un efecto FADE y ya quitamos la imagen que muestra la carga ('loading.gif')
function stopLoading() {
	$("content").style.opacity=0;
	$("tabs").style.opacity=0;
	new Effect.Fade('content', { duration:.5, from:0.0, to:1.0 });
	new Effect.Fade('tabs', { duration:.5, from:0.0, to:1.0 });
	$$("imagen img.loading").remove();
}
//
//Actualizamos COLORES desde javascript
function actualizarColores()
{
	//si hay colores de sesión es que se ha estado en alguna criatura
	if (sessvars.color0 && sessvars.color1 && sessvars.color2)
	{
		//asi que, asignamos los colores de dicha criatura al Entorno INICIO
		aplicarColoresCriatura(sessvars.color0, sessvars.color1, sessvars.color2);
	}
	else
	{
		//asignamos los colores básicos de Enciclopedia
		aplicarColoresCriatura("#61300E", "SaddleBrown", "#FEBF91");
	}
}
//
//APLICACIÓN gama de COLORES a cada CRIATURA (mediante estilos CSS) 
//se le pasa la gama de colores de cada familia de criaturas (extraído de la BD)
function aplicarColoresCriatura(color0, color1, color2)
{
	document.body.style.background=color0;
	$("imageDataContainer").style.background=color1;
	$("outerImageContainer").style.background=color1;
	$("sidebar").style.color=color2;
	$$("#aleatoria a")[0].style.color=color2;
	$$("#aleatoria a")[0].style.borderColor=color2;
	$$("h1")[0].style.color=color2;
	$("content").style.background=color2;
	//
	if($$("#texto a"))
	{
		var enlacesPie=$$("#piepagina a");
		enlacesPie.each(function(enlacesPie)
		{
			enlacesPie.style.color=color2;
		});
	}
	//
	if ($("imagen"))
	{
		$("imagen").style.background=color0;
		$("imagen").style.opacity=0.7;
	}
	if ($("cabecera"))	$("cabecera").style.background=color2;
	if ($("contenido"))
	{
		$("contenido").style.background=color2;
		$("contenido").style.color=color1;
	}
	if ($("restriccion"))	$("restriccion").style.color=color1;
	if ($("nombre"))	$("nombre").style.color=color1;
	if($("intro"))	$("intro").style.color=color0;
	if($("tipo"))	$("tipo").style.color=color1;
	if($("imagenes"))	$("imagenes").style.background=color0;	
	if($$("#texto p a"))
	{
		var enlacesTexto=$$("#texto p a");
		enlacesTexto.each(function(enlacesTexto)
		{
			enlacesTexto.style.color=color0;
		});
	}
	if($$("#texto a img"))
	{
		var enlacesParrafo=$$("#texto a img");
		enlacesParrafo.each(function(enlacesParrafo)
		{
			enlacesParrafo.style.background=color0;
		});
	}
	//
	var span=$$("#licencia span");
	span.each(function(span)
	{
		span.style.color=color1;
	});
	//
	var guias=$$("#content .guia ul li");			//enlaces ANTERIOR/SIGUIENTE
	guias.each(function(guias)
	{
		guias.style.color=color1;
	});
	//ETIQUETAS
	var enlaces=$$("a");
	enlaces.each(function(enlaces)
	{
		enlaces.style.textDecoration="none";
		enlaces.style.color=color2;
	});		
	//
	//PESTAÑAS
	var tabs=$$('#tabs ul li');
	tabs.each(function(tabs)
	{
		tabs.style.background=color2;
		tabs.style.color=color1;
	});	
	//
	//FORM
	var etiquetas=$$("label");
	etiquetas.each(function(etiquetas)
	{
		etiquetas.style.color=color2;
	});
	//
	var listas=$$("select");
	listas.each(function(listas)
	{		
		listas.style.borderColor=color2;
	});
	//
	$$("input")[0].style.borderColor=color2;
	//
	if($$("h2"))
	{
		var tituloH2=$$("h2");
		tituloH2.each(function(tituloH2)
		{		
			tituloH2.style.color=color0;
		});
	}
	//
	if($$("h3"))
	{
		var tituloH3=$$("h3");
		tituloH3.each(function(tituloH3)
		{		
			tituloH3.style.color=color0;
		});
	}
	//
	if($$("h4"))
	{	
		var tituloH2=$$("h4");
		tituloH2.each(function(tituloH2)
		{		
			tituloH2.style.color=color1;
		});
	}
	var tituloH5=$$("h5");
	tituloH5.each(function(tituloH5)
	{		
		tituloH5.style.color=color1;
	});
	//ENLACES CONTENT
	var enlacesContent=$$("#content a");
	enlacesContent.each(function(enlacesContent)
	{
		enlacesContent.style.color=color0;
	});	
	//
	//para la WIKIPEDIA DE CRIATURAS
}
//
//
//función para sustituir caracter extraños en una cadena
function sustituirCaracteresChungos(cadena, listaValores)
{
for(var indice in listaValores) {
	  cadena=String(cadena).replace(new RegExp(indice, "g"), listaValores[indice]);
}
return cadena;
}
//
//
//Función para convertir la primera letra de la cadena a mayúsculas
function primeraMayuscula(string){
	 return string.substr(0,1).toUpperCase()+string.substr(1,string.length).toLowerCase();
}
//
//
//Funcionalidad de las PESTAÑAS (nuestro MENÚ principal). El evento onclick de cada PESTAÑA llama a esta función
//que mostrará en cuál estamos y el contenido respectivo de la pestaña
function establecerFuncionalidadTabs(tab)
{
	//primeramente indicar en qué pestaña estás
	var listaMenu=$$("#tabs ul li");
	for (var i=0;i<listaMenu.size();i++)
	{
		if (listaMenu[i].innerHTML == tab)	listaMenu[i].writeAttribute("class", "menuSeleccionado");
		else listaMenu[i].writeAttribute("class", "menuSinSeleccionar");
	}
	//posteriormente cargamos el contenido que toque
	//switcheamos el contenido de 'this.innerHTML' (el texto de cada item de la lista: del menú realmente) previo filtro de caracteres extraños
	switch(sustituirCaracteresChungos(tab, CharsTranslation))
	{
		case "INICIO":		//carga la sección de INICIO (INTRO)
			cargaInicio();
			//
			break;
		case "Guia":		//carga la GUÍA DE LECTURA del sitio
			cargaGuia();			
			//
			break;			
		case "Teoria":	//carga la sección de TEORÍA (que explica teóricamente Enciclopedia de Criaturas enlazándolo con LmeA)
			$("texto").innerHTML="<h5 style='padding-left: 200px; opacity:.5'>En construcción. Próximamente en todos sus navegadores. Bueno, en IE ya veremos... ^^</h5>";
			$("content").style.minHeight=750 + "px";			
			//
			break;	
		case "Criatura":	//carga los datos de la criatura de nuevo (desde la variable de SESIÓN donde se guardó en nombre de la última criatura)
			cargarCriaturaDesdeSesion();
			break;
		case "datosRol":	//carga los datos de la criatura para datosRol		
			$("content").innerHTML="<h5 style='padding-left: 200px; opacity:.5'>En construcción. Próximamente en todos sus navegadores. Bueno, en IE ya veremos... ^^</h5><p style='padding-left: 200px; color:red'>En esta sección las habilidades y bonificaciones de cada criatura para Rolemaster. A saber: nivel, PV, CA, BD, BO, MM, INI, PP y otras notas y detalles para su manjejo en el juego de rol.";
			muestraDatosRol();
			break;			
		case "Galerias":	//carga la galería de la criatura			
			$("content").innerHTML="<h5 style='padding-left: 200px; opacity:.5'>En construcción. Próximamente en todos sus navegadores. Bueno, en IE ya veremos... ^^</h5><p style='padding-left: 200px; color:red'>En esta sección irá una galería de imágenes de dicha criatura, incluidas varias versiones de la misma -según lugares y mitologías- si las hubiera.";
			$("content").style.minHeight=750 + "px";
			armarGaleria();
			break;
		default:
			break;				
	}
}
//
//reinicia las PESTAÑAS
function reiniciarTabs(tab1, tab2, tab3, tab)
{
	$("tabs").remove();
	armarTabs(tab1, tab2, tab3, tab);
}

//
//EFECTO FADE
function efectoFade(elemento, duracion, desde, hasta)
{
	$(elemento).style.opacity=0;
	new Effect.Fade(elemento, { duration:duracion, from:desde, to:hasta });
}
//
//
//Efecto roll de la imagen
function rollover(elemento){
	efectoFade(elemento,.5, .4, 1.0);
}
function rollout(){
	efectoFade(elemento,.3, 1.0, 0.7);
}
//
//FUNCIÓN ONLOAD
//Nos aseguramos que se ha cargado el DOM para gestionar los eventos y cargar los datos usando AJAX + Prototype 
function establecerEnciclopedia() 
{
	//primero armamos la estructura de la página (DIVs)
	var top=Builder.node("a", {name: "arriba"});
	document.body.appendChild(top);
	var column_content=Builder.node("div", {id: "column-content"});
	document.body.appendChild(column_content);
	armarContentInicio();	
	armarColumna();
	armarTabs("INICIO", "Gu\u00eda", "Teor\u00eda", "INICIO");
	armarpiepagina();
	//
	cargaInicio();			//por defecto cargamos el INICIO
	//
	//Rellenamos la LISTA principal: Familias de criaturas
	cargaFamilias();
	//
	//Y preparamos los MANEJADORES DE EVENTOS:
	//para la selección de familias y criaturas
	Event.observe("familia", "change", cargaCriaturas);
	Event.observe("criatura", "change", cargaDatosCriatura);
	//
	//para el AUTOCOMPLETADO de Buscar criatura	
	Event.observe("buscar", "keyup", autocompleta);	//nomenclatura javascript: $("buscar").onkeyup = autocompleta;
	//
	//para el enlace a 'criatura aleatoria' (Prototype)
	Event.observe("aleatoria", "click", cargarCriaturaAleatoria);
	//
	//para los enlaces de la Intranet
	//Event.observe("registrarse", "click", resgistro);
	//Event.observe("entrar", "click", autentificacion);
}
//
//ARMAMOS LA GALERÍA DE IMÁGENES DE LA CRIATURA
function armarGaleria()
{
	var introduccion=Builder.node("div", {id: "introduccion"});
	$("content").appendChild(introduccion);
	var galeria=Builder.node("div", {id: "galeria"}, Builder.node("ul", {id: "lisy"}));	//FIN GALERÍA
	$("content").appendChild(galeria);
	//
	//No sin antes un pequeño efecto FADE... xD
	//efectoFade("content", 0.8, 0.0, 1.0);
}
//
//ARMAMOS EL PIE DE PÁGINA (los DIVs del documento HTML que conforman el PIE de la página)
function armarpiepagina()
{
	var pie_pagina=Builder.node("div", {id: "piepagina"},
			[Builder.node("ul", 
					[Builder.node('li',
							Builder.node("a", {href: "javascript:;", onclick: "reiniciarTabs('INICIO', 'Gu\u00eda', 'Teor\u00eda', 'INICIO'); cargaInicio()"}, "INICIO")),
					 Builder.node('li',
							Builder.node("a", {href: "http://www.lamagiaenarda.com"}, "La Magia en Arda")),
					Builder.node('li',
							Builder.node("a", {href: url+"/wiki"}, "WikiPedia de Criaturas")),
					Builder.node('li',
							Builder.node("a", {href: "javascript:;"}, "BLOG")),
					Builder.node('li',
							Builder.node("a", {href: "javascript:;"}, "CONTACTAR"))]
								),		//FIN MENU
			Builder.node("div", {id: "licencia"},
					[Builder.node("a", {rel: "license", target: "_blank", href: "http://creativecommons.org/licenses/by-nc/3.0/es/"},
							Builder.node("img", {alt:"Licencia Creative Commons", title:"Licencia Creative Commons", src:"imagenes/base/creative.gif"})),							
					Builder.node("span", {href: "ttp://purl.org/dc/dcmitype/Text", property: "dc:title", rel: "dc:type"}, "Enciclopedia de Criaturas versi\u00f3n AJAX se nutre de la licencia "),
					Builder.node("a", {rel:"license", href:"http://creativecommons.org/licenses/by-nc/3.0/es/"}, "Creative Commons Reconocimiento-No comercial"),
					Builder.node("span", " - Copyleft 2010.")]
							),		//FIN LICENCIA
			Builder.node("div", {id: "compartir"},
					Builder.node("ul", 
							[Builder.node('li', {id: "facebook", onmouseout: "rollout(this)", onmouseover: "rollover(this)"},
									Builder.node("a", {href: "http://ww.facebook.com/share.php?u=http://www.enciclopediadecriaturas.com/ajax", target:"_blank"},
											Builder.node("img", {src:"imagenes/base/logo-facebook.png", alt:"Publicar en Facebook", title:"Publicar en Facebook"})
											)),
							Builder.node('li', {id: "twitter", onmouseout: "rollout(this)", onmouseover: "rollover(this)"},
									 Builder.node("a", {href: "http://twitter.com/home?status=http://www.enciclopediadecriaturas.com/ajax", target:"_blank"},
											 Builder.node("img", {src:"imagenes/base/logo-twitter.png", alt:"Publicar en Twitter", title:"Publicar en Twitter"})
											)),
							Builder.node('li', {id: "meneame", onmouseout: "rollout(this)", onmouseover: "rollover(this)"},
									 Builder.node("a", {href: "http://meneame.net/submit.php?url=http://www.enciclopediadecriaturas.com/ajax/", target:"_blank"},
											 Builder.node("img", {src:"imagenes/base/logo-meneame.png", alt:"Publicar en Menéame", title:"Publicar en Menéame"})
										)),
							Builder.node('li', {id: "delicious", onmouseout: "rollout(this)", onmouseover: "rollover(this)"},
									 Builder.node("a", {href: "http://del.icio.us/post?url=http://www.enciclopediadecriaturas.com/ajax", target:"_blank"},
											 Builder.node("img", {src:"imagenes/base/logo-delicious.png", alt:"Publicar en Del.icio.us", title:"Publicar en Del.icio.us"})
										)),
							])
						)	//FIN COMPARTIR
			]);	//FIN PIE PÁGINA
	document.body.appendChild(pie_pagina);
	//
	//No sin antes un pequeño efecto FADE... xD
	//efectoFade("piepagina", 0.8, 0.0, 1.0);
}
//
//ARMAMOS EL MENÚ SUPERIOR (TABS), que en realidad es parte de la columna izquierda (sidebar), aunque es preciso modularizarlo así
function armarTabs(tab1, tab2, tab3, selectedTab)
{
	if (tab1 == selectedTab)	estado1="menuSeleccionado";
	else	estado1="menuSinSeleccionar";
	if (tab2 == selectedTab)	estado2="menuSeleccionado";
	else	estado2="menuSinSeleccionar";
	if (tab3 == selectedTab)	estado3="menuSeleccionado";
	else	estado3="menuSinSeleccionar";
	//
	var tabs=Builder.node("div", {id: "tabs"},
					Builder.node("ul", 
							[Builder.node('li', {className: estado1, onclick:"establecerFuncionalidadTabs('"+tab1+"')"}, tab1),
							 Builder.node('li', {className: estado2, onclick:"establecerFuncionalidadTabs('"+tab2+"')"}, tab2),
							 Builder.node('li', {className: estado3, onclick:"establecerFuncionalidadTabs('"+tab3+"')"}, tab3)]
							 )
			);
	$("sidebar").appendChild(tabs);
}
//
//ARMAMOS LA COLUMNA IZQUIERDA (los DIVs del documento HTML que conforman la sidebar)
//NOTA: he tenido que quitar el atributo 'for' de las etiquetas 'label' porque causaba problemas en Safari y Chrome (palabra reservada)
function armarColumna()
{
	var columna_uno=Builder.node("div", {id: "sidebar"},
			[Builder.node("div", {id: "autenticarse"}, 
					Builder.node("ul", 
							[Builder.node('li', {id: "registrase"}, 
									[Builder.node("a", {href: "javascript:;"}, "Registrarse")]
									 ),
							 Builder.node('li', {id: "entrar"}, 
									 [Builder.node("a", {href: "javascript:;"}, "Entrar")]
									  )
							])
			),	//FIN AUTENTICARSE
			Builder.node("div", {id: "formulario"},
					[Builder.node("form", {autocomplete: "off"},
							[Builder.node("label", {name: "familia"}, "Selecciona el Tipo de Criaturas:"),
							Builder.node("select", {id: "familia"},
									Builder.node("option", "Cargando...")
									),
							Builder.node("br"), Builder.node("br"),
							Builder.node("label", {name: "criatura"}, "Selecciona la Criatura:"),
							Builder.node("select", {id: "criatura"},
									Builder.node("option", "- Deshabilitado -")
									),
							Builder.node("br"), Builder.node("br"),
							Builder.node("label", "Buscar la Criatura:"),
							Builder.node("input", {id: "buscar", type: "text", name: "buscar", size: "20"}),
							Builder.node("input", {id: "oculto", name: "oculto"})]
							),
					Builder.node("div", {id: "sugerencias"}),
					Builder.node("div", {id: "aleatoria"}, 
							Builder.node("a", {href: "javascript:;"}, "Seleccionar Criatura al azar"))]
					),
			Builder.node("h1", Builder.node("a", {href: "javascript:;", onclick: "reiniciarTabs('INICIO', 'Gu\u00eda', 'Teor\u00eda', 'INICIO'); cargaInicio()"}, "Enciclopedia de Criaturas")),
			Builder.node("div", {id: "bso"}, "Este ser\u00e1 el texto sustituido.")
			]
	);
	document.body.appendChild(columna_uno);
	//
	//Cargamos el Objeto FLASH (BSO) con unos parámetros iniciales
	var flashvars = {color: "0xffffff"};
	var params = {menu: "false", wmode: "transparent"};
	swfobject.embedSWF("auxiliar/bso.swf", "bso", "260", "330", "9.0.0","", flashvars, params);
	//
	//No sin antes un pequeño efecto FADE... xD
	efectoFade("sidebar", 0.8, 0.0, 1.0);
}
//
//
function armarContentInicio()
{
	var content=Builder.node("div", {id: "content", style: "min-height:750px"});
	$("column-content").appendChild(content);
	//
	//No sin antes un pequeño efecto FADE...xD
	efectoFade("column-content", 0.8, 0.0, 1.0);
}
//	
//ARMAMOS EL CONTENT (los DIVs del documento HTML que conforman la COLUMNA DERECHA)
function armarContentCriatura()
{
	var content=Builder.node("div", {id: "content"},					
					[Builder.node("div", {id: "cabecera"},
							[Builder.node("div", {className: "guia"}, 
									Builder.node("ul", 
											[Builder.node('li', {className: "anterior"}, "Anterior Criatura"),
											 Builder.node('li', {className: "siguiente"}, "Siguiente Criatura")])
											 ),							//FIN GUIA
							Builder.node("div", {id: "tipo"}),			//FIN TIPO
							Builder.node("div", {id: "imagen", onmouseout: "rollout(this)", onmouseover: "rollover(this)"}),		//FIN IMAGEN
							Builder.node("div", {id: "nombre"}),		//FIN NOMBRE
							Builder.node("div", {id: "restriccion"}),	//FIN RESTRICCION
							Builder.node("div", {id: "intro"})			//FIN INTRO
							]	//FIN HIJOS CABECERA
					),	//FIN CABECERA
			        Builder.node("div", {id: "contenido"}, 
			        		[Builder.node("div", {id: "descripcion"}),	//FIN DESC
			        		 Builder.node("div", {id: "notas"})			//FIN NOTAS
			        		]	//FIN HIJOS CONTENIDO
			        ),	//CONTENIDO
			        Builder.node("div", {id: "pie"}, 
			        		[Builder.node("div", {className: "guia"}, 
			        				Builder.node("ul", 
			        						[Builder.node('li', {className: "anterior"}, "Anterior Criatura"),
			        						 Builder.node('li', {className: "siguiente"}, "Siguiente Criatura")])
			        				),	//FIN GUIA
			    			]	//FIN HIJOS DE PIE
			    	)	//FIN PIE
			    ]	//HIJOS DE CONTENT			    	
			);	//CONTENT
	// 
	$("column-content").appendChild(content);
	//
	//No sin antes un pequeño efecto FADE...xD
	efectoFade("column-content", 0.8, 0.0, 1.0);
}
//Preparamos el MANEJADOR DE EVENTOS principal: onLoad (usando Prototype)	
Event.observe(window, "load", establecerEnciclopedia);	//nótese que el elemento afectado es el objeto WINDOW