var Prototip = Class.create();

Prototip.prototype = {
	
	initialize:function(config)
	{
		document.observe('dom:loaded', this.onReady.bind(this));
		Object.extend(this.config, config);				
	},
	
	config: {},
	tooltip: null,
	elems: null,
	titleTip: null,
	
	onReady: function(){
		
		this.tooltip = $(this.config.tplHTML);
		this.elems = $$(this.config.selector);
		
		if (this.elems)
		{
			this.elems.each(function(el){
							
				var ancestor = el.down('img, a, span');
				
				Event.stopObserving(ancestor, 'mouseover');
				Event.stopObserving(ancestor, 'mouseout');
				
				Event.observe(ancestor, 'mouseover', this._show.bind(this, el, ancestor));
				Event.observe(ancestor, 'mouseout', this._hide.bind(this, el, ancestor));
			}.bind(this));
		}
	},
	
	_show: function(elem, ancestor){
		if (!this.tooltip.visible())
		{
			if (elem.title.blank())
			{
				return;
			}
			
			this.tooltip.setStyle({
			 	'position': 'absolute',
				'left': Utils.getLeftPos(ancestor) + 15 + 'px',
				'top': Utils.getTopPos(ancestor) - 38 + 'px'
			});
			
			$('tooltip-text').update(this.titleTip = elem.title);
			elem.title = '';
			this.tooltip.toggle();
		}
	},
	
	_hide: function(elem, ancestor){
		if (this.tooltip.visible())
		{
			elem.title = this.titleTip;
			this.titleTip = '';
			this.tooltip.toggle();
		}		
		
	}
};