/**
 * Qlue QTip - Content Plugin
 *
 * @author Aaron Harding 
 * @package Qlue QTip
 * @license GNU/GPL
 *
 * This plugin will convert a basic syntax of {QlueTip title=[tooltip]}Tool Tip Text{/QlueTip} into a valid QTip.
 * The user can add extra parameters to the syntax to match their needs. For further information visit http://www.Qlue.co.uk.
 */

// Create the QlueTip class

var QlueTip = new Class({
			initialize: function( element, content, options ){
				// Set the default settings, overwriten if specified in the qluetip syntax
				this.setOptions({
						transition: Fx.Transitions.linear,
						Class: 'qTip',
						qTipStyle: 'default',
						TipPos: 'cursor',
						width: 300,
						duration: 150,
						sticky: 0,
						wait: false
								}, options );
				
				// Set open to false by default
				this.open = false;
				// Set toggle to the id of the item hovering over for QTip to appear
				this.toggle = $(element);
				// Set the style for the toggle
				this.toggle.setStyles( this.toggleStyles() );
				
				// Create the QTip element and add into the body
				this.QTip = new Element( 'div', {
										// Set the QTip class to 'default' unless specified
										'class': this.options.Class,
										'styles': {
											'position': 'absolute',
											'z-index': 999,
											'top': 0,
											'left': 0,
											'visibility': 'hidden',
											'width': 0
											}
										}).injectTop( document.body );
				
				// Create another QTip div and add into the QTip element
				this.QTip_class = new Element( 'div', {
											  'class': this.options.qTipStyle
											  }).injectInside(this.QTip);
				
				this.QTip_tl = new Element( 'div', {
										   'class': 'QTip-tl',
										   'styles': {
											   'width':this.options.width
											   }
											   }).injectInside(this.QTip_class);
				
				this.QTip_tr  = new Element( 'div', {
										   'class': 'QTip-tr'
										   }).injectInside(this.QTip_tl);
				
				this.QTip_t = new Element( 'div', {
										  'class': 'QTip-t',
										  'styles':	{
											  'height':15
											  }
										}).injectInside(this.QTip_tr);
				
				this.QTip_l = new Element( 'div', {
										  'class': 'QTip-l',
										  'styles': {
											  'width': this.options.width
											  }
										}).injectAfter(this.QTip_tl);
				
				this.QTip_r = new Element( 'div', {
										'class': 'QTip-r'
										}).injectInside(this.QTip_l);
				
				this.QTip_m = new Element( 'div', {
										  'class': 'QTip-content'
										  }).injectInside(this.QTip_r).setHTML(content);
				
				this.QTip_bl = new Element( 'div', {
										   'class': 'QTip-bl',
										   'styles': {
											   'width': this.options.width
											   }
										}).injectAfter(this.QTip_l);
				
				this.QTip_br = new Element( 'div', {
										   'class': 'QTip-br'
										   }).injectInside(this.QTip_bl);
				
				this.QTip_b = new Element( 'div', {
										  'class': 'QTip-b'
										  }).injectInside(this.QTip_br);
				
				this.QTip_arrow = new Element( 'div', {
											  'class': 'QTip-arrow',
											  'styles':	{
												  'height': 36
												  }
											}).injectInside(this.QTip_b);
				
				// If the option 'Sticky' is set to 1, insert this div for a close button
				if( this.options.sticky ){
					this.close = new Element( 'div', { 
											 'class': 'QTip-close'
											 }).injectInside(this.QTip_tl);
				}
		
		// Create the tooltip effect
		this.fx = new Fx.Styles( this.QTip, this.options );
		// Add the event mouseenter to the element this tooltip is applied to
		this.toggle.addEvent( 'mouseenter', this.show.bindWithEvent(this) );
		
		if(this.options.sticky){
			// Click to close the tooltip if sticky is set 
			this.close.addEvent( 'click', this.hide.bindWithEvent(this) );
		} else {
			// Close tooltip by removing mouse from the tooltip text
			this.toggle.addEvent( 'mouseleave', this.hide.bindWithEvent(this) )
		}
	},
	
	show: function( event ){
		
		// If it is not open, fade in the tooltip and set this.open to true
		if(!this.open){
			// Get the coordinates of the mouse
			this.coord = this.position( event );
			// Set the style to the tooltip
			this.QTip.setStyles({
								'opacity': 0,
								'top': this.coord.top +'px',
								'left': this.coord.left +'px',
								'width': 0,
								'visiblity': 'visible',
								'overflow': 'hidden',
								});

			// Start the fade in effect
			this.fx.start({
						  'opacity': 1,
						  'top': (this.coord.top -10) +'px',
						  'width': this.options.width
						  });
			
			// After faded in set this.open to true
			this.open = true;
		}
	},
	
	hide: function( event ){
		
		// Start the fade out effect then set this.open to false
		this.fx.start({
					  'opacity': 0,
					  'top': (this.coord.top +10) +'px',
					  });
		
		this.open = false;
		
	},
	
	position: function( event ){
		
		// Get the coordinates of the mouse
		var obj  = this.toggle.getCoordinates();
		// Get the coordinates of the tooltip
		var qtip = this.QTip.getCoordinates();
		
		// If tip position is set to 'cursor' change the tooltip relative to the cursor
		if( this.options.TipPos == 'cursor' ){
			var event = new Event(event);
			obj = $extend( obj, {
						  'top': event.page.y,
						  'left': event.page.x,
						  });
		} 
		
		return {
			'top': obj.top - (qtip.height),
		    'left': obj.left - (this.options.width/2) + (obj.width/2)
		}
	},
	
	toggleStyles: function(){
		
		var styles = {'display': 'inline'};
		
		if(!this.toggle.getFirst() )return styles;
		
		var first = this.toggle.getFirst().getCoordinates();
		
		return $extend(styles, {
			'width': first.width
		});
	
	}
	
});	

QlueTip.implement(new Options);