function ToolTip( id, actArea, debugLog ) {

	this.__class = 'ToolTip';

	this.construct = function( id, actArea, debugLog )
	{
		this._id = id;

		var parent = document.body;

		this._parent = parent;

		this._sfPopUp = new Surface( id, parent, debugLog );

		//FIXME
		this._Xoffset = 10;
		this._Yoffset = 10;

		if( actArea != null ) {

			var self = this;

			this._actArea = actArea;

			if( actArea.__isSurface ) {

				actArea.onMouseOver( function() {
					self.show( self );
				});

				actArea.onMouseOut( function() {
					self.hide( self );
				});

				actArea.onMouseMove( function( event ) {
					self.update( self, event );
				});

			}
			else {

				addEventListener( actArea, event_mouseOver, function() {
					self.show( self );
				});

				addEventListener( actArea, event_mouseOut, function() {
					self.hide( self );
				});

				addEventListener( actArea, event_mouseMove, function( event ) {
					self.update( self, event );
				});

			}
			

		}
		else except( this.__class, null, '' );
	}

	this._id = '';
	this._popUpX = 0;
	this._popUpY = 0;
	this._popUpWidth = 0;
	this._popUpHeight = 0;
	this._Xoffset = 0;
	this._Yoffset = 0;

	this._visible = false;
	this._over = false;

	this._sfPopUp = null;

	this._actArea = null;
	this._parent = null;

	this.getText = function()
	{
		return this._text;
	}

	this.setText = function( text )
	{
		this._text = text;
	}

	this._clipHorz = function( x )
	{
		if( ( x + this._popUpWidth ) > this._parent.clientWidth ) {

			return ( this._parent.clientWidth - this._popUpWidth );
		}
		else if( x < 0 ) {
			return 0;
		}
		else {
			return x;
		}
	}

	this._clipVert = function( y )
	{
		if( ( y + this._popUpHeight ) > this._parent.clientHeight ) {

			return ( this._parent.clientHeight - this._popUpHeight );
		}
		else if( y < 0 ) {
			return 0;
		}
		else {
			return y;
		}
	}


	this.update = function( self, event )
	{
		if( self ) {

			var ev = null;

			if( !event ) {

				if( window.event ) ev = window.event;
				else if( window.Event ) ev = window.Event;
				else ev = null;
			}
			else {
				ev = event;
			}


			if( ev != null ) {
				self._popUpX = ( ev.clientX + self._Xoffset + this._parent.scrollLeft );
				self._popUpY = ( ev.clientY + self._Yoffset + this._parent.scrollTop );
			}

			self._popUpX = self._clipHorz( self._popUpX );
			self._popUpY = self._clipVert( self._popUpY );


			if( self._visible == true ) {

				var sf = self._sfPopUp;

				sf.onUnlock( function( sf ) {

					sf.setX( self._popUpX );
					sf.setY( self._popUpY );

					sf.lock();

					sf.update();
					sf.unlock();

					sf.paint( true );

				});
				sf.unlock();	

				
			}

		}

	}

	this.show = function( self )
	{
		if( self ) {

			self._over = true;

			if( self._visible == false ) {

				var sf = self._sfPopUp;
				sf.onUnlock( function( sf ) {


					sf.setText( self.getText(), sfAlign_top );
					sf.optimise( true, true );
					sf.setCssClass( 'toolTip-canvas' );

					sf.lock();

					sf.onUpdate( function( sf ) {
						self._popUpWidth = sf.getWidth();
						self._popUpHeight = sf.getHeight();
					});
					sf.update();

					sf.onUnlock( function( sf ) {
						self._popUpX = self._clipHorz( self._popUpX );
						self._popUpY = self._clipVert( self._popUpY );

						sf.setX( self._popUpX );
						sf.setY( self._popUpY );

						sf.lock();

						sf.onShow( function( sf ) {
							self._visible = true;
						});

						sf.show();
						sf.unlock();
					});
					sf.unlock();

					sf.paint( true );

				});
				sf.unlock();	

				
			}
		}
		
	}

	this.hide = function( self )
	{
		if( self ) {

			self._over = false;

			if( self._visible == true ) {

				var sf = self._sfPopUp;

				sf.onUnlock( function( sf ) {

					sf.lock();

					sf.onHide( function( sf ) {
						self._visible = false;
					});

					sf.hide();
					sf.unlock();

					sf.paint( true );
				
				});
				sf.unlock();	
			}
		}
	}

	this.getId = function()
	{
		return this._id;
	}




	this.construct( id, actArea, debugLog );
}