/**
 * jSimpleBubble extension for jQuery library
 *
 * Creates tooltips "coda bubble" style
 *
 * @author Vladimir Lobas
 * @version 0.1
 *
 */

jQuery.fn.jSimpleBubble = function(options){
    var objBubble = this;
    options = jQuery.extend({
        distance : [20],
        bubbleWidth : 400,
        bubbleClass: "bubble",
        triggerClass: "trigger",
        bubbleContentClass: "content",
        fadeInEvent: "mouseover",
        fadeOutEvent: "mouseout",
        onlyOne: false,
        theme : "",
        tailAlign: "center",
        template: ' \
                    <table class="{BUBBLE_CLASS}" style="width:{WIDTH}px; display:none; {IE_FILTER_SHADOW}"> \
                        <tr class="bubble_top"> \
                            <td class="bubble_top_left" style="background-image:url({IMAGE_1});"></td> \
                            <td class="bubble_top_center" style="background-image:url({IMAGE_2}); text-align:{TAIL_ALIGN};"></td> \
                            <td class="bubble_top_right" style="background-image:url({IMAGE_3});"></td> \
                        </tr> \
                        <tr class="bubble_middle"> \
                            <td class="bubble_middle_left" style="background-image:url({IMAGE_4});"></td> \
                            <td class="bubble_middle_center">{CONTENT}</td> \
                            <td class="bubble_middle_right" style="background-image:url({IMAGE_5});"></td> \
                        </tr> \
                        <tr class="bubble_bottom"> \
                            <td class="bubble_bottom_left" style="background-image:url({IMAGE_6});"></td> \
                            <td class="bubble_bottom_center" style="background-image:url({IMAGE_7});"></td> \
                            <td class="bubble_bottom_right" style="background-image:url({IMAGE_8});"></td> \
                        </tr> \
                    </table>',
        msieFix : true
    },options||{});
    
    // Replacing images
    var img_ext = '.png';
    var img_ext_path = '';
    if(options.msieFix && $.browser.msie){
        img_ext_path = 'ie/';
        img_ext = '.gif';
    }
    var output = options.template;
    for(var i = 1; i <= 8; i++){
        output = output.replace('{IMAGE_' + i + '}', '/js/jSimpleBubble/themes/' + options.theme + '/' + img_ext_path + i + img_ext);
    }
    output = output.replace('{TAIL_IMG_SRC}', '/js/jSimpleBubble/themes/' + options.theme + '/' + img_ext_path + 'tail_top' + img_ext);
    
    // Replacing css params
    output = output.replace('{WIDTH}', options.bubbleWidth);
    output = output.replace('{TAIL_ALIGN}', options.tailAlign);
    output = output.replace('{BUBBLE_CLASS}', options.bubbleClass);
    output = output.replace('{IE_FILTER_SHADOW}','filter:progid:DXImageTransform.Microsoft.Shadow(color=\'#333333\', Direction=135, Strength=2);');
    
    // Inserting content
    jQuery(objBubble).each(function(i){
        var trigger = $(this).find('.' + options.triggerClass);
        var bubbleContent = $(this).find('.' + options.bubbleContentClass);
        var output_cur = output.replace('{CONTENT}', $(bubbleContent).html());
        $(bubbleContent).remove();
        $(trigger).after(output_cur);
        var bubble = $(this).find('.' + options.bubbleClass);
		if(options.fadeInEvent=='mouseover')
			$(bubble).css('left', '145px').css('top', '70px');
		else	
			$(bubble).css('left', '-11px').css('top', '70px');
        if(options.fadeInEvent != options.fadeOutEvent){
            $(trigger).bind(options.fadeInEvent, function(){
                if(options.onlyOne && !$(trigger).next().hasClass('opened')){
                    jQuery(objBubble).find('.opened').animate({
                        opacity: 0,
                        top: '70px'
                    }, 500, 'swing').removeClass('opened');
                }
                if(!$(bubble).hasClass('opened')){
                    $(bubble).addClass('opened');
                    $(bubble).css('z-index', 100).css('opacity', 0).show().animate({
                        opacity: 1,
                        top: '40px'
                    }, 500, 'swing');
                }
                $(trigger).blur();
                return false;
            });
            $(trigger).bind(options.fadeOutEvent, function(){
                if(options.onlyOne && !$(trigger).next().hasClass('opened')){
                    jQuery(objBubble).find('.opened').animate({
                        opacity: 0,
                        top: '70px'
                    }, 500, 'swing').removeClass('opened');
                }
                if($(bubble).hasClass('opened')){
                    $(bubble).animate({
                        opacity: 0,
                        top: '70px'
                    }, 500, 'swing');
                    $(bubble).removeClass('opened');
                }
                $(trigger).blur();
                return false;
            });
        }else{
            $(trigger).bind(options.fadeInEvent, function(){
                if(options.onlyOne && !$(trigger).next().hasClass('opened')){
                    jQuery(objBubble).find('.opened').animate({
                        opacity: 0,
                        top: '70px'
                    }, 500, 'swing').removeClass('opened');
                }
                if(!$(bubble).hasClass('opened')){
                    $(bubble).addClass('opened');
                    $(bubble).css('opacity', 0).show().animate({
                        opacity: 1,
                        top: '35px'
                    }, 500, 'swing');
                }else{
                    $(bubble).animate({
                        opacity: 0,
                        top: '70px'
                    }, 500, 'swing');
                    $(bubble).removeClass('opened');
                }
                $(trigger).blur();
                return false;
            });
        }
    });
    
}