function disablePicker(e) {
    console.log(e.target.popup);
}
function initNotebookEditor() {
    var btn = document.getElementById('edit-toggle-btn'),
        title = document.getElementById('nb-title'),
        form = document.getElementById('nb-edit-form'),
        picker = form.getElementsByTagName('fieldset')['color-picker'],
        fname = form.getElementsByTagName('input')['id_name'];
    
    window.bookediting = false;
    form.getElementsByTagName('input')['color_rgb'].disabled = true;
    form.addEventListener('input', function () {
        window.formchange = true;
        console.log('adding change');
    });
    document.getElementById('btn-js-hide').classList.add('hide');
    
    btn.classList.remove('hide');
    btn.addEventListener('click', function(e){
        e.preventDefault();
        edit_notebook(this, title, form, picker, fname, window.url);
    }, false);
}
function initNotebookCreator(btn, title, url) {
    var notebook_form = document.querySelector('#nb-create-form');
    var notebook_form_inputs = notebook_form.getElementsByTagName('input');
    var picker = notebook_form.getElementsByTagName('fieldset')['color-picker'];
    picker.popup = new Picker({
        parent: picker,
        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;
        },
    });
    var forms = [];
    var btns = [];
    var notebooks = document.getElementsByClassName('nb-list-item');
    window.bookediting = false;
    for (var i = 0; i < notebooks.length; i++) {
        var fname = notebooks[i].getElementsByTagName('input')['id_form-'+i+'-name'];
        fname.parentNode.classList.add('hide');
        notebooks[i].getElementsByTagName('input')['i-'+i].classList.add('hide');
        forms[i] = notebooks[i].getElementsByTagName('form')[0];
        forms[i].getElementsByTagName('input')['color_rgb'].disabled = true;
        forms[i].addEventListener('input', function () {
            window.formchange = true;
            console.log('adding change');
        });
        btns[i] = notebooks[i].getElementsByTagName('a')['edit-toggle-btn-'+i];
        btns[i].addEventListener('click', myFunc, false);
        btns[i].t = notebooks[i].getElementsByTagName('h2')[0];
        btns[i].picker = notebooks[i].getElementsByTagName('fieldset')['color-picker-'+i];
        btns[i].fname = fname;
        btns[i].form = forms[i];
        btns[i].url = forms[i]['action'];
        function myFunc(e) {
            e.preventDefault();
            edit_notebook(e.target, e.target.t, e.target.form, e.target.picker, e.target.fname, e.target.url);
        };
    }
}

function edit_notebook(btn, title, form, picker, fname, url){
    var form_inputs = form.getElementsByTagName('input');
    console.log(picker);
    if (window.bookediting === false) {
        picker.popup= new Picker({
            parent: picker,
            color: 'blue',
            alpha: false,
            //editor: false,
            editorFormat: 'hex',
            onDone: function(color) {
                this.settings['parent'].style.backgroundColor = color.rgbString;
                form_inputs['color_rgb'].value = color.rgbString;
            },
        });
        title.setAttribute('contenteditable', true);
        title.classList.add('highlight');
        form_inputs['color_rgb'].disabled = false;
        btn.innerHTML = 'Save';
        btn.classList.add('save');
        window.bookediting = true;
        window.titlecontents = title.innerHTML; 
        window.colorcontent = form_inputs['color_rgb'].value;
    } else {
        if (window.titlecontents !== title.innerHTML || window.colorcontent !== form_inputs['color_rgb'].value || window.formchange) {
            console.log('changed');
            console.log(form_inputs);
            fname.value = title.innerHTML;
            //const data = formToJSON(form.elements);
            //console.log(JSON.stringify(data, null, '  '));
            var request = new XMLHttpRequest();
            request.open('PATCH', url);
            var csrftoken = Cookies.get('csrftoken');
            request.setRequestHeader('X-CSRFToken', csrftoken);
            request.onload = function() {
                if (request.status >= 200 && request.status < 400) {
                    console.log(request); 
                } else {
                    console.log(request); 
                    console.log('server error');
                }
            };
            request.onerror = function() {
                console.log('error on request');
            };
            request.send(new FormData(form));           
        }
        title.setAttribute('contenteditable', false);
        title.classList.remove('highlight');
        btn.innerHTML = 'Edit';
        btn.classList.remove('save');
        form_inputs['color_rgb'].disabled = true;
        document.body.focus();
        window.bookediting = false;
        picker.popup = null;
    }
    return false;
}
if (typeof(document.getElementById('nb-edit-form')) != 'undefined' && document.getElementById('nb-edit-form') != null) {
    initNotebookEditor();
}
if (typeof(document.getElementById('nb-create-form')) != 'undefined' && document.getElementById('nb-create-form') != null && document.getElementById('note-edit-form') === null) {
    initNotebookCreator();
}