function Dimension(element){
     this.x=-1;
     this.y=-1;
     this.w=0;
     this.h=0;
     if (element==document){
          this.x=element.body.scrollLeft;
          this.y=element.body.scrollTop;
          this.w=element.body.clientWidth;
          this.h=element.body.clientHeight;
     }else if (element!=null){
          var e=element;
          var left=e.offsetLeft;
          while ((e=e.offsetParent)!=null) {
               left+=e.offsetLeft;
          }
          var e=element;
          var top=e.offsetTop;
          while((e=e.offsetParent)!=null) {
               top+=e.offsetTop;
          }
          this.x=left;
          this.y=top;
          this.w=element.offsetWidth;
          this.h=element.offsetHeight;
     }
}


//requires: prototype, script.aculo.us and Dimension 
ToolTip = Class.create();
ToolTip.prototype = Object.extend(ToolTip,{
								  
	initialize:function(){
		
		var tooltipDiv = document.createElement('div');
		  tooltipDiv.setAttribute('id','tooltip');
		 // tooltipDiv.setAttribute('display','none');
		  tooltipDiv.style.display = 'none';
		var tooltipHeader = document.createElement('h1');
		  tooltipHeader.setAttribute('id','tooltip-header');
		  //tooltipHeader.setStyle({display:'none'});
		var tooltipText = document.createElement('p');
		  tooltipText.setAttribute('id','tooltip-text');
		var tooltipArrow = document.createElement('img');
		  tooltipArrow.setAttribute('id','tooltip-arrow');
		  tooltipArrow.setAttribute('src','/layout-images/tooltip-arrow.png');
		
		//tooltipHeader.appendChild(document.createTextNode('spinefish'));
		tooltipDiv.appendChild(tooltipHeader);
		tooltipDiv.appendChild(tooltipText);
		tooltipDiv.appendChild(tooltipArrow);
		
		document.body.appendChild(tooltipDiv);
		
		this.tooltip = tooltipDiv;
		this.tooltip.header = tooltipHeader;
		this.tooltip.text = tooltipText;
		this.tooltip.arrow = tooltipArrow;
		
		//this.tooltip.style.display = 'none';//setStyle({display:'none'})
	},
	showByEl:function(el,title,text){
		var el = $(el);
		
		var elDim = new Dimension(el);
		//title = el.getAttribute('title') || el.parentNode.getAttribute('title') ||  null;
		//console.log(el);
		if((title!=null && title!='') || (text!=null && text!=''))
			this.show(elDim.x+(elDim.w/2),elDim.y,title,text);
	},
	show: function(x,y,title,text){
		//update text
		if(title){
			Element.update(this.tooltip.header,title);
			this.tooltip.header.setStyle({display:'block'});
		}else{
			Element.update(this.tooltip.header,'');
			this.tooltip.header.setStyle({display:'none'});
		}
		if(text){
			Element.update(this.tooltip.text,text);
			this.tooltip.text.setStyle({display:'block'});
		}else{
			Element.update(this.tooltip.text,'');
			this.tooltip.text.setStyle({display:'none'});
		}
		
		//get dimensions
		var toolTipDim = Element.getDimensions(this.tooltip);
		var posX = x-(toolTipDim.width/2);
		var posY = y-toolTipDim.height-15;
		var arrowDim = Element.getDimensions(this.tooltip.arrow);
		
		
		//set position
		this.tooltip.setStyle({position:'absolute',left:posX+'px',top:posY+'px'});
		this.tooltip.arrow.setStyle({position:'absolute',left:(toolTipDim.width/2)-(arrowDim.width/2)+'px'});
		
		//if currently fading from previous hide(), then cancel
		if(this.fade)
			this.fade.cancel();
		this.appear = Effect.Appear(this.tooltip,{duration:0.3, queue:'start', to:0.9});
		//this.appear.cancel();
	},
	hide: function(){
		this.fade = Effect.Fade(this.tooltip,{duration:0.3, queue:'end', afterFinish:this.revert.bind(this)});	
		//this.hide.cancel();
	},
	revert: function(){
		if(this.tooltip.style.display = 'none'){
			Element.update(this.tooltip.text,'');
			Element.update(this.tooltip.header.update,'');
			this.tooltip.setStyle({position:'absolute',left:'0px',top:'0px',display:'none'});	
			//console.log('revert called');
		}
		
	}	
	
});