/***********************************************************/
/*                    tinyTips Plugin                      */
/*                      Version: 1.0                       */
/*                      Mike Merritt                       */
/*                 Updated: Feb 4th, 2010                  */
/***********************************************************/

(function($){
	$.fn.tinyTips = function (supCont) {

		/* User settings
		**********************************/

		// Enter the markup for your tooltips here. The wrapping div must have a class of tinyTip and
		// it must have a div with the class "content" somewhere inside of it.
		var tipFrame = '<div class="tinyTip"><div class="content"></div><div class="bottom">&nbsp;</div></div>';

		// Speed of the animations in milliseconds - 1000 = 1 second.
		var animSpeed = 1000;

		/***************************************************************************************************/
		/* End of user settings - Do not edit below this line unless you are trying to edit functionality. */
		/***************************************************************************************************/

		// Global tinyTip variable;
		var tinyTip;
		var tText;

		// When we hover over the element that we want the tooltip applied to
		$(this).hover(function() {

			// Inject the markup for the tooltip into the page and
			// set the tooltip global to the current markup and then hide it.
			$('.product-slider-box').before(tipFrame);
			tinyTip = $('div.tinyTip');
			tinyTip.hide();

			// Grab the content for the tooltip from the title attribute (or the supplied content) and
			// inject it into the markup for the current tooltip. NOTE: title attribute is used unless
			// other content is supplied instead.
			var tipCont = $(this).find(".tooltip-content").html();

			$('.tinyTip .content').html(tipCont);
			tText = $(this).attr('title');
			$(this).attr('title', '');

			// Offsets so that the tooltip is centered over the element it is being applied to but
			// raise it up above the element so it isn't covering it.
			var yOffset = $(this).height() - 10;

			var globalPos = $("#product-slider-top").offset();
			var currentListPos = $(this).parent("li").offset();

			var xOffset = (currentListPos.left - globalPos.left) - ((tinyTip.width() - $(this).parent("li").width()) / 2) + 2;

			// Grab the coordinates for the element with the tooltip and make a new copy
			// so that we can keep the original un-touched.
			var pos = $(this).offset();
			var nPos = pos;

			// Add the offsets to the tooltip position
			nPos.top = yOffset;
			nPos.left = xOffset;

			// Make sure that the tooltip has absolute positioning and a high z-index,
			// then place it at the correct spot and fade it in.
			tinyTip.css('position', 'absolute');
			tinyTip.css(nPos).show();

		}, function() {
			$(this).attr('title', tText);

			// Fade the tooltip out once the mouse moves away and then remove it from the DOM.
			$('div.tinyTip').hide(1,function() {
				$(this).remove();
			});

		});

	}

})(jQuery);