function Bubble(id,className,innerHTML,position,target){
	this.id = id ? id : '';
	this.className = className ? className : '';
	this.innerHTML = innerHTML ? innerHTML : '';
	this.position = position ? position : 'left';
	this.offsetX = 0;
	this.offsetY = 0;
	this.target = target;
	
	this.show = function(){
		var elm = document.getElementById(this.id);
		
		if(!elm){
			elm = Builder.node('div',{className : 'bubble', id : this.id}, [ 
					Builder.node('div',{className : this.className},[
						Builder.node('div',{className : 'c1'}),
						Builder.node('div',{className : 'c2'}, [Builder.node('img',{src : 'img/bubble/spacer.gif'})]),
						Builder.node('div',{className : 'c3'}),
						Builder.node('div',{className : 'c4'}, [Builder.node('img',{src : 'img/bubble/spacer.gif'})]),
						Builder.node('div',{className : 'c5'},[
							Builder.node('table',{},[
								Builder.node('tbody',{},[
									Builder.node('tr',{},[
										Builder.node('td',{className :'content_img'}),
										Builder.node('td',{className :'content_text'})
									])
								])	
							])	
						]),
						Builder.node('div',{className : 'c6'}, [Builder.node('img',{src : 'img/bubble/spacer.gif'})]),
						Builder.node('div',{className : 'c7'}),
						Builder.node('div',{className : 'c8'}, [Builder.node('img',{src : 'img/bubble/spacer.gif'})]),
						Builder.node('div',{className : 'c9'})
					])
				]);						 
		
			document.body.appendChild(elm)
		}else{
			elm.getElementsByTagName('div')[0].className = this.className;
		}
		elm.getElementsByTagName('td')[1].innerHTML = this.innerHTML.replace(/\r/g,'<br/>');
		
		var pos_x = 0; pos_y = 0; pos = this.getPosition(target);		
		var d_elm = this.getDimentions(elm), d_target = this.getDimentions(target);

		switch(this.position){
			case 'left'		: pos_x -= d_elm.width; pos_y -= (d_target.height/2);  break;
			case 'right'	: pos_x += d_target.width + 10; pos_y -= (d_target.height/2);  break;
			case 'top'		: pos_x -= (Math.abs(d_elm.width - d_target.width) / 2); pos_y -= (d_elm.height + 5);  break;
			case 'bottom'	: pos_x -= (Math.abs(d_elm.width - d_target.width) / 2); pos_y += (d_target.height + 10);  break;		
		}				

		elm.style.top =(pos.top + pos_y + this.offsetY) + 'px';
		elm.style.left =(pos.left + pos_x + this.offsetX) + 'px';
		elm.style.visibility = 'visible';
	}
	
	this.hide = function(){
		var elm = document.getElementById(this.id);
		if(elm){
			elm.style.visibility = 'hidden';

			elm.style.top = '-1000px';
			elm.style.left = '-1000px';
		}
	}
	
	this.getPosition = function(obj){
		obj = !obj ? this.target : obj;

		var c_top = 0, c_left = 0;
		
		if(obj && obj.offsetParent){					
			do{
				c_top += obj.offsetTop;
				c_left += obj.offsetLeft;
			}while(obj = obj.offsetParent)
		}			
		
		return {top : c_top, left : c_left};
	}
	
	this.getDimentions = function(obj){
		obj = !obj ? this.target : obj;

		var c_width = 0, c_height = 0;
		
		if(obj){					
			if(obj.offsetWidth){
				c_width = obj.offsetWidth;
				c_height = obj.offsetHeight;
			}else if(obj.clentWidth){
				c_width = obj.clentWidth;
				c_height = obj.clientHeight;
			}
		}			
		return {width : c_width, height : c_height};
	}

}

