// $().tip(opts)
// 可修改的值以下为默认值 opts = {
//希望出现的位置           dire: 5,
//弹出框大小               w: 250,
//边框颜色                 borderColor: '#FFBB76',
//背景颜色                 bgColor: '#FFFCEF',
//字体颜色                 color: '#FF0000',
//内部padding值            padding: [5, 10],
//三角形宽度               arrWidth: 10,
//是否使用hover触发        useHover: true,
//层叠级别                 zIndex: 100000
//                       };
// dir值分为12种// 2 目标左方 靠上// 3 目标左方  中
// 4目标左方  下
// 5目标上方  后
// 6目标上方  中
// 7目标上方  前
// 8目标右方  后
// 9目标右方  中
// 10目标右方  前
// 11目标下方  前
// 12位置在目标下方 中
// 0 1 目标下方 靠后(function($) {
    var defaults = {
        dire: 6,
        w: 190,
        _x: 0,
        _y: 0,
        borderColor: 'transparent',
        bgColor: '#0d90ec',
        color: '#fff',
        padding: [12, 10],
        arrWidth: 10,
        useHover: true,
        zIndex: 100000
    };
    $.fn.tips = function(opt) {
        var tip, opts = $.extend({}, defaults, opt);
        if (this[0]) {
            opts.tag = this;
            if (opts.useHover) {
                opts.tag.hover(function() {
                    tip = new Tip(opts);
                    tip.show();
                }, function() {
                    tip.close();
                });
            } else {
                tip = new Tip(opts);
                tip.show();
            }
            return this;
        }
    };
    function Tip(opts) {
        this.dire = opts.dire;
        this.width = opts.w;
        this.zIndex = opts.zIndex;
        this.borderColor = opts.borderColor;
        this.bgColor = opts.bgColor;
        this.color = opts.color;
        this.padding = opts.padding;
        this.arrWidth = opts.arrWidth;
        this.offsetX = opts._x;
        this.offsetY = opts._y;
        this.tag = opts.tag;
        this.msg = opts.msg;
        this.wrap = $('<div class="tip-wrap"></div>');
        this.innerArr = $('<div class="tip-arr-a"></div>');
        this.outerArr = $('<div class="tip-arr-b"></div>');
        this.init();
    };
    Tip.prototype = {
        init: function() {
            var msg = this.tag.data('tipMsg');
            if (!this.msg) {
                this.msg = msg;
            }
            this.createWrap();
            this.setPosition();
        },
        createWrap: function() {
            var t = this;
            t.wrap.html(t.msg);
            var wrapCSS = {
                width: t.width,
                border: '1px solid ' + t.borderColor,
                'border-radius': '5px',
                background: t.bgColor,
                color: t.color,
                padding: t.getPadding(),
                zIndex:t.zIndex
            };
            t.outerArr.css(t.getArrStyle(t.dire, t.arrWidth, t.borderColor));
            t.innerArr.css(t.getArrStyle(t.dire, t.arrWidth, t.bgColor));
            t.wrap.prepend(t.innerArr).prepend(t.outerArr).css(wrapCSS);
            $('body').append(t.wrap);
            // debugger;
        },
        setPosition: function() {
            var t = this;
            var posObj = t.getPos(t.dire, t.getPosition(t.tag), t.getPosition(t.wrap), t.arrWidth),
                pos = posObj.pos,
                innerPos = posObj.innerPos,
                outerPos = posObj.outerPos;
            t.wrap.css({
                top: pos.y+60,
                left: pos.x
            });
            t.innerArr.css({
                top: innerPos.y,
                left: innerPos.x
            });
            t.outerArr.css({
                top: outerPos.y,
                left: outerPos.x
            });
        },
        getPadding: function() {
            var t = this,
                pad = '0px',
                padArr = t.padding,
                len = padArr.length;
            switch (len) {
                case 1:
                    pad = padArr[0] + 'px';
                    break;
                case 2:
                    pad = padArr[0] + 'px ' + padArr[1] + 'px';
                    break;
                case 3:
                    pad = padArr[0] + 'px ' + padArr[1] + 'px ' + padArr[2] + 'px';
                    break;
                case 4:
                    pad = padArr[0] + 'px ' + padArr[1] + 'px ' + padArr[2] + 'px ' + padArr[3] + 'px';
                    break;
            }
            return pad;
        },
        getPosition: function(tag) {
            return {
                t: tag.offset().top,
                l: tag.offset().left,
                h: tag.outerHeight(),
                w: tag.outerWidth()
            };
        },
        getArrStyle: function(dir, width, color) {
            var style;
            // 箭头指向
            switch (dir) {
                // 箭头向上
                case 11:
                case 12:
                case 1:
                case 0:
                    style = {
                        'border-bottom-style': 'solid',
                        'border-width': '0px ' + width + 'px ' + width + 'px',
                        'border-bottom-color': color
                    };
                    break;
                    // 箭头向右
                case 2:
                case 3:
                case 4:
                    style = {
                        'border-left-style': 'solid',
                        'border-width': width + 'px 0px ' + width + 'px ' + width + 'px',
                        'border-left-color': color
                    };
                    break;
                    // 箭头向下                case 5:
                case 6:
                case 7:
                    style = {
                        'border-top-style': 'solid',
                        'border-width': width + 'px ' + width + 'px 0px',
                        'border-top-color': color
                    };
                    break;
                    // 箭头向下                case 8:
                case 9:
                case 10:
                    style = {
                        'border-right-style': 'solid',
                        'border-width': width + 'px ' + width + 'px ' + width + 'px 0px',
                        'border-right-color': color
                    };
                    break;
            }
            return style || {};
        },
        getPos: function(d, tagPos, pos, arrWidth) {
            var _pos, _innerPos, _outerPos, l = tagPos.l,
                t = tagPos.t,
                w = tagPos.w,
                h = tagPos.h,
                ww = pos.w,
                hh = pos.h;
            switch (d) {
                // 画图
                case 0:
                case 1:
                    // 01 目标下方 靠后
                    _pos = {
                        x: l + w / 2 + arrWidth + 20 + 1 - ww,
                        y: t + h + arrWidth
                    };
                    _outerPos = {
                        x: ww - 2 - 20 - arrWidth * 2,
                        y: -arrWidth
                    };
                    _innerPos = {
                        x: ww - 2 - 20 - arrWidth * 2,
                        y: -arrWidth + 1
                    };
                    break;
                    // 目标左方 靠上
                case 2:
                    _pos = {
                        x: l - ww - arrWidth,
                        y: t + h / 2 - arrWidth - 20 - 1
                    };
                    _outerPos = {
                        x: ww - 2,
                        y: 20
                    };
                    _innerPos = {
                        x: ww - 2 - 1,
                        y: 20
                    };
                    break;
                    // 目标左方  中
                case 3:
                    _pos = {
                        x: l - ww - arrWidth,
                        y: t + h / 2 - hh / 2
                    };
                    _outerPos = {
                        x: ww - 2,
                        y: (hh - 2) / 2 - arrWidth
                    };
                    _innerPos = {
                        x: ww - 2 - 1,
                        y: (hh - 2) / 2 - arrWidth
                    };
                    break;
                    // 4目标左方  下
                case 4:
                    _pos = {
                        x: l - ww - arrWidth,
                        y: t + h / 2 + arrWidth + 20 + 1 - hh
                    };
                    _outerPos = {
                        x: ww - 2,
                        y: hh - 2 - 20 - arrWidth * 2
                    };
                    _innerPos = {
                        x: ww - 2 - 1,
                        y: hh - 2 - 20 - arrWidth * 2
                    };
                    break;
                    // 5目标上方  后
                case 5:
                    _pos = {
                        x: l + w / 2 + arrWidth + 20 + 1 - ww,
                        y: t - arrWidth - hh
                    };
                    _outerPos = {
                        x: ww - 2 - 20 - arrWidth * 2,
                        y: hh - 2
                    };
                    _innerPos = {
                        x: ww - 2 - 20 - arrWidth * 2,
                        y: hh - 2 - 1
                    };
                    break;
                    // 6目标上方  中
                case 6:
                    _pos = {
                        x: l + w / 2 - ww / 2,
                        y: t - arrWidth - hh
                    };
                    _outerPos = {
                        x: (ww - 2) / 2 - arrWidth,
                        y: hh - 2
                    };
                    _innerPos = {
                        x: (ww - 2) / 2 - arrWidth,
                        y: hh - 2 - 1
                    };
                    break;
                    // 7目标上方  前
                case 7:
                    _pos = {
                        x: l + w / 2 - 20 - arrWidth,
                        y: t - arrWidth - hh
                    };
                    _outerPos = {
                        x: 20,
                        y: hh - 2
                    };
                    _innerPos = {
                        x: 20,
                        y: hh - 2 - 1
                    };
                    break;
                    // 8目标右方  后
                case 8:
                    _pos = {
                        x: l + w + arrWidth,
                        y: t + h / 2 + arrWidth + 20 + 1 - hh
                    };
                    _outerPos = {
                        x: -arrWidth,
                        y: hh - 2 - 20 - arrWidth * 2
                    };
                    _innerPos = {
                        x: -arrWidth + 1,
                        y: hh - 2 - 20 - arrWidth * 2
                    };
                    break;
                    // 9目标右方  中
                case 9:
                    _pos = {
                        x: l + w + arrWidth,
                        y: t + h / 2 - hh / 2
                    };
                    _outerPos = {
                        x: -arrWidth,
                        y: (hh - 2) / 2 - arrWidth
                    };
                    _innerPos = {
                        x: -arrWidth + 1,
                        y: (hh - 2) / 2 - arrWidth
                    };
                    break;
                    // 10目标右方  前
                case 10:
                    _pos = {
                        x: l + w + arrWidth,
                        y: t + h / 2 - arrWidth - 20 - 1
                    };
                    _outerPos = {
                        x: -arrWidth,
                        y: 20
                    };
                    _innerPos = {
                        x: -arrWidth + 1,
                        y: 20
                    };
                    break;
                    // 11目标下方  前
                case 11:
                    _pos = {
                        x: l + w / 2 - 20 - arrWidth,
                        y: t + h + arrWidth
                    };
                    _outerPos = {
                        x: 20,
                        y: -arrWidth
                    };
                    _innerPos = {
                        x: 20,
                        y: -arrWidth + 1
                    };
                    break;
                    // 12位置在目标下方 中
                case 12:
                    _pos = {
                        x: l + w / 2 - ww / 2,
                        y: t + h + arrWidth
                    };
                    _outerPos = {
                        x: (ww - 2) / 2 - arrWidth,
                        y: -arrWidth
                    };
                    _innerPos = {
                        x: (ww - 2) / 2 - arrWidth,
                        y: -arrWidth + 1
                    };
                    break;
                default:
                    _pos = {
                        x: 0,
                        y: 0
                    };
            }
            return {
                pos: _pos,
                innerPos: _innerPos,
                outerPos: _outerPos
            };
        },
        show: function() {
            this.wrap.show().animate({top:"-=60"})
        },
        close: function() {
            this.wrap.remove();
        }
    };
})(jQuery);