/**
 * BALLOON OUTPUT
 * @constructor
 * TODO:
 * <ul><li>posicionamento do balao de acordo com os cantos da janela;</li>
 * <li>icone para fechar o balao</li>
 * <li>criao do html via DOM;</li></ul>
 */
compono.Balloon = new compono.Object("Balloon");

/**
 * Posiciona o objeto
 * @param {Object} element
 * @param {Object} scope
 * @param {Object} e
 */
compono.Balloon.position = function(element, scope, e){
	var top, left, body, csst="top", cssl="right", pos;
	
	/* 	IE Standard Mode || Gecko 	(document.documentElement)
		IE Quirks Mode 				(document.body)
		http://www.evolt.org/article/document_body_doctype_switching_and_more/17/30655/index.html		*/
	body = document.documentElement ? document.documentElement : document.body;
	
	pos = this.cords(scope);
	
	top = pos.atop - element.offsetHeight;
	left = pos.aleft;
	
	if((top - body.scrollTop) < 0){
		csst = "bottom";
		top = pos.atop + scope.offsetHeight;
	}

	if((left + element.offsetWidth) > body.offsetWidth){
		cssl = "left";
		left = pos.aleft - element.offsetWidth;
	}
	
	if(element.quadrant)this.removeClassName(element.quadrant, element);
	element.quadrant = "balloon-"+csst+"-"+cssl;
	this.appendClassName(element.quadrant, element);
	
	element.style.top = top + "px";
	element.style.left = left + "px";
	
}

/**
 * Mostra o balao
 * @param {Object} scope
 * @param {Object} e
 */
compono.Balloon.show = function(scope, e){

	if(!this.base)this.base = this.getByID("message-balloon");
	if(this.base.intervalID){clearTimeout(this.base.intervalID);}
	
	this.currents = scope;	
	
	if(!this.base._title)this.base._title = this.getByTagName("h3",this.base);
	if(!this.base._text)this.base._text = this.getByTagName("p",this.base);
	
	if(scope.getAttribute("messagetitle")){
		this.base._title.innerHTML = scope.getAttribute("messageTitle");
		this.base._title.style.display="block";
	}else if(this.base._title){
		this.base._title.style.display="none";
	}
	
	if(scope.getAttribute("messagetext")){
		this.base._text.innerHTML = this.core.wiki.render(scope.getAttribute("messageText"));
		this.base._text.style.display="block";
	}else if(this.base._text){
		this.base._title.style.display="none";
	}
	
	this.appendClassName("balloon-visible",this.base);
	this.position(this.base, scope, e);
}

/**
 * Balao base
 */
compono.Balloon.base = false;

/**
 * Delay do hide em milisegundos
 */
compono.Balloon.delay = 100;

/**
 * Hash com baloes ativos
 */
compono.Balloon.currents = {};

/**
 * Fecha o balao
 * @param {Node} scope
 * @param {Event} ev
 */
compono.Balloon.hide = function(scope, ev){
	this.base.intervalID = setTimeout("compono.Balloon.afterTimeout()", this.delay);
}

compono.Balloon.afterTimeout = function(){
	this.removeClassName("balloon-visible",this.base);
	clearTimeout(this.base.intervalID);
	this.base.intervalID = -1;
}


compono.Balloon.cords=function(o){
	if(o.offsetParent){
		var s=o.offsetParent,p , x=o.offsetLeft||0, ax=0, y=o.offsetTop||0, ay=0;
		while(s){
			x+=s.offsetLeft; ax+=s.scrollLeft;
			y+=s.offsetTop; ay+=s.scrollTop;
			p=s; s=s.offsetParent;
		}
	};
	x=x||0; y=y||0; ax=(x-ax)||0; ay=(y-ay)||0;
	return {left:x, top:y, right:(x+o.offsetWidth), bottom:(y+o.offsetHeight),
			aleft:ax, atop:ay, aright:(ax+o.offsetWidth), abottom:(ay+o.offsetHeight),
			width:o.offsetWidth, height:o.offsetHeight,
			parent:p};
}