/** 
*   This is a custom written jQuery plugin to show tooltip.
*   Usage: just call jQuery(divElement).bindTooltip() to show a tooltip for divElement (with default settings).
*   If you want to override some of the default settings you can do it by passing extra parameter.
*   For example: jQuery(divElement).bindTooltip({considerParent: false});
*/

;(function($) {

    $.bindTooltip = {
        defaults: {
            // Whether to position the tooltip w.r.t. the parent/current div element
            considerParent: true,
            // extra style(s) you  may want to apply on tooltip
            extraClass: "",
            // left padding in px 
            paddingLeft: 8,
            // top padding in px
            paddingTop: 5,
            // height of arrow in px
            arrowHeight: 11,
            // id for the tooltip element
            id: "tooltipId"
        }
    };
    
    $.fn.extend({
        bindTooltip: function(settings) {
            settings = $.extend({}, $.bindTooltip.defaults, settings);
            $.data(this, "bindTooltip", settings);
            
            var tooltipDiv = $('#'+ settings.id);
            if(tooltipDiv.length == 0) {
                $('<span id="' + settings.id + '"><div class="tooltipImage"></div><div class="tooltipContent"></div><div class="tooltipArrowId"></div></span>').appendTo(document.body).hide();
                $('#'+ settings.id).addClass(settings.extraClass);
                if ( $.fn.bgiframe ) {
                    $('#'+ settings.id).bgiframe();
                    $('.tooltipArrowId').bgiframe();
                }
            }
            
            var currentThis = this;
            this.mouseover(
                function(){
                    show(currentThis);    
                } )
                .mouseout(
                function(){
                    hide(currentThis);
                }
            );
        }
    });
    
    function show(jEl) {
        if(jEl.attr('title') != "") {
            var tooltipContentEl = $('#'+settings(jEl).id).children('.tooltipContent');
            tooltipContentEl.text(jEl.attr('title'));
            tooltipContentEl.val(jEl.attr('title'));
            jEl.attr('title','');
            
            var element = (settings(jEl).considerParent) ? jEl.parent() : jEl;
            var coord = element.offset();
            var pTop = coord.top;
            var pLeft = coord.left;
            var pWidth = element.width();
            var pHeight = element.height();
            
            var contentDiv = $('#' + settings(jEl).id);
            var arrow = contentDiv.children('.tooltipArrowId');
            
            var contentDivLeft = pLeft - (contentDiv.width()/2) + (pWidth/2) - settings(jEl).paddingLeft;
            var contentDivTop = pTop - contentDiv.height() - settings(jEl).arrowHeight - settings(jEl).paddingTop;
            contentDiv.css("left", contentDivLeft + 'px');
            contentDiv.css("top", contentDivTop + 'px');

            var arrowLeft = (contentDiv.width()/2) - (arrow.width()/2);
            var arrowTop = contentDiv.height() + (settings(jEl).arrowHeight/2) - 2;
            arrow.css("left", arrowLeft + 'px');
            arrow.css("top", arrowTop + 'px');

            contentDiv.show();        
        }
    }
    
    function hide(jEl) {
        var contentDiv = $('#' + settings(jEl).id);
        var tooltipContentEl = contentDiv.children('.tooltipContent');
        var tooltipValue = tooltipContentEl.val();
        if (tooltipValue != "") {
            jEl.attr("title", tooltipValue);
            tooltipContentEl.text("");
            tooltipContentEl.val("");
        }
        contentDiv.hide();    
    }
    
    function settings(element) {
        return $.data(element, "bindTooltip");
    }
    
})(jQuery);