$.fn.extend({
    BalloonPanel: function(options) {
        var o = $.extend(true, {}, {
            Data: null,
            Group: "_default",
            width: "auto",
            height: "auto",
            VerticalOffset: 80,
            HorizontalOffset: 5,
            event: "hover",
            CurImage: "Images/c_page/cue.gif",
            DataConverter: function(data, obj) {
                return data;
            }
        }, options);
        if (o.minHeight)
            o.height = "auto";
        var __panel = $("#__balloon" + o.Group);
        if (__panel.length == 0) {
            __panel = $("<div id='__balloon" + o.Group + "' style='position:absolute; width:100px; left:550px; top:220px; display:none;border:#eebd54 1px solid; background:#fffee6;'><div style='position:relative; width:100%; height:100%;overflow:auto '><div class='__balloon_content' style='line-height:150%;'>&nbsp;<br/><br/><br/><br/><br/><br/><br/><br/>asdfawefi<div>sefsdfs</div></div></div><span class='__balloon_cur' style='position:absolute; background:url(" + o.CurImage + ") no-repeat -40px -40px; height:18px; width:13px; left:-13px; top:10px'></span></div>").appendTo($("body"));
            __panel[0].IsIn = true;
            // __panel.contents().hover(function() { __panel[0].IsIn = false }, function() { __panel[0].IsIn = true });
            //__panel.hover(function() { __panel[0].IsIn = false }, function() { __panel[0].IsIn = true })
            __panel.mouseout(function() {
                setTimeout(function() {
                    if (!__panel[0].IsIn) {
                        __panel.hide();
                    }
                }, 13);
                __panel[0].IsIn = false;
            });
            __panel.mouseover(function() {
                __panel[0].IsIn = true;
            })

        }
        this[o.event](function() {
            __panel[0].IsIn = true;
            var __this = $(this);
            var of = __this.offset();
            __panel.css({
                /* of.left + __this.width() + 12,
                top: of.top + __this.height() / 2 - 10,*/
                width: o.width,
                height: o.height
            });
            __panel.find(".__balloon_content").empty().append(o.DataConverter(o.Data, __this));
            if (o.minHeight) {
                __panel.show();
                if (o.minHeight > __panel.height())
                    __panel.height(o.minHeight);
            }
            var tvo = o.VerticalOffset;
            var tho = o.HorizontalOffset;
            if (tvo == "center")
                tvo = __panel.height() / 2;
            if (tho == "middle")
                tho = __panel.width() / 2;
            var off = __this.toolTipPosition({ obj: __panel, Horizontal: -(tho), Vertical: -(tvo), VerifyVertical: true });
            __panel.css({
                left: off.left,
                top: off.top
            });
            var bp = off.conterVertical ? 0 : 40;
            bp += off.conterHorizontal ? 160 : 0;
            __panel.find(".__balloon_cur").css({
                top: of.top - off.top + __this.height() / 2 - (off.conterVertical ? 18 : 0),
                left: off.conterHorizontal ? (__panel.width()) : -13,
                backgroundPosition: "-" + bp + "px -40px "
            });

            setTimeout(function() {
                __panel.show();
                if (o.CurImage == "none") __panel.find(".__balloon_cur").hide();
                else __panel.find(".__balloon_cur").show();
            }, 1);
            delete (__this);
            delete (of);
            delete (off);

        }).hover(function() { }, function() {
            __panel[0].IsIn = false;
            setTimeout(function() {
                if (!__panel[0].IsIn)
                    __panel.hide();
            }, 13);
        })
        return this;
    }
})