var Prototip = Class.create();

Prototip.prototype = {
	
	initialize:function(config)
	{
		document.observe('dom:loaded', this.onReady.bind(this));
		Object.extend(this.config, config);	
		this.titleTip = '';			
	},
	
	config: {},
	tooltip: null,
	elems: null,	
	
	onReady: function()
	{		
		this.tooltip = $(this.config.tplHTML);
		this.elems = $$(this.config.selector);
		
		if (this.elems)
		{
			this.elems.each(function (el) {
				this.setCatcher(el)
			}.bind(this));
		}		
	},
	
	setCatcher: function(el)
	{
		Event.observe(el, 'mouseover', this._show.bind(this, el));
		Event.observe(el, 'mouseout', this._show.bind(this, el));
	},
	
	_show: function(elem)
	{
		if (!this.tooltip.visible())
		{		
			this.titleTip = elem.title;
			elem.title = '';
			$('tooltip-text').update(this.titleTip);

			var topPos = Utils.getTopPos(elem)  - this.tooltip.getHeight() - 15;
			var width = this.tooltip.getWidth();
			while (topPos < 30)
			{
				width += 50;
				this.tooltip.setStyle({'width': width + 'px'});
				topPos = Utils.getTopPos(elem)  - this.tooltip.getHeight() - 15;
			}
			
			this.tooltip.setStyle({
			 	'position': 'absolute',
				'left': Utils.getLeftPos(elem) - 5 + 'px',
				'top': Utils.getTopPos(elem)  - this.tooltip.getHeight() - 15 + 'px' 
		});			
		}
		else
		{		
			elem.title = this.titleTip;
			this.titleTip = '';
		}
		
		this.tooltip.toggle();		
	},
	stopWatching: function(elem)
	{
		Event.stopObserving(elem, 'mouseover');
		Event.stopObserving(elem, 'mouseout');
		this.titleTip = '';
		this.tooltip.hide();
	}	
};