// MessageBox: creates dynamic message box for server response messages
function MessageBox(container){
	this.fadeInc = 0.2;
	this.fadeInt = 60;
	
	this.container = container;
	this.mbox = null; // div to hold all messages
  this.timer = [];
	this.messages = [];
};

// shows a message of type pos or neg, and sets it to disappear after timeout seconds
MessageBox.prototype.showMessage = function(message, type, timeout){
	if (!type) type = 'pos';
	// create container for messages if it hasn't been done already
	if (!this.mbox)
		this.createDiv();

	var i = this.messages.length, that = this;

	// create new message div
	this.messages[i] = document.createElement('div');
	this.messages[i].style.display = 'none';
	this.messages[i].className = type;
	this.messages[i].innerHTML = message;
	if (type != 'throbber')
		this.messages[i].onmouseover = function(){ that.hideMessage(i) };
	this.mbox.appendChild(this.messages[i]);
	
	
	this.fade(i, 1);
	if (type != 'throbber'){
		setTimeout(function(){ that.hideMessage(i) }, (timeout ? timeout : 9) * 1000);
		// hide all throbbers
		for (var j = 0; j < i; j++){
			if (this.messages[j] && this.messages[j].className == 'throbber')
				this.hideMessage(j, true);
		}
	}
	
};
// hides the specified message
MessageBox.prototype.hideMessage = function(i, instant){
	if (instant){
		this.mbox.removeChild(this.messages[i]);
		this.messages[i] = null;	
	}
	else
		this.fade(i, 0);
};
// fades in or out depending on dir true or not
MessageBox.prototype.fade = function(i, dir){
	if (!this.messages[i]) return;
	var op, that = this;
	
	// get op
	if (!(op = parseFloat(this.messages[i].getAttribute('op'))))
		op = dir ? 0 : 1;
	
	//console.log('op: ',op);
	
	if (op < 0) op = 0;
	if (op > 1) op = 1;
	this.messages[i].style.opacity = op;
	this.messages[i].style.filter = 'Alpha(opacity=' + ( op * 100 ) + ')';
	if (op)
		this.messages[i].style.display = 'block';
	else 
		this.messages[i].style.display = 'none';

	// need to extract background color info from css(?)
	//console.log(this.mbox.style.backgroundColor = this.getColor(op, '#FFFFAA', '#008000'));
		
	if (dir && op < 1 || !dir && op > 0){
		// increment op
		this.messages[i].setAttribute('op', op + that.fadeInc * (dir ? 1 : -1));
		//  and call next iteration
		if (this.timer[i] != null) clearTimeout(this.timer[i]);
		this.timer[i] = setTimeout(function(){ that.fade(i, dir) }, this.fadeInt);
	}
	else if (!dir && op <= 0){
		// purge from DOM once finished
		this.mbox.removeChild(this.messages[i]);
		this.messages[i] = null;
	}
};

// creates container div for messages
MessageBox.prototype.createDiv = function(){
	var that = this;
	this.mbox = document.createElement('div');
	this.mbox.className = 'responseContainer';
	(this.container || document.body).appendChild(this.mbox);
};

/*
// convert a decimal to a hexidecimal
MessageBox.prototype.d2h = function(d){
	this.hD = "0123456789ABCDEF";
	var h = this.hD.substr(d&15,1);
	while(d>15) {d>>=4;h=this.hD.substr(d&15,1)+h;}
	return h;
};
// gets a 2 digit hex code op * 100 % in between start and end
MessageBox.prototype.getColor = function(op, start, end){
	var colors = [('' + (start == null ? '000000' : start)).replace(/^#/,''),
								 ('' + (end == null ? 'FFFFFF' : end)).replace(/^#/,'')];

	for (var i = 0; i < 2; i++)
		colors[i] = // colors[i].length > 3 ? 
								//[parseInt(colors[i].substring(0,2), 16), parseInt(colors[i].substring(2,4), 16), parseInt(colors[i].substring(4), 16)] : 
								[parseInt(colors[i].charAt(0), 16), parseInt(colors[i].charAt(1), 16), parseInt(colors[i].charAt(2), 16)];
	
	
	//console.log(start);
	//console.log(end);

	var r = '#' 
	for (i = 0; i < 3; i++)
		r += this.d2h(op * (colors[1][i] - colors[0][i]) + colors[0][i]);
	return r;
};
*/