/***********************************************************/
/*                    tinyTips Plugin                      */
/*                      Version: 1.1                       */
/*                      Mike Merritt                       */
/*                 Updated: Mar 2nd, 2010                  */
/***********************************************************/

(function($){  
  $.fn.tinyTips = function (tipColor, supCont) {
    
    if (tipColor === 'null') {
      tipColor = 'light';
    } 
    
    var tipName = tipColor + 'Tip';
    var show_flg = 0;
    
    /* 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="' + tipName + '"><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 variables;
    var tinyTip;
    var tText;
    
    // When we hover over the element that we want the tooltip applied to
    $(this).mouseenter(function() {
    
      if(show_flg == 0){
        // 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);
        var divTip = 'div.'+tipName;
        tinyTip = $(divTip);
        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;
        }
        $(divTip + ' .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() + 2;
        var xOffset = (tinyTip.width() / 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;
        
        // 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);
      }
      
      show_flg = 0;
      
    }, function() {
      
      $(this).attr('title', tText);
    
      // Fade the tooltip out once the mouse moves away and then remove it from the DOM.
      tinyTip.fadeOut(animSpeed, function() {
        if(show_flg == 0){
          $(this).remove();
        }
      });
      
    });
    
    $(this).mouseleave(function() {
      if(show_flg == 0){
        tinyTip.hide();
      }
      show_flg = 0;
    });
    
    // When we hover over the element that we want the tooltip applied to
    $(this).mousedown(function() {
    
      if(show_flg == 0){
        // 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);
        var divTip = 'div.'+tipName;
        tinyTip = $(divTip);
        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;
        }
        $(divTip + ' .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() + 2;
        var xOffset = (tinyTip.width() / 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;
        
        // 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);
        
        show_flg = 1;
      }else{
        tinyTip.hide();
        show_flg = 0;
      }
      
    });
    
  }

})(jQuery);