/** * 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 */
jQuery.fn.codaBubble = function(opts){
    var bubble = this;
    opts = jQuery.extend({
        distances : [20],
        leftShifts : [30],
        bubbleTimes : [400],
        hideDelays : [0],
        bubbleWidths : [200],
        bubbleImagesPath : "",
        msieFix : true,
        msiePop : true
    },opts||{});
    
    function bubbleHtmlWrapper(bubbleHtml) {
    // style="opacity: 0; display: none;"
        return '<table class="bubble" style="opacity: 0; display: none;">' +
            '<tr><td class="corner topleft"/><td class="top"/>' +
            '<td class="corner topright"/></tr>' +
            '<tr><td class="left"/><td class="bubble_content">' +  bubbleHtml  +
            '</td><td class="right"/></tr>' +
            '<tr><td class="corner bottomleft"/><td class="bottom">' +
            '<img class="bottom" style="display: block;" alt="" /></td>' +
            '<td class="corner bottomright"/></tr></table>';
    }
    
    return jQuery(bubble).each(function (i) {
    
        var distance = 20;
        var time = 400;
        var hideDelay = 0;
        var bubbleWidth = 200;
        var leftShift = 30;
        
        if(opts.distances[i] == undefined)
            distance = opts.distances[0];
        else
            distance = opts.distances[i];
        if(opts.bubbleTimes[i] == undefined)
            time = opts.bubbleTimes[0];
        else
            time = opts.bubbleTimes[i];
        if(opts.hideDelays[i] == undefined)
            hideDelay = opts.hideDelays[0];
        else
            hideDelay = opts.hideDelays[i];
        if(opts.bubbleWidths[i] == undefined)
            bubbleWidth = opts.bubbleWidths[0];
        else
            bubbleWidth = opts.bubbleWidths[i];
        if(opts.leftShifts[i] == undefined)
            leftShift = opts.leftShifts[0];
        else
            leftShift = opts.leftShifts[i];
        
        var bubbleHtml = jQuery('.popBubble', this).html();
        jQuery('.popBubble', this).hide().after(bubbleHtmlWrapper(bubbleHtml));
        
        var hideDelayTimer = null;
        var beingShown = false;
        var shown = false;
        var trigger = jQuery('.trigger', this);
        var popup = jQuery('.bubble', this);
        
        popup.css('opacity', 0);
        popup.css('left', leftShift);
        if (opts.msieFix) {
            if ($.browser.msie) {
                jQuery('.bubble td.top').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-2.gif)');
                jQuery('.bubble td.topleft').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-1.gif)');
                jQuery('.bubble td.topright').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-3.gif)');
                jQuery('.bubble td.left').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-4.gif)');
                jQuery('.bubble td.right').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-5.gif)');
                jQuery('.bubble td.bottom').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-7.gif)');
                jQuery('.bubble td.bottomleft').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-6.gif)');
                jQuery('.bubble td.bottomright').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-8.gif)');
                jQuery('.bubble td.bottom img').attr('src', opts.bubbleImagesPath  + '/bubble-tail.gif');
            }
            else {
                jQuery('.bubble td.topleft').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-1.png)');
                jQuery('.bubble td.top').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-2.png)');
                jQuery('.bubble td.topright').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-3.png)');
                jQuery('.bubble td.left').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-4.png)');
                jQuery('.bubble td.right').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-5.png)');
                jQuery('.bubble td.bottomleft').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-6.png)');
                jQuery('.bubble td.bottom').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-7.png)');
                jQuery('.bubble td.bottomright').css('background-image', 'url(' + opts.bubbleImagesPath  + '/bubble-8.png)');
                jQuery('.bubble td.bottom img').attr('src', opts.bubbleImagesPath  + '/bubble-tail.png');
            }
        }
            
        jQuery([trigger.get(0), popup.get(0)]).mouseover(function () {
            if(bubbleWidth != undefined)
                jQuery(popup).css("width", bubbleWidth + "px");
            if (hideDelayTimer)
                clearTimeout(hideDelayTimer);
            if (beingShown || shown) {
                return;
            } else {
                beingShown = true;
                
                popup.css({
                    top: - jQuery('.bubble').innerHeight() / 2,
                    left: leftShift,
                    display: 'block' }).animate({ top: '-=' + distance + 'px',opacity: 1 }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                }
            }).mouseout(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    popup.animate({
                        top: '+=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        popup.css('display', 'none');
                    });
                }, hideDelay);
            });
            if (!opts.msiePop && $.browser.msie) {
                jQuery(popup).remove();
            }
        });
    }