var Hovertip = new Class({
	
	Implements: Options,
	
	options: {
		msg:"<div class='tip-top'></div><div class='tip'><h3>{title}</h3>{text}</div><div class='tip-bottom'><a class='tip-close'></a></div>",
		selector:'a.hovertip',
		separator:'::',
		offset: {'x':-116,'y':-1},
		className:'hovertip',
		sticky: true,
		position: -1
	},
		
	initialize: function(options){
		this.setOptions(options);
		$$(this.options.selector).addEvents({
			'mouseenter': function(e){
				var target = ($(e.target).match(this.options.selector)) ? e.target : e.target.getParent(this.options.selector);
				var title = target.get('title');
				var size = window.getSize(), scroll = window.getScroll();
				var pos = target.getPosition(document.body);
				var posy = (size.y - pos.y) + this.options.offset.y;
				var posx = (pos.x) + this.options.offset.x;
				//if (Browser.Engine.trident) posy = posy - ((target.getParent('.bottominfo')) ? target.getParent('.bottominfo').getScroll().y + scroll.y : scroll.y);
				target.retrieve('hovertip', new Element('div', {
					'styles': {
						'z-index': 2000,
						'display': 'none',
						'position': 'absolute'
					},
					'class': this.options.className,
					'html': this.options.msg.substitute({
						'title': target.get('title').split(this.options.separator)[0] || "",
						'text': target.get('title').split(this.options.separator)[1] || ""
					})
				}).inject(document.body, "bottom")).setStyles({
					'display': 'block',
					bottom: posy,
					left: posx,
					top: 'auto'
				});
				document.getElement(".tip-close").addEvent('click',function(){this.closeTip(target)}.bind(this));
			}.bind(this)
		});
	},
	closeTip: function(target){
		target.retrieve('hovertip').destroy();
		target.eliminate('hovertip');
	}
});