//Duration of all events
var eventDuration = 0.5;
var width = document.viewport.getWidth();
var height =document.viewport.getHeight();
var pageload = false;

window.onresize = updateOverlay;
window.onscroll = updateOverlay;

document.observe("dom:loaded", function() {
	//Insert content layer
	$$('body')[0].insert({
		top: new Element('div', {
								id:'lightbox_main_content', 
								'class': 'lightbox_whiteboard', 
								'style' :'display:none; top:' + height/2 + 'px; left:' + width/2 +'px;'
								})
						});	
						
	//Insert overlay	
	$$('body')[0].insert({
		top: new Element('div', {
								id:'lightbox_overlay', 
								'style' :'height:' + height + 'px; width:' + width + 'px; display:none;'})
						});	

	$('lightbox_overlay').observe('click', function(event){		
			hideLightBox();
		 }); 


	//new PeriodicalExecuter(updateOverlay, 0.4);
	pageload = true;
});

//Handle fade animation.
function displayLightbox(){ 
	if(!pageload)
		return false;

	$('lightbox_overlay').setOpacity(0);
	$('lightbox_main_content').setOpacity(0);
	$('lightbox_overlay').show();
	$('lightbox_main_content').show();
	
	centerWidth = (width/2) - ($('lightbox_main_content').getWidth() / 2) ;
	centerHeight = (height/2) - ($('lightbox_main_content').getHeight() / 2);
	
	$('lightbox_main_content').setStyle({top:centerHeight + 'px', left:centerWidth + 'px'});
	
	new Effect.Parallel([
		new Effect.Opacity($('lightbox_overlay'), { from: 0, to: 0.5, sync:true}),
		new Effect.Opacity($('lightbox_main_content'), { from: 0, to: 1, sync:true })
		], {duration: eventDuration, delay: 0.0});
}

//Hide the overlay and content
function hideLightBox(){	
	$('lightbox_overlay').hide();			
	$('lightbox_main_content').hide();
	new Effect.Parallel([
		new Effect.Opacity($('lightbox_overlay'), {from: 0.5, to: 0, sync: true }),
		new Effect.Opacity($('lightbox_main_content'), { from: 1, to: 0, sync: true })
		], 
		{
			duration: eventDuration, 
			delay: 0.0,
			afterFinish: function(){ 
				$('lightbox_overlay').hide();			
				$('lightbox_main_content').hide();
				}
		});
	
	document.stopObserving('keypress');
	return false;
}

function setLightboxContent(content){	
	$('lightbox_main_content').innerHTML = content;
}


//Update the overlay div.  This is called if the window is resized or scrolled.
function updateOverlay(){	
	
	width = document.viewport.getWidth();
	height =document.viewport.getHeight();

	widthScroll=  width + document.viewport.getScrollOffsets()[0];
	heightScroll= height + document.viewport.getScrollOffsets()[1];	
	
	if($('lightbox_overlay')){	
		$('lightbox_overlay').setStyle({width: '100%'}); 
		
		if($('lightbox_overlay').getHeight() <= heightScroll){        
			$('lightbox_overlay').setStyle({
				height: heightScroll + 'px'
			});			
		}		
	}
	
	
	if($('lightbox_main_content')){	
		divWidth = $('lightbox_main_content').getWidth();
		divHeight = $('lightbox_main_content').getHeight();		

		centerWidth = (width/2) - (divWidth / 2) + document.viewport.getScrollOffsets()[0];
		centerHeight = (height/2) - (divHeight / 2) + document.viewport.getScrollOffsets()[1];
		
		if(divWidth < width)
			$('lightbox_main_content').setStyle({left: centerWidth + 'px'});				
		
		if(centerHeight > 0 && divHeight < height)
			$('lightbox_main_content').setStyle({top: centerHeight + 'px'});
		else
			$('lightbox_main_content').setStyle({top: '10px'})
		
		
	}
}