/**
 * CodaBubble extension for jQuery library
 *
 * Creates tooltips "coda bubble" style
 *
 * @author Carlo Tasca
 * @version 1.0
 *
 * OPTIONS:
 *
 * @param {array} distances Distances of bubbles from their triggers 
 * @param {array} leftShifts Left positions of bubbles
 * @param {array} bubbleTimes Life times for bubbles
 * @param {array} hideDelays Hide delay times for bubbles
 * @param {array} bubbleWidths Hide delay times for bubbles
 * @param {string} bubbleImagesPath Path to skin for bubbles
 * @param {boolean} msieFix Fix for IE png rendering. Replaces pngs with gifs if true (default)
 * @param {boolean} msiePop If false removes bubble in IE
 */

/*
   <div class="coda_bubble">
      <div>
         <p class="trigger">Trigger Bubble</p>
      </div>
      <div class="bubble_html">
         [BUBBLE CONTENT]
      </div>
   </div>
*/

jQuery.fn.codaBubble = function(opts){
   var bubbleTriggers = this;
   opts = jQuery.extend({
      distances : [0],
      leftShifts : [-26],
      bubbleTimes : [400],
      hideDelays : [0],
      bubbleWidths : [300],
      bubbleImagesPath : "images/skins/classic",
      msieFix : true,
      msiePop : true
   },opts||{});

   function bubbleHtmlWrapper(bubbleIndex, bubbleHtml)
   {
     return '<table class="codabubble codabubble' + bubbleIndex + '" style="opacity: 0; top: -120px; left: -33px; display: none;"><tr><td class="bubble_corner bubble_topleft"/><td class="bubble_top"/><td class="bubble_corner bubble_topright"/></tr><tr><td class="bubble_left">&nbsp;</td><td class="bubble_content">' +  bubbleHtml  + '</td><td class="bubble_right">&nbsp;</td></tr><tr><td class="bubble_corner bubble_bottomleft"/><td class="bubble_bottom"><div><!-- --></div></td><td class="bubble_corner bubble_bottomright"/></tr></table>';
   }
   return jQuery(function () {
      bubbleTriggers.each(function(i) {
         var distance = opts.distances[0];
         var time = opts.bubbleTimes[0];
         var hideDelay = opts.hideDelays[0];
         var hideDelayTimer = null;
         var beingShown = false;
         var shown = false;

         var bubbleIndex = i;

         var bubbleTrigger = jQuery(bubbleTriggers[bubbleIndex]);
         var bubbleContent = jQuery(bubbleTrigger).attr('title');

         jQuery(bubbleTrigger).removeAttr('title');
         jQuery(bubbleTrigger).wrap('<div class="coda_bubble coda_bubble' + bubbleIndex + '"></div>');
         jQuery(bubbleHtmlWrapper(bubbleIndex, bubbleContent)).appendTo('body');

         var triggerWidth = jQuery(bubbleTrigger).width();
         var triggerHeight = jQuery(bubbleTrigger).height();

         bubbleTrigger = jQuery('.coda_bubble' + bubbleIndex);
         jQuery(bubbleTrigger).css({'z-index': '99', 'cursor': 'help'});
         
         var bubblePopup = jQuery('.codabubble' + bubbleIndex);
         jQuery(bubblePopup).css({'z-index': '98', 'opacity': '0'});

         if (jQuery(bubblePopup).width() > opts.bubbleWidths[0])
         {
            jQuery(bubblePopup).css("width", opts.bubbleWidths[0] + "px");
         }

         // Debugging
         //alert(bubbleIndex + "|" + jQuery(bubbleTrigger) + "|" + bubbleContent + "|" + jQuery(bubblePopup).html() + "|");

         jQuery(bubbleTrigger).bind('mouseover', 
         function () {
            if (hideDelayTimer)
            {
               clearTimeout(hideDelayTimer);
            }
            if (beingShown || shown)
            {
               return;
            }
            else
            {
               beingShown = true;

               var triggerPos = jQuery(this).offset();
               var bubbleTop = triggerPos.top - jQuery(bubblePopup).height() + 10;
               var bubbleLeft = triggerPos.left + opts.leftShifts[0];

               jQuery(bubbleTrigger).css('z-index', '101');
               bubblePopup.css({'z-index': '100', top: (bubbleTop + 10) + 'px', left: bubbleLeft + 'px', display: 'block'})
                  .animate({top: (bubbleTop - distance) + 'px', opacity: 1}, time, 'swing', 
                     function() {
                        beingShown = false;
                        shown = true;
                     }
               );
            }
         });

         jQuery(bubbleTrigger).siblings('.inputbox').bind('focus', 
         function () {
            jQuery(bubbleTrigger).trigger('mouseover');
         });

         jQuery(bubbleTrigger).siblings('.inputbox').bind('blur', 
         function () {
            jQuery(bubbleTrigger).trigger('mouseout');
         });

         jQuery(bubbleTrigger).bind('mouseout', function () {
            if (hideDelayTimer)
            {
               clearTimeout(hideDelayTimer);
            }
            var triggerPos = jQuery(this).offset();
            var bubbleTop = triggerPos.top - jQuery(bubblePopup).height() + 10;
            var bubbleLeft = triggerPos.left + opts.leftShifts[0];
            hideDelayTimer = setTimeout(function () {
               hideDelayTimer = null;
               jQuery(bubbleTrigger).css('z-index', '99');
               bubblePopup.animate({top: (bubbleTop - 20) + 'px', opacity: 0}, time, 'swing', 
                  function (){
                     shown = false;
                     bubblePopup.css({
                        'z-index': '98',
                        'display': 'none', 
                        'top': (bubbleTop + 10)
                     });
                  }
               );
            }, hideDelay);
         });

         if (!opts.msiePop && jQuery.browser.msie)
         {
            jQuery(bubblePopup).remove();
         }
      });

      //jQuery('.codabubble td.bubble_bottom img', this).attr('src', opts.bubbleImagesPath + '/bubble-tail2.png');
      if (opts.msieFix)
      {
         if (jQuery.browser.msie)
         {
            jQuery('.codabubble td.bubble_topleft').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-1.gif)');
            jQuery('.codabubble td.bubble_top').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-2.gif)');
            jQuery('.codabubble td.bubble_topright').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-3.gif)');
            jQuery('.codabubble td.bubble_left').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-4.gif)');
            jQuery('.codabubble td.bubble_right').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-5.gif)');
            jQuery('.codabubble td.bubble_bottomleft').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-6.gif)');
            jQuery('.codabubble td.bubble_bottom').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-7.gif)');
            jQuery('.codabubble td.bubble_bottomright').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-8.gif)');
            jQuery('.codabubble td.bubble_bottom div').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-tail2.gif)');
         }
      }
   });
}