(function($) {
    $.fn.helper = function(opts) {

        opts = $.extend({ fade: false, gravity: 'r' }, opts || {});
        var tip = null, cancelHide = false;

        this.hover(function() {

            if ($(this).attr('tip') && $(this).attr('tip') != "") {
                $.data(this, 'cancel.jtip', true);
                var tip = $.data(this, 'active.jtip');
                if (!tip) {
                    tip = $('<div id="jtip" class="jtip"><div id="jtip-inner" class="jtip-inner">' + $(this).attr('tip') + '</div></div>');
                    tip.css({ position: 'absolute', zIndex: 1000120 });
                    $(this).attr('title', '');
                    $.data(this, 'active.jtip', tip);
                }
                var pos = $.extend({}, $(this).offset(), { width: this.offsetWidth, height: this.offsetHeight });
                tip.remove().css({ top: 0, left: 0, visibility: 'hidden', display: 'block' }).appendTo(document.body);
                var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
                switch (opts.gravity.charAt(0)) {
                    /*
                    case 'b':
                    tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('jtip-b');
                    break;
                    case 't':
                    tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('jtip-t');
                    break;
                    case 'l':
                    tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('jtip-l');
                    break;
                    case 'r':
                    tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('jtip-r');
                    break;
                    */ 
                    case 'b':
                        tip.css({ top: pos.top + pos.height, left: pos.left + pos.width });
                        break;
                    case 't':
                        tip.css({ top: pos.top - actualHeight, left: pos.left + pos.width });
                        break;
                    case 'l':
                        tip.css({ top: pos.top + pos.height, left: pos.left - actualWidth });
                        break;
                    case 'r':
                        tip.css({ top: pos.top + pos.height, left: pos.left + pos.width });
                        break;
                }
                if (opts.fade) {
                    tip.css({ opacity: 0, display: 'block', visibility: 'visible' }).animate({ opacity: 1 });
                } else {
                    tip.css({ visibility: 'visible' });
                }
                bgiframe = $('<iframe class="bgiframejtip" frameborder="0" src="" style="display:block;position:absolute;z-index:999120;' +
					'top:' + ($('#jtip').offset().top + 1 + 'px') + ';' +
					'left:' + ($('#jtip').offset().left + 1 + 'px') + ';' +
					'width:' + (tip[0].offsetWidth - 3 + 'px') + ';' +
					'height:' + (tip[0].offsetHeight - 1 + 'px') + ';' +
					'"></iframe>');
                bgiframe.appendTo(document.body);

            }
            return false;

        }, function() {
            if ($(this).attr('tip') && $(this).attr('tip') != "") {
                $.data(this, 'cancel.jtip', false);
                var self = this;
                setTimeout(function() {
                    if ($.data(this, 'cancel.jtip')) return;
                    var tip = $.data(self, 'active.jtip');
                    if(tip!=undefined)
                    {
                        if (opts.fade) {
                            tip.stop().fadeOut(function() { $(this).remove(); });
                        } else {
                            tip.remove();
                        }
                    }
                    $('iframe.bgiframejtip').remove();
                }, 100);
            }
            return false;
        });

    };
})(jQuery);