//Beautiful tooltip
var ToolTip = Class.create({
    initialize: function(element, text){
        this.w3c = document.getElementById && !document.all;
        this.ie = document.all;
        this.show = false;
        this.xOffset = 6;
        this.yOffset = 5;
        this.aspect = "";
        this.curX = 0;
        this.winWidth = 0;
        this.winHeight = 0;
        this.rightEdge = 0;
        this.bottomEdge = 0;
        this.leftEdge = 0;
        this.text = text;
        Event.observe(element, "mouseover", this.showToolTip.bindAsEventListener (this));
        Event.observe(element, "mouseout", this.hideToolTip.bindAsEventListener(this));
        Event.observe(element, "mousemove", this.move.bindAsEventListener(this));    
    },

    ieTrueBody: function(){  
        // Returns the correct body for IE
        return (document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body ;
    },

    move: function(e){
        if(this.show){
            this.curX = (this.w3c) ? e.pageX : event.x + this.ieTrueBody().scrollLeft;
            this.curY = (this.w3c) ? e.pageY : event.y + this.ieTrueBody().scrollTop;
        
            this.winWidth = this.ie && !window.opera ? this.ieTrueBody().clientWidth : window.innerWidth - 20;
            this.winHeight = this.ie && !window.opera ? this.ieTrueBody().clientHeight : window.innerHeight - 20;
        
            this.rightEdge = this.ie && !window.opera ? this.winWidth - event.clientX - this.xOffset : this.winWidth - e.clientX - this.xOffset;
            this.bottomEdge = this.ie && !window.opera ? this.winHeight - event.clientY - this.yOffset : this.winHeight - e.clientY - this.yOffset;
        
             this.leftEdge = (this.xOffset < 0) ? this.xOffset*(-1) : -1000;
        
            // Modify the object width if it is too big
            if(this.aspect.offsetWidth > this.winWidth / 3){
                this.aspect.setStyle({'width': this.winWidth / 3});
            }
    
            // If the width is not big enough for the tooltip
            if(this.rightEdge < this.aspect.offsetWidth){
                // Moves the horizontal position by its width left
                this.aspect.setStyle({'left': this.curX - this.aspect.offsetWidth + "px"});
            }
            else{
                if(this.curX < this.leftEdge){
                    this.aspect.setStyle({'left': "5px"});
                }
                else{
                    // The horizontal mouse position
                    this.aspect.setStyle({'left': this.curX + this.xOffset + "px"});
                }
            }
    
            // Same with vertical height
            if(this.bottomEdge < this.aspect.offsetHeight){
                  this.aspect.setStyle({'top': this.curY - this.aspect.offsetHeight - this.yOffset + "px"});
            }
            else{
                  this.aspect.setStyle({'top': this.curY + this.yOffset + "px"});
            }
          }
    },

    showToolTip: function(){   
		if($("toolTip")){
        // This could be improved later, by dynamically creating the div element and maintaining a reference to it  
	        if(this.w3c || this.ie){        
	            this.aspect = $("toolTip");
	            this.aspect.innerHTML = this.text; // sets the text in the tooltip
	            this.aspect.setStyle({'top': '10px'});
	            this.aspect.show();
	            this.show = true;
	        }
		}
    },

	hideToolTip: function(){
		if(this.aspect!=""){
	        this.show = false;
	        this.aspect.hide();
	        this.aspect.setStyle({'left': '-2000px'});
			this.aspect.innerHTML = '';
		}
    }
});