(function($) {
    /**
    * json="message.mailTip.tip" // json数据 message.mailTip.tip : "hello world"
    * w="300" // tip的宽度
    * t="请输入您常用的电子邮箱" 	// tip的标题
    * showEvt="focus" // 显示tip的事件，用,分隔触发多个事件，无该参数则默认focus
    * hideEvt="blur"	// 隐藏tip的事件，用,分隔触发多个事件，无该参数则默认blur
    * extoffset="10,0"	// tip偏移多少，10为x轴，0为y轴
    * 
    * 调用方法： $("#email").jtip();
    * email可以是任何元素
    */

    /**
    * event.keyCode=32        空格
    * event.keyCode=13        回车
    * event.keyCode=27        Esc
    * event.keyCode=17        Ctrl
    * event.keyCode=18        Alt
    * event.keyCode=9        	Tab
    * event.shiftKey
    */

    $.ui = $.ui || {};

    $.fn.jtip = function() {
        this.each(function() {
            new $.ui.jtip(this);
        });
    };

    $.ui.jtip = function(el) {
        var jdom = $(el);

        var dom = el;
       
        var sv = "focus,select";
        var hv = "blur,keydown";
        var asv = sv ? sv.split(",") : ["focus"];
        var ahv = hv ? hv.split(",") : ["blur"];
        var extoffset = jdom.attr("extoffset");
        var aext = extoffset ? extoffset.split(",") : [0, 0];

        var showFunc = function(ev, o) {
            var os = $(o);
            var offset = os.offset();
            var oleft = offset.left;
            var otop = offset.top;
            var body = $("body");

            var json = os.attr("json");
            var width = os.attr("w") || "250";
            var title = os.attr("t") || "提示信息";
            var extoffset = os.attr("extoffset");
            var aext = extoffset ? extoffset.split(",") : [0, 0];

            var de = document.documentElement;
            var w = self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
            var hasArea = w - oleft;
            var clickY = otop - 3;
            var pw = parseInt(width);

            if (hasArea > (pw + 75)) {
                body.append("<div id='JT' style='width:" + pw + "px;'><div id='JT_arrow_left'></div>" +
						"<div id='JT_close_left'><span class='title'>" + eval(title) + "</span></div>" +
						"<div id='JT_copy'></div></div>");
                var arrowOffset = o.offsetWidth + 11;
                var clickX = oleft + arrowOffset;
            } else {
                body.append("<div id='JT' style='width:" + pw + "px;'>" +
						"<div id='JT_arrow_right' style='left:" + (pw + 1) + "px'></div>" +
						"<div id='JT_close_right'><span class='title'>" + eval(title) + "</span></div>" +
						"<div id='JT_copy'></div></div>");
                var clickX = oleft - (pw + 15);

            }
            clickX += parseInt(aext[0]);
            clickY += parseInt(aext[1]);
            $('#JT').css({ left: clickX + "px", top: clickY + "px" });
            $('#JT').show();
            $('#JT_copy').html(eval(json));
        };

        for (var i = 0; i < asv.length; i++) {
            jdom.bind(asv[i], function(ev) {
                showFunc(ev, this);
            });
        }

        for (var j = 0; j < ahv.length; j++) {
            jdom.bind(ahv[j], function() {
                $('#JT').remove();
            });
        }
    }
})(jQuery);