var TooltipStaticCounter = 0;
var Tooltip = Class.create( {
	x: 0,
	y: 0,
	position: 'bottom',
	tooltipDiv: null,	
	arrowDiv: null,
	bodyDiv: null,
	tooltipNumber: 0,
	content: '',
	type: 'coordinates',
	element: null,
	className: '',
	
	initialize: function( param1, param2, position, content ) {
		// Set a unique tooltip number
		this.tooltipNumber = TooltipStaticCounter++;
		this.setContent( content );
		if( typeof param1 == 'object' ) {
			this.pointTo( param1['width'], param1['height'], param2 );
		} else if( typeof param1 =='string' ) {
			this.pointTo( param1, null, position );
		} else {
			this.pointTo( param1, param2, position );
		}
		
		//console.log( document.getElementsByTagName( 'body' ) );
		
		// Create the main container for the tooltip:
		this.tooltipDiv = document.createElement('div');
		this.tooltipDiv.setAttribute( 'class', 'tooltip' );
		this.tooltipDiv.setAttribute( 'id', 'tooltip_' + this.tooltipNumber );
		this.tooltipDiv.setAttribute( 'style', 'display: none; postion: absolute; z-index: 5050; top: 0; left: 0; float:left;' );
		document.body.appendChild( this.tooltipDiv );
		
		// Create the div for the arrow
		this.arrowDiv = document.createElement('div');
		this.arrowDiv.setAttribute( 'class', 'tooltip-arrow' );
		this.arrowDiv.setAttribute( 'id', 'tooltip_arrow_' + this.tooltipNumber );
		this.arrowDiv.setAttribute( 'style', 'position: absolute; z-index: 5051; top: 0; left: 0;' );
		this.tooltipDiv.appendChild( this.arrowDiv );
		
		// Create the div for the content of the tooltip
		this.bodyDiv = document.createElement('div');
		this.bodyDiv.setAttribute( 'class', 'tooltip-body' );
		this.bodyDiv.setAttribute( 'id', 'tooltip_body_' + this.tooltipNumber );
		this.bodyDiv.setAttribute( 'style', 'position: absolute; z-index: 5052; top: 0; left: 0;' );
		this.tooltipDiv.appendChild( this.bodyDiv );
		
		this.tooltipDiv = $( 'tooltip_' + this.tooltipNumber );
		//console.log(this.tooltipDiv);
		this.arrowDiv = $( 'tooltip_arrow_' + this.tooltipNumber );
		this.bodyDiv = $( 'tooltip_body_' + this.tooltipNumber );
	},
	
	setContent: function( content ) {
		this.content = content;
	},
	
	pointTo: function( x, y, position ) {
		//console.log(position);	
		if( position != null )
			this.position = position;
			
		if( typeof x == 'string' ) {
			//TODO: Zet element id om naar x/y coördinaten
			this.element = $( x );
			//console.log(this.element);
			var pos = Element.getPosition( this.element );
			//console.log(this.position);
			switch( this.position ) {
				case 'left':
					this.x = pos['left'];
					this.y = pos['top'] + ( this.element.getHeight() / 2 );
					break;
				case 'right':
					this.x = pos['left'] + this.element.getWidth();
					this.y = pos['top'] + ( this.element.getHeight() / 2 );
					break;
				case 'top':
					this.x = pos['left'] + ( this.element.getWidth() / 2 );
					this.y = pos['top'];
					break;
				case 'bottom':
					this.x = pos['left'] + ( this.element.getWidth() / 2 );
					this.y = pos['top'] + this.element.getHeight();
					break;
			}
			
			this.type = 'element';
		} else {
			this.type = 'coordinates';
			this.x = x;
			this.y = y;
		}
	},
	
	setClass: function( className ) {
		if( this.tooltipDiv.hasClassName( className ) )
			this.tooltipDiv.toggleClassName( className );
		this.className = className; 
		this.tooltipDiv.toggleClassName( className );
	},
	
	show: function() {
		this.bodyDiv.update( this.content );
		this.tooltipDiv.setStyle({display: 'block'});
		this.arrowDiv.setStyle({display: 'block'});
		//console.log(this.arrowDiv.getWidth());
		switch( this.position ) {
			case 'right':
				this.arrowDiv.setStyle( { 'width': '14px', 'height': '23px' } );
				this.arrowDiv.setStyle( {
					'top': (this.y - ( this.arrowDiv.getHeight() / 2 ) ) + 'px',
					'left' : this.x + 'px'					
				} );
				
				this.bodyDiv.setStyle( {
					'left': ( this.arrowDiv.getWidth() + this.x ) + 'px',
					'top' : ( this.y - ( this.bodyDiv.getHeight() / 2 )  ) + 'px'
				} );
				break;
				
			case 'left':
				this.arrowDiv.setStyle( {
					'top': (this.y - ( this.arrowDiv.getHeight() / 2 ) ) + 'px',
					'left' : ( this.x - this.arrowDiv.getWidth() ) + 'px'				
				} );
				
				this.bodyDiv.setStyle( {
					'top' : ( this.y - ( this.bodyDiv.getHeight() / 2 )  ) + 'px',
					'left': ( ( this.x - this.arrowDiv.getWidth() ) - this.bodyDiv.getWidth() ) + 'px'
				} );
				break;
				
			case 'top':
				this.arrowDiv.setStyle( {
					'top': this.y - this.arrowDiv.getHeight() + 'px',
					'left' : ( this.x - ( this.arrowDiv.getWidth() / 2 ) ) + 'px'		
				} );
				
				this.bodyDiv.setStyle( {
					'left': ( ( this.x - ( this.bodyDiv.getWidth() / 2 ) ) ) + 'px',
					'top' : ( this.y - this.bodyDiv.getHeight() ) - this.arrowDiv.getHeight() + 'px'
				} );
				break;
			case 'bottom':
			default:
				this.arrowDiv.setStyle( {
					'top': this.y + 'px',
					'left' : ( this.x - ( this.arrowDiv.getWidth() / 2 ) ) + 'px'		
				} );
				
				this.bodyDiv.setStyle( {
					'left': ( ( this.x - ( this.bodyDiv.getWidth() / 2 ) ) ) + 'px',
					'top' : this.y + this.arrowDiv.getHeight() + 'px'
				} );
				break;
		}
		//console.log( this.arrowDiv.getWidth() );
		this.tooltipDiv.setStyle({display: 'none'});
		this.tooltipDiv.toggleClassName( this.position );
		
		$(this.tooltipDiv).appear();
	},
	
	hide: function() {
		$( this.tooltipDiv ).fade();
	}
});

/**
var t = new Tooltip('element');
t.
document.observe( 'dom:loaded', function() {
	var t = new Tooltip( 'element', null, 'top', '<h4>LOL</h4><p>Het werkt focking gewoon super goed :D</p>' );
	t.setClass('normal');
	t.show();
} );*/