//var tooltip = $('.tooltip')
//var tooltipContent = $('.tooltip .content');

/* 
 * function that set all elements which must have tooltip on hover with "tooltiped class"
 * and append the "tooltip" containers on body (for absolute positioning)
*/

setTooltips = function(){
	$.each($('.tooltip'), function(){ 
								var id = ($(this).attr('class').split(' ')[1]);
								$('#' + id).addClass('tooltiped');
								$('#close-' + id).click(function(){ hideTooltip(id); });
							}); 
}

// function that display the tooltip
showTooltip = function(elementId, xAxis, yAxis){

	var tooltip = $('.' + elementId);
	
	tooltip.hide();
	
	tooltip.css('left', xAxis);
	tooltip.css('top', yAxis);
	
	tooltip.fadeIn();
}

//function that hides the tooltip
hideTooltip = function(elementId) {
	
	var tooltip = $('.tooltip.' + elementId);
	
	tooltip.fadeOut('fast', function(){
		tooltip.css('top', '-9999px');
		tooltip.show();
	});
}

$(document).ready(function(){
	
	$('#content').addClass('clear-after');
	setTooltips();
	
	$('.tooltiped').click(function(e) {
		var id = $(this).attr('id');
		var position = $(e.currentTarget).position();
			
		if($('.tooltip.' + id).hasClass('tooltip-left'))
		{
			showTooltip(id, position.left - ($('.' + id).width() + 50), position.top - $('.' + id)[0].offsetHeight + 20);
			//showTooltip(id, e.currentTarget.offsetLeft - ($('.' + id).width() + 50), e.currentTarget.offsetTop - $('.' + id)[0].offsetHeight + 20);
		}
		else
		{
			showTooltip(id, position.left + e.currentTarget.offsetWidth + 10, position.top - $('.' + id)[0].offsetHeight + 20);
			//showTooltip(id, e.currentTarget.offsetLeft + e.currentTarget.offsetWidth + 10, e.currentTarget.offsetTop - $('.' + id)[0].offsetHeight + 20);
		}
	});
})