/******************************************************
 *
 *	Purpose: Provide a nicer looking message box 
 *			 instead of using default alert box. 
 *
 *			 It will fallback to default alert box 
 *			 after best effort.
 *
 *	Instantiate with following parameters:
 *	parentID:	The element ID that this box is direct child of. 
 *			  	The parent element must have position: relative.
 *	top: 		Number of pixels from top
 *	left: 		Number of pixels from left
 *	width: 		Width of message box
 *
 *	How to use this class:
 *		If you provide top and left, the message box will
 *		be placed at those position relative to the nearest
 *		parent element having position 'relative'.
 *
 *		It is strongly recommended to set the container 
 *		with ID parentID to position 'relative'.
 *
 ******************************************************/

function MessageBox(parentID, top, left, width) {
	this.parentContainer = document.getElementById(parentID); 
	this.top = top;
	this.left = left; 
	this.width = width
	this.zIndex = 1;
	
	this.box;
	this.title;
	this.content;
	
	this.keepContent = true;

	// If parentID doesn't exist, message box cannot be created
	// It will fall-back to using window.alert().
	if (this.parentContainer) this.create();
}

MessageBox.prototype.doKeepContent = function(doKeep) {
	this.keepContent = doKeep;
}

MessageBox.prototype.setTitle = function(title) {
	if (this.box) this.title.innerHTML = title;
	else this.title = title;
}

MessageBox.prototype.setContent = function(content) {
	if (this.box) {
		if (typeof(content) == 'object') {
			content.style.display = 'block';
			
			this.content.innerHTML = '';
			this.content.appendChild(content);
		}
		else {
			this.content.innerHTML = content;
		}
	}
	else {
		this.content = content;
	}
}

MessageBox.prototype.setTop = function(top) {
	this.box.style.top = this.top = top;
}

MessageBox.prototype.setLeft = function(left) {
	this.box.style.left = this.left = left;
}

MessageBox.prototype.setWidth = function(width) {
	this.box.style.width = this.width = width;
}

MessageBox.prototype.getWidth = function() {
	return parseInt(this.box.style.width);
}

MessageBox.prototype.setZIndex = function(zIndex) {
	this.box.style.zIndex = this.zIndex = zIndex;
}

MessageBox.prototype.setSolidBackground = function() {
	this.box.style.opacity = 1;
	this.box.style.filter = 'alpha(opacity=100)';
}

// This code is also found in the eventattacher code inside MessageBox.create();
MessageBox.prototype.hide = function() {
	// Remove the content. Append it to document body
	if (this.content.firstChild) {
		var removedChild = this.content.removeChild(this.content.firstChild);
		if (removedChild.style) removedChild.style.display = 'none';
		if (removedChild.nodeName != '#text' && this.keepContent) document.body.appendChild(removedChild);
	}
	
	this.box.style.display = 'none';

	// Hack: Checks if object Overlay exists
	if (typeof(Overlay) == 'object') Overlay.hide();
}

MessageBox.prototype.display = function() {
	if (this.box) this.box.style.display = 'block';
	else window.alert(this.title + "\n\n" + this.content);
}

MessageBox.prototype.move = function(divID) {
	// Reset z-index of the div containing the messasge box to 0
	if (this.box.parentNode) this.box.parentNode.style.zIndex = 0;
		
	// Place the box inside a document element as the first child
	var parent = document.getElementById(divID);
	parent.insertBefore(this.box, parent.firstChild);	
	
	// Set the z-index of the div containing the message box to something higher than 0
	parent.style.zIndex = 10;
}

MessageBox.prototype.clear = function() {
	if (this.parentContainer) {
		this.title.style.innerHTML = '';
		this.content.style.innerHTML = '';
	}
	else {
		this.title = '';
		this.content = '';
	}
}

MessageBox.prototype.create = function() {
	// Create box elements
	var div = document.createElement('div');
		var img = document.createElement('img');
		var table = document.createElement('table');
			var tbody = document.createElement('tbody');
				var tr1 = document.createElement('tr');
					var td1 = document.createElement('td');
				var tr2 = document.createElement('tr');
					var td2 = document.createElement('td');

	// Attach the box elements appropriately
	div.appendChild(img);
	div.appendChild(table);
		table.appendChild(tbody);
			tbody.appendChild(tr1);
				tr1.appendChild(td1);
			tbody.appendChild(tr2);
				tr2.appendChild(td2);
	
	// Set box elements styles
	div.style.position = 'absolute';
	if (this.top) div.style.top = this.top;
	if (this.left) div.style.left = this.left;
	div.style.width = (this.width ? this.width : 300);
	div.style.color = '#000000';
	div.style.backgroundColor = '#ffffff';
	div.style.opacity = '0.8';
	div.style.filter = 'alpha(opacity=80)';
	div.style.border = '1px solid #006fa7';
	div.style.zIndex = this.zIndex;
	div.style.display = 'none';

	img.src = Common.HTML_ROOT + '/include/js/MessageBox/images/close.gif';
	img.title = 'Luk boksen';
	
	// The code inside add() is equivalent to MessageBox.hide();
	EventAttacher.add(img, 'click', function() {
		// Remove the content. Append it to document body
		if (td2.firstChild) {
			var removedChild = td2.removeChild(td2.firstChild);
			if (removedChild.style) removedChild.style.display = 'none';
			if (removedChild.nodeName != '#text' && this.keepContent) document.body.appendChild(removedChild);
		}
		
		div.style.display = 'none';
		
		// Hack: Checks if object Overlay and function Overlay.hide() exists
		if (typeof(Overlay) == 'object') Overlay.hide();
	});

	img.style.position = 'absolute';
	img.style.top = 0;
	img.style.right = 3;
	img.style.cursor = 'pointer';

	table.style.width = '100%';

	td1.style.verticalAlign = 'top';
	td1.style.color = '#006fa7';
	td1.style.fontSize = '18px';
	td1.style.fontWeight = 'bold';

	td2.style.padding = '5px 5px 5px 10px';
	td2.style.color = '#006fa7';
	td2.style.fontSize = '14px';
	td2.style.fontWeight = 'bold';

	// Place the box inside a document element as the first child
	this.parentContainer.insertBefore(div, this.parentContainer.firstChild);

	// Save references to the box and its content
	this.box = div;
	this.title = td1;
	this.content = td2;
}