var Tooltip = Class.create();

Tooltip.prototype = {
	initialize: function(element, tool_tip) {
		var options = Object.extend({
			min_distance_x: 5,
			min_distance_y: 5,
			delta_x: 0,
			delta_y: 0,
			zindex: 1000
		}, arguments[2] || {});

	this.element      = $(element);

	this.options      = options;
	
	// use the supplied tooltip element or create our own div
	if($(tool_tip)) {
		this.tool_tip = $(tool_tip);
	} else {
		this.tool_tip = $(document.createElement("div")); 
		document.body.appendChild(this.tool_tip);
		this.tool_tip.addClassName("tooltip");
		
		this.tool_tip.innerHTML = '<div class="top"></div><div class="middle">' + tool_tip + '</div><div class="bottom"></div>';
	}
	
	// hide the tool-tip by default
	this.tool_tip.hide();
	
	this.eventMouseOver	= this.showTooltip.bindAsEventListener(this);
	this.eventMouseOut	= this.hideTooltip.bindAsEventListener(this);
	this.eventMouseMove	= this.moveTooltip.bindAsEventListener(this);
	this.eventMouseDown	= this.hideTooltip.bindAsEventListener(this);
	
	this.registerEvents();
	},
	
	destroy: function() {
		Event.stopObserving(this.element, "mouseover", 	this.eventMouseOver);
		Event.stopObserving(this.element, "mouseout", 	this.eventMouseOut);
		Event.stopObserving(this.element, "mousemove", 	this.eventMouseMove);
		Event.stopObserving(this.element, "mousedown", 	this.eventMouseDown);
	},
	
	registerEvents: function() {
		Event.observe(this.element, "mouseover", 	this.eventMouseOver);
		Event.observe(this.element, "mouseout", 	this.eventMouseOut);
		Event.observe(this.element, "mousemove", 	this.eventMouseMove);
		Event.observe(this.element, "mousedown", 	this.eventMouseDown);
	},
	
	moveTooltip: function(event){
		Event.stop(event);
		// get Mouse position
		var mouse_x = Event.pointerX(event);
		var mouse_y = Event.pointerY(event);
	
	  // decide if we need to switch sides for the tooltip
	  var dimensions = Element.getDimensions(this.tool_tip);
	  var element_width = dimensions.width;
	  var element_height = dimensions.height;
	  
	  mouse_x = mouse_x + this.options.min_distance_x;
	  mouse_y = mouse_y + this.options.min_distance_y;
	
	  // now set the right styles
	  this.setStyles(mouse_x, mouse_y);
	},
	
	showTooltip: function(event) {
		Event.stop(event);
		this.moveTooltip(event);
		new Element.show(this.tool_tip);
		// new Effect.Appear(this.tool_tip, { duration: 0.3 });
	},
	
	setStyles: function(x, y){
	// set the right styles to position the tool tip
	Element.setStyle(this.tool_tip, {
		position:'absolute',
		top:y + this.options.delta_y + "px",
		left:x + this.options.delta_x + "px",
		zIndex:this.options.zindex
	 });
	 
	},
	
	hideTooltip: function(event){
	new Element.hide(this.tool_tip);
	//new Effect.Fade(this.tool_tip);
	},
	
	getWindowHeight: function(){
	var innerHeight;
	  if (navigator.appVersion.indexOf('MSIE')>0) {
		  innerHeight = document.body.clientHeight;
	} else {
		  innerHeight = window.innerHeight;
	}
	return innerHeight;	
	},
	
	getWindowWidth: function(){
	var innerWidth;
	  if (navigator.appVersion.indexOf('MSIE')>0) {
		  innerWidth = document.body.clientWidth;
	} else {
		  innerWidth = window.innerWidth;
	}
	return innerWidth;	
	}

}