var velatura = Class.create (
	{
		veu: null,
		div_conteudo: null,
		init_top: 0,
		
		initialize: function(cor, opacidade)
		{
			this.veu = new Element('div', {'id':'velatura'});
			this.div_conteudo = new Element('div');
			
			var offset_scroll = document.viewport.getScrollOffsets();
			
			this.veu.setStyle(
			{			
				display: 'none',
				position: 'fixed',
				left: 0,
				top: 0,
				width: '100%',
				height: '100%',
				backgroundColor: cor,
				zIndex: 500
			});
			
			if (Prototype.Browser.IE)
			{
				this.veu.setStyle({position: 'absolute'});
			}
						
			this.veu.setOpacity(opacidade);
			
			// Pelo que entendi, o bind garante que o escopo da função seja sempre 
			// da instância do objeto velatura. Me parece que não é necessário
			// observar o 'resize', já que o 100% teoricamente dá conta disso,
			// mas é bom confirmar isso com testes: o script semelhante do FFFFound.com
			// tem um observe para o resize.
			
			Event.observe(window,'scroll',this.__scroll.bind(this));
			Event.observe(this.veu, 'click', this.esconde.bind(this));
			
			// 'appends' a div quando o documento está montado			
			document.observe("dom:loaded", this.init.bind(this));
		}	
		
		, init: function()
		{
			document.body.appendChild(this.veu);
			document.body.appendChild(this.div_conteudo);
			this.__scroll();
		}
		
		// o 100% do width e height é o tamanho do viewport, então o véu
		// precisa acompanhar a movimentação do scrollbar. 
		, __scroll: function()
		{

			var offset_scroll = document.viewport.getScrollOffsets();
		
			if (Prototype.Browser.IE)
			{	
				this.veu.setStyle( 
				{ 
					top: parseInt(0 + offset_scroll.top) + 'px',
					left: parseInt(0 + offset_scroll.left) + 'px'
				});
			}
			
			//top: offset_scroll.top+'px', left: offset_scroll.left+'px' 
			
			// o código abaixo pressupõe que a caixa de conteúdo está inicialmente
			// centrada na página E que está posicionada absolutamente.
			if (this.div_conteudo)
			{
				this.div_conteudo.setStyle(
				{
					top: parseInt(this.init_top + offset_scroll.top) + 'px'
				});
			}
		}
		
		, seta_conteudo: function(c)
		{
			// às vezes um div estará setado mas escondido.
			this.div_conteudo.replace(tmp = Element.clone(c,true));
			this.div_conteudo = tmp;
			this.div_conteudo.setStyle(
			{
				position: 'absolute',
				top: '60px',
				zIndex: 1000
			});

			this.init_top = 60;
			this.__scroll();
		}
		
		, exibe: function()
		{
			[this.veu, this.div_conteudo].each(function(div)
			{
				if (div) 
				{
					div.show();
				}
			});
		}		
		
		, esconde: function()
		{
			[this.veu, this.div_conteudo].each(function(div)
			{
				if (div) 
				{
					div.hide();
				}
			});
		}		
		
	});