/***********************************************************/
/*                    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 = 100;

        /***************************************************************************************************/
        /* 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.
            $('body').append(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.
            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() - 5;
            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).parent().offset();
            var nPos = pos;

            // Add the offsets to the tooltip position
            nPos.top = pos.top ;
            nPos.left = pos.left - tinyTip.width();

            // 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);

        }, function () {

            $(this).attr('title', tText);

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

        });

    }

})(jQuery);