// JuicyTooltip Class
// Prototype Library needed (tested on 1.5.1)
// made by Bumbo

JuicyTooltip = Class.create();

JuicyTooltip.prototype = {
	mouseover: function(e) {
		//Event.stop(e);

		var position = this._getPosition(e);

		this.tooltip.setStyle({top:position.y + "px", left:position.x + "px"});
		
		// remmember listeners for further disabling
		this.mousemovelistener = this.mousemove.bindAsEventListener(this);
		Event.observe(this.indicator, 'mousemove', this.mousemovelistener);

		this.tooltip.show();
	},
	
	mouseout: function(e) {
		//Event.stop(e);
		
		Event.stopObserving(this.indicator, 'mousemove', this.mousemovelistener);
		
		this.tooltip.hide();
	},
	
	mousemove: function(e) {
		Event.stop(e);

		var position = this._getPosition(e);

		this.tooltip.setStyle({top:position.y + "px", left:position.x + "px"});
	},
	
	_getViewportDimensions: function() {
		var innerHeight;
		var innerWidth;
		
		if (navigator.appVersion.indexOf('MSIE') > 0) {
			innerHeight = document.body.scrollHeight;
			innerWidth = document.body.clientWidth;
		} else {
			innerHeight = document.body.offsetHeight;
			innerWidth = window.innerWidth;
		}
		return {x: innerWidth, y: innerHeight};	
	},
	
	_getPosition: function(e) {
		var dimensions = Element.getDimensions(this.tooltip);
		var viewport = this._getViewportDimensions();
		
		var position_x = Event.pointerX(e);
		var position_y = Event.pointerY(e);
		
		if ((position_x + dimensions.width + this.delta_x) > (viewport.x - 5)) {
			// switch oriantation of tooltip when it is too wide
			position_x = position_x - dimensions.width - this.delta_x;
			if (position_x < 0) position_x = 0;
		} else {
			position_x = position_x + this.delta_x;
		}
		
		if ((position_y + dimensions.height + this.delta_y) > (viewport.y - 5)) {
			// try to stay in the viewport
			position_y = viewport.y - dimensions.height - 5;
			if (position_y < 0) position_y = 0;
		} else {
			position_y = position_y + this.delta_y;
		}
		return {x: position_x, y: position_y};
	},
		
	initialize: function(indicator) {
		this.indicator = indicator;
		this.indicator.addClassName('active_tooltip');
		
		// remove from content - needed for relative positioned containers
		var tooltipContent = this.indicator.next('div.show');
		if (tooltipContent) {
			if (!tooltipContent.empty()) {
				this.tooltip = $('tooltips_container').appendChild(document.createElement('div'));
				this.tooltip.className = 'tooltip';
		
				new Insertion.Bottom(this.tooltip, tooltipContent.innerHTML);
				tooltipContent.remove();
				this.tooltip.hide();
			
				// mouse offset
				this.delta_x = 10;
				this.delta_y = 10;
			
				Event.observe(this.indicator, 'mouseover', this.mouseover.bindAsEventListener(this));
				Event.observe(this.indicator, 'mouseout', this.mouseout.bindAsEventListener(this));
			}
		}
	}
}

function initJuicyTooltips() {
	// insert new container for tooltips
	new Insertion.Bottom(document.body, '<div id="tooltips_container"></div>');	
	$$('.show_tooltip').each(function(indicator, index) {
		var obj = new JuicyTooltip(indicator);
	});
}

/* using addDOMLoadEvent? */
if (typeof addDOMLoadEvent != "undefined") {
	addDOMLoadEvent(initJuicyTooltips);
} else {
	Event.observe(window, 'load', initJuicyTooltips, false);
}