var Tooltip = Class.create();
Tooltip.prototype = {
	// -------------- variables -------------- //
	elBox:null,
	targetElement:null,

	// -------------- constructor -------------- //
	initialize : function (id){
		var box = new Element('div');
		box.setStyle({
			backgroundColor	: '#FFFF99',
			borderBottom	: '2px solid #FFCC33',
			borderTop		: '2px solid #FFCC33',
			color			: '#000',
			position		: 'absolute',
			width			: '300px',
			padding			: '.5em 1em',
			/*opacity			: .9,*/
			font			: '12px Arial'
		});
					
		document.body.appendChild(box);
		
		//document.observe('mousemove', this.onMousemove.bindAsEventListener(this));
		
		this.elBox = box;
		this.hide();
	},
	
	// -------------- methods -------------- //
	registerMany : function (elements){
		elements.each(function(el){
			// Replace the ALT and TITLE attributes for a custom one (DESCRIPTION)
			var description = el.getAttribute('alt') || el.getAttribute('title');
			el.setAttribute('description', description);
			el.setAttribute('alt', '');
			el.setAttribute('title', '');

			if (!!description){	
				el.style.cursor = 'help';
				el.observe('mouseover', this.element_onMouseover.bindAsEventListener(this));
				el.observe('mouseout', this.element_onMouseout.bindAsEventListener(this));
				el.observe('mousemove', this.onMousemove.bindAsEventListener(this));
			}
		},this);
	},
	
	show:function(){
		var text = this.targetElement.getAttribute('description');
		this.elBox.update(text);
		this.elBox.show();
	},
	hide:function(){
		this.elBox.hide();
	},
	// -------------- methods -------------- //
	onMousemove:function(e){
		var mouseX			= e.clientX,
			mouseY			= e.clientY,
			pageW			= document.viewport.getWidth(),
			pageH			= document.viewport.getHeight(),
			scrollOffsets	= document.viewport.getScrollOffsets(),
			boxW			= this.elBox.getWidth(),
			boxH			= this.elBox.getHeight(),
			posX			= 0,
			posY			= 0;

		if (mouseX+boxW > pageW)	posX = mouseX-boxW;
		else						posX = mouseX+10;
		
		if (mouseY+boxH > pageH)	posY = mouseY-boxH;
		else						posY = mouseY+10;

		this.elBox.setStyle({
			top		: posY + scrollOffsets.top + 'px',
			left	: posX + scrollOffsets.left + 'px'
		});
	},
	element_onMouseover:function(e){
		this.targetElement = e.target;
		this.show();
	},
	element_onMouseout:function(e){
		var el = e.target;
		this.hide();
	}
}