PastelHoverTooltip.currElement = null;

/**
 * this.add(
 *     $element,
 *     {
 *     		onShow: function() {
 *     			// whether or not show tooltip on hover
 *     			// return bool
 *     		},
 *     		message: "", // message to show
 *     		topOffset: "", // additional top offset to add (can be negative)
 *     		leftOffset: "" // additional left offset to add (can be negative)
 *     
 *     }
 * );
 * @constructor
 */
function PastelHoverTooltip(selector) {

	// construct ==================================================================================

	if (selector === undefined) {
		throw ("Selector not specified!");
	}

	/**
	 * The container of the tooltips.
	 */
	var $container = $(selector);

	// fix for the case when the current element is removed from DOM while the tooltip is shown
	$(document).unbind(".pastelTooltip");
	$(document).bind("mousemove.pastelTooltip", function() {
		var $currElement = PastelHoverTooltip.currElement;
		if (($currElement instanceof jQuery) && !$currElement.is(":visible")) {
			// remove previous shown tooltips
			$("ins.id_pastel_tooltip").remove();
			PastelHoverTooltip.currElement = null;
		}
	});
	
	// ============================================================================================
	// methods ====================================================================================
	
	/**
	 * Adds hover tooltip to element.
	 * @param {jQuery} $element - the element
	 * @param {Object} options - configuration options
	 */
	this.add = function($element, options) {

		var onShow = options.onShow;
		if (onShow === undefined || !$.isFunction(onShow)) {
			onShow = function() {
				return true;
			};
		}

		var message = options.message;
		if (message === undefined) {
			message = "";
		}

		if (!($element instanceof jQuery)) {
			throw ("Unsupported type of object!");
		}

		var topOffset = options.topOffset;
		var leftOffset = options.leftOffset;

		$element.bind("mouseenter.pastelTooltip", function() {
			if (onShow($element)) {
				showMessage($element, message, topOffset, leftOffset);
			}			
		});

		$element.bind("mouseleave.pastelTooltip", function() {
			hideMessage($element);
		});
	};
	
	/**
	 * @param {jQuery} $element
	 */
	this.remove = function($element) {
		$element.unbind(".pastelTooltip");
		$element.removeData("pastelTooltip");
	};
	
	/**
	 * Add hover tooltip to an element
	 * @param {jQuery} $element
	 * @param {String} message
	 * @param {Number} topOffset
	 * @param {Number} leftOffset
	 */
	var showMessage = function($element, message, topOffset, leftOffset) {
		hideMessage($element);
		var elemLeft = $element.offset().left;
		var elemTop = $element.offset().top;
		var elemOuterHight = $element.outerHeight();
	
		// container top left - should be subtracted from the item's
		var contLeft = $container.offset().left;
		var contTop = $container.offset().top;
		var contWidth = $container.width();

		var $popup = $("<ins class='w_hunt id_pastel_tooltip'>" +
					   		"<div class='w_h_expand'>" +
					   			"<div class='w_h_text'>" + message +
									"<div class='w_h_t_l'></div>" +
									"<div class='w_h_t_r'></div>" +
									"<div class='w_h_b_l'></div>" +
									"<div class='w_h_b_r'></div>" +
								"</div>" +				
							"</div>" +	
						"</ins>");

		var popupTop = elemTop - contTop + elemOuterHight;
		if (topOffset !== undefined) {
			popupTop += parseInt(topOffset);
		}
		$popup.css("top", popupTop);
		$popup.css("left", contLeft);
		$popup.css("position", "absolute");
		$popup.css("z-index", "1102");
		$popup.css("display", "none");
		$container.append($popup);

		var popupOuterWidth = $popup.outerWidth();
		var popupLeft = 0;
		if (elemLeft - contLeft + popupOuterWidth <= contWidth) {
			popupLeft = elemLeft - contLeft;
		} else {
			var elemOuterWidth = $element.outerWidth(); 
			$popup.addClass("w_hunt_r");
			popupOuterWidth = $popup.outerWidth();
			popupLeft = elemLeft - contLeft + elemOuterWidth - popupOuterWidth;
		}
		if (leftOffset !== undefined) {
			popupLeft += parseInt(leftOffset);
		}
		$popup.css("left", popupLeft);
		$popup.css("display", "block");

		$element.data("pastelTooltip", $popup);
		PastelHoverTooltip.currElement = $element;
	};

	/**
	 * Remove hover tooltip from an element
	 * @param {jQuery} $element
	 */
	var hideMessage = function($element) {
		if ($element instanceof jQuery) {
			var $popup = $element.data("pastelTooltip");
			$element.removeData("pastelTooltip");
			if ($popup instanceof jQuery) {
				$popup.remove();
				PastelHoverTooltip.currElement = null;
			}
		}
	};
}