///////////// inicializar la ventana modal:
capa = 'popup';
fondo = 'fondo_transparente';
cargado = false;
Event.observe(window, 'load',
	function() {
		primero = $$('body').first().down();
		primero.insert({'before': '<div id="'+fondo+'"></div>'});
		primero.insert({'before': '<div id="'+capa+'" style="display: none"></div>'});
		$(capa).setStyle ({position: 'absolute', left: '0px', top: '0px', zIndex: '12', margin: '0px', padding: '0px', backgroundColor: '#fff', border: '1px solid #000', textAlign: 'left'});

		if (window.attachEvent && !window.opera)
		{
			position = 'absolute';
		} else {
			position =  'fixed';
		}
		$(fondo).setStyle({position: position, left: 0, top: 0, display: 'none', float: 'left', width: '100%', height: '100%', backgroundColor: '#000000', zIndex: '10', opacity: 0.7 });
		cargado = true;
	    	window.onresize = resize;
	    	window.onscroll = resize;

      	}
    );

function popupShowRemote(url)
{
	ocultarSelects();
	var de = document.documentElement;
	var wPagina = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	var hPagina = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
	var wBody = $(document.body).getWidth();
	var hBody =  $(document.body).getHeight();

	var altura = 0;
	if (hBody>hPagina)
		altura= hBody;
	else
		altura=hPagina;
	$(fondo).setStyle({height: altura+20, width: wBody, display: 'inline' }).stopObserving('click');
	new Ajax.Request(url, {
		evalJS: true,
		onSuccess: function(transport){
			popupShow(transport.responseText);
		}
	});
}
function popupClose()
{
	mostrarSelects();
	$(capa).hide();
      	$(fondo).hide();
}
// funciton que muestra la ventan modal
function popupShow(html)
{
//	if (!cargado)
//		return; //¿mensaje de error?
	//$(capa).update('<div>'+html+'</div>'); Incluimos el div para que no falle el popup si no tiene un elemento de tipo bloque con ancho fijo como primer elemento.
	$(capa).update(html);
	$(capa).setStyle({display: "inline", opacity: 0 });

	$(capa).setStyle({width: $(capa).firstDescendant().getWidth()+'px' });

    	//$(capa).setStyle ({position: 'absolute', left: '0px', top: '0px', zIndex: '300', margin: '0px', padding: '10px', backgroundColor: '#ffffff', border: '1px solid #000', textAlign: 'left'});

	var de = document.documentElement;
	var wPagina = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	var hPagina = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;

	var wBody = $(document.body).getWidth();
	var hBody =  $(document.body).getHeight();
	var wDiv = $(capa).getWidth();
	var hDiv = $(capa).getHeight();

	var scrollX = window.pageXOffset||window.document.documentElement.scrollTop;
	var scrollY = window.pageYOffset||window.document.documentElement.scrollTop;

	var xCentro = (wPagina/2 - wDiv/2) + scroll_X();
	var yCentro = (hPagina/2 - hDiv/2)  + scroll_Y();
	if (wPagina < wDiv)
		xCentro=0;
	if (hPagina < hDiv)
		yCentro=0;

	var altura = 0;
	if (hBody>hPagina)
		altura= hBody;
	else
		altura=hPagina;

	$(capa).setStyle({left: xCentro + 'px', top: yCentro + 'px', opacity: 1});
	$(fondo).setStyle({height: altura, width: wBody, display: 'inline' }).observe('click',function () {
      		$(capa).hide();
      		$(capa).innerHTML = '';
      		$(capa).setStyle ({});
      		$(this).hide();
      		$(this).stopObserving();
    	});
}

/*************posicionar la capa en el centro cuando se redimensione la página, y restaurar el tamaño del fondo***********************/
function resize()
{
	var de = document.documentElement;
	var wPagina = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	var hPagina = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;

	var wBody = $(document.body).getWidth();
	var hBody =  $(document.body).getHeight();
	var wDiv = $(capa).getWidth();
	var hDiv = $(capa).getHeight();

	var scrollX = window.pageXOffset||window.document.documentElement.scrollTop;
	var scrollY = window.pageYOffset||window.document.documentElement.scrollTop;

	var xCentro = (wPagina/2 - wDiv/2) + scroll_X();
	var yCentro = (hPagina/2 - hDiv/2) + scroll_Y();
	if (wPagina < wDiv)
		xCentro=0+ scroll_X();
	if (hPagina < hDiv)
		yCentro=0+ scroll_Y();

	var altura = 0;
	if (hBody>hPagina)
		altura= hBody;
	else
		altura=hPagina;
	$(capa).setStyle({ left: xCentro+'px', top: yCentro+'px'});
	$(fondo).setStyle({height: altura, width: wBody })
}
/***************************************************************************************************************/

 function scroll_Y(){
	if(window.pageYOffset){
		return window.pageYOffset;
	 }
	 else {
		return  Math.max(document.body.scrollTop,document.documentElement.scrollTop);
	 }
}

 function scroll_X(){
	if(window.pageXOffset){
		return window.pageXOffset;
	 }
	 else {
		return  Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
	 }
}

/***************************************************************************************************************/
function ocultarSelects()
{
	$$('select').each(function(e)
	{
		e.hide('ocultar_selects')
	});
};

function mostrarSelects()
{
	$$('select').each(function(e)
	{
		e.show('ocultar_selects')
	});
};