/*
Created by : jon Troth
Owned by : jonTroth.com Ltd.
Date: 2006.04.12
Version : 1.3

var tip = new LexToolTip( 'test', { text:'content', styleID:'default', constrainTipWidth: 100 } );
tip.content('new content');
tip.styleTip('default');
*/

var LexToolTip = Class.create();

LexToolTip.prototype = {

	initialize: function( _elementID, options ) 
	{
		this.options = {
			styleID: 'default',
			text: '',
			debug: '',
			constrainTipWidth: 0
		}
		Object.extend( this.options, options || {} );
		
		this.elementID = _elementID;
		this.tipID = _elementID + '-tooltip';
		this.styleID = this.options.styleID;
		this.text = this.options.text;
		this.constrainTipWidth = this.options.constrainTipWidth;
		this.debug = this.options.debug;

		$( this.elementID ).setStyle( { cursor: 'pointer' } );
		
		this.buildTip();

		this.eventMouseOver = this.showTip.bindAsEventListener( this );
		this.eventMouseOut   = this.hideTip.bindAsEventListener( this );
		this.eventMouseMove   = this.moveTip.bindAsEventListener( this );

		this.registerEvents();
	},

	registerEvents: function() {
		Event.observe( this.elementID, "mouseover", this.eventMouseOver );
		Event.observe( this.elementID, "mouseout", this.eventMouseOut );
		Event.observe( this.elementID, "mousemove", this.eventMouseMove );
	},

  	showTip: function( event ) {
		Element.show( this.tipID );
	},

  	hideTip: function( event ) {
		Element.hide( this.tipID );
	},
	
  	moveTip: function( event ) {
		
		Event.stop( event );

		var mouse_x = Event.pointerX( event );
		var mouse_y = Event.pointerY( event );
		
		var tip_dimensions = $( this.tipID ).getDimensions();
		var el_dimensions = $( this.elementID ).getDimensions();
		
		this.getInnerWindow();
		
		var tip_position_x = ( mouse_x - tip_dimensions.width ) + this.cursor_right;
		var tip_position_y = ( mouse_y - tip_dimensions.height ) - this.cursor_top;
		
		var tip_pointer_bottom = "lex-tip-bottom-pointer-right";
		var tip_pointer_top = "lex-tip-no-pointer";
		
		if( tip_position_x < this.margin_left )
		{ 
			tip_pointer_bottom = "lex-tip-bottom-pointer-left";
			tip_position_x = mouse_x - this.cursor_left; 
		}
		
		if( tip_position_y < this.margin_top )
		{ 
			tip_position_y = mouse_y + 25 + this.cursor_bottom;
			tip_pointer_top = tip_pointer_bottom.replace(/bottom/,"top");
			tip_pointer_bottom = "lex-tip-no-pointer";
		}
		
		if( this.setTipPointers )
		{
			$( 'lex-tip-top-pointer-id-' + this.tipID ).className = tip_pointer_top;
			$( 'lex-tip-bottom-pointer-id-' + this.tipID ).className = tip_pointer_bottom;
		}
		
		$( this.tipID ).setStyle( { left: tip_position_x + 'px',top: tip_position_y + 'px' } );

		if( this.debug )
		{
			$( this.debug ).innerHTML = mouse_x + " : " + mouse_y;
			$( this.debug ).innerHTML +=  "<br>Width:" + this.innerWidth + " x Height:" + this.innerHeight + "";
			$( this.debug ).innerHTML +=  "<br>tipWidth:" + tip_dimensions.width + " x tipHeight:" + tip_dimensions.height + "";
			$( this.debug ).innerHTML +=  "<br>elWidth:" + el_dimensions.width + " x elHeight:" + el_dimensions.height + "";
		}
	},
	
	buildTip: function() {
		
		if($(this.tipID)){//if this Tip already exists then skip building it and just adjust it's styling
			//$(this.tipID).setStyle({display:'none', position: 'absolute', left: '10px', top: '0px' });//we don't actually need to style things here
		}else{
			element = Builder.node( 'div', { id:this.tipID, style:'display:none; position: absolute; left: 10px; top: 0px;' } );
		}
		document.body.appendChild( element );
		this.styleTip();
	},
	
	styleTip: function( _newStyle ) {
	
		if( _newStyle ){ this.styleID = _newStyle; }
		
		if( this.constrainTipWidth ){ _tableWidth = ' width="' + this.constrainTipWidth + '" '; }else{ _tableWidth = ''; }
		
		switch( this.styleID )
		{
			case "default":

				this.setTipPointers = true;
				
				this.margin_top = 0;
				this.margin_left = 10;
				this.margin_right = 0;
				this.margin_bottom = 10;
		
				this.cursor_top = 2;
				this.cursor_left = 5;
				this.cursor_right = 5;
				this.cursor_bottom = 2;
		
				var _style = "";
				
				_style += '<table ' + _tableWidth + ' border="0" cellpadding="0" cellspacing="0" id="lex-tip-table"><tr>';
				_style += '<td width="11"><div class="lex-tip-top-left"></div></td>';
				_style += '<td><div class="lex-tip-top-middle"><div id="lex-tip-top-pointer-id-' + this.tipID + '" class="lex-tip-no-pointer"></div></div></td>';
				_style += '<td width="11"><div class="lex-tip-top-right"></div></td>';
				_style += '</tr><tr>';
				_style += '<td valign="top" class="lex-tip-middle-left">&nbsp;</td>';
				_style += '<td valign="top" class="lex-tip-middle-base"><div class="lex-tip-middle-gradient" id="lex-tip-content-id-' + this.tipID + '" align="left">'+this.text+'</div></td>';
				_style += '<td valign="top" class="lex-tip-middle-right">&nbsp;</td>';
				_style += '</tr><tr>';
				_style += '<td><div class="lex-tip-bottom-left"></div></td>';
				_style += '<td><div class="lex-tip-bottom-middle"><div id="lex-tip-bottom-pointer-id-' + this.tipID + '" class="lex-tip-bottom-pointer-right"></div></div></td>';
				_style += '<td><div class="lex-tip-bottom-right"></div></td>';
				_style += '</tr></table>';
				
			break;
		}

		$( this.tipID ).innerHTML = _style;
	},
	
	content: function( _content ) {
		$( 'lex-tip-content-id-' + this.tipID ).innerHTML = _content;
	},
	
	getInnerWindow: function() {

		this.innerWidth = 0; 
		this.innerHeight = 0;
		
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			this.innerWidth = window.innerWidth;
			this.innerHeight = window.innerHeight;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
			this.innerWidth = document.documentElement.clientWidth;
			this.innerHeight = document.documentElement.clientHeight;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			//IE 4 compatible
			this.innerWidth = document.body.clientWidth;
			this.innerHeight = document.body.clientHeight;
		}
	}
}