// MESSAGE BOX SYSTEM v1.3 ---------------------------------------------------------------------------------------------------------------------------------------------------
// used to replace the classic alert box, written and checked for Internet Explorer v6+, Firefox, Netscape v7+ only, other browsers may crash if they do not fully support DOM
function messageBox()
{
	// R - this variable can only be read
	// R/W - this variable can be read and also overwritten

	// detect microsoft IE - R
	this.isMSIE = (navigator.appName.toLowerCase().indexOf("microsoft") >= 0) ? true : false;	
	
	this.coordCenter = new Array(0,0);	// coordinates for the exact center of the screen - R
	this.scrollCoords = new Array(0,0);	// scroll offset amount array - R
	
	this.msgBoxHeight = 760;		// message box height - R/W
	this.msgBoxWidth = 925;			// message box width - R/W
	this.msgBoxTop = 0;			// message box top corner position - R
	this.msgBoxLeft = 0;			// message box left corner position - R
	this.lockerZ = 1000;
	this.boxZ = 1001;
	
	this.containerStyle = null;		// container style - R
	this.msgBoxHtml = null;			// container style - R
	
	this.mBoxLocker = null;			// referrence to message box blocking layer element - R
	this.mBox = null;				// referrence to message box element - R
	
	// GET SCROLL OFFSET --------------------------------------------------------------------------
	// cross browser function to get x and y offsets for scrolling windows
	this.getScrollCoords = function () {
		var scrOfX = 0, scrOfY = 0;
		
		if (typeof(window.pageYOffset) == "number") {
			//Netscape compliant
			scrOfY = window.pageYOffset;
			scrOfX = window.pageXOffset;
		} 
		else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
			//DOM compliant
			scrOfY = document.body.scrollTop;
			scrOfX = document.body.scrollLeft;
		}
		else if	(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
			//IE6 standards compliant mode
			scrOfY = document.documentElement.scrollTop;
			scrOfX = document.documentElement.scrollLeft;
		}
		
		return [ scrOfX, scrOfY ];
	};
	
	// CLOSE MSG BOX ---------------------------------------------------------------------------
	// closes message box
	this.close = function() {
		
		this.mBoxLocker.style.display = "none";
		this.mBox.style.display = "none";
		
		// unset onscroll event to prevent useless processing
		window.onscroll = null;
	};
	
	// POP MSG BOX ------------------------------------------------------------------------------
	// message box function, used instead of the classic alert function to display the messages in a customizable html format
	this.pop = function(msg, position) {
		
		// if microsoft internet explorer
		if (this.isMSIE) {
			positionStyle = "absolute";
		}
		else {
			positionStyle = "fixed";
		}
		
		var screenWidth = window.innerWidth ? window.innerWidth : document.body.offsetWidth;
		var screenHeight = window.innerHeight ? window.innerHeight : document.body.offsetHeight;
		
		var pageHeight = document.body.scrollHeight;
		var pageWidth = document.body.scrollWidth;

		// set center screen coordinates
		this.coordCenter[0] = Math.round(screenWidth/2);
		this.coordCenter[1] = Math.round(screenHeight/2);
		
		// set coordinates based on requested relative position
		if (position == "center" || !position) {
			this.msgBoxLeft = this.coordCenter[0] - Math.round(this.msgBoxWidth/2);
			this.msgBoxTop = this.coordCenter[1] - Math.round(this.msgBoxHeight/2);
		}
		
		// if IE, the scrolling offset must be taken into consideration as the message box's position is absolute
		if (this.isMSIE) {
			// get cross browser scroll coords
			this.scrollCoords = this.getScrollCoords();
			
			this.msgBoxLeft += document.body.scrollLeft;
			this.msgBoxTop += document.body.scrollTop;
		}
		
		// create locking element if none exist
		if (!this.mBoxLocker) {
			// IE way to create the locker
			if (this.isMSIE) {
				// place locker container
				this.mBoxLocker = document.createElement("div");
				document.body.appendChild(this.mBoxLocker);
				
				// create locker as html within container
				this.mBoxLocker.innerHTML = '<div id="msgBoxLocker" style="position: absolute; top: 0px; left: 0px; width: ' + pageWidth + 'px; height: ' + pageHeight + 'px; background: #333333; filter:alpha(opacity=90); -moz-opacity:0.9; opacity: 0.9; z-index: ' + this.lockerZ + ';"></div>';
				
				// get new referrence to the locker
				this.mBoxLocker = document.getElementById("msgBoxLocker");
			}
			// usual way to create the locker
			else {
				this.mBoxLocker = document.createElement("div");
			
				this.mBoxLocker.setAttribute("id", "msgBoxLocker");
				this.mBoxLocker.setAttribute("style", "position: absolute; top: 0px; left: 0px; width: " + pageWidth + "px; height: " + pageHeight + "px; background: #333333; filter:alpha(opacity=90); -moz-opacity:0.9; opacity: 0.9; z-index: " + this.lockerZ + "; display: none;");			
				
				// append on document
				document.body.appendChild(this.mBoxLocker);
			}
		}
		
		// prepare message box content
		var msgBoxHeader = "msgBox";
		var msgBoxBody = msg;
		var msgBoxFooter = '<input type="button" value="OK" onClick="msgBox.close();">';
		
		// if IE, get container element which is the msgBox's parent
		if (this.isMSIE) {
			if (this.mBox) {
				this.mBox = this.mBox.parentNode;
			}
		}
		
		// build msg box data
		this.containerStyle = 'z-index: ' + this.boxZ + '; position: ' + positionStyle + '; top: ' + this.msgBoxTop + 'px; left: ' + this.msgBoxLeft + 'px; width: ' + this.msgBoxWidth + 'px; height: ' + this.msgBoxHeight + 'px; padding: 0px; display: none;';
		//this.msgBoxHtml = '<table width="' + this.msgBoxWidth + '" height="' + this.msgBoxHeight + '" cellpadding="0" cellspacing="0" border="0"><tr><td>' + msgBoxBody + '</td></tr></table>';
		this.msgBoxHtml = msgBoxBody;
		
		// create msgBox container element if none available
		if (!this.mBox) {
			this.mBox = document.createElement("div");
			
			// if browser is not IE, build message box as usual
			if (!this.isMSIE) {
				this.mBox.setAttribute("id", "msgBox");
				this.mBox.setAttribute("style", this.containerStyle);
				this.mBox.setAttribute("class", "msgBoxContainerStyle");
			}

			// append on document
			document.body.appendChild(this.mBox);
		}

		// set content depending on browser
		if (this.isMSIE) {
			// if browser is MSIE, create actual msgbox div inside current container div otherwise positioning will get messed up
			mBoxInnerHtml = '<div id="msgBox" class="msgBoxContainerStyle" style="z-index: ' + this.boxZ + ';' + this.containerStyle + '">' + this.msgBoxHtml + '</div>';
		}
		else {
			mBoxInnerHtml = this.msgBoxHtml;
		}
		
		// msgBox MAIN HTML
		this.mBox.innerHTML = mBoxInnerHtml;
		
		// get elements as referrence thru their name, this will make sure the referrences are pointed right, also hardcoded string ID's must be used as IE will have the .id pointed to the container
		this.mBoxLocker = document.getElementById("msgBoxLocker");
		this.mBox = document.getElementById("msgBox");

		// display msg box and locking element in the exact given order
		this.mBoxLocker.style.display = "";
		this.mBox.style.display = "";

		// if it is IE, set the onScroll event to drag the message box after it so it is kept in the center of the screen
		if (this.isMSIE) {
			window.onscroll = this.tuneMsgBoxIE;
		}
	};
	
	// TUNE FOR IE -----------------------------------------------------------------------------
	// tune message box position for Internet Explorer, this. cannot be used because in IE the event will point the this. referrence to the event triggering element
	this.tuneMsgBoxIE = function (){
		
		// get cross browser scroll coords
		msgBox.scrollCoords = msgBox.getScrollCoords();
		
		// calculate new position
		msgBox.msgBoxLeft = document.body.scrollLeft + msgBox.coordCenter[0] - Math.round(msgBox.msgBoxWidth/2);
		msgBox.msgBoxTop = document.body.scrollTop + msgBox.coordCenter[1] - Math.round(msgBox.msgBoxHeight/2);
		
		// reposition msgBox
		msgBox.mBox.style.left = msgBox.msgBoxLeft;
		msgBox.mBox.style.top = msgBox.msgBoxTop;
	};
}

// create instance of the msgBox object, warning: multiple instances will not work and the instance must be named as msgBox
var msgBox = new messageBox();