"use strict";

function $h(sel) {
    let qmatches = [];

    if ((typeof sel !== 'undefined') && (sel !== null)) {
        if (typeof sel === 'string') {
            const sel_comma_a = sel.split(',');
            for(let ix = 0; ix !== sel_comma_a.length; ix++) {
                const qres = processQuery(sel_comma_a[ix]);
                for (let iy = 0; iy !== qres.length; iy++) {
                    qmatches.push(qres[iy]);
                }
            }
        }
        else if (typeof sel === 'function') {
            // this is a call to execute the provided function when the document is loaded
            // if the document is already loaded then just call the function, otherwise wait for loaded
            if (document.readyState === 'complete')
                sel();
            else
                document.addEventListener("DOMContentLoaded", sel);
    
            return;
          }
        else
            return sel;
    }
    else
        return sel;

    let res = {
        hide: function() {
            for(let ix = 0; ix !== this.length; ix++) {
                if (this[ix].style.display !== 'none')
                    this[ix].setAttribute('last-display-style', this[ix].style.display);
        
                this[ix].style.display = 'none';
            }
        },
  
        show: function(animate=false, displayStyle='block') {
            for(let ix = 0; ix !== this.length; ix++) {
                if (this[ix].style.display !== 'none')
                    this[ix].setAttribute('last-display-style', this[ix].style.display);
      
                if (animate)
                    this[ix].style.opacity = 0.0;

                this[ix].style.display = displayStyle;
            }

            if (animate) {
                let opacityStart = 0.0;
                let opacityEnd = 1.0;
                let updatesPerSecond = 10;
                let totalIntervals = 20;

                let updatePeriod = 1.0 / updatesPerSecond;
                let opactiyIncrement = (opacityEnd - opacityStart) / (updatesPerSecond * totalIntervals)

                let elements = this;
                let curVal = opacityStart;
                const iid = setInterval(showAnimate, updatePeriod);

                function showAnimate() {
                    curVal += opactiyIncrement;
                    for(let ix = 0; ix !== elements.length; ix++) {
                        elements[ix].style.opacity = curVal;
                    }
                    if (curVal >= opacityEnd)
                        clearInterval(iid);
                }

            }
        },

        slideUp : function(updatesPerSecond, totalSeconds, funcOnDone=null) {
            // the element must have overflow: hidden
            // only operates on the first element
            if (this.length === 0)
                return;

            const e = this[0];

            let height = e.clientHeight;
            e.style.opacity = 0.5;

            const updatePeriod = 1000.0 / updatesPerSecond;
            const heightChange = height / (updatesPerSecond * totalSeconds);

            const iid = setInterval(slideUpAnimate, updatePeriod);

            function slideUpAnimate() {
                height -= heightChange;
                if (height >= 0)
                    e.style.height = height + 'px';
                else {
                    clearInterval(iid);
                    e.style.height = '0px';
                    e.style.display = "none";
                    e.style.opacity = 1.0;
                    if (funcOnDone) {
                        funcOnDone(this);
                    }
                }
            }
        },
  
        val: function(v) {
            if (v) {
                if (this.length > 0) {
                    this[0].value = v;
              }  
            }
            else {
                if (this.length > 0) {
                    return this[0].value;
                }
                else {
                    return null;
                }
              }
        },
  
        attr: function(which, v) {
            if (v) {
                if (this.length > 0) {
                    this[0].setAttribute(which, v);
                }  
            }
            else {
                if (this.length > 0) {
                    if (this[0].hasAttribute(which)) {
                        return this[0].getAttribute(which);
                    }
                    else {
                        return null;
                    }
                }
                else {
                    return null;
                }
            }
        },
  
        onclick: function(func) {
            for(let ix = 0; ix !== this.length; ix++) {
                this[ix].onclick = func;
            }
        },
  
        html: function(h) {
            if (h) {
                for(let ix = 0; ix !== this.length; ix++) {
                    this[ix].innerHTML = h;
                }
            }
            else {
                let res = null;
                if (this.length !== 0)
                    res = this[0].innerHTML;
                return res;
              }
        },
    
        empty: function(h) {
            for(let ix = 0; ix !== this.length; ix++) {
                while (this[ix].firstChild) {
                    this[ix].removeChild(this[ix].firstChild);
                }
            }
        },
    
        each: function(func) {
            for(let ix = 0; ix !== this.length; ix++) {
                func(this[ix]);
            }
        },
  
        append: function(h) {
            for(let ix = 0; ix !== this.length; ix++) {
                this[ix].innerHTML += h;
            }
        },
  
        on: function(sel, func) {
            for(let ix = 0; ix !== this.length; ix++) {
                this[ix].addEventListener(sel, func);
            }
          },
    
        addClass: function(c) {
            for(let ix = 0; ix !== this.length; ix++) {
                if (!hasClass(this[ix], c))
                    this[ix].classList.add(c);
            }
        },
  
        removeClass: function(c) {
            for(let ix = 0; ix !== this.length; ix++) {
                if (hasClass(this[ix], c))
                    this[ix].classList.remove(c);
            }
        },

        css: function(name, value) {
            // return the value of the style property if value is null
            if (value === null) {
                if (this.length !== 0) {
                    return this[0].style[name];
                }
            }
            // otherwise set the styl property to the provided value
            else {
                if (this.length !== 0) {
                    this[0].style[name] = value;
                }
            }
        },
    }

    for(let ix = 0; ix !== qmatches.length; ix++) {
        res[ix] = qmatches[ix];
    }
    res['length'] = qmatches.length;
    
    return res;

    // has no comma's, only element, class, and id's
    function processQuery(sel) {
        let res = [];
        const css = parseCSS(sel);
        for(let ix = 0; ix !== css.length; ix++) {
            if (ix === 0) {
                res = document.querySelectorAll(css[ix]);
            }
            else {
                let tres = [];
                const ourCss = css[ix].substring(1) // without the dot
                for(let iy = 0; iy !== res.length; iy++) {
                    // if (res[iy].classList.contains(ourCss))
                    //     tres.push(res[iy])
                    const qres = res[iy].querySelectorAll(css[ix]);
                    for(let iz = 0; iz !== qres.length; iz++) {
                        tres = tres.concat(qres[iz]);
                    }
                }
                res = tres;
            }
        }

        return res;
    }

    function parseCSS(sel_) {
        let sel = sel_.trim();
        let res = [];

        let skipFirst = true;
        let ix = 0;
        let acc = '';
        while (ix < sel.length) {
            const c = sel[ix];

            if (skipFirst) {
                acc = c;
                skipFirst = false;
            }
            else {
                if ((c !== ' ') && (c !== '.') && (c !== '#')) {
                    acc += c;
                }
                else {
                    res.push(acc);
                    if (c !== ' ') {
                        acc = c;
                    }
                    else {
                        skipFirst = true;
                    }
                }
            }

            ix++;
        }
        if (acc.length !== 0) {
            res.push(acc);
        }

        return res;
    }
  
    // returns true if the element has the specified class
    function hasClass(e, c) {
        let found = false;
        for(let ix = 0; ix !== e.classList.length; ix++) {
            if (e.classList[ix] === c) {
                found = true;
                break;
            }
        }
        return found;
    }
}
  
function $ajax(options) {
    let httpRequest = new XMLHttpRequest();
    if (httpRequest) {
        httpRequest.onreadystatechange = function(e) {
            if (e.target.readyState === XMLHttpRequest.DONE) {
                if (e.target.status === 200) {
                    const apiResults = JSON.parse(e.target.responseText);
                    options['success'](apiResults, e.target.status);
                } else {
                    options['error'](null, e.target.status, "");
                }
            }
        };
        httpRequest.open(options['method'], options['url']);
        //httpRequest.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8')
        let res = "";
        const body = options['data']
        if (typeof body !== 'undefined') {
            // url encode
            let join = '';
            Object.keys(body).forEach(key => {
                res += join + key + '=' + body[key];
                join = '&';
            });
        }

        httpRequest.send(res);
    }
}