function buildComponent(tag, id, html){
    var el = document.createElement(tag.toLowerCase());
    if(id) el.id = id;
    if(typeof html === 'string') el.innerHTML = html;
    if(typeof html === 'object') el.appendChild(html);
    return el;
};

function getJSON(method, url, callback) {
    var request = new XMLHttpRequest();
    request.addEventListener('load', callback);
    request.open(method, url, true);
    request.onload = function() {
        if (request.status >= 200 && request.status < 400) {
            //console.log(request.responseText);
        } else {
            console.log('server error');
        }
    };
    request.onerror = function() {
        console.log('error on request');
    };
    request.send();
}

//global init for Color Picker
function initColorPicker(form){
    var notebook_form_inputs = form.getElementsByTagName('input');
    var p = notebook_form.getElementsByTagName('fieldset')['color-picker'];
    //document.getElementById('js-novi-backdrop').removeEventListener("click", handleMouseDown, true); 
    p.classList.add('top');
    p.popup = p.popup || new Picker({
        parent: p,
        color: 'blue',
        alpha: false,
        //editor: false,
        editorFormat: 'hex',
        onDone: function(color) {
            this.settings['parent'].style.backgroundColor = color.rgbString;
            notebook_form_inputs['color_rgb'].value = color.rgbString;
        },
    });
}

function get_login_form() {
    getJSON('GET', '/login/', function(e){
        console.log(e); 
    });
}

//first define your getCookie function
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

//Global init for Quill 
function initQuill(el) {
    var container = document.querySelector(el);
    const q = new Quill(container, {
        modules: {
            syntax: true,              // Include syntax module
            toolbar: [
                [{ header: [1, 2, 3, 4, false] }],
                ['bold', 'italic', 'underline', 'blockquote'],
                [{ 'list': 'bullet'}, { 'list': 'ordered'},{ 'list': 'check'} ],
                ['link', 'code-block', 'image', 'video', 'formula',],
                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
            ] 
        },
        theme: 'snow',
        enable: false
    });
    var t = Quill.find(container)
    q.on('text-change', function(delta, oldDelta, source) {
        t.change = true;
    });
    return t;
}

//global modal function, give a DOM element, puts it in a model box.
function modalBox(el, content){
    if (window.elemsRemoved !== undefined) {
        content = window.elemsRemoved;
    }
    var headlines = ['Prompt'];
    var options = {
        type : el.dataset.modalHedClass, 
        headline : el.dataset.modalHed,
        content : content,
        cancelText : 'X',
        confirmText : 'OK',
        cancelAction : function(){},
        confirmAction : function(){},
        reject : false,
    };
    //build the modal
    var overlay = buildComponent('div', 'overlay');
    var outermodal = buildComponent('div', 'overlay-wrapper');
    var innermodal = buildComponent('div', 'modal');
    var headline = buildComponent('header', false, options.headline);
    headline.className = 'hed';
    content.classList.remove('hide');
    var content = buildComponent('div', 'content-wrapper', options.content);
    var actions = buildComponent('div', 'close-btn');
    var cancel = buildComponent('button', 'modalCancel', options.cancelText);
    cancel.classList.add('btn', 'btn-hollow', 'btn-light');
    actions.appendChild(cancel);
    var hed_wrapper = buildComponent('div', 'hed-wrapper');
    hed_wrapper.appendChild(headline);
    hed_wrapper.appendChild(actions); //actions includes action buttons
    innermodal.appendChild(hed_wrapper);
    innermodal.appendChild(content);
    overlay.appendChild(outermodal);
    outermodal.appendChild(innermodal); //innermodal includes headline & content
    document.body.appendChild(overlay);
    window.overlay = overlay;
    //handle removing modals 
    overlay.destroy = function(){
        if(overlay.parentNode === document.body) {
            wrapper = document.querySelector('#content-wrapper').firstChild;
            window.elemsRemoved = wrapper;
            wrapper.remove();
            overlay.parentNode.removeChild(overlay);
        }
    }
    //add event handlers
    overlay.addEventListener('click', function(e){
        if(e.target === overlay){
            options.cancelAction();
            overlay.destroy();
        }
    });
  
    cancel.addEventListener('click', function(e){
        options.cancelAction();
        overlay.destroy();
    });
    return overlay;
};