var ToolTip = new Class({
	initialize: function (trigger, content, options) {
		this.setOptions({
			duration: 300,
			transition: Fx.Transitions.linear,
			wait: false,
			tooltipClass: 'yoo-tooltip',
			style: 'default',
			width: '150px',
			display: 'inline',
			mode: 'cursor',
			sticky: 0
		},
		options);
		this.open = false;
		this.trigger = $(trigger);		
		this.trigger.setStyles(this.triggerstyles());
		this.tooltip = new Element('div', {
			'class': this.options.tooltipClass,
			'styles': {
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'z-index': 10,
				'visibility': 'hidden',
				'width': this.options.width
			}
		}).injectTop(document.body);
		this.tooltip_style = new Element('div', {
			'class': this.options.style
		}).injectInside(this.tooltip);
		this.tooltip_tl = new Element('div', {
			'class': 'tooltip-tl',
			'styles': {
				'width': this.options.width
			}
		}).injectInside(this.tooltip_style);
		this.tooltip_tr = new Element('div', {
			'class': 'tooltip-tr'
		}).injectInside(this.tooltip_tl);
		this.tooltip_t = new Element('div', {
			'class': 'tooltip-t',
			'styles': {
				'height': 8
			}
		}).injectInside(this.tooltip_tr);
		this.tooltip_l = new Element('div', {
			'class': 'tooltip-l',
			'styles': {
				'width': this.options.width
			}
		}).injectAfter(this.tooltip_tl);
		this.tooltip_r = new Element('div', {
			'class': 'tooltip-r'
		}).injectInside(this.tooltip_l);
		this.tooltip_m = new Element('div', {
			'class': 'tooltip-m'
		}).injectInside(this.tooltip_r).setHTML(content);
		this.tooltip_bl = new Element('div', {
			'class': 'tooltip-bl',
			'styles': {
				'width': this.options.width
			}
		}).injectAfter(this.tooltip_l);
		this.tooltip_br = new Element('div', {
			'class': 'tooltip-br'
		}).injectInside(this.tooltip_bl);
		this.tooltip_b = new Element('div', {
			'class': 'tooltip-b'
		}).injectInside(this.tooltip_br);
		this.tooltip_arrow = new Element('div', {
			'class': 'tooltip-arrow',
			'styles': {
				'height': 23
			}
		}).injectInside(this.tooltip_t);
		if (this.options.sticky) {
			this.close = new Element('div', {
				'class': 'tooltip-close'
			}).injectInside(this.tooltip_tl)
		}
		this.fx = new Fx.Morph(this.tooltip, this.options);
		this.trigger.addEvent('mouseenter', this.show.bindWithEvent(this));
		if (this.options.sticky) {
			this.close.addEvent('mouseenter', this.hide.bindWithEvent(this))
		} else {
			this.trigger.addEvent('mouseleave', this.hide.bindWithEvent(this))
		}
	},
	show: function (event) {
		if (!this.open) {
			this.pos = this.position(event);
			this.tooltip.setStyles({
				'opacity': 0,
				'top': 80+ 'px',
				'left': this.pos.left + 'px'
			});
			this.fx.start({
				'opacity': 1,
				'top': (40) + 'px'
			});
			this.open = true
		}
	},
	hide: function (event) {
		this.fx.start({
			'opacity': 0,
			'top': 80 + 'px'
		});
		this.open = false
	},
	position: function (event) {
		var trg = this.trigger.getCoordinates();
		var tip = this.tooltip.getCoordinates();
		if (this.options.mode == 'cursor') {
			var event = new Event(event);
			trg = $extend(trg, {
				'top': event.page.y,
				'left': event.page.x,
				'width': 0
			})
		}
		return {
			'top': trg.top - (tip.height),
			'left': trg.left - (tip.width / 2) + (trg.width / 2)
		}
	},
	triggerstyles: function () {
		var styles = {
			'display': this.options.display
		};
		if (!this.trigger.getFirst()) return styles;
		var first = this.trigger.getFirst().getCoordinates();
		return $extend(styles, {
			'width': first.width
		})
	}
});
ToolTip.implement(new Options);