// JavaScript Document

tooltip = new Tooltip();

window.addEvent('domready', tooltip.initTooltips);
									 
function Tooltip()
{
	this.initTooltips = function()
	{
		this.tooltips = Array();
	
		var list = $$('.showTooltip');
				
		list.each(function(element) 
		{	 
			var caption = element.getProperty('title');
			element.removeProperty('title');
			var tooltip = new Element('div', 
			{
				'styles':
				{
					'opacity':0
				},
				'class': 'Tooltip' 
			});
			var tooltipText = new Element('div', { 'class': 'TooltipText' });		
			tooltipText.setHTML(caption);
			tooltipText.injectInside(tooltip);
			tooltip.injectAfter('wrapper');
		 
			var fx = new Fx.Styles(tooltip, {duration:1000, wait:false});
		 
			element.addEvent('focus', function(){
				positionTooltips();						
				fx.start(
				{
					'opacity': 1
				});
			});
		 
			element.addEvent('blur', function(){
				fx.start(
				{
					'opacity': 0
				});
			});
			
			this.tooltips.include(tooltip);
		 
		});
		
		positionTooltips();
		window.addEvent('resize', positionTooltips);
	};
	
	positionTooltips = function()
	{
		var list = $$('.showTooltip');
		list.each(function(element, index) 
		{
			tooltips[index].setStyle('top', (element.getTop() + element.getSize().size.y) + 'px');
			tooltips[index].setStyle('left', element.getLeft() + 'px');
		});
	}
}