﻿/***********************************************************/
/*                    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 = 500;
		
		/***************************************************************************************************/
		/* 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(e) {
		
			$('body').append(tipFrame);
			tinyTip = $('div.tinyTip');

			if (supCont === 'title') {
				var tipCont = $(this).attr('title');
			} else if (supCont !== 'title') {
				var tipCont = supCont;
			}
			$('.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 = tinyTip.height()+10;
			var xOffset = (((tinyTip.width() - 10) / 2)) - ($(this).width() / 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 = pos.top - yOffset;
			nPos.left = pos.left - xOffset;
		
			//alert(nPos.top);
				
			// 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').css('z-index', '1000');
			tinyTip.css(nPos).fadeIn(animSpeed);
			tinyTip.attr('id',$(this).attr('id'));
			
			
		},function() {
			$(this).attr('title', tText);

				$('div.tinyTip').fadeOut(animSpeed, function() {
						$(this).remove();
				}); 
		});
		
		
	}
	$.fn.moveTiny = function(e){
		$(this).mousemove(function(e) {

			tinyTip = $('div.tinyTip');
			if($(e.target)!=null)
			{
				var a = $(e.target).attr('id');
				if(a!=tinyTip.attr('id'))
				{
					$('div.tinyTip').fadeOut(animSpeed, function() {
						$(this).remove();
					}); 
				}
			}

		});
	}
	$.fn.mapTips = 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="mapTip"><div class="content"></div><div class="bottom">&nbsp;</div></div>';
		
		// Speed of the animations in milliseconds - 1000 = 1 second.
		var animSpeed = 300;
		
		/***************************************************************************************************/
		/* End of user settings - Do not edit below this line unless you are trying to edit functionality. */
		/***************************************************************************************************/
		
		// Global tinyTip variable;
		var mapTip;
		var tText;
		
		
		
		
		// When we hover over the element that we want the tooltip applied to
		$(this).hover(function(e) {
		
			// Inject the markup for the tooltip into the page and
			// set the tooltip global to the current markup and then hide it.
			$('body').append(tipFrame);
			mapTip = $('div.mapTip');
			mapTip.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.
			if (supCont === 'title') {
				var tipCont = $(this).attr('title');
			} else if (supCont !== 'title') {
				var tipCont = supCont;
			}
			$('.mapTip .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 = tinyTip.height()-e.pageY;
			var yOffset = mapTip.height() + 17;
			var xOffset = (((mapTip.width() - 10) / 2)) - ($(this).width() / 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 = pos.top - yOffset;
			//nPos.left = pos.left - xOffset;
			nPos.top  = e.pageY - yOffset;
			nPos.left = e.pageX + xOffset;
			
			//alert(nPos.left);
			
			// Make sure that the tooltip has absolute positioning and a high z-index, 
			// then place it at the correct spot and fade it in.
			mapTip.css('position', 'absolute').css('z-index', '1000');
			mapTip.css(nPos).fadeIn(animSpeed);
			
		}, function() {
			
			$(this).attr('title', tText);
		
			// Fade the tooltip out once the mouse moves away and then remove it from the DOM.
			$('div.mapTip').fadeOut(animSpeed, function() {
				$(this).remove();
			});
			
		});
		
	}

})(jQuery);
