// MessageBox: creates dynamic message box for server response messages
function MessageBox(){
	this.fadeInc = 0.15;
	this.fadeInt = 60;
	
	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 - if 0, never times out. if closeX, user will need to click an x to hide the message- otherwise hides on mouseover
MessageBox.prototype.showMessage = function(message, type, timeout, closeX){
	//console.log(message);
	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].style.overflow = 'hidden';
	this.messages[i].className = type;
	this.messages[i].innerHTML = message;
	if (type != 'throbber'){
		if (closeX)
			this.addCloseX(i);
		else
			this.messages[i].onmouseover = function(){ that.hideMessage(i) };
	}	
	
	this.mbox.appendChild(this.messages[i]);
	
	this.fade(i, 1);
	if (type != 'throbber'){
		if (timeout !== 0)
			setTimeout(function(){ that.hideMessage(i) }, (timeout ? timeout : 5) * 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){
	this.fade(i, 0);
};
// hides all messages
MessageBox.prototype.hideAll = function(){
	for (var i in this.messages)
		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);
	
	//console.log(this.messages[i].offsetHeight, this.messages[i].clientHeight, this.messages[i].scrollHeight)
	
	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 ) + ')';
//	this.messages[i].style.height = op >= 1 ? 'auto' : (this.messages[i].scrollHeight * Math.sqrt(op)) + 'px';
//	this.animSwipeDown(this.messages[i], op, 1)
//	this.messages[i].style.fontSize = op + 'em';
	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(p){
	var that = this;
	this.mbox = document.createElement('div');
	this.mbox.className = 'responseContainer';
	(p ? p : document.body).appendChild(this.mbox);
};

MessageBox.prototype.addCloseX = function(i){
	var that = this, x = document.createElement('div');
	x.className = 'closeX';
	x.innerHTML = 'X';
	x.onclick = function(){
		that.hideMessage(i);
	};
	this.messages[i].appendChild(x);
	return x;
};

/*
MessageBox.prototype.animSwipeDown = function(ref, counter, show){
 // Backup original top/margin-top, then 'swipe' movement + clipping.
 if (show && (counter == 0))
 {
  ref._fsm_styT = ref.style.top;
  ref._fsm_styMT = ref.style.marginTop;
  ref._fsm_offT = ref.offsetTop || 0;
 }
 var cP = Math.pow(Math.sin(Math.PI * counter / 2), 0.75);
 var clipY = ref.offsetHeight * (1 - cP);
 ref.style.clip = (counter == 1 ?
  ((window.opera || navigator.userAgent.indexOf('KHTML') > -1) ? '' :
   'rect(auto, auto, auto, auto)') :
   'rect(' + clipY + 'px, ' + ref.offsetWidth + 'px, ' + ref.offsetHeight + 'px, 0)');
 if (counter == 1 || (counter < 0.01 && !show))
 {
  ref.style.top = ref._fsm_styT;
  ref.style.marginTop = ref._fsm_styMT;
 }
 else
 {
  ref.style.top = ((0 - clipY) + (ref._fsm_offT)) + 'px';
  ref.style.marginTop = '0';
 }
};
*/