tt-5-php-6001/plugin/admin/public/component/pear/module/popover/popover.js

/*
 *  webui popover plugin  - v1.2.17
 *  A lightWeight popover plugin with jquery ,enchance the  popover plugin of bootstrap with some awesome new features. It works well with bootstrap ,but bootstrap is not necessary!
 *  https://github.com/sandywalker/webui-popover
 *
 *  Made by Sandy Duan
 *  Under MIT License
 */

layui.define(['jquery', 'element'], function(exports) {
    var $=layui.$;
            // Create the defaults once
            var pluginName = 'webuiPopover';
            var pluginClass = 'webui-popover';
            var pluginType = 'webui.popover';
            var defaults = {
                placement: 'auto',
                container: null,
                width: 'auto',
                height: 'auto',
                trigger: 'click', //hover,click,sticky,manual
                style: '',
                opacity:null,
                selector: false, // jQuery selector, if a selector is provided, popover objects will be delegated to the specified.
                delay: {
                    show: null,
                    hide: 300
                },
                async: {
                    type: 'GET',
                    before: null, //function(that, xhr, settings){}
                    success: null, //function(that, xhr){}
                    error: null //function(that, xhr, data){}
                },
                cache: true,
                multi: false,
                arrow: true,
                title: '',
                content: '',
                closeable: false,
                padding: true,
                url: '',
                type: 'html',
                direction: '', // ltr,rtl
                animation: null,
                template: '<div class="webui-popover">' +
                    '<div class="webui-arrow"></div>' +
                    '<div class="webui-popover-inner">' +
                    '<a href="#" class="close"></a>' +
                    '<h3 class="webui-popover-title"></h3>' +
                    '<div class="webui-popover-content"><i class="icon-refresh"></i> <p>&nbsp;</p></div>' +
                    '</div>' +
                    '</div>',
                backdrop: false,
                dismissible: true,
                onShow: null,
                onHide: null,
                abortXHR: true,
                autoHide: false,
                offsetTop: 0,
                offsetLeft: 0,
                iframeOptions: {
                    frameborder: '0',
                    allowtransparency: 'true',
                    id: '',
                    name: '',
                    scrolling: '',
                    onload: '',
                    height: '',
                    width: ''
                },
                hideEmpty: false
            };

            var rtlClass = pluginClass + '-rtl';
            var _srcElements = [];
            var backdrop = $('<div class="webui-popover-backdrop"></div>');
            var _globalIdSeed = 0;
            var _isBodyEventHandled = false;
            var _offsetOut = -2000; // the value offset  out of the screen
            var $document = $(document);

            var toNumber = function (numeric, fallback) {
                return isNaN(numeric) ? (fallback || 0) : Number(numeric);
            };

            var getPopFromElement = function ($element) {
                return $element.data('plugin_' + pluginName);
            };

            var hideAllPop = function () {
                var pop = null;
                for (var i = 0; i < _srcElements.length; i++) {
                    pop = getPopFromElement(_srcElements[i]);
                    if (pop) {
                        pop.hide(true);
                    }
                }
                $document.trigger('hiddenAll.' + pluginType);
            };

            var hideOtherPops = function (currentPop) {
                var pop = null;
                for (var i = 0; i < _srcElements.length; i++) {
                    pop = getPopFromElement(_srcElements[i]);
                    if (pop && pop.id !== currentPop.id) {
                        pop.hide(true);
                    }
                }
                $document.trigger('hiddenAll.' + pluginType);
            };

            var isMobile = ('ontouchstart' in document.documentElement) && (/Mobi/.test(navigator.userAgent));

            var pointerEventToXY = function (e) {
                var out = {
                    x: 0,
                    y: 0
                };
                if (e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend' || e.type === 'touchcancel') {
                    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
                    out.x = touch.pageX;
                    out.y = touch.pageY;
                } else if (e.type === 'mousedown' || e.type === 'mouseup' || e.type === 'click') {
                    out.x = e.pageX;
                    out.y = e.pageY;
                }
                return out;
            };


            // The actual plugin constructor
            function WebuiPopover(element, options) {
                this.$element = $(element);
                if (options) {
                    if ($.type(options.delay) === 'string' || $.type(options.delay) === 'number') {
                        options.delay = {
                            show: options.delay,
                            hide: options.delay
                        }; // bc break fix
                    }
                }
                this.options = $.extend({}, defaults, options);
                this._defaults = defaults;
                this._name = pluginName;
                this._targetclick = false;
                this.init();
                _srcElements.push(this.$element);
                return this;

            }

            WebuiPopover.prototype = {
                //init webui popover
                init: function () {
                    if (this.$element[0] instanceof document.constructor && !this.options.selector) {
                        throw new Error('`selector` option must be specified when initializing ' + this.type + ' on the window.document object!');
                    }

                    if (this.getTrigger() !== 'manual') {
                        //init the event handlers
                        if (isMobile) {
                            this.$element.off('touchend', this.options.selector).on('touchend', this.options.selector, $.proxy(this.toggle, this));
                        } else if (this.getTrigger() === 'click') {
                            this.$element.off('click', this.options.selector).on('click', this.options.selector, $.proxy(this.toggle, this));
                        } else if (this.getTrigger() === 'hover') {
                            this.$element
                                .off('mouseenter mouseleave click', this.options.selector)
                                .on('mouseenter', this.options.selector, $.proxy(this.mouseenterHandler, this))
                                .on('mouseleave', this.options.selector, $.proxy(this.mouseleaveHandler, this));
                        }
                    }
                    this._poped = false;
                    this._inited = true;
                    this._opened = false;
                    this._idSeed = _globalIdSeed;
                    this.id = pluginName + this._idSeed;
                    // normalize container
                    this.options.container = $(this.options.container || document.body).first();

                    if (this.options.backdrop) {
                        backdrop.appendTo(this.options.container).hide();
                    }
                    _globalIdSeed++;
                    if (this.getTrigger() === 'sticky') {
                        this.show();
                    }

                    if (this.options.selector) {
                        this._options = $.extend({}, this.options, {
                            selector: ''
                        });
                    }

                },
                /* api methods and actions */
                destroy: function () {
                    var index = -1;

                    for (var i = 0; i < _srcElements.length; i++) {
                        if (_srcElements[i] === this.$element) {
                            index = i;
                            break;
                        }
                    }

                    _srcElements.splice(index, 1);


                    this.hide();
                    this.$element.data('plugin_' + pluginName, null);
                    if (this.getTrigger() === 'click') {
                        this.$element.off('click');
                    } else if (this.getTrigger() === 'hover') {
                        this.$element.off('mouseenter mouseleave');
                    }
                    if (this.$target) {
                        this.$target.remove();
                    }
                },
                getDelegateOptions: function () {
                    var options = {};

                    this._options && $.each(this._options, function (key, value) {
                        if (defaults[key] !== value) {
                            options[key] = value;
                        }
                    });
                    return options;
                },
                /*
                    param: force    boolean value, if value is true then force hide the popover
                    param: event    dom event,
                */
                hide: function (force, event) {

                    if (!force && this.getTrigger() === 'sticky') {
                        return;
                    }
                    if (!this._opened) {
                        return;
                    }
                    if (event) {
                        event.preventDefault();
                        event.stopPropagation();
                    }

                    if (this.xhr && this.options.abortXHR === true) {
                        this.xhr.abort();
                        this.xhr = null;
                    }


                    var e = $.Event('hide.' + pluginType);
                    this.$element.trigger(e, [this.$target]);
                    if (this.$target) {
                        this.$target.removeClass('in').addClass(this.getHideAnimation());
                        var that = this;
                        setTimeout(function () {
                            that.$target.hide();
                            if (!that.getCache()) {
                                that.$target.remove();
                                //that.getTriggerElement.removeAttr('data-target');
                            }
                        }, that.getHideDelay());
                    }
                    if (this.options.backdrop) {
                        backdrop.hide();
                    }
                    this._opened = false;
                    this.$element.trigger('hidden.' + pluginType, [this.$target]);

                    if (this.options.onHide) {
                        this.options.onHide(this.$target);
                    }

                },
                resetAutoHide: function () {
                    var that = this;
                    var autoHide = that.getAutoHide();
                    if (autoHide) {
                        if (that.autoHideHandler) {
                            clearTimeout(that.autoHideHandler);
                        }
                        that.autoHideHandler = setTimeout(function () {
                            that.hide();
                        }, autoHide);
                    }
                },
                delegate: function (eventTarget) {
                    var self = $(eventTarget).data('plugin_' + pluginName);
                    if (!self) {
                        self = new WebuiPopover(eventTarget, this.getDelegateOptions());
                        $(eventTarget).data('plugin_' + pluginName, self);
                    }
                    return self;
                },
                toggle: function (e) {
                    var self = this;
                    if (e) {
                        e.preventDefault();
                        e.stopPropagation();
                        if (this.options.selector) {
                            self = this.delegate(e.currentTarget);
                        }
                    }
                    self[self.getTarget().hasClass('in') ? 'hide' : 'show']();
                },
                hideAll: function () {
                    hideAllPop();
                },
                hideOthers: function () {
                    hideOtherPops(this);
                },
                /*core method ,show popover */
                show: function () {
                    if (this._opened) {
                        return;
                    }
                    //removeAllTargets();
                    var
                        $target = this.getTarget().removeClass().addClass(pluginClass).addClass(this._customTargetClass);
                    if (!this.options.multi) {
                        this.hideOthers();
                    }

                    // use cache by default, if not cache setted  , reInit the contents
                    if (!this.getCache() || !this._poped || this.content === '') {
                        this.content = '';
                        this.setTitle(this.getTitle());
                        if (!this.options.closeable) {
                            $target.find('.close').off('click').remove();
                        }
                        if (!this.isAsync()) {
                            this.setContent(this.getContent());
                        } else {
                            this.setContentASync(this.options.content);
                        }

                        if (this.canEmptyHide() && this.content === '') {
                            return;
                        }
                        $target.show();
                    }

                    this.displayContent();

                    if (this.options.onShow) {
                        this.options.onShow($target);
                    }

                    this.bindBodyEvents();
                    if (this.options.backdrop) {
                        backdrop.show();
                    }
                    this._opened = true;
                    this.resetAutoHide();
                },
                displayContent: function () {
                    var
                        //element postion
                        elementPos = this.getElementPosition(),
                        //target postion
                        $target = this.getTarget().removeClass().addClass(pluginClass).addClass(this._customTargetClass),
                        //target content
                        $targetContent = this.getContentElement(),
                        //target Width
                        targetWidth = $target[0].offsetWidth,
                        //target Height
                        targetHeight = $target[0].offsetHeight,
                        //placement
                        placement = 'bottom',
                        e = $.Event('show.' + pluginType);

                    if (this.canEmptyHide()) {

                        var content = $targetContent.children().html();
                        if (content !== null && content.trim().length === 0) {
                            return;
                        }
                    }

                    //if (this.hasContent()){
                    this.$element.trigger(e, [$target]);
                    //}
                    // support width as data attribute
                    var optWidth = this.$element.data('width') || this.options.width;
                    if (optWidth === '') {
                        optWidth = this._defaults.width;
                    }

                    if (optWidth !== 'auto') {
                        $target.width(optWidth);
                    }

                    // support height as data attribute
                    var optHeight = this.$element.data('height') || this.options.height;
                    if (optHeight === '') {
                        optHeight = this._defaults.height;
                    }

                    if (optHeight !== 'auto') {
                        $targetContent.height(optHeight);
                    }

                    if (this.options.style) {
                        this.$target.addClass(pluginClass + '-' + this.options.style);
                    }

                    //check rtl
                    if (this.options.direction === 'rtl' && !$targetContent.hasClass(rtlClass)) {
                        $targetContent.addClass(rtlClass);
                    }

                    //init the popover and insert into the document body
                    if (!this.options.arrow) {
                        $target.find('.webui-arrow').remove();
                    }
                    $target.detach().css({
                        top: _offsetOut,
                        left: _offsetOut,
                        display: 'block',
                        opacity:this.options.opacity || 1
                    });

                    if (this.getAnimation()) {
                        $target.addClass(this.getAnimation());
                    }
                    $target.appendTo(this.options.container);


                    placement = this.getPlacement(elementPos);

                    //This line is just for compatible with knockout custom binding
                    this.$element.trigger('added.' + pluginType);

                    this.initTargetEvents();

                    if (!this.options.padding) {
                        if (this.options.height !== 'auto') {
                            $targetContent.css('height', $targetContent.outerHeight());
                        }
                        this.$target.addClass('webui-no-padding');
                    }

                    // add maxHeight and maxWidth support by limodou@gmail.com 2016/10/1
                    if (this.options.maxHeight) {
                        $targetContent.css('maxHeight', this.options.maxHeight);
                    }

                    if (this.options.maxWidth) {
                        $targetContent.css('maxWidth', this.options.maxWidth);
                    }
                    // end

                    targetWidth = $target[0].offsetWidth;
                    targetHeight = $target[0].offsetHeight;

                    var postionInfo = this.getTargetPositin(elementPos, placement, targetWidth, targetHeight);

                    this.$target.css(postionInfo.position).addClass(placement).addClass('in');

                    if (this.options.type === 'iframe') {
                        var $iframe = $target.find('iframe');
                        var iframeWidth = $target.width();
                        var iframeHeight = $iframe.parent().height();

                        if (this.options.iframeOptions.width !== '' && this.options.iframeOptions.width !== 'auto') {
                            iframeWidth = this.options.iframeOptions.width;
                        }

                        if (this.options.iframeOptions.height !== '' && this.options.iframeOptions.height !== 'auto') {
                            iframeHeight = this.options.iframeOptions.height;
                        }

                        $iframe.width(iframeWidth).height(iframeHeight);
                    }

                    if (!this.options.arrow) {
                        this.$target.css({
                            'margin': 0
                        });
                    }
                    if (this.options.arrow) {
                        var $arrow = this.$target.find('.webui-arrow');
                        $arrow.removeAttr('style');

                        //prevent arrow change by content size
                        if (placement === 'left' || placement === 'right') {
                            $arrow.css({
                                top: this.$target.height() / 2
                            });
                        } else if (placement === 'top' || placement === 'bottom') {
                            $arrow.css({
                                left: this.$target.width() / 2
                            });
                        }

                        if (postionInfo.arrowOffset) {
                            //hide the arrow if offset is negative
                            if (postionInfo.arrowOffset.left === -1 || postionInfo.arrowOffset.top === -1) {
                                $arrow.hide();
                            } else {
                                $arrow.css(postionInfo.arrowOffset);
                            }
                        }

                    }
                    this._poped = true;
                    this.$element.trigger('shown.' + pluginType, [this.$target]);
                },

                isTargetLoaded: function () {
                    return this.getTarget().find('i.glyphicon-refresh').length === 0;
                },

                /*getter setters */
                getTriggerElement: function () {
                    return this.$element;
                },
                getTarget: function () {
                    if (!this.$target) {
                        var id = pluginName + this._idSeed;
                        this.$target = $(this.options.template)
                            .attr('id', id);
                        this._customTargetClass = this.$target.attr('class') !== pluginClass ? this.$target.attr('class') : null;
                        this.getTriggerElement().attr('data-target', id);
                    }
                    if (!this.$target.data('trigger-element')) {
                        this.$target.data('trigger-element', this.getTriggerElement());
                    }
                    return this.$target;
                },
                removeTarget: function () {
                    this.$target.remove();
                    this.$target = null;
                    this.$contentElement = null;
                },
                getTitleElement: function () {
                    return this.getTarget().find('.' + pluginClass + '-title');
                },
                getContentElement: function () {
                    if (!this.$contentElement) {
                        this.$contentElement = this.getTarget().find('.' + pluginClass + '-content');
                    }
                    return this.$contentElement;
                },
                getTitle: function () {
                    return this.$element.attr('data-title') || this.options.title || this.$element.attr('title');
                },
                getUrl: function () {
                    return this.$element.attr('data-url') || this.options.url;
                },
                getAutoHide: function () {
                    return this.$element.attr('data-auto-hide') || this.options.autoHide;
                },
                getOffsetTop: function () {
                    return toNumber(this.$element.attr('data-offset-top')) || this.options.offsetTop;
                },
                getOffsetLeft: function () {
                    return toNumber(this.$element.attr('data-offset-left')) || this.options.offsetLeft;
                },
                getCache: function () {
                    var dataAttr = this.$element.attr('data-cache');
                    if (typeof (dataAttr) !== 'undefined') {
                        switch (dataAttr.toLowerCase()) {
                            case 'true':
                            case 'yes':
                            case '1':
                                return true;
                            case 'false':
                            case 'no':
                            case '0':
                                return false;
                        }
                    }
                    return this.options.cache;
                },
                getTrigger: function () {
                    return this.$element.attr('data-trigger') || this.options.trigger;
                },
                getDelayShow: function () {
                    var dataAttr = this.$element.attr('data-delay-show');
                    if (typeof (dataAttr) !== 'undefined') {
                        return dataAttr;
                    }
                    return this.options.delay.show === 0 ? 0 : this.options.delay.show || 100;
                },
                getHideDelay: function () {
                    var dataAttr = this.$element.attr('data-delay-hide');
                    if (typeof (dataAttr) !== 'undefined') {
                        return dataAttr;
                    }
                    return this.options.delay.hide === 0 ? 0 : this.options.delay.hide || 100;
                },
                getAnimation: function () {
                    var dataAttr = this.$element.attr('data-animation');
                    return dataAttr || this.options.animation;
                },
                getHideAnimation: function () {
                    var ani = this.getAnimation();
                    return ani ? ani + '-out' : 'out';
                },
                setTitle: function (title) {
                    var $titleEl = this.getTitleElement();
                    if (title) {
                        //check rtl
                        if (this.options.direction === 'rtl' && !$titleEl.hasClass(rtlClass)) {
                            $titleEl.addClass(rtlClass);
                        }
                        $titleEl.html(title);
                    } else {
                        $titleEl.remove();
                    }
                },
                hasContent: function () {
                    return this.getContent();
                },
                canEmptyHide: function () {
                    return this.options.hideEmpty && this.options.type === 'html';
                },
                getIframe: function () {
                    var $iframe = $('<iframe></iframe>').attr('src', this.getUrl());
                    var self = this;
                    $.each(this._defaults.iframeOptions, function (opt) {
                        if (typeof self.options.iframeOptions[opt] !== 'undefined') {
                            $iframe.attr(opt, self.options.iframeOptions[opt]);
                        }
                    });

                    return $iframe;
                },
                getContent: function () {
                    if (this.getUrl()) {
                        switch (this.options.type) {
                            case 'iframe':
                                this.content = this.getIframe();
                                break;
                            case 'html':
                                try {
                                    this.content = $(this.getUrl());
                                    if (!this.content.is(':visible')) {
                                        this.content.show();
                                    }
                                } catch (error) {
                                    throw new Error('Unable to get popover content. Invalid selector specified.');
                                }
                                break;
                        }
                    } else if (!this.content) {
                        var content = '';
                        if ($.isFunction(this.options.content)) {
                            content = this.options.content.apply(this.$element[0], [this]);
                        } else {
                            content = this.options.content;
                        }
                        this.content = this.$element.attr('data-content') || content;
                        if (!this.content) {
                            var $next = this.$element.next();

                            if ($next && $next.hasClass(pluginClass + '-content')) {
                                this.content = $next;
                            }
                        }
                    }
                    return this.content;
                },
                setContent: function (content) {
                    var $target = this.getTarget();
                    var $ct = this.getContentElement();
                    if (typeof content === 'string') {
                        $ct.html(content);
                    } else if (content instanceof $) {
                        $ct.html('');
                        //Don't want to clone too many times.
                        if (!this.options.cache) {
                            content.clone(true, true).removeClass(pluginClass + '-content').appendTo($ct);
                        } else {
                            content.removeClass(pluginClass + '-content').appendTo($ct);
                        }
                    }
                    this.$target = $target;
                },
                isAsync: function () {
                    return this.options.type === 'async';
                },
                setContentASync: function (content) {
                    var that = this;
                    if (this.xhr) {
                        return;
                    }
                    this.xhr = $.ajax({
                        url: this.getUrl(),
                        type: this.options.async.type,
                        cache: this.getCache(),
                        beforeSend: function (xhr, settings) {
                            if (that.options.async.before) {
                                that.options.async.before(that, xhr, settings);
                            }
                        },
                        success: function (data) {
                            that.bindBodyEvents();
                            if (content && $.isFunction(content)) {
                                that.content = content.apply(that.$element[0], [data]);
                            } else {
                                that.content = data;
                            }
                            that.setContent(that.content);
                            var $targetContent = that.getContentElement();
                            $targetContent.removeAttr('style');
                            that.displayContent();
                            if (that.options.async.success) {
                                that.options.async.success(that, data);
                            }
                        },
                        complete: function () {
                            that.xhr = null;
                        },
                        error: function (xhr, data) {
                            if (that.options.async.error) {
                                that.options.async.error(that, xhr, data);
                            }
                        }
                    });
                },

                bindBodyEvents: function () {
                    if (_isBodyEventHandled) {
                        return;
                    }
                    if (this.options.dismissible && this.getTrigger() === 'click') {
                        if (isMobile) {
                            $document.off('touchstart.webui-popover').on('touchstart.webui-popover', $.proxy(this.bodyTouchStartHandler, this));
                        } else {
                            $document.off('keyup.webui-popover').on('keyup.webui-popover', $.proxy(this.escapeHandler, this));
                            $document.off('click.webui-popover').on('click.webui-popover', $.proxy(this.bodyClickHandler, this));
                        }
                    } else if (this.getTrigger() === 'hover') {
                        $document.off('touchend.webui-popover')
                            .on('touchend.webui-popover', $.proxy(this.bodyClickHandler, this));
                    }
                },

                /* event handlers */
                mouseenterHandler: function (e) {
                    var self = this;

                    if (e && this.options.selector) {
                        self = this.delegate(e.currentTarget);
                    }

                    if (self._timeout) {
                        clearTimeout(self._timeout);
                    }
                    self._enterTimeout = setTimeout(function () {
                        if (!self.getTarget().is(':visible')) {
                            self.show();
                        }
                    }, this.getDelayShow());
                },
                mouseleaveHandler: function () {
                    var self = this;
                    clearTimeout(self._enterTimeout);
                    //key point, set the _timeout  then use clearTimeout when mouse leave
                    self._timeout = setTimeout(function () {
                        self.hide();
                    }, this.getHideDelay());
                },
                escapeHandler: function (e) {
                    if (e.keyCode === 27) {
                        this.hideAll();
                    }
                },
                bodyTouchStartHandler: function (e) {
                    var self = this;
                    var $eventEl = $(e.currentTarget);
                    $eventEl.on('touchend', function (e) {
                        self.bodyClickHandler(e);
                        $eventEl.off('touchend');
                    });
                    $eventEl.on('touchmove', function () {
                        $eventEl.off('touchend');
                    });
                },
                bodyClickHandler: function (e) {
                    _isBodyEventHandled = true;
                    var canHide = true;
                    for (var i = 0; i < _srcElements.length; i++) {
                        var pop = getPopFromElement(_srcElements[i]);
                        if (pop && pop._opened) {
                            var offset = pop.getTarget().offset();
                            var popX1 = offset.left;
                            var popY1 = offset.top;
                            var popX2 = offset.left + pop.getTarget().width();
                            var popY2 = offset.top + pop.getTarget().height();
                            var pt = pointerEventToXY(e);
                            var inPop = pt.x >= popX1 && pt.x <= popX2 && pt.y >= popY1 && pt.y <= popY2;
                            if (inPop) {
                                canHide = false;
                                break;
                            }
                        }
                    }
                    if (canHide) {
                        hideAllPop();
                    }
                },

                /*
                targetClickHandler: function() {
                    this._targetclick = true;
                },
                */

                //reset and init the target events;
                initTargetEvents: function () {
                    if (this.getTrigger() === 'hover') {
                        this.$target
                            .off('mouseenter mouseleave')
                            .on('mouseenter', $.proxy(this.mouseenterHandler, this))
                            .on('mouseleave', $.proxy(this.mouseleaveHandler, this));
                    }
                    this.$target.find('.close').off('click').on('click', $.proxy(this.hide, this, true));
                    //this.$target.off('click.webui-popover').on('click.webui-popover', $.proxy(this.targetClickHandler, this));
                },
                /* utils methods */
                //caculate placement of the popover
                getPlacement: function (pos) {
                    var
                        placement,
                        container = this.options.container,
                        clientWidth = container.innerWidth(),
                        clientHeight = container.innerHeight(),
                        scrollTop = container.scrollTop(),
                        scrollLeft = container.scrollLeft(),
                        pageX = Math.max(0, pos.left - scrollLeft),
                        pageY = Math.max(0, pos.top - scrollTop);
                    //arrowSize = 20;

                    //if placement equals auto，caculate the placement by element information;
                    if (typeof (this.options.placement) === 'function') {
                        placement = this.options.placement.call(this, this.getTarget()[0], this.$element[0]);
                    } else {
                        placement = this.$element.data('placement') || this.options.placement;
                    }

                    var isH = placement === 'horizontal';
                    var isV = placement === 'vertical';
                    var detect = placement === 'auto' || isH || isV;

                    if (detect) {
                        if (pageX < clientWidth / 3) {
                            if (pageY < clientHeight / 3) {
                                placement = isH ? 'right-bottom' : 'bottom-right';
                            } else if (pageY < clientHeight * 2 / 3) {
                                if (isV) {
                                    placement = pageY <= clientHeight / 2 ? 'bottom-right' : 'top-right';
                                } else {
                                    placement = 'right';
                                }
                            } else {
                                placement = isH ? 'right-top' : 'top-right';
                            }
                            //placement= pageY>targetHeight+arrowSize?'top-right':'bottom-right';
                        } else if (pageX < clientWidth * 2 / 3) {
                            if (pageY < clientHeight / 3) {
                                if (isH) {
                                    placement = pageX <= clientWidth / 2 ? 'right-bottom' : 'left-bottom';
                                } else {
                                    placement = 'bottom';
                                }
                            } else if (pageY < clientHeight * 2 / 3) {
                                if (isH) {
                                    placement = pageX <= clientWidth / 2 ? 'right' : 'left';
                                } else {
                                    placement = pageY <= clientHeight / 2 ? 'bottom' : 'top';
                                }
                            } else {
                                if (isH) {
                                    placement = pageX <= clientWidth / 2 ? 'right-top' : 'left-top';
                                } else {
                                    placement = 'top';
                                }
                            }
                        } else {
                            //placement = pageY>targetHeight+arrowSize?'top-left':'bottom-left';
                            if (pageY < clientHeight / 3) {
                                placement = isH ? 'left-bottom' : 'bottom-left';
                            } else if (pageY < clientHeight * 2 / 3) {
                                if (isV) {
                                    placement = pageY <= clientHeight / 2 ? 'bottom-left' : 'top-left';
                                } else {
                                    placement = 'left';
                                }
                            } else {
                                placement = isH ? 'left-top' : 'top-left';
                            }
                        }
                    } else if (placement === 'auto-top') {
                        if (pageX < clientWidth / 3) {
                            placement = 'top-right';
                        } else if (pageX < clientWidth * 2 / 3) {
                            placement = 'top';
                        } else {
                            placement = 'top-left';
                        }
                    } else if (placement === 'auto-bottom') {
                        if (pageX < clientWidth / 3) {
                            placement = 'bottom-right';
                        } else if (pageX < clientWidth * 2 / 3) {
                            placement = 'bottom';
                        } else {
                            placement = 'bottom-left';
                        }
                    } else if (placement === 'auto-left') {
                        if (pageY < clientHeight / 3) {
                            placement = 'left-top';
                        } else if (pageY < clientHeight * 2 / 3) {
                            placement = 'left';
                        } else {
                            placement = 'left-bottom';
                        }
                    } else if (placement === 'auto-right') {
                        if (pageY < clientHeight / 3) {
                            placement = 'right-bottom';
                        } else if (pageY < clientHeight * 2 / 3) {
                            placement = 'right';
                        } else {
                            placement = 'right-top';
                        }
                    }
                    return placement;
                },
                getElementPosition: function () {
                    // If the container is the body or normal conatiner, just use $element.offset()
                    var elRect = this.$element[0].getBoundingClientRect();
                    var container = this.options.container;
                    var cssPos = container.css('position');

                    if (container.is(document.body) || cssPos === 'static') {
                        return $.extend({}, this.$element.offset(), {
                            width: this.$element[0].offsetWidth || elRect.width,
                            height: this.$element[0].offsetHeight || elRect.height
                        });
                        // Else fixed container need recalculate the  position
                    } else if (cssPos === 'fixed') {
                        var containerRect = container[0].getBoundingClientRect();
                        return {
                            top: elRect.top - containerRect.top + container.scrollTop(),
                            left: elRect.left - containerRect.left + container.scrollLeft(),
                            width: elRect.width,
                            height: elRect.height
                        };
                    } else if (cssPos === 'relative') {
                        return {
                            top: this.$element.offset().top - container.offset().top,
                            left: this.$element.offset().left - container.offset().left,
                            width: this.$element[0].offsetWidth || elRect.width,
                            height: this.$element[0].offsetHeight || elRect.height
                        };
                    }
                },

                getTargetPositin: function (elementPos, placement, targetWidth, targetHeight) {
                    var pos = elementPos,
                        container = this.options.container,
                        //clientWidth = container.innerWidth(),
                        //clientHeight = container.innerHeight(),
                        elementW = this.$element.outerWidth(),
                        elementH = this.$element.outerHeight(),
                        scrollTop = document.documentElement.scrollTop + container.scrollTop(),
                        scrollLeft = document.documentElement.scrollLeft + container.scrollLeft(),
                        position = {},
                        arrowOffset = null,
                        arrowSize = this.options.arrow ? 20 : 0,
                        padding = 10,
                        fixedW = elementW < arrowSize + padding ? arrowSize : 0,
                        fixedH = elementH < arrowSize + padding ? arrowSize : 0,
                        refix = 0,
                        pageH = document.documentElement.clientHeight + scrollTop,
                        pageW = document.documentElement.clientWidth + scrollLeft;

                    var validLeft = pos.left + pos.width / 2 - fixedW > 0;
                    var validRight = pos.left + pos.width / 2 + fixedW < pageW;
                    var validTop = pos.top + pos.height / 2 - fixedH > 0;
                    var validBottom = pos.top + pos.height / 2 + fixedH < pageH;


                    switch (placement) {
                        case 'bottom':
                            position = {
                                top: pos.top + pos.height,
                                left: pos.left + pos.width / 2 - targetWidth / 2
                            };
                            break;
                        case 'top':
                            position = {
                                top: pos.top - targetHeight,
                                left: pos.left + pos.width / 2 - targetWidth / 2
                            };
                            break;
                        case 'left':
                            position = {
                                top: pos.top + pos.height / 2 - targetHeight / 2,
                                left: pos.left - targetWidth
                            };
                            break;
                        case 'right':
                            position = {
                                top: pos.top + pos.height / 2 - targetHeight / 2,
                                left: pos.left + pos.width
                            };
                            break;
                        case 'top-right':
                            position = {
                                top: pos.top - targetHeight,
                                left: validLeft ? pos.left - fixedW : padding
                            };
                            arrowOffset = {
                                left: validLeft ? Math.min(elementW, targetWidth) / 2 + fixedW : _offsetOut
                            };
                            break;
                        case 'top-left':
                            refix = validRight ? fixedW : -padding;
                            position = {
                                top: pos.top - targetHeight,
                                left: pos.left - targetWidth + pos.width + refix
                            };
                            arrowOffset = {
                                left: validRight ? targetWidth - Math.min(elementW, targetWidth) / 2 - fixedW : _offsetOut
                            };
                            break;
                        case 'bottom-right':
                            position = {
                                top: pos.top + pos.height,
                                left: validLeft ? pos.left - fixedW : padding
                            };
                            arrowOffset = {
                                left: validLeft ? Math.min(elementW, targetWidth) / 2 + fixedW : _offsetOut
                            };
                            break;
                        case 'bottom-left':
                            refix = validRight ? fixedW : -padding;
                            position = {
                                top: pos.top + pos.height,
                                left: pos.left - targetWidth + pos.width + refix
                            };
                            arrowOffset = {
                                left: validRight ? targetWidth - Math.min(elementW, targetWidth) / 2 - fixedW : _offsetOut
                            };
                            break;
                        case 'right-top':
                            refix = validBottom ? fixedH : -padding;
                            position = {
                                top: pos.top - targetHeight + pos.height + refix,
                                left: pos.left + pos.width
                            };
                            arrowOffset = {
                                top: validBottom ? targetHeight - Math.min(elementH, targetHeight) / 2 - fixedH : _offsetOut
                            };
                            break;
                        case 'right-bottom':
                            position = {
                                top: validTop ? pos.top - fixedH : padding,
                                left: pos.left + pos.width
                            };
                            arrowOffset = {
                                top: validTop ? Math.min(elementH, targetHeight) / 2 + fixedH : _offsetOut
                            };
                            break;
                        case 'left-top':
                            refix = validBottom ? fixedH : -padding;
                            position = {
                                top: pos.top - targetHeight + pos.height + refix,
                                left: pos.left - targetWidth
                            };
                            arrowOffset = {
                                top: validBottom ? targetHeight - Math.min(elementH, targetHeight) / 2 - fixedH : _offsetOut
                            };
                            break;
                        case 'left-bottom':
                            position = {
                                top: validTop ? pos.top - fixedH : padding,
                                left: pos.left - targetWidth
                            };
                            arrowOffset = {
                                top: validTop ? Math.min(elementH, targetHeight) / 2 + fixedH : _offsetOut
                            };
                            break;

                    }
                    position.top += this.getOffsetTop();
                    position.left += this.getOffsetLeft();

                    return {
                        position: position,
                        arrowOffset: arrowOffset
                    };
                }
            };
            $.fn[pluginName] = function (options, noInit) {
                var results = [];
                var $result = this.each(function () {

                    var webuiPopover = $.data(this, 'plugin_' + pluginName);
                    if (!webuiPopover) {
                        if (!options) {
                            webuiPopover = new WebuiPopover(this, null);
                        } else if (typeof options === 'string') {
                            if (options !== 'destroy') {
                                if (!noInit) {
                                    webuiPopover = new WebuiPopover(this, null);
                                    results.push(webuiPopover[options]());
                                }
                            }
                        } else if (typeof options === 'object') {
                            webuiPopover = new WebuiPopover(this, options);
                        }
                        $.data(this, 'plugin_' + pluginName, webuiPopover);
                    } else {
                        if (options === 'destroy') {
                            webuiPopover.destroy();
                        } else if (typeof options === 'string') {
                            results.push(webuiPopover[options]());
                        }
                    }
                });
                return (results.length) ? results : $result;
            };

            //Global object exposes to window.
            var webuiPopovers = (function () {
                var _hideAll = function () {
                    hideAllPop();
                };
                var _create = function (selector, options) {
                    options = options || {};
                    $(selector).webuiPopover(options);
                };
                var _isCreated = function (selector) {
                    var created = true;
                    $(selector).each(function (i, item) {
                        created = created && $(item).data('plugin_' + pluginName) !== undefined;
                    });
                    return created;
                };
                var _show = function (selector, options) {
                    if (options) {
                        $(selector).webuiPopover(options).webuiPopover('show');
                    } else {
                        $(selector).webuiPopover('show');
                    }
                };
                var _hide = function (selector) {
                    $(selector).webuiPopover('hide');
                };

                var _setDefaultOptions = function (options) {
                    defaults = $.extend({}, defaults, options);
                };

                var _updateContent = function (selector, content) {
                    var pop = $(selector).data('plugin_' + pluginName);
                    if (pop) {
                        var cache = pop.getCache();
                        pop.options.cache = false;
                        pop.options.content = content;
                        if (pop._opened) {
                            pop._opened = false;
                            pop.show();
                        } else {
                            if (pop.isAsync()) {
                                pop.setContentASync(content);
                            } else {
                                pop.setContent(content);
                            }
                        }
                        pop.options.cache = cache;
                    }
                };

                var _updateContentAsync = function (selector, url) {
                    var pop = $(selector).data('plugin_' + pluginName);
                    if (pop) {
                        var cache = pop.getCache();
                        var type = pop.options.type;
                        pop.options.cache = false;
                        pop.options.url = url;

                        if (pop._opened) {
                            pop._opened = false;
                            pop.show();
                        } else {
                            pop.options.type = 'async';
                            pop.setContentASync(pop.content);
                        }
                        pop.options.cache = cache;
                        pop.options.type = type;
                    }
                };

                return {
                    show: _show,
                    hide: _hide,
                    create: _create,
                    isCreated: _isCreated,
                    hideAll: _hideAll,
                    updateContent: _updateContent,
                    updateContentAsync: _updateContentAsync,
                    setDefaultOptions: _setDefaultOptions
                };
            })();
            window.WebuiPopovers = webuiPopovers;
        exports("popover",WebuiPopovers);
})