var MARGIN = 5; 
var NUM_COLS = 5;
var BLOCK_WIDTH = 185; 

var posicionSup = 0;

var maximaAltura = 300;



function centraRolloverLayer(cual , col , i) {
	
	
	if (document.getElementById ("rollover_layer_"+col+"_"+i) != null)  {
	
		document.getElementById ("rollover_layer_"+col+"_"+i).style.height = document.getElementById(cual).offsetHeight + "px";
		document.getElementById ("rollover_layer_"+col+"_"+i).style.top = document.getElementById(cual).style.top;
		document.getElementById ("rollover_layer_"+col+"_"+i).style.left = document.getElementById(cual).style.left;
		
		document.getElementById ("link_rollover_"+col+"_"+i).href = document.getElementById("image_"+col+"_"+i).href;
		document.getElementById ("link_rollover_"+col+"_"+i).target = document.getElementById("image_"+col+"_"+i).target;
		
		document.getElementById ("image_"+col+"_"+i).onmouseover = function () { overCell("rollover_layer_"+col+"_"+i); }
		document.getElementById ("rollover_layer_"+col+"_"+i).onmouseout = function () { outCell("rollover_layer_"+col+"_"+i); }
		 
	}
	
	
}


function rolloverEffect(elemento) {
	
	
	//document.getElementById("rollover_layer").style.visibility = "visible";
	//document.getElementById("rollover_layer").style.height = elemento.offsetHeight + "px";
	//document.getElementById("rollover_layer").style.top = elemento.style.top;
	//document.getElementById("rollover_layer").style.left = elemento.style.left;
	//$("div#rollover_layer").fadeIn( 200 ); 
	
	//elemento.style.border = '3px solid #e3e825';

}



function rolloutEffect(elemento) {
	
	
	//document.getElementById("rollover_layer").style.visibility = "hidden";
	//$("div#rollover_layer").fadeOut( 10 );
	
	//elemento.style.border = '0px none #e3e825';
	
	
}



function controlAlturas(qual) {

	if ( parseInt (document.getElementById(qual).style.top) + parseInt (document.getElementById(qual).offsetHeight) > maximaAltura ) {
					
			maximaAltura = parseInt (document.getElementById(qual).style.top) + parseInt (document.getElementById(qual).offsetHeight);
					
	}

	
}


function iniciaMenu(nombre){
	
	tunMenu = document.getElementById(nombre)
	tunMenu.style.top = posicionSup + "px";
	tunMenu.style.position='absolute'; 
	tunMenu.style.height = document.body.scrollTop + "px";
	
}



function reposicionar( num_1, num_2, num_3 , num_4 , num_5 ){
	
	
	if ( num_1 == "undefined" ) num_1 = 0;
	if ( num_2 == "undefined" ) num_2 = 0;
	if ( num_3 == "undefined" ) num_3 = 0;
	if ( num_4 == "undefined" ) num_4 = 0;
	if ( num_5 == "undefined" ) num_5 = 0;
	
	//alert ( num_1 +","+ num_2 +","+ num_3 +","+ num_4 +","+ num_5 );
	
	// ********************************************* PRIMERA COLUMNA 
	for ( i=1 ; i<num_1+1 ; i++ ) {
	
		
		if (i==1){  // ************************************************************************ PRIMERA FILA DE VARIABLES 
			
				// debemos discriminar las primeras teniendo en cuenta el template de las fijas en el template
					
					document.getElementById("cell_1_"+i).style.top = document.getElementById("main_cell").offsetHeight + document.getElementById("fourth_cell").offsetHeight + (MARGIN * 2)+ "px";
					document.getElementById("cell_1_"+i).style.visibility = "visible";
					
					controlAlturas("cell_1_"+i);
					
					//document.getElementById("cell_1_"+i).onmouseover = function () { rolloverEffect(this); }
					//document.getElementById("cell_1_"+i).onmouseout = function () { rolloutEffect(this); }
					
					centraRolloverLayer("cell_1_"+i ,1, i);
					
					
					
					
					
		} else {   // ************************************************************************ PROXIMAS FILAS DE VARIABLES 
			
					justo_arriba = i-1;
			
					altura_del_de_arriba = document.getElementById("cell_1_" + justo_arriba ).offsetHeight  + parseInt(document.getElementById("cell_1_" + justo_arriba).style.top);
				
					document.getElementById("cell_1_"+i).style.top = altura_del_de_arriba + MARGIN +"px";
				
					document.getElementById("cell_1_"+i).style.visibility = "visible";
					
					controlAlturas("cell_1_"+i);
					
					//document.getElementById("cell_1_"+i).onmouseover = function () { rolloverEffect(this); }
					//document.getElementById("cell_1_"+i).onmouseout = function () { rolloutEffect(this); }
			
					centraRolloverLayer("cell_1_"+i , 1,i);
			
		}
	}
		
		
		
	// ********************************************* SEGUNDA COLUMNA 
	for ( i=1 ; i<num_2+1 ; i++ ) {
	
		
		if (i==1){  // ************************************************************************ PRIMERA FILA DE VARIABLES 
			
				// debemos discriminar las primeras teniendo en cuenta el template de las fijas en el template
				
					document.getElementById("cell_2_"+i).style.top = document.getElementById("main_cell").offsetHeight + document.getElementById("fourth_cell").offsetHeight + (MARGIN * 2)+ "px";
					document.getElementById("cell_2_"+i).style.visibility = "visible";
					
					controlAlturas("cell_2_"+i);
					
					//document.getElementById("cell_2_"+i).onmouseover = function () { rolloverEffect(this); }
					//document.getElementById("cell_2_"+i).onmouseout = function () { rolloutEffect(this); }
					
					centraRolloverLayer("cell_2_"+i ,2, i);
					
					
		} else {   // ************************************************************************ PROXIMAS FILAS DE VARIABLES 
			
					justo_arriba = i-1;
			
					altura_del_de_arriba = document.getElementById("cell_2_" + justo_arriba ).offsetHeight  + parseInt(document.getElementById("cell_2_" + justo_arriba).style.top);
				
					document.getElementById("cell_2_"+i).style.top = altura_del_de_arriba + MARGIN +"px";
				
					document.getElementById("cell_2_"+i).style.visibility = "visible";
					
					controlAlturas("cell_2_"+i);
					
					//document.getElementById("cell_2_"+i).onmouseover = function () { rolloverEffect(this); }
					//document.getElementById("cell_2_"+i).onmouseout = function () { rolloutEffect(this); }
					
					centraRolloverLayer("cell_2_"+i ,2, i);
					
			
		}
	}		
		
		
	// ********************************************* TERCERA COLUMNA 
	for ( i=1 ; i<num_3+1 ; i++ ) {
	
		
		if (i==1){  // ************************************************************************ PRIMERA FILA DE VARIABLES 
			
				// debemos discriminar las primeras teniendo en cuenta el template de las fijas en el template
					
					document.getElementById("cell_3_"+i).style.top = document.getElementById("main_cell").offsetHeight  + (MARGIN)+ "px";
					document.getElementById("cell_3_"+i).style.visibility = "visible";
					
					//document.getElementById("cell_3_"+i).onmouseover = function () { rolloverEffect(this); }
					//document.getElementById("cell_3_"+i).onmouseout = function () { rolloutEffect(this); }
					
					centraRolloverLayer("cell_3_"+i ,3, i);
					
		} else {   // ************************************************************************ PROXIMAS FILAS DE VARIABLES 
			
					justo_arriba = i-1;
			
					altura_del_de_arriba = document.getElementById("cell_3_" + justo_arriba ).offsetHeight  + parseInt(document.getElementById("cell_3_" + justo_arriba).style.top);
				
					document.getElementById("cell_3_"+i).style.top = altura_del_de_arriba + MARGIN +"px";
				
					document.getElementById("cell_3_"+i).style.visibility = "visible";
					
					controlAlturas("cell_3_"+i);
					
					//document.getElementById("cell_3_"+i).onmouseover = function () { rolloverEffect(this); }
					//document.getElementById("cell_3_"+i).onmouseout = function () { rolloutEffect(this); }
					
					centraRolloverLayer("cell_3_"+i ,3, i);
			
		}
	}			
		
					
	
	
		// ********************************************* CUARTA COLUMNA 
	for ( i=1 ; i<num_4+1 ; i++ ) {
	
		
		if (i==1){  // ************************************************************************ PRIMERA FILA DE VARIABLES 
			
				// debemos discriminar las primeras teniendo en cuenta el template de las fijas en el template
					
					document.getElementById("cell_4_"+i).style.top = "0px";
					document.getElementById("cell_4_"+i).style.visibility = "visible";
					
					controlAlturas("cell_4_"+i);
					
					document.getElementById("cell_4_"+i).onmouseover = function () { rolloverEffect(this); }
					document.getElementById("cell_4_"+i).onmouseout = function () { rolloutEffect(this); }
					
					centraRolloverLayer("cell_4_"+i ,4, i);
					
					
		} else {   // ************************************************************************ PROXIMAS FILAS DE VARIABLES 
			
					justo_arriba = i-1;
			
					altura_del_de_arriba = document.getElementById("cell_4_" + justo_arriba ).offsetHeight  + parseInt(document.getElementById("cell_4_" + justo_arriba).style.top);
				
					document.getElementById("cell_4_"+i).style.top = altura_del_de_arriba + MARGIN +"px";
				
					document.getElementById("cell_4_"+i).style.visibility = "visible";
					
					controlAlturas("cell_4_"+i);
					
					//document.getElementById("cell_4_"+i).onmouseover = function () { rolloverEffect(this); }
					//document.getElementById("cell_4_"+i).onmouseout = function () { rolloutEffect(this); }
					
					centraRolloverLayer("cell_4_"+i ,4, i);
			
		}
	}			
					
					
					
					
	// ********************************************* QUINTA COLUMNA 
	for ( i=1 ; i<num_5+1 ; i++ ) {
	
		
		if (i==1){  // ************************************************************************ PRIMERA FILA DE VARIABLES 
			
				// debemos discriminar las primeras teniendo en cuenta el template de las fijas en el template
					
					document.getElementById("cell_5_"+i).style.top = "0px";
					document.getElementById("cell_5_"+i).style.visibility = "visible";
					
					controlAlturas("cell_5_"+i);
					
					//document.getElementById("cell_5_"+i).onmouseover = function () { rolloverEffect(this); }
					//document.getElementById("cell_5_"+i).onmouseout = function () { rolloutEffect(this); }
					
					centraRolloverLayer("cell_5_"+i ,5, i);
					
					
		} else {   // ************************************************************************ PROXIMAS FILAS DE VARIABLES 
			
					justo_arriba = i-1;
			
					altura_del_de_arriba = document.getElementById("cell_5_" + justo_arriba ).offsetHeight  + parseInt(document.getElementById("cell_5_" + justo_arriba).style.top);
				
					document.getElementById("cell_5_"+i).style.top = altura_del_de_arriba + MARGIN +"px";
				
					document.getElementById("cell_5_"+i).style.visibility = "visible";
					
					controlAlturas("cell_5_"+i);
					
					//document.getElementById("cell_5_"+i).onmouseover = function () { rolloverEffect(this); }
					//document.getElementById("cell_5_"+i).onmouseout = function () { rolloutEffect(this); }
					
					centraRolloverLayer("cell_5_"+i ,5, i);
		
		}
	}				
			
	//AL FINAL DE TODO SABREMOS LA ALTURA MAXIMA		
	maximaAltura = maximaAltura + 30 + 98 + 5 +10 ;
	document.getElementById("base").style.height = maximaAltura + 10 +"px";		
	document.getElementById("footer").style.top = maximaAltura - 30 - 5 + "px";
	document.getElementById("footer").style.visibility = "visible";
	document.getElementById("borde_lateral_derecho").style.height = maximaAltura + 10 + "px";		
	document.getElementById("borde_lateral_izquierdo").style.height = maximaAltura + 10 + "px";	
	document.getElementById("borde_lateral_derecho_summer").style.height = maximaAltura + 10 + "px";		
	document.getElementById("borde_lateral_izquierdo_summer").style.height = maximaAltura + 10 + "px";	
	
}