welcomeOptions = Object.extend({
	fileBottomNavCloseImage: '/assets/images/icons/ic_close_30.png',
	overlayOpacity: 0.8,   // controls transparency of shadow overlay
	animate: true,		 // toggles resizing animations
	resizeSpeed: 9,		// controls the speed of the image resizing animations (1=slowest and 10=fastest)
	borderSize: 10,		 //if you adjust the padding in the CSS, you will need to update this variable
}, window.welcomeOptions || {});

// -----------------------------------------------------------------------------------

var welcomeWindow = Class.create();

welcomeWindow.prototype = {
	initialize: function() {
		if (welcomeOptions.resizeSpeed > 10) welcomeOptions.resizeSpeed = 10;
		if (welcomeOptions.resizeSpeed < 1)  welcomeOptions.resizeSpeed = 1;

		this.resizeDuration = welcomeOptions.animate ? ((11 - welcomeOptions.resizeSpeed) * 0.15) : 0;
		this.overlayDuration = welcomeOptions.animate ? 0.2 : 0;  // shadow fade in/out duration

		// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
		// If animations are turned off, it will be hidden as to prevent a flicker of a
		// white 250 by 250 box.
		var size = (welcomeOptions.animate ? 250 : 1) + 'px';
		var objBody = $$('body')[0];
		objBody.appendChild(Builder.node('div',{id:'overlayW'}));
		objBody.appendChild(Builder.node('div',{id:'lightboxW'}, [
			Builder.node('div', {id:'outerWelcomContainerW'}, [
				Builder.node('div',{id:'articleDescriptionIDW',className:'ContentBoxW'}),				
				Builder.node('div',{id:'buttonCloseW'},
					Builder.node('a',{id:'bottomNavCloseW', href: '#' },
							Builder.node('img', { src: welcomeOptions.fileBottomNavCloseImage })
					)
				)
			])
		]));

		this.outerWelcomContainer = $('outerWelcomContainerW');
		this.articleDescriptionID = $('articleDescriptionIDW');
		this.overlay = $('overlayW');
		this.lightbox = $('lightboxW');
		this.buttonClose = $('buttonCloseW');
		this.articleDescriptionID.update("<div class='logo'><img src='/assets/images/logos/logo-pearlera.png' alt=''/></div><h1>What has happened here?</h1><p>We are currently performing website maintenance. Unfortunately, it means that some functionality might be unavailable, and some pages might even be broken.  You can continue  and access parts of this website, or you can come back later. Please accept our apologies and thank you for your patience.</p><h4>Do you wish to continue to the requested page?</h4><a id='goStart' class='GoW' href='#'>Yes</a></div>");
		this.articleDescriptionID.hide();
		this.overlay.hide().observe('click', (function() { this.end(); }).bind(this));
		this.lightbox.hide().observe('click', (function(event) { if (event.element().id == 'lightboxW') this.end(); }).bind(this));
		this.outerWelcomContainer.setStyle({ width: size, height: size });
		this.buttonClose.observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
		$('goStart').observe('click', (function(event) { event.stop(); this.end(); }).bind(this));
		this.start();
	},

	start: function() {
		$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
		// stretch overlay to fill page and fade in
		var arrayPageSize = this.getPageSize();
		this.overlay.setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });
		new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: welcomeOptions.overlayOpacity });

		// calculate top and left offset for the lightbox 
		var arrayPageScroll = document.viewport.getScrollOffsets();
		var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);
		var lightboxLeft = arrayPageScroll[0];
		this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
		this.resizeWelcomeContainer(600,400);
	},

	//
	//  resizeWelcomeContainer()
	//
	resizeWelcomeContainer: function(imgWidth, imgHeight) {
		// get current width and height
		var widthCurrent  = this.outerWelcomContainer.getWidth();
		var heightCurrent = this.outerWelcomContainer.getHeight();

		// get new width and height
		var widthNew  = (imgWidth  + welcomeOptions.borderSize * 2);
		var heightNew = (imgHeight + welcomeOptions.borderSize * 2);

		// scalars based on change from old to new
		var xScale = (widthNew  / widthCurrent)  * 100;
		var yScale = (heightNew / heightCurrent) * 100;

		// calculate size difference between new and old image, and resize if necessary
		var wDiff = widthCurrent - widthNew;
		var hDiff = heightCurrent - heightNew;
		if (hDiff != 0) new Effect.Scale(this.outerWelcomContainer, yScale, {scaleContent: false,scaleX: false, duration: this.resizeDuration, queue: 'front',}); 
		if (wDiff != 0) new Effect.Scale(this.outerWelcomContainer, xScale, {scaleContent: false,scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration}); 

		// if new and old image are same size and no scaling transition is necessary, 
		// do a quick pause to prevent image flicker.
		var timeout = 0;
		if ((hDiff == 0) && (wDiff == 0)){
			timeout = 100;
			if (Prototype.Browser.IE) timeout = 250;   
		}
		(function(){
			this.articleDescriptionID.setStyle({ width: widthNew + 'px' });
			this.showWelcome();

		}).bind(this).delay(timeout / 1000);
//		this.showWelcome();
	},
	
	showWelcome: function(){
		new Effect.Appear(this.outerWelcomContainer, { 
			duration: this.resizeDuration, 
			queue: 'end', 
			afterFinish: (function(){ this.updateDetails(); }).bind(this) 
		});
	},

	updateDetails: function() {
		new Effect.Parallel(
			[ 
				new Effect.SlideDown(this.articleDescriptionID, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }), 
				new Effect.Appear(this.articleDescriptionID, { sync: true, duration: this.resizeDuration })
			], 
			{ 
				duration: this.resizeDuration, 
				afterFinish: (function() {
					// update overlay size and update nav
					var arrayPageSize = this.getPageSize();
					this.overlay.setStyle({ height: arrayPageSize[1] + 'px' });
				}).bind(this)
			} 
		);
	},

	end: function() {
		this.lightbox.hide();
		new Effect.Fade(this.overlay, { duration: this.overlayDuration });
		$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
	},

	//
	//  getPageSize()
	//
	getPageSize: function() {
			
		 var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}

		return [pageWidth,pageHeight];
	}
}

document.observe('dom:loaded', function () { new welcomeWindow(); });
