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

// Region size
var faqtooltipRegionSizeX = 60;
var faqtooltipRegionSizeY = 60;

// Timeout
var faqtooltipTimeout = 500;

function FAQTooltip()
{
	// Find all anchors that have rel=tooltip
	var tt = $('a[rel=faqtooltip]');

	// Add event to each link
	$.each( tt, function(index, value) {
		$(value).click(function() { return false; });
		var targetDocument = $(value).attr('href') + '.tpl-plain';
		var uid = 'tooltip' + index.toString();

		attachFAQTooltip(value, uid, targetDocument);
	});
}

/*
 * @function Attach tooltip to define element
 *
 * @param element Element where to attach tooltip
 * @param uid Unique id of tooltip
 * @param targetDocument Url that will be loaded into tooltip
 * 
 */
function attachFAQTooltip(element, uid, targetDocument)
{
	var timer = null;

	$(element).mouseleave(function(e) { clearTimeout(timer); });

	$(element).mouseenter(function(e) {

		var ttId = '#' + uid;	// tooltip ID
		var ttcId = '#' + uid + '_content';	// tooltip content ID
		var ttpId = '#' + uid + '_pin';	// tooltip pin/unpin ID

		var pinImg = '<img src="' + location.protocol + '//' + location.host + '/stc/tpl/crp/img/support/faqtooltip_unpin.png" />';
		var unpinImg = '<img src="' + location.protocol + '//' + location.host + '/stc/tpl/crp/img/support/faqtooltip_pin.png" />';

		// Tooltip already exists so show him
		if ($(ttId).length && $(ttId).css('display') == 'none')
		{
			timer = setTimeout(
			function() {
				$(ttId).hide().fadeIn('slow');
			}, faqtooltipTimeout);

			return;
		}

		posX = e.pageX - faqtooltipRegionSizeX;
		posY = e.pageY - faqtooltipRegionSizeY;
		pinPosX = faqtooltipRegionSizeX;
		pinPosY = faqtooltipRegionSizeY - 10;


		ttHtml = '<div class="faqtooltip" id="' + uid + '" style="top:' + posY + 'px;left:' + posX + 'px;">';
		ttHtml+= '<div class="faqtooltip-content" style="margin:' + faqtooltipRegionSizeY + 'px ' + faqtooltipRegionSizeX + 'px;">';
		ttHtml+= '<div class="faqtooltip-pin" style="top:' + pinPosX + 'px;right:' + pinPosY + 'px" id="' + uid + '_pin">' + pinImg +'</div>';
		ttHtml+= '<div class="faqtooltip-content-in" id="' + uid + '_content">';
		ttHtml+= '</div>';
		ttHtml+= '<div class="faqtooltip-footer"></div>';
		ttHtml+= '</div>';
		ttHtml+= '</div>';

		// Append tooltip
		timer = setTimeout(
		function() {
			$('#env').after(ttHtml);
			$(ttId).hide().fadeIn('slow');
			$(ttId).data('pin', false); // tooltip is not pinned by default

			var loaderImgUrl = location.protocol + '//' + location.host + '/stc/tpl/crp/img/facebox/loading.gif';
			$(ttcId).append('<img src="' + loaderImgUrl + '" alt="Loading..." />');

			$.get(
				targetDocument,
				null,
				function(data) {
					// Display data
					$(ttcId).empty();
					$(ttcId).append(data);

					// Parse anchors. Remove tpl-plain
					$(ttcId + ' a').each(function() {
						var url = $(this).attr('href');
						$(this).attr('href', url.replace('.tpl-plain', ''));
					});
				},
				'html');


			// Pin/unpin event
			$(ttpId).click(function() {
				if ($(ttId).data('pin') == false)
				{
					// Unbind remove tooltip event
					$(ttId).unbind('mouseleave');
					$(ttId).data('pin', true); // tooltip is pinned

					$(ttpId).empty();
					$(ttpId).html(unpinImg);
				}
				else
				{
					$(ttId).mouseleave(function() {removeFAQTooltip(uid)});
					$(ttId).data('pin', false);

					$(ttpId).empty();
					$(ttpId).html(pinImg);
				}
				return false;
			});

			// Attach removetooltip event
			$(ttId).mouseleave(function() {removeFAQTooltip(uid)});
		}, faqtooltipTimeout);
	});
}

/*
 * @function Remove tooltip with given uid
 *
 * @param uid Unique id of tootlip
 * 
 */
function removeFAQTooltip(uid)
{
	// Fade tooltip out and remove it
	$('#' + uid).fadeOut('slow', function() {
		$('#' + uid).hide();
	});	
}