var Hovertip = new Class({
	
	Implements: Options,
	
	options: {
		msg:"<h3>{title}</h3><p>{text}</p>",
		selector:'a.info',
		separator:'::',
		offset: {'x':0,'y':0},
		className:'hovertip'
	},
	
	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 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('.programlist'))?target.getParent('.programlist').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'
				});
			}.bind(this),
			'mouseleave': function(e){
				var target = ($(e.target).match(this.options.selector)) ? e.target : e.target.getParent(this.options.selector);
				target.retrieve('hoverTip').setStyle('display', 'none');
			}.bind(this)
		});
	}
});

// e usage: new Hovertip({offset:{'x':-235,'y':0}});