/* Based on a script from here: http://www.hunlock.com/blogs/Snippets:_Howto_Grey-Out_The_Screen */
var myAlert ='';

/* The screen object */
function ModalScreen () {
	var numWidth
	if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
		numWidth = document.body.scrollWidth;
		var pageWidth = document.body.scrollWidth+'px';
	}
	else if( document.body.offsetWidth ) {
		var pageWidth = document.body.offsetWidth+'px';
		numWidth = document.body.offsetWidth;
	}
	else {
		var pageWidth='100%';
		numWidth = 100;
	}
	var pageHeight = 100 + '%';
	/* Setting the screen block style: */
	this.numWidth = numWidth;
	this.screenBlock = document.createElement('div');
	this.screenBlock.style.width = pageWidth;
	this.screenBlock.style.height = pageHeight;
	this.screenBlock.style.position='fixed';                 // Position absolutely
	this.screenBlock.style.top='0px';                           // In the top
	this.screenBlock.style.left='0px';                          // Left corner of the page
	this.screenBlock.style.overflow='hidden';                   // Try to avoid making scroll bars
	this.screenBlock.style.display='none';                      // Start out Hidden
	this.screenBlock.id='darkenScreenObject';
	this.documentBody = document.getElementsByTagName("body")[0];
}

ModalScreen.prototype.append = function (displayOptions) {
	/* Getting the screen block properties: */
	/* Pass true to gray out screen, false to ungray
	/* options are optional.  This is a JSON object with the following (optional) properties
	/* opacity:0-100         // Lower number = less grayout higher = more of a blackout
	/* zindex: #             // HTML elements with a higher zindex appear on top of the gray out
	/* bgcolor: (#xxxxxx)    // Standard RGB Hex color code
	/* grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
	/* Because options is JSON opacity/zindex/bgcolor are all optional and can appear
	/* in any order.  Pass only the properties you need to set.*/
	var displayOptions = displayOptions || {};
	var zindex = displayOptions.zindex || 50;
	var opacity = displayOptions.opacity || 70;
	var opaque = (opacity / 100);
	var bgcolor = displayOptions.bgcolor || '#efefef';
	/* Getting the screen width and height */

	this.screenBlock.style.opacity = opaque;
	this.screenBlock.style.MozOpacity = opaque;
	this.screenBlock.style.filter = 'alpha(opacity=' + opacity + ')';
	this.screenBlock.style.zIndex = zindex;
	this.screenBlock.style.backgroundColor = bgcolor;
	this.screenBlock.style.display ='block';
	this.documentBody.appendChild(this.screenBlock);
}

/* The modal box object */
function ModalBox() {
	this.boxWidth = 250;
	this.boxHeight = 100;
	this.box = document.createElement('div');
	this.box.style.left = '50%';
	this.box.style.width = this.boxWidth + "px";
	this.box.style.height = this.boxHeight + "px";
	this.box.style.position = 'fixed';
	this.box.id = 'alertBox';
	this.box.style.display = 'none';
}

ModalBox.prototype.append = function() {
	this.myModalScreen = new ModalScreen();
	var screenWidth = this.myModalScreen.numWidth;
	this.box.style.top = '30%';
	this.box.style.left = (screenWidth - this.boxWidth)/2 + 'px';
	this.box.onclick = hideModalDialogBox;
	this.box.style.zIndex = 100;
	this.myModalScreen.append();
	this.myModalScreen.documentBody.appendChild(this.box);
}

ModalBox.prototype.show = function(message) {
	$(this.box.id).fade('hide');
	this.box.innerHTML = '<h3>Alert:</h3>' + message + '<p class="button">close</p>';
	this.box.style.display = 'block';
	this.myModalScreen.screenBlock.style.display = 'block';
	$(this.myModalScreen.screenBlock.id).fade('0.5');
	$(this.box.id).fade('in');
}

ModalBox.prototype.hide = function() {
	$(this.myModalScreen.screenBlock.id).fade('out');
	$(this.box.id).fade('out');
	this.myModalScreen.screenBlock.style.display = 'none';
}