/*
 *  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
 */
(function(window, document, undefined) {
    'use strict';
    (function(factory) {
        if (typeof define === 'function' && define.amd) {
            // register as an anonymous amd module.
            define(['jquery'], factory);
        } else if (typeof exports === 'object') {
            // node/commonjs
            module.exports = factory(require('jquery'));
        } else {
            // browser globals
            factory(window.jquery);
        }
    }(function($) {
        // 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: 'hover', //hover,click,sticky,manual
            style: '',
            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.$element);
                }

                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'
                });

                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.height()/2-20) || 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;
    }));
})(window, document);