var HoveredTooltip = new Class({

	Implements: [Events, Options],

	options: {
		altClass: '',
		type: 'top',
		position: 'topRight',
		egde: 'bottomRight',
		timneout: 0,
		rollover: true
	},

	initialize: function(options){
		this.setOptions(options);
		this.showTimeout;
		this.hideTimeout;

		this.container = new Element('div', {
			'class': 'hovered-tooltip ' + this.options.altClass,
			html: '<div class="arrow"></div>'
		});

		this.content = new Element('div', {
			'class': 'tooltip-content'
		}).inject(this.container);

		this.container.hide().inject(document.body);
	},

	show: function(content, elem){
		this.hide();

		elem.addEvents({
			'mouseenter': function(e){
				clearTimeout(this.hideTimeout);
				e.stop();

				this.showTimeout = setTimeout(function(){
					// Insert Element or string
					if (typeOf(content) === 'element') {
						this.content.empty().adopt(content);
					} else {
						this.content.set('html', content);
					}

					this.container.show();
					this.container.position({
						relativeTo: elem,
						position: this.options.position,
						edge: this.options.edge
					});
				}.bind(this), this.options.timeout);
			}.bind(this),

			'mouseleave': function(e){
				e.stop();

				if(this.options.rollover){
					clearTimeout(this.showTimeout);
				} else {
					this.hide();
				}
			}.bind(this),

			'mouseover': function(e){
				e.stop();
			}
		});

		this.container.addEvents({
			'mouseenter': function(e){
				e.stop();
			}.bind(this),

			'mouseleave': function(e){
				e.stop()
			}.bind(this),

			'mouseover': function(e){
				e.stop();
			}
		});

		document.addEvent('mouseover', function(){
			clearTimeout(this.showTimeout);
			this.hideTimeout = setTimeout(function(){
				this.hide();
			}.bind(this), this.options.timeout);
		}.bind(this));
	},

	hide: function(){
		this.container.hide();
	}

});