/* 
 * You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
 */

var Tooltip = Class.create();
Tooltip.prototype = {
  initialize: function(element, tool_tip, message, offSet_x, offset_y) {
    var options = Object.extend({
      default_css: false,
      margin: "0px",
	  padding: "5px",
	  backgroundColor: "#d6d6fc",
	  delta_x: 15,
	  delta_y: 15,
      zindex: 49      
    }, arguments[1] || {});

    this.element      = $(element);
    this.tool_tip     = $(tool_tip);
	this.message      = message;

    this.options      = options;

	if(offSet_x == 0 || offSet_x){
		this.setByElement = true;
		this.offSetToolTip_x = offSet_x;
		this.offSetToolTip_y = offset_y;
		this.options.delta_x = -5;
		this.options.delta_y = -5;
	}

    // hide the tool-tip by default & title attribute
    this.tool_tip.hide();
	this.element.title = "";

    this.eventMouseOver = this.showTooltip.bindAsEventListener(this);
    this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);

    this.registerEvents();
  },

  destroy: function() {
    Event.stopObserving(this.element, "mouseover", this.eventMouseOver);
    Event.stopObserving(this.element, "mouseout", this.eventMouseOut);
  },

  registerEvents: function() {
    Event.observe(this.element, "mouseover", this.eventMouseOver);
    Event.observe(this.element, "mouseout", this.eventMouseOut);
  },

  showTooltip: function(event){
  	Event.stop(event);
	// get Mouse position or elements
	
	if(this.setByElement){
	var element_position = Position.cumulativeOffset(this.element);	
	var mouse_x = element_position[0] + this.offSetToolTip_x;
	var mouse_y = element_position[1] + this.offSetToolTip_y;
	}else{
	var mouse_x = Event.pointerX(event);
	var mouse_y = Event.pointerY(event);	
	}
	
	// decide if wee need to switch sides for the tooltip
	var dimensions = Element.getDimensions( this.tool_tip );
	var element_width = dimensions.width;
	var element_height = dimensions.height;
	
	if ( (element_width + mouse_x) >= ( this.getWindowWidth() - this.options.delta_x) ){ // too big for X
		mouse_x = mouse_x - element_width;
		// apply delta to make sure that the mouse is not on the tool-tip
		mouse_x = mouse_x - this.options.delta_x;
	} else {
		mouse_x = mouse_x + this.options.delta_x;
	}
	
	if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.delta_y) ){ // too big for Y
		mouse_y = mouse_y - element_height;
	    // apply delta to make sure that the mouse is not on the tool-tip
		mouse_y = mouse_y - this.options.delta_y;
	} else {
		mouse_y = mouse_y + this.options.delta_y;
	} 
	
	// now add the copy if have it
	this.tool_tip.getElementsByClassName('toolTipMessage')[0].innerHTML = this.message;
	
	// now set the right styles
	this.setStyles(mouse_x, mouse_y);
	this.raiseTooltip();
		
	// finally show the Tooltip
	new Element.show(this.tool_tip);

  },
  
  setStyles: function(x, y){
    // set the right styles to position the tool tip
	Element.setStyle(this.tool_tip, { position:'absolute',
	 								  top:y + "px",
	 								  left:x + "px",
									  zindex:this.options.zindex
	 								});
	
	// apply default theme if wanted
	if (this.options.default_css){
	  	Element.setStyle(this.tool_tip, { margin:this.options.margin,
		 								  padding:this.options.padding,
		                                  backgroundColor:this.options.backgroundColor,
										  zindex:this.options.zindex
		 								});	
	}	
  },

  hideTooltip: function(event){
 	new Element.hide(this.tool_tip);
 	this.lowerTooltip();
  },

  getWindowHeight: function(){
	var de = document.documentElement;
	var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;	
	return h;
  },
  
  getWindowWidth: function(){
	var de = document.documentElement;
	var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	return w;
  },
  
  raiseTooltip: function(){
    Element.setStyle(this.element, { 'z-index':70});
  },
  
  lowerTooltip: function() {
    Element.setStyle(this.element, { 'z-index':50});
  }
 
}