// ======= amplib js main ======= 
!function(n,l){"object"==typeof exports&&"undefined"!=typeof module?l(exports):"function"==typeof define&&define.amd?define(["exports"],l):l(n.preact={})}(this,function(n){var l,u,t,i,o,f,r,e={},c=[],s=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord/i;function a(n,l){for(var u in l)n[u]=l[u];return n}function h(n){var l=n.parentNode;l&&l.removeChild(n)}function p(n,l,u){var t,i=arguments,o={};for(t in l)"key"!==t&&"ref"!==t&&(o[t]=l[t]);if(arguments.length>3)for(u=[u],t=3;t<arguments.length;t++)u.push(i[t]);if(null!=u&&(o.children=u),"function"==typeof n&&null!=n.defaultProps)for(t in n.defaultProps)void 0===o[t]&&(o[t]=n.defaultProps[t]);return v(n,o,l&&l.key,l&&l.ref)}function v(n,u,t,i){var o={type:n,props:u,key:t,ref:i,__k:null,__:null,__b:0,__e:null,__d:null,__c:null,constructor:void 0};return l.vnode&&l.vnode(o),o}function d(n){return n.children}function y(n,l){this.props=n,this.context=l}function m(n,l){if(null==l)return n.__?m(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return"function"==typeof n.type?m(n):null}function w(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return w(n)}}function g(n){(!n.__d&&(n.__d=!0)&&1===t.push(n)||o!==l.debounceRendering)&&((o=l.debounceRendering)||i)(k)}function k(){var n,l,u,i,o,f,r;for(t.sort(function(n,l){return l.__v.__b-n.__v.__b});n=t.pop();)n.__d&&(u=void 0,i=void 0,f=(o=(l=n).__v).__e,(r=l.__P)&&(u=[],i=j(r,o,a({},o),l.__n,void 0!==r.ownerSVGElement,null,u,null==f?m(o):f),T(u,o),i!=f&&w(o)))}function _(n,l,u,t,i,o,f,r,s){var a,p,v,d,y,w,g,k=u&&u.__k||c,_=k.length;if(r==e&&(r=null!=o?o[0]:_?m(u,0):null),a=0,l.__k=b(l.__k,function(u){if(null!=u){if(u.__=l,u.__b=l.__b+1,null===(v=k[a])||v&&u.key==v.key&&u.type===v.type)k[a]=void 0;else for(p=0;p<_;p++){if((v=k[p])&&u.key==v.key&&u.type===v.type){k[p]=void 0;break}v=null}if(d=j(n,u,v=v||e,t,i,o,f,r,s),(p=u.ref)&&v.ref!=p&&(g||(g=[]),v.ref&&g.push(v.ref,null,u),g.push(p,u.__c||d,u)),null!=d){if(null==w&&(w=d),null!=u.__d)d=u.__d,u.__d=null;else if(o==v||d!=r||null==d.parentNode){n:if(null==r||r.parentNode!==n)n.appendChild(d);else{for(y=r,p=0;(y=y.nextSibling)&&p<_;p+=2)if(y==d)break n;n.insertBefore(d,r)}"option"==l.type&&(n.value="")}r=d.nextSibling,"function"==typeof l.type&&(l.__d=d)}}return a++,u}),l.__e=w,null!=o&&"function"!=typeof l.type)for(a=o.length;a--;)null!=o[a]&&h(o[a]);for(a=_;a--;)null!=k[a]&&A(k[a],k[a]);if(g)for(a=0;a<g.length;a++)z(g[a],g[++a],g[++a])}function b(n,l,u){if(null==u&&(u=[]),null==n||"boolean"==typeof n)l&&u.push(l(null));else if(Array.isArray(n))for(var t=0;t<n.length;t++)b(n[t],l,u);else u.push(l?l("string"==typeof n||"number"==typeof n?v(null,n,null,null):null!=n.__e||null!=n.__c?v(n.type,n.props,n.key,null):n):n);return u}function x(n,l,u,t,i){var o;for(o in u)o in l||P(n,o,null,u[o],t);for(o in l)i&&"function"!=typeof l[o]||"value"===o||"checked"===o||u[o]===l[o]||P(n,o,l[o],u[o],t)}function C(n,l,u){"-"===l[0]?n.setProperty(l,u):n[l]="number"==typeof u&&!1===s.test(l)?u+"px":null==u?"":u}function P(n,l,u,t,i){var o,f,r,e,c;if(i?"className"===l&&(l="class"):"class"===l&&(l="className"),"key"===l||"children"===l);else if("style"===l)if(o=n.style,"string"==typeof u)o.cssText=u;else{if("string"==typeof t&&(o.cssText="",t=null),t)for(f in t)u&&f in u||C(o,f,"");if(u)for(r in u)t&&u[r]===t[r]||C(o,r,u[r])}else"o"===l[0]&&"n"===l[1]?(e=l!==(l=l.replace(/Capture$/,"")),c=l.toLowerCase(),l=(c in n?c:l).slice(2),u?(t||n.addEventListener(l,N,e),(n.l||(n.l={}))[l]=u):n.removeEventListener(l,N,e)):"list"!==l&&"tagName"!==l&&"form"!==l&&"type"!==l&&!i&&l in n?n[l]=null==u?"":u:"function"!=typeof u&&"dangerouslySetInnerHTML"!==l&&(l!==(l=l.replace(/^xlink:?/,""))?null==u||!1===u?n.removeAttributeNS("http://www.w3.org/1999/xlink",l.toLowerCase()):n.setAttributeNS("http://www.w3.org/1999/xlink",l.toLowerCase(),u):null==u||!1===u?n.removeAttribute(l):n.setAttribute(l,u))}function N(n){this.l[n.type](l.event?l.event(n):n)}function j(n,u,t,i,o,f,r,e,c){var s,h,p,v,m,w,g,k,x,C,P=u.type;if(void 0!==u.constructor)return null;(s=l.__b)&&s(u);try{n:if("function"==typeof P){if(k=u.props,x=(s=P.contextType)&&i[s.__c],C=s?x?x.props.value:s.__:i,t.__c?g=(h=u.__c=t.__c).__=h.__E:("prototype"in P&&P.prototype.render?u.__c=h=new P(k,C):(u.__c=h=new y(k,C),h.constructor=P,h.render=D),x&&x.sub(h),h.props=k,h.state||(h.state={}),h.context=C,h.__n=i,p=h.__d=!0,h.__h=[]),null==h.__s&&(h.__s=h.state),null!=P.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=a({},h.__s)),a(h.__s,P.getDerivedStateFromProps(k,h.__s))),v=h.props,m=h.state,p)null==P.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else{if(null==P.getDerivedStateFromProps&&k!==v&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(k,C),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(k,h.__s,C)){for(h.props=k,h.state=h.__s,h.__d=!1,h.__v=u,u.__e=t.__e,u.__k=t.__k,h.__h.length&&r.push(h),s=0;s<u.__k.length;s++)u.__k[s]&&(u.__k[s].__=u);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(k,h.__s,C),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(v,m,w)})}h.context=C,h.props=k,h.state=h.__s,(s=l.__r)&&s(u),h.__d=!1,h.__v=u,h.__P=n,s=h.render(h.props,h.state,h.context),u.__k=b(null!=s&&s.type==d&&null==s.key?s.props.children:s),null!=h.getChildContext&&(i=a(a({},i),h.getChildContext())),p||null==h.getSnapshotBeforeUpdate||(w=h.getSnapshotBeforeUpdate(v,m)),_(n,u,t,i,o,f,r,e,c),h.base=u.__e,h.__h.length&&r.push(h),g&&(h.__E=h.__=null),h.__e=null}else u.__e=$(t.__e,u,t,i,o,f,r,c);(s=l.diffed)&&s(u)}catch(n){l.__e(n,u,t)}return u.__e}function T(n,u){l.__c&&l.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u)})}catch(n){l.__e(n,u.__v)}})}function $(n,l,u,t,i,o,f,r){var s,a,h,p,v,d=u.props,y=l.props;if(i="svg"===l.type||i,null==n&&null!=o)for(s=0;s<o.length;s++)if(null!=(a=o[s])&&(null===l.type?3===a.nodeType:a.localName===l.type)){n=a,o[s]=null;break}if(null==n){if(null===l.type)return document.createTextNode(y);n=i?document.createElementNS("http://www.w3.org/2000/svg",l.type):document.createElement(l.type),o=null}if(null===l.type)null!=o&&(o[o.indexOf(n)]=null),d!==y&&n.data!=y&&(n.data=y);else if(l!==u){if(null!=o&&(o=c.slice.call(n.childNodes)),h=(d=u.props||e).dangerouslySetInnerHTML,p=y.dangerouslySetInnerHTML,!r){if(d===e)for(d={},v=0;v<n.attributes.length;v++)d[n.attributes[v].name]=n.attributes[v].value;(p||h)&&(p&&h&&p.__html==h.__html||(n.innerHTML=p&&p.__html||""))}x(n,y,d,i,r),l.__k=l.props.children,p||_(n,l,u,t,"foreignObject"!==l.type&&i,o,f,e,r),r||("value"in y&&void 0!==y.value&&y.value!==n.value&&(n.value=null==y.value?"":y.value),"checked"in y&&void 0!==y.checked&&y.checked!==n.checked&&(n.checked=y.checked))}return n}function z(n,u,t){try{"function"==typeof n?n(u):n.current=u}catch(n){l.__e(n,t)}}function A(n,u,t){var i,o,f;if(l.unmount&&l.unmount(n),(i=n.ref)&&(i.current&&i.current!==n.__e||z(i,null,u)),t||"function"==typeof n.type||(t=null!=(o=n.__e)),n.__e=n.__d=null,null!=(i=n.__c)){if(i.componentWillUnmount)try{i.componentWillUnmount()}catch(n){l.__e(n,u)}i.base=i.__P=null}if(i=n.__k)for(f=0;f<i.length;f++)i[f]&&A(i[f],u,t);null!=o&&h(o)}function D(n,l,u){return this.constructor(n,u)}function E(n,u,t){var i,o,r;l.__&&l.__(n,u),o=(i=t===f)?null:t&&t.__k||u.__k,n=p(d,null,[n]),r=[],j(u,(i?u:t||u).__k=n,o||e,e,void 0!==u.ownerSVGElement,t&&!i?[t]:o?null:c.slice.call(u.childNodes),r,t||e,i),T(r,n)}l={__e:function(n,l){for(var u,t;l=l.__;)if((u=l.__c)&&!u.__)try{if(u.constructor&&null!=u.constructor.getDerivedStateFromError&&(t=!0,u.setState(u.constructor.getDerivedStateFromError(n))),null!=u.componentDidCatch&&(t=!0,u.componentDidCatch(n)),t)return g(u.__E=u)}catch(l){n=l}throw n}},u=function(n){return null!=n&&void 0===n.constructor},y.prototype.setState=function(n,l){var u;u=this.__s!==this.state?this.__s:this.__s=a({},this.state),"function"==typeof n&&(n=n(u,this.props)),n&&a(u,n),null!=n&&this.__v&&(this.__e=!1,l&&this.__h.push(l),g(this))},y.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),g(this))},y.prototype.render=d,t=[],i="function"==typeof Promise?Promise.prototype.then.bind(Promise.resolve()):setTimeout,f=e,r=0,n.render=E,n.hydrate=function(n,l){E(n,l,f)},n.createElement=p,n.h=p,n.Fragment=d,n.createRef=function(){return{}},n.isValidElement=u,n.Component=y,n.cloneElement=function(n,l){return l=a(a({},n.props),l),arguments.length>2&&(l.children=c.slice.call(arguments,2)),v(n.type,l,l.key||n.key,l.ref||n.ref)},n.createContext=function(n){var l={},u={__c:"__cC"+r++,__:n,Consumer:function(n,l){return n.children(l)},Provider:function(n){var t,i=this;return this.getChildContext||(t=[],this.getChildContext=function(){return l[u.__c]=i,l},this.shouldComponentUpdate=function(l){n.value!==l.value&&t.some(function(n){n.context=l.value,g(n)})},this.sub=function(n){t.push(n);var l=n.componentWillUnmount;n.componentWillUnmount=function(){t.splice(t.indexOf(n),1),l&&l.call(n)}}),n.children}};return u.Consumer.contextType=u,u},n.toChildArray=b,n._e=A,n.options=l});
//# sourceMappingURL=preact.umd.js.map

let e = preact.createElement;

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var dataform = function () {
    function dataform(options) {
        var _this = this;

        _classCallCheck(this, dataform);

        this.submit = function (options) {
            if (_this.options.path) {
                _this.submit_state = 'submitting';
                _this.render();
                var postOptions = {

                    on_success: function on_success(ob) {
                        if (ob.response && ob.response.valid == true) {
                            _this.probs = false;
                            if (_this.options.on_submit_complete) {
                                _this.options.on_submit_complete({
                                    response: ob.response
                                });
                            }
                            _this.submit_state = false;
                            _this.submitted_count++;
                            _this.render();
                        } else {
                            // console.log(ob);
                            _this.submit_state = false;
                            if (ob.response && ob.response.probs) {
                                _this.probs = ob.response.probs;
                                if (_this.options.on_submit_fail) {
                                    _this.options.on_submit_fail({
                                        response: ob.response
                                    });
                                }
                            }
                            _this.render();
                        }
                    }
                };
                if (_this.options.path_format) {
                    postOptions.path_format = _this.options.path_format;
                }
                ui.controller.formPost(_this.options.path, _this.data, postOptions);
            } else {
                console.error('No form path.');
            }
        };

        this.render = function () {
            if (_this.context) {
                _this.context.setState({
                    version: Date.now()
                });
            }
        };

        this.options = options;
        this.data = this.options.data || {};
        this.context = this.options.context || false;
        this.probs = false;
        this.submitted_count = 0;
        this.submit_state = false;
    }

    _createClass(dataform, [{
        key: 'update',
        value: function update(updates) {
            for (var dataKey in updates) {
                if (updates.hasOwnProperty(dataKey)) {
                    if (this.data[dataKey] != updates[dataKey]) {
                        this.data[dataKey] = updates[dataKey];
                        delete this.probs[dataKey];
                    }
                }
            }
            this.render();
        }
    }]);

    return dataform;
}();

var Controls = function (_preact$Component) {
    _inherits(Controls, _preact$Component);

    function Controls() {
        _classCallCheck(this, Controls);

        var _this2 = _possibleConstructorReturn(this, (Controls.__proto__ || Object.getPrototypeOf(Controls)).call(this));

        _this2.state = {};
        return _this2;
    }

    _createClass(Controls, [{
        key: 'componentDidMount',
        value: function componentDidMount() {}
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {}
    }, {
        key: 'render',
        value: function render() {
            var controls = [];

            if (this.props.items) {
                for (var itemKey in this.props.items) {
                    if (this.props.items.hasOwnProperty(itemKey)) {
                        var item = this.props.items[itemKey];
                        controls.push(e('div', { id: itemKey, class: 'controls-item' }, e(Button, item)));
                    }
                }
            }

            return e('div', { class: 'controls' }, controls);
        }
    }]);

    return Controls;
}(preact.Component);

var Probs = function (_preact$Component2) {
    _inherits(Probs, _preact$Component2);

    function Probs() {
        _classCallCheck(this, Probs);

        var _this3 = _possibleConstructorReturn(this, (Probs.__proto__ || Object.getPrototypeOf(Probs)).call(this));

        _this3.state = {};
        return _this3;
    }

    _createClass(Probs, [{
        key: 'componentDidMount',
        value: function componentDidMount() {}
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {}
    }, {
        key: 'render',
        value: function render() {
            var probs = [];

            if (this.props.items) {
                for (var itemKey in this.props.items) {
                    if (this.props.items.hasOwnProperty(itemKey)) {
                        var item = this.props.items[itemKey];
                        probs.push(e('div', { id: itemKey, class: 'probs-item' }, this.props.items[itemKey]));
                    }
                }
            }

            return e('div', { class: 'probs' }, probs);
        }
    }]);

    return Probs;
}(preact.Component);

var Button = function (_preact$Component3) {
    _inherits(Button, _preact$Component3);

    function Button() {
        _classCallCheck(this, Button);

        var _this4 = _possibleConstructorReturn(this, (Button.__proto__ || Object.getPrototypeOf(Button)).call(this));

        _this4.click = function (event) {
            if (_this4.props.onClick) {
                event.preventDefault();
                event.stopPropagation();
                _this4.props.onClick({
                    event: event
                });
            }
        };

        _this4.state = {};
        return _this4;
    }

    _createClass(Button, [{
        key: 'componentDidMount',
        value: function componentDidMount() {}
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {}
    }, {
        key: 'render',
        value: function render() {
            var classes = ['button'];
            if (this.props.color) {
                classes.push('color-' + this.props.color);
            }
            return e('button', { onClick: this.click, class: classes.join(' ') }, this.props.title);
        }
    }]);

    return Button;
}(preact.Component);

var Form = function (_preact$Component4) {
    _inherits(Form, _preact$Component4);

    function Form() {
        _classCallCheck(this, Form);

        var _this5 = _possibleConstructorReturn(this, (Form.__proto__ || Object.getPrototypeOf(Form)).call(this));

        _this5.inputKeyUp = function (ob) {
            if (ob.event.keyCode === 13) {

                if (_this5.props.dataform) {
                    ob.event.target.blur();
                    _this5.props.dataform.submit();
                    setTimeout(function () {
                        ob.event.target.focus();
                    }, 20);
                }
            } else {
                return _this5.inputChange(ob);
            }
        };

        _this5.inputChange = function (ob) {
            if (_this5.props.dataform) {
                _this5.props.dataform.update(_defineProperty({}, ob.field, ob.event.target.value));
            }
        };

        _this5.state = {};
        return _this5;
    }

    _createClass(Form, [{
        key: 'componentDidMount',
        value: function componentDidMount() {}
    }, {
        key: 'componentWillUnmount',
        value: function componentWillUnmount() {}
    }, {
        key: 'render',
        value: function render() {
            var fields = [];
            var formClasses = ['form'];

            if (this.props.dataform && this.props.dataform.submit_state == 'submitting') {
                formClasses.push('submitting');
            }
            if (this.props.dataform && this.props.dataform.submitted_count > 0) {
                formClasses.push('submitted');
            }

            if (this.props.fields) {
                for (var fieldKey in this.props.fields) {
                    if (this.props.fields.hasOwnProperty(fieldKey)) {
                        var fieldClasses = ['field'];
                        var field = this.props.fields[fieldKey];
                        var inputType = field.input_type || 'text';
                        var input = null;
                        var label = null;

                        var value = '';
                        if (this.props.data && this.props.data[fieldKey]) {
                            value = this.props.data[fieldKey];
                        } else if (this.props.dataform && this.props.dataform.data && this.props.dataform.data[fieldKey]) {
                            value = this.props.dataform.data[fieldKey];
                        }

                        var placeholder = null;

                        if (this.props.placeholder) {
                            placeholder = field.title;
                        }

                        if (!placeholder) {
                            label = e('div', { class: 'field-label' }, field.title);
                        }

                        var prob = null;

                        if (this.props.dataform && this.props.dataform.probs && this.props.dataform.probs[fieldKey]) {
                            prob = e('div', { class: 'field-prob' }, this.props.dataform.probs[fieldKey]);
                        }

                        input = e('input', {
                            // onChange: event => {
                            //     this.inputChange({
                            //         event,
                            //         field: fieldKey
                            //     });
                            // },
                            placeholder: placeholder,
                            onKeyUp: function (fieldKey, event) {
                                this.inputKeyUp({
                                    event: event,
                                    field: fieldKey
                                });
                            }.bind(this, fieldKey),
                            type: inputType,
                            value: value
                        });

                        fields.push(e('div', { class: fieldClasses.join(' ') }, label, e('div', { class: 'field-input text' }, input), prob));
                    }
                }
            }

            return e('div', { class: formClasses.join(' ') }, fields);
        }
    }]);

    return Form;
}(preact.Component);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Ui = function Ui(options) {
    _classCallCheck(this, Ui);

    // console.log(options);
    this.options = options;
    this.tab = Math.floor(Date.now() / 1000);
    this.controller = Ui_controller ? new Ui_controller(this) : false;
    this.dom = Ui_dom ? new Ui_dom(this) : false;
};

function Component(options) {
    var _this = this;

    this.options = options;
    this.id = options.id;
    this.data = options.data || {};
    this.root = document.getElementById('component_' + this.id);
    this.state = options.state || {};
    this.element = new window[options.component](this);
    this.setState = function (state, callback) {
        Object.assign(_this.state, state);
        _this.render(callback);
    };
    this.before = function () {
        if (_this.element.before) {
            _this.element.before();
        }
    };
    this.render = function (callback) {
        if (_this.element.render) {
            _this.element.render();
        }
        if (callback) {
            callback();
        }
    };
    this.before();
    this.render();
}
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Ui_controller = function Ui_controller(ui) {
    var _this = this;

    _classCallCheck(this, Ui_controller);

    this.formPost = function (path, data, options) {
        options = options || {};

        var pathFormat = options.path_format || 'form_view';

        var url = void 0;
        if (pathFormat == 'direct') {
            url = _this.appUrl(path, false, {
                direct: true
            });
        } else {
            url = _this.appUrl('controller/form_view/' + path + '.htp', {
                recupdate_action: 'update'
            });
        }

        fetch(url, {
            method: 'POST', // or 'PUT'
            headers: {
                'Content-Type': 'text/plain'
            },
            body: JSON.stringify({
                data: data
            })
        }).then(function (response) {
            return response.json();
        }).then(function (data) {
            if (options.on_success) {
                options.on_success({
                    response: data
                });
            }
        }).catch(function (error) {
            if (options.on_error) {
                options.on_error({
                    response: data
                });
            }
        });
    };

    this.appUrl = function (path, addParams, options) {
        var url = [];
        var qs = [];
        options = options || {};

        if (!options.direct) {
            url.push(_this.ui.options.app_url_root);
        }
        url.push(path);

        var params = {
            s: _this.ui.options.site,
            p: _this.ui.options.page,
            ul_client_date: new Date().toISOString(),
            ul_client_key: _this.ui.options.ul_client_key,
            ul_app_id: _this.ui.options.app,
            uslapp_session: _this.ui.options.uslapp_session,
            ul_client_tab: _this.ui.tab
        };

        if (addParams) {
            for (var paramKey in addParams) {
                if (addParams.hasOwnProperty(paramKey)) {
                    params[paramKey] = addParams[paramKey];
                }
            }
        }

        for (var paramKey in params) {
            if (params.hasOwnProperty(paramKey)) {
                qs.push(paramKey + '=' + encodeURIComponent(params[paramKey]));
            }
        }

        if (path.indexOf('?') !== -1) {
            url.push('&' + qs.join('&'));
        } else {
            url.push('?' + qs.join('&'));
        }

        return url.join('');
    };

    this.ui = ui;
};
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Ui_dom = function Ui_dom(ui) {
    var _this = this;

    _classCallCheck(this, Ui_dom);

    this.ini = function () {
        _this.iniResize();
        _this.iniScroll();
        _this.iniFeatures();
        _this.iniIntersect();
    };

    this.uid = function () {
        return _this.uidcur++;
    };

    this.checkAll = function () {
        _this.checkScroll();
        _this.checkMobile();
    };

    this.iniIntersect = function () {
        var options = {
            root: document.querySelector('#scrollArea'),
            rootMargin: '0px',
            threshold: .4
        };

        _this.observer = new IntersectionObserver(_this.intersectCallback, options);
    };

    this.intersectCallback = function (entries, observer) {
        // console.log(entries);
        entries.forEach(function (entry) {
            // console.log(entry);
            if (entry.isIntersecting) {
                entry.target.classList.remove('ui-dom-intersect-below');
                entry.target.classList.remove('ui-dom-intersect-above');
                entry.target.classList.add('ui-dom-intersect-in');
                entry.target.classList.remove('ui-dom-intersect-out');
            } else {
                var windowHeightHalf = window.outerHeight / 2;
                if (entry.boundingClientRect.bottom > windowHeightHalf) {
                    entry.target.classList.add('ui-dom-intersect-below');
                    entry.target.classList.remove('ui-dom-intersect-above');
                } else {
                    entry.target.classList.remove('ui-dom-intersect-below');
                    entry.target.classList.add('ui-dom-intersect-above');
                }
                entry.target.classList.remove('ui-dom-intersect-in');
                entry.target.classList.add('ui-dom-intersect-out');
            }
            // Each entry describes an intersection change for one observed
            // target element:
            //   entry.boundingClientRect
            //   entry.intersectionRatio
            //   entry.intersectionRect
            //   entry.isIntersecting
            //   entry.rootBounds
            //   entry.target
            //   entry.time
        });
    };

    this.iniScroll = function () {
        _this.checkScrollLastTop = 0;
        window.addEventListener('scroll', _this.checkScroll);
    };

    this.iniResize = function () {
        window.addEventListener('resize', _this.checkAll);
    };

    this.iniFeatures = function () {
        _this.featureWebP();
    };

    this.featureWebP = function () {
        var webP = false;
        var elem = document.createElement('canvas');
        if (!!(elem.getContext && elem.getContext('2d'))) {
            webP = elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
        }
        if (webP) {
            document.documentElement.classList.add('f-webp');
            _this.sup.webp = true;
        } else {
            document.documentElement.classList.add('f-webp-0');
            _this.sup.webp = false;
        }
    };

    this.checkScroll = function () {
        var top = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
        var scrollDiff = top - _this.checkScrollLastTop;
        // console.log(scrollDiff);
        if (top > _this.checkScrollLastTop) {
            document.body.classList.add('scrolling-last-down');
            document.body.classList.remove('scrolling-last-up');
        } else if (top < _this.checkScrollLastTop) {
            document.body.classList.remove('scrolling-last-down');
            document.body.classList.add('scrolling-last-up');
        }
        _this.checkScrollLastTop = top;
        if (top >= 10) {
            document.body.classList.add('scrolled-down');
            document.body.classList.remove('scrolled-up');
        } else {
            document.body.classList.remove('scrolled-down');
            document.body.classList.add('scrolled-up');
        }
    };

    this.checkMobile = function () {
        if (document.body.clientWidth > 800) {
            _this.screen = 'desktop';
            document.body.classList.add('desktop');
            document.body.classList.remove('mobile');
        } else {
            _this.screen = 'mobile';
            document.body.classList.remove('desktop');
            document.body.classList.add('mobile');
        }
    };

    this.ui = ui;
    this.screen = false;
    this.sup = {
        webp: false
    };
    this.checkAll();
    this.ini();
    this.uidcur = 1;
};

var headMenusOpen = {};

function headMenu(component) {
    var _this = this;

    this.c = component;
    this.select = function (selected) {
        _this.c.setState({
            selected: selected
        });
    };
    this.menuOpen = false;
    this.timers = {};
    this.overNav = false;
    this.overDisplay = false;
    this.focused = false;
    this.timing = {
        enter: 200,
        leave: 200,
        duration: 200
    };
    this.showStarting = false;

    this.displayElmEnter = function () {
        _this.overDisplay = true;
        if (_this.timers.leaving) {
            clearTimeout(_this.timers.leaving);
        }
    };
    this.displayElmLeave = function () {
        if (_this.focused) return false;
        _this.overDisplay = false;
        _this.timers.leaving = setTimeout(function () {
            _this.hideNow();
        }, _this.timing.leave);
    };

    this.menuElmEnter = function () {
        _this.overNav = true;
        if (_this.timers.leaving) {
            clearTimeout(_this.timers.leaving);
        }
        _this.timers.showing = setTimeout(function () {
            // console.log(this.overNav);
            // console.log(this.overDisplay);
            if (_this.overNav == true || _this.overDisplay == true) {
                // console.log('showing');
                _this.showNow();
            }
        }, _this.timing.enter);
    };
    this.menuElmLeave = function () {
        _this.overNav = false;
        _this.timers.leaving = setTimeout(function () {
            _this.hideNow();
        }, _this.timing.leave);
    };
    this.menuElmClick = function (event) {
        event.target.blur();
        event.preventDefault();
        event.stopPropagation();
    };
    this.displayElmClick = function (event) {
        // console.log(event);
        event.preventDefault();
        event.stopPropagation();
        _this.focused = true;
    };
    this.closeDisplayOnClick = function (event) {
        _this.hideNow();
    };
    // this.leaveStart = () =>{
    //     if (this.leaveStarting) {
    //         clearTimeout(this.leaveStarting)
    //     }
    //     this.leaveStarting = setTimeout(()=>{
    //         this.hideNow();
    //     }, this.timing.leave)
    // }
    // this.showStart = () =>{
    //
    //     headMenusOpen[this.c.state.id] = true;
    //     if (this.showStarting) {
    //         clearTimeout(this.showStarting)
    //     }
    //     this.showStarting = setTimeout(()=>{
    //         this.showNow();
    //     }, this.timing.enter)
    // }
    this.showNow = function () {
        // console.log(Object.keys(headMenusOpen).length);
        _this.displayElmPosition();
        _this.displayElm.classList.add('active');
        if (Object.keys(headMenusOpen).length < 2) {
            _this.displayElm.classList.add('entering');
            setTimeout(function () {
                _this.displayElm.classList.remove('entering');
            }, _this.timing.duration);
        }
        _this.displayElm.classList.remove('leaving');
    };
    this.displayElmPosition = function () {
        var menuBox = _this.menuElm.getBoundingClientRect();
        _this.displayElm.style.display = 'block';
        var displayBox = _this.displayElm.getBoundingClientRect();
        _this.displayElm.style.display = null;
        var menuBoxCenter = (menuBox.left + menuBox.right) / 2;
        var newLeft = menuBoxCenter - displayBox.width / 2;
        if (newLeft < 100) newLeft = 100;
        _this.displayElm.style.left = newLeft + 'px';
        var pointerLeft = menuBoxCenter - newLeft - 8;
        _this.displayPointerElm.style.marginLeft = pointerLeft + 'px';
        if (ui.dom.screen == 'mobile') {
            _this.displayPointerElm.style.marginLeft = '85%';
            _this.displayElm.style.right = '5px';
            _this.displayElm.style.left = newLeft / 2 + 'px';
        }
    };
    this.hideNow = function () {
        delete headMenusOpen[_this.c.state.id];
        _this.displayElm.classList.remove('active');

        // if (Object.keys(headMenusOpen).length<1) {
        //     this.displayElm.classList.add('leaving');
        //     setTimeout(()=>{
        //         this.displayElm.classList.remove('leaving');
        //     }, this.timing.duration)
        // }
    };
    this.bodyClick = function (event) {
        if (_this.focused) {
            // event.preventDefault();
            // event.stopPropagation();
            _this.focused = false;
            _this.hideNow();
        }
    };
    this.before = function () {
        _this.menuElm = document.getElementById('head_menu_' + _this.c.state.id);
        _this.displayElm = document.getElementById('menu_' + _this.c.state.id);
        _this.displayPointerElm = document.getElementById('menu_pointer_' + _this.c.state.id);
        // window.addEventListener('scroll', this.scroll);
        if (_this.menuElm && _this.displayElm && _this.displayPointerElm) {
            document.body.addEventListener('click', _this.bodyClick);
            _this.menuElm.addEventListener('click', _this.menuElmClick);
            _this.menuElm.addEventListener('mouseenter', _this.menuElmEnter);
            _this.menuElm.addEventListener('mouseleave', _this.menuElmLeave);
            if (_this.displayElm.classList.contains('focusable')) {
                _this.displayElm.addEventListener('click', _this.displayElmClick);
            }
            if (_this.displayElm.classList.contains('closeDisplayOnClick')) {
                _this.displayElm.addEventListener('click', _this.closeDisplayOnClick);
            }

            _this.displayElm.addEventListener('mouseenter', _this.displayElmEnter);
            _this.displayElm.addEventListener('mouseleave', _this.displayElmLeave);
        }
    };
    this.render = function () {
        // console.log('render ' + this.c.state.id);
    };
}