var Tooltip = new Class({
	Implements: [Options, Events],
	
	options: {
		title: function(){
			return this.get('title');
		},
		text: function(){
			return this.get('alt');
		},
		position: {
			x: 0,
			y: 0
		}
	},
	
	initialize: function(element, options){
		this.element = $(element);
		this.setOptions(options);
		
		this.title = $type(this.options.title) == 'function' ? this.options.title.run([], this.element) : this.options.title;
		this.text = $type(this.options.text) == 'function' ? this.options.text.run([], this.element) : this.options.text;
		
		// Create tooltip
		this.tooltip = this.create.run([this.title, this.text], this.element);
		
		// Set tooltip styles
		var coordinates = this.element.getCoordinates();
		this.tooltip.setStyles({
			'top': this.options.position.y,
			'left': this.options.position.x,
			'opacity': 0
		});
		
		// Inject tooltip
		this.tooltip.inject(this.element, 'after');

		// Add events
		this.element.addEvents({
			'mouseenter': function(){
				this.tooltip.fade(1);
			}.bind(this),
			'mouseleave': function(){
				this.tooltip.fade(0);
			}.bind(this)
		});
	},
	
	create: function(title, text){
		var wrapper = new Element('div', {
			'class': 'tip',
			'html': '<div class="tip-top"><div>'
		});
		
		var content = new Element('div', {
			'class': 'tip-content'
		}).inject(wrapper);
		
		if (title){
			new Element('div', {
				'class': 'tip-title',
				'text': title
			}).inject(content);
		}
		
		if (text){
			new Element('div', {
				'class': 'tip-text',
				'text': text
			}).inject(content);
		}
		
		return wrapper;
	}
});