/*
	Este escript controla la altura y anchura de los elementos que maquetan la pantalla.
	Su finalidad principal es que dichos elementos se adapten a la resolución de la pantalla del usuario 
	Todo contenido overflow aparecerá con scroll:
	* overflow-x si desborda en altura
	* overflow-y si desborda en anchura
	La aparición de scroll se define a través de css.
*/

var IE = document.all?true:false;
var spacer = 6
var cargado = false;
var altoBody = 0;
var anchoBody = 0;

function ajustarPantalla()
{
	if (IE)
	{
		//para explorer es necesario poner la altura de estos elementos a 100% para poder tomar su altura (valga la redundancia)
		document.getElementById("titleHeader").style.height = "100%";
		document.getElementById("body").style.height = "100%"; 

		//para explorer7 es necesario declarar document.body.style.Height y document.body.style.Width (de no ser asi ignora clientHeight y clientWidth)
		if (!cargado)
		{
			document.body.style.height = document.documentElement.clientHeight;
			document.body.style.width = document.documentElement.clientWidth;
			altoBody = document.documentElement.clientHeight;
			anchoBody = document.documentElement.clientWidth;
			cargado = true;
		}

	        //columnLeft(referente de altura minima del documento en este caso)
	        //document.getElementById("columnLeft").style.height = document.body.clientHeight;
	        document.getElementById("columnLeft").style.height = altoBody - 5;
	
	        //si la columna central es más alta, hay que tomar su altura como referencia        
	        var alturaReferencia = document.getElementById("marco_contenido").clientHeight + document.getElementById("header").clientHeight;
	        
	        //se compara con la altura de la columna 3 siempre que no sea paginado
	        if (document.getElementById("title3") == null)
	        {
		        //si la columna 3 es más alta, hay que tomarla como referencia
		        var alturaColumn3 = document.getElementById("column3").clientHeight;
	        
		        if (document.getElementById("pagFooter2"))
		        {
				alturaColumn3 = alturaColumn3 - document.getElementById("pagFooter2").clientHeight;
		        }
			if (alturaReferencia < (alturaColumn3 - 120))
			{
				alturaReferencia = alturaColumn3;
			}
		}
	        
	        if (document.getElementById("columnLeft").clientHeight < alturaReferencia)
	        {
	            document.getElementById("columnLeft").style.height = alturaReferencia;
	        }
					
		//CONTROL DE ANCHOS Y POSICIONES PARA CONTENEDOR Y COLUMNAS
	
		// anchos
		//document.getElementById("content_body").style.width =  document.body.clientWidth - spacer*5 ;				
		document.getElementById("content_body").style.width =  anchoBody - spacer*5 ;				
		document.getElementById("columnLeft").style.width =  (document.getElementById("content_body").clientWidth - document.getElementById("contenedor").clientWidth - document.getElementById("column3").clientWidth )/2;
		document.getElementById("column4").style.width = (document.getElementById("content_body").clientWidth - document.getElementById("contenedor").clientWidth - document.getElementById("column3").clientWidth) /2;

		// posiciones
		document.getElementById("contenedor").style.marginLeft = document.getElementById("columnLeft").clientWidth + spacer;
		document.getElementById("column3").style.left = document.getElementById("contenedor").clientWidth + document.getElementById("columnLeft").clientWidth + spacer*2;
		document.getElementById("column4").style.left = document.getElementById("contenedor").clientWidth + document.getElementById("columnLeft").clientWidth +document.getElementById("column3").clientWidth + spacer*3;

		// posicion y ancho menu dinamico
		document.getElementById("menu").style.left = document.getElementById("columnLeft").clientWidth - 24;
		document.getElementById("menu").style.width =  document.getElementById("contenedor").clientWidth + 24 + spacer ;

		// posicion y ancho menu column3 
		document.getElementById("navImg").style.left =  document.getElementById("column3").style.left;
		document.getElementById("navImg").style.width =  document.getElementById("column3").clientWidth ;
		document.getElementById("navStyle").style.left =  document.getElementById("column3").style.left;
		document.getElementById("navStyle").style.width =  document.getElementById("column3").clientWidth ;

		//CONTROL DE ALTURAS
				
		//al div content_body se le da la altura del body completo menos la suma de alturas de otros elementos (cabecera, pie, etc...)
		//if (document.body.clientHeight > document.getElementById("content_head").clientHeight)
		if (altoBody > document.getElementById("content_head").clientHeight)
		{ 
			//inicializamos la altura de columnLeft, para tener la mínima altura posible (la altura se la darán los elementos contenidos)
			//if (document.getElementById("columnLeft").clientHeight > document.body.clientHeight - document.getElementById("content_head").clientHeight)
			if (document.getElementById("columnLeft").clientHeight > altoBody - document.getElementById("content_head").clientHeight)
			{ 									
				//si el tamaño de la pantalla es menor que columnLeft (referente de altura minima del documento) le damos a las restantes columnas su altura y al div content le pedimos que muestre su contenido sobrante para que aparezca scroll vertical.
				document.getElementById("content_body").style.height = document.getElementById("columnLeft").clientHeight;
				document.getElementById("contenedor").style.height = document.getElementById("columnLeft").clientHeight;
				document.getElementById("column3").style.height = document.getElementById("columnLeft").clientHeight;
				document.getElementById("column4").style.height = document.getElementById("columnLeft").clientHeight;

				document.getElementById("content").style.overflow ="hidden";
				document.getElementById("content").style.overflowY ="scroll";
			}
			else
			{ 
				//si el tamaño de la pantalla es mayor que columnLeft + cabecera al contenedor se le da la altura de dicho menu
				//document.getElementById("content_body").style.height = document.body.clientHeight - document.getElementById("content_head").clientHeight ;
				document.getElementById("content_body").style.height = altoBody - document.getElementById("content_head").clientHeight ;
				//añadimos también la altura de las columnas laterales
				document.getElementById("columnLeft").style.height =  document.getElementById("content_body").clientHeight;	
				document.getElementById("column3").style.height =  document.getElementById("content_body").clientHeight;	
				document.getElementById("column4").style.height =  document.getElementById("content_body").clientHeight;	

				//document.getElementById("contenedor").style.height = document.body.clientHeight - document.getElementById("content_head").clientHeight;
				document.getElementById("contenedor").style.height = altoBody - document.getElementById("content_head").clientHeight;
				document.getElementById("body").style.overflow ="hidden";
				document.getElementById("body").style.overflowY ="hidden";
			}
		} 

		// Damos a div bodyEditar heigh 100% y le restamos el tamaño (dinámico) de hTitulo y el margen inferior (dentro de contenedor)
		document.getElementById("bodyEditar").style.height = "100%";
				
		if (document.getElementById("bodyEditar").clientHeight > document.getElementById("titleHeader").clientHeight/* + document.getElementById("footer").clientHeight*/)
		{
			document.getElementById("bodyEditar").style.height = document.getElementById("bodyEditar").clientHeight - document.getElementById("titleHeader").clientHeight/* - document.getElementById("footer").clientHeight*/;
		}				
		document.getElementById("bodyEditar_bg").style.height = document.getElementById("bodyEditar").clientHeight;				
		document.getElementById("contenido").style.height = document.getElementById("bodyEditar").clientHeight ;
		if (document.getElementById("pagFooter"))
		{
			document.getElementById("contenido").style.height = document.getElementById("column3").clientHeight - document.getElementById("pagFooter").clientHeight - document.getElementById("pagFooter").clientHeight - document.getElementById("title3").clientHeight;
		}
	}
	else
	{
		//otros navegadores	

		//columnLeft(referente de altura minima del documento en este caso)
		document.getElementById("columnLeft").style.height = (window.innerHeight - 5) + "px";

		//si la columna central es más alta, hay que tomar su altura como referencia		
		var alturaReferencia = document.getElementById("marco_contenido").clientHeight + document.getElementById("header").clientHeight;
		
	        //se compara con la altura de la columna 3 siempre que no sea paginado
	        if (document.getElementById("title3") == null)
	        {
			//si la columna 3 es más alta, hay que tomarla como referencia
			var alturaColumn3 = document.getElementById("column3").clientHeight;

			if (document.getElementById("pagFooter2"))
			{
				alturaColumn3 = alturaColumn3 - document.getElementById("pagFooter2").clientHeight - 10;
			}
		
			if (alturaReferencia < alturaColumn3)
			{
				alturaReferencia = alturaColumn3 + 5;
			}
		}
		
		if (document.getElementById("columnLeft").clientHeight < alturaReferencia)
		{
			document.getElementById("columnLeft").style.height = (alturaReferencia) + "px";
		}

		//CONTROL DE ANCHOS Y POSICIONES PARA CONTENEDOR Y COLUMNAS
		
		// anchos
		document.getElementById("content_body").style.width =  (document.body.clientWidth - spacer*5 ) + "px";
		document.getElementById("columnLeft").style.width =  ((document.getElementById("content_body").clientWidth - document.getElementById("contenedor").clientWidth - document.getElementById("column3").clientWidth )/2) + "px";
		document.getElementById("column4").style.width = ((document.getElementById("content_body").clientWidth - document.getElementById("contenedor").clientWidth - document.getElementById("column3").clientWidth) /2) + "px";

		// posiciones
		document.getElementById("contenedor").style.marginLeft = (document.getElementById("columnLeft").clientWidth + spacer) + "px";	
		document.getElementById("column3").style.left = (document.getElementById("contenedor").clientWidth + document.getElementById("columnLeft").clientWidth + spacer*2) + "px";
		document.getElementById("column4").style.left = (document.getElementById("contenedor").clientWidth + document.getElementById("columnLeft").clientWidth +document.getElementById("column3").clientWidth + spacer*3 ) + "px";	
				
		// posicion y ancho menu principal
		document.getElementById("menu").style.left = (document.getElementById("columnLeft").clientWidth - 24 ) + "px";
		document.getElementById("menu").style.width =  (document.getElementById("contenedor").clientWidth + 24 + spacer ) + "px";

		// posicion y ancho menu column3 
		document.getElementById("navImg").style.left =  document.getElementById("column3").style.left;
		document.getElementById("navImg").style.width =  document.getElementById("column3").clientWidth ;
		document.getElementById("navStyle").style.left =  document.getElementById("column3").style.left;
		document.getElementById("navStyle").style.width =  document.getElementById("column3").clientWidth ;

		//CONTROL DE ALTURAS
		
		//para cada uno de los div que se ajustan en tamaño se calcula: tamaño total de la pantalla - lo que no esta dentro de ellos - margen que se desea dejar dentro de cada elemento. Para calcular bodyEditar recordar que el tamaño del hTitulo es dinámico				
		//al div content_body se le da la altura del body completo menos la suma de alturas de otros elementos (cabecera, pie, etc...)
		if (window.innerHeight > document.getElementById("content_head").clientHeight)
		{
			//inicializamos la altura de columnLeft, para tener la mínima altura posible (la altura se la darán los elementos contenidos)
			if (document.getElementById("columnLeft").clientHeight > window.innerHeight - document.getElementById("content_head").clientHeight)
			{
				//si el tamaño de la pantalla es tan pequeñito que no cabe el columnLeft, al contenedor se le da la altura de dicho menu
				document.getElementById("content_body").style.height = document.getElementById("columnLeft").clientHeight + "px";
				document.getElementById("contenedor").style.height = document.getElementById("columnLeft").clientHeight + "px";
				document.getElementById("column3").style.height = document.getElementById("columnLeft").clientHeight + "px";
				document.getElementById("column4").style.height = document.getElementById("columnLeft").clientHeight + "px";
				document.getElementById("content").style.overflow ="hidden";
				document.getElementById("content").style.overflowY ="scroll";
			}
			else
			{
				//si el tamaño de la pantalla es mayor que el columnLeft + cabecera, al contenedor se le da la altura de dicho menu
				document.getElementById("content_body").style.height = (window.innerHeight - document.getElementById("content_head").clientHeight ) + "px"; 
				//añadimos también la altura de las columnas laterales
				document.getElementById("columnLeft").style.height =  document.getElementById("content_body").clientHeight + "px";
				document.getElementById("column3").style.height =  document.getElementById("content_body").clientHeight + "px";
				document.getElementById("column4").style.height =  document.getElementById("content_body").clientHeight + "px";

				document.getElementById("contenedor").style.height = (window.innerHeight - document.getElementById("content_head").clientHeight) + "px";
				document.getElementById("content").style.overflow ="hidden";
				document.getElementById("content").style.overflowY ="hidden";
			}
		} 

		//Ponemos el div bodyEditar con heigh = 100% y le quitamos el tamaño (dinámico) de hTitulo y el margen inferior (dentro de contenedor)
		document.getElementById("bodyEditar").style.height = "100%";
		document.getElementById("bodyEditar").style.height = (document.getElementById("bodyEditar").clientHeight - document.getElementById("header").clientHeight/* - document.getElementById("footer").clientHeight*/) + "px";
		document.getElementById("bodyEditar_bg").style.height = document.getElementById("bodyEditar").clientHeight + "px";

		//esto se debe hacer para forzar a bodyEditar a recalcular su altura, solo para firefox 1.5
		document.getElementById("bodyEditar").style.height = (document.getElementById("bodyEditar_bg").clientHeight + 1) + "px";
		document.getElementById("bodyEditar").style.height = (document.getElementById("bodyEditar").clientHeight - 1) + "px";

		document.getElementById("contenido").style.height = document.getElementById("bodyEditar").clientHeight + "px";

		if (document.getElementById("pagFooter") )
		{
			document.getElementById("contenido").style.height = (document.getElementById("column3").clientHeight - document.getElementById("pagFooter").clientHeight - document.getElementById("pagFooter").clientHeight - document.getElementById("title3").clientHeight ) + "px";
		}
		//para explorer y safari es necesario recalcular el ancho de los elementos que aparecen en #content (de no ser asi desbordan su espacio y quedan parcialmente ocultos y sin aceptar scroll. Aquí corregimos safari)
		if (navigator.appName=="Netscape")  
		{
			try
			{
				document.getElementById("contenido").style.height = (document.getElementById("column3").clientHeight - document.getElementById("pagFooter").clientHeight - document.getElementById("pagFooter").clientHeight - document.getElementById("title3").clientHeight ) + "px";
			}
			catch(e){}
		}
	}			
}