overlay = {
	open : function(pageToOpen){
		$("select").css("visibility","hidden")
		
		overlay.displayLoader();
		
		overlay.buildOverlay(pageToOpen);
		
	
	},
	loadContent : function(pageToOpen){
		
			$('div.overlayContainer').load(pageToOpen,function(){
			$('div.overlayContainer').css('display','block');
			$('div.overlayContainer').animate({opacity:1});
			
			var xScroll, yScroll;
		       if (self.pageYOffset) {
		           yScroll = self.pageYOffset;
		           xScroll = self.pageXOffset;
		       } else if (document.documentElement && document.documentElement.scrollTop){     // Explorer 6 Strict
		           yScroll = document.documentElement.scrollTop;
		           xScroll = document.documentElement.scrollLeft;
		       } else if (document.body) {// all other Explorers
		           yScroll = document.body.scrollTop;
		           xScroll = document.body.scrollLeft;   
		       }

			if($.browser.msie){
				browserHeight = document.documentElement.clientHeight;
			}else{
				browserHeight = window.innerHeight;
			}
			
			if(browserHeight >= $('div.overlayContainer').height()){

				$('div.overlayContainer').css({
					'top' :  yScroll,
					'left' : "50%",
					'margin' : '0px 0 0 -' + $('div.overlayContainer').width()/2 + "px"
				});
		
			}else{
			
				$('div.overlayContainer').css({
					'top' :  yScroll,
					'left' : "50%",
					'margin' : '0px 0 0 -' + $('div.overlayContainer').width()/2 + "px"
				});
			}

			$('#bigAjaxLoader').remove();
		});
	},
	close : function(){
		$('div.overlayContainer').fadeOut('fast',function(){
			$(this).remove();
			$('div.overlay').fadeOut('fast',function(){
				$(this).remove();
				$("select").css("visibility","visible")
			});
		});
	},
	
	buildOverlay : function(pageToOpen){
		// Build the background overlay div
		backgroundDiv = document.createElement('div');
		heightBG = $(window).height() +"px"
		$(backgroundDiv).addClass('overlay');
		$(backgroundDiv).css({ height:heightBG});
		
		$(backgroundDiv).bind('click',function(){
			overlay.close();
		});
		// Build the content overlay divs
		overlayContainer = document.createElement('div')
		$(overlayContainer).addClass('overlayContainer');
		
		$('body').append(backgroundDiv);
		// $(overlayContentContainer).append(overlayContent);
		// $(overlayContainer).append(overlayContentContainer);
		$('body').append(overlayContainer);
		$('div.overlayContainer').css('opacity',0);
		// Then fade it in
		$('div.overlay').css('opacity',0);
		$('div.overlay').show()
		$('body').append(ajaxLoader);
		$('div.overlay').animate({opacity: 0.85}, 300, function() {
						
			overlay.loadContent(pageToOpen);

		});
		
		
	},
	
	displayLoader : function(){
		ajaxLoader = document.createElement('img')
		$(ajaxLoader).attr({
			'id':'bigAjaxLoader',
			'src':'img/ajax-loader.gif'
		});
		$(ajaxLoader).css({
			'position':'absolute',
			'top':'50%',
			'left':'50%'
		});
	}
}