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 : 250,
			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' : 15
			}
		}).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).set('html',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_b);
		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' : this.pos.top + 'px',
				'left' : this.pos.left + 'px'
			});
			this.fx.start( {
				'opacity' : 1,
				'top' : (this.pos.top - 10) + 'px'
			});
			this.open = true
		}
	},
	hide : function(event) {
		this.fx.start( {
			'opacity' : 0,
			'top' : (this.pos.top - 20) + '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);