// JavaScript Document

function mostrar(){
	
	//Muestra el div
	document.getElementById("grande").style.display = "";
	document.getElementById('transparencia').style.display='block';
	
	//Para otros navegadores que no son Explorer
	if (typeof window.innerHeight != 'undefined'){
		alto = document.body.clientHeight + 2*document.viewport.getScrollOffsets()[1];
		document.getElementById("transparencia").style.position = "fixed";
	}
	else{// Para Internet Explorer
		alto = document.getElementById("contenedor").scrollHeight;
	}

	ancho = document.body.scrollWidth;
	
	
	
	
	document.getElementById("transparencia").style.height = alto + "px";
	document.getElementById("transparencia").style.width = ancho + "px";
		
	//Obtiene el alto y ancho del div
	w = document.getElementById("grande").offsetWidth;
	h = document.getElementById("grande").offsetHeight;
	
	//Obtenemos los márgenes que serán negativos porque centraremos el div asignando a los propiedades top y left 50% y tendremos que restar la mitad del tamaño de la imagen
	ml = -(w/2);
	mt = -(h/2);
	
	//Posicionaremos el div
	document.getElementById("grande").style.position = "absolute";
	document.getElementById("grande").style.top = "50%";
	document.getElementById("grande").style.left = "50%";	
	
	//Aquí daremos los valores para los márgenes. document.viewport.getScrollOffsets()[1] es un método de la librería protoype que nos da el área no visible de la página (para otras resoluciones)
	document.getElementById("grande").style.marginTop = document.viewport.getScrollOffsets()[1] + mt + "px";
	document.getElementById("grande").style.marginLeft = ml + "px";
	
}

function cerrar(){
	
	document.getElementById("grande").style.display = "none";
	document.getElementById("transparencia").style.display = "none";
}