window.addEvent('domready', function() { 

	
	$$('ul#popupnav li a').each(function(el) {
		
		el.addEvents({
			
			'click': function(e) {
				
				e.preventDefault();
				
				var rel = el.getProperty('rel'); // Get rel value

				var size = window.getScrollSize(); // Get size of viewport
				
				/*
				 * Create the page overlay and inject it
				 */
				var overlay = new Element('div', {	
					'id' : 'page-overlay'			
				}).set('styles', {
					'height' : size.y,
					'width'  : size.x
				}); overlay.inject(document.body, 'top');

				/*
				 * Create the fade effect on the overlay
				 */
				var overlayFade = new Fx.Morph(overlay, {
					duration : 200,
					transition: Fx.Transitions.Sine.easeOut
				}).set({
					'opacity': 0
				});					

				/*
				 * Fire the overlay, and chain events afterwards
				 */
				overlayFade.start({
					'opacity': 0.8
				}).chain(function() {
					
					$(rel).set('styles', {
						'display'	 : 'block',
						'top' : size.y / 2 - 210,
						'left': size.x / 2 - 340
					});
					
				});				

				
				$$('#' + rel + ' a.close-button').addEvent('click', function(e) {

					e.preventDefault();
					$(rel).setStyle('display', 'none');

					overlayFade.options.transition = Fx.Transitions.Sine;
					overlayFade.options.duration = 200;

					overlayFade.start({
						'opacity': 0
					}).chain(function() {
						overlay.destroy();
					});	
					
				});					
				
			}
		});
	});
	

				window.addEvent('resize',function(e){
					overlay.setStyle('height', size.y);
					
				});	

});