$(document).ready( function(){
	createTooltips();
});

/**
 * This function creates tooltip icons on the page.
 * To create a tooltip insert the following into your html (as attributes):
 *    (1) class='gui-tooltip'
 *    (2) For the tooltip text 'xxx': tooltip='xxx'
 *    (3) Options within a JSON object (e.g. tooltipOptions='{"offsetX":10}') 
 */
this.createTooltips = function() {    

	function getTooltipButtonHTML(id){
		return "<span class='gui-tooltip-icon' " + "id='tooltipButton_" + id + "'><img src='" + staticUrl + "/pic/tooltip-icon.png' alt='?' width='17' height='17'/></span>";
	}

	// TODO: if the tooltip is on the right, show left from the cursor
	function viewport() {
		return {
			x: $(window).scrollLeft(),
			y: $(window).scrollTop(),
			width: $(window).width(),
			height: $(window).height()
		};
	}

	// Setup an empty container for tooltip texts 
	$('body').append("<p class='gui-tooltip-container' id='tooltipHelper'></p>");
	$('#tooltipHelper').hide();

	/* Creates the tooltip icons.
	 * Current Possible parameters in the tooltipOptions JSON are:
	 *    (1) offsetX
	 *    (2) offsetY
	 *    (3) position ('br' for bottom right, 'tl' for top left etc.) 
	 */	
	$('.gui-tooltip').each( function(n){
		var offsetX = 0;
		var offsetY = 0;
		var place = 'br';

		// Getting parameters from tooltipOptions
		if ( $(this).attr('tooltipOptions') ){
			var options = jQuery.parseJSON( wicketPreparseJSON( $(this).attr('tooltipOptions') ) );
			if ( options.offsetX ) { offsetX = options.offsetX; }
			if ( options.offsetY ) { offsetY = options.offsetY; }
			if ( options.position ) { place = options.position; }
		}

		if ( (!offsetX && !offsetY && place=='br') && ( $(this).is('p') || $(this).is('div') || $(this).is('span') || $(this).is('label') ) ){
			// Creating the tooltip icons for common html block elements with default parameters
			$(this).append( ' ' + getTooltipButtonHTML(n) );

		} else { // Creating the tooltip icons for everything else
			$(this).parent().css('position','relative');
			$(this).parent().append( getTooltipButtonHTML(n) );

			var pos = $(this).position();
			var posLeft = pos.left + $(this).width() + 6 + offsetX;
			var posTop = pos.top + offsetY;

			// TODO: tl, bl, br, tr
			if ( place == 'br' || place == 'bl' ){ posTop += $(this).height() - 16; }

			$('#tooltipButton_'+n).css('position','absolute').css('left',posLeft).css('top',posTop);
		}

		// Setup the tooltip icon's parameters
		$('#tooltipButton_'+n).attr('tooltip', $(this).attr('tooltip'));
	});

	// Tooltip icon's event handler: show tooltips if mouse is over the icon
	$('.gui-tooltip-icon').hover( function(e){
		var textValue = $(this).attr('tooltip');
		textValue = textValue.replace(/{(|\/)(b|br|i|u|p)(|\/)}/g, "<$1$2$3>");
		$('#tooltipHelper').html( textValue );
		$('#tooltipHelper').fadeIn(100);
	}, function(e){
		$('#tooltipHelper').fadeOut(100);
	});

	// Positioning the tooltip
	$('.gui-tooltip-icon').mousemove(function(e){
		var yOffset = 15;
		var xOffset = 10;
		$('#tooltipHelper').css('top', (e.pageY + yOffset) + 'px').css('left', (e.pageX + xOffset) + 'px');
	});
    
};