function edit_note(btn, form, title, quill, qcontainer, url){
    var form_inputs = form.getElementsByTagName('input');
    var form_texts = form.getElementsByTagName('textarea');
    var tags = form.getElementsByTagName('div')['tags'];
    var tags_edit = document.getElementById('t-edit');;
    var notebook_display = document.getElementById('n-link');
    var notebook_wrapper = form.getElementsByTagName('select')['notebook'].parentNode;
    var tags_display = document.getElementById('t-display');
    var colorbox = document.getElementById('n-box');
    var fs_url = document.getElementById('fs-url');
    if (btn.editing === false) {
        title.setAttribute('contenteditable', true);
        title.classList.add('highlight');
        qcontainer.classList.remove('inactive');
        notebook_wrapper.classList.remove('hide');
        //document.getElementsByTagName('select')['notebook'].parentNode.classList.remove('hide');
        notebook_display.classList.add('hide');
        tags_display.classList.add('hide');
        tags_edit.classList.remove('hide');
        fs_url.classList.toggle('hide');
        quill.enable(true);
        btn.innerHTML = 'Save';
        btn.classList.add('save');
        btn.editing = true;
        title.titlecontents = title.innerHTML; 
    } else {
        if (quill.change === true || title.titlecontents != title.innerHTML || form.formchange) {
            form_inputs['title'].value = title.innerHTML;
            form_texts['body_html'].innerHTML = quill.root.innerHTML;
            form_texts['body_text'].innerHTML = quill.getText();
            form_texts['body_qjson'].innerHTML = JSON.stringify(quill.getContents());
            var request = new XMLHttpRequest();
            request.open('POST', url);
            var csrftoken = getCookie('csrftoken');
            request.setRequestHeader('X-CSRFToken', csrftoken);
            request.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest');
            request.onload = function() {
                if (request.status >= 200 && request.status < 400) {
                    var data = JSON.parse(request.responseText);
                    document.getElementById('n-box').style.backgroundColor = data['notebook']['color'];
                    notebook_display.getElementsByTagName('span')['n-name'].textContent = data['notebook']['name'];
                    var tags = JSON.parse(data['tags']);
                    while (tags_display.firstChild) {
                        tags_display.firstChild.remove();
                    }
                    for(var i in tags) {
                        var span = document.createElement('span');
                        span.classList.add('tag-wrapper');
                        span.innerHTML = tags[i]['fields']['name']
                        var link = document.createElement('a');
                        link.classList.add('t-link');
                        link.setAttribute('href', '/n/t/'+tags[i]['fields']['slug']);
                        link.appendChild(span);
                        tags_display.appendChild(link);
                    }
                    quill.change = false;
                } else {
                    console.log(request); 
                    console.log('server error');
                }
            };
            request.onerror = function() {
                console.log('error on request');
            };
            console.log(request);
            console.log(form);
            request.send(new FormData(form));           
        }
        title.setAttribute('contenteditable', false);
        title.classList.remove('highlight');
        qcontainer.classList.add('inactive');
        quill.enable(false);
        fs_url.classList.toggle('hide');
        notebook_wrapper.classList.add('hide');
        btn.innerHTML = 'Edit';
        btn.classList.remove('save');
        tags_display.classList.remove('hide');
        tags_edit.classList.add('hide');
        notebook_display.classList.remove('hide');
        document.body.focus();
        btn.editing = false;
    }
    return false;
}
function notebookCreate(form) {
    var request = new XMLHttpRequest();
    var url = form.action
    request.open('POST', url);
    var csrftoken = getCookie('csrftoken');
    request.setRequestHeader('X-CSRFToken', csrftoken);
    request.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest');
    request.onload = function() {
        if (request.status >= 200 && request.status < 400) {
            var data = JSON.parse(request.responseText);

            // close modal if exists
            if (window.overlay !== undefined) {
                window.overlay.destroy();
            }
            var select = document.getElementById('id_notebook');
            var parentForm = document.getElementById('note-edit-form');
            select.options.add(new Option(data['name'], data['id'], false, true));
            if (parentForm !== null) {
                parentForm.formchange = true;
            }
        } else {
            var data = JSON.parse(request.responseText);
            console.log(data);
            if (data['non_field_errors'][0] === "The fields owner, name must make a unique set.") {
                document.getElementById('non-field-errors').innerHTML = "A Notebook with that name already exists, please choose another.";
            }
            console.log('server error');
        }
    };
    request.onerror = function() {
        console.log('error on request');
    };
    request.send(new FormData(form));           
}
if (typeof(document.getElementById('note-edit-form')) != 'undefined' && document.getElementById('note-edit-form') != null) {
    document.addEventListener("DOMContentLoaded", function () {
        var quill = initQuill("#note-body");
        quill.change = false;
        var btn = document.getElementById('edit-toggle-btn'),
            qcontainer = document.getElementById('q-container'),
            title = document.getElementById('note-title'),
            tag_wrapper = document.getElementById('tag-wrapper'),
            form = document.getElementById('note-edit-form'),
            note_html = document.createElement('textarea'),
            note_qjson = document.createElement('textarea');

        note_html.setAttribute('name', 'body_html');
        note_html.setAttribute('class', 'hide');
        note_html.setAttribute('id', 'id_body_html');
        note_qjson.setAttribute('name', 'body_qjson');
        note_qjson.setAttribute('id', 'id_body_qjson');
        note_qjson.setAttribute('class', 'hide');
        form.appendChild(note_html);
        form.appendChild(note_qjson);
        form.formchange = false;
        form.addEventListener('input', function (e) {
            form.formchange = true;
        });
        document.getElementById('btn-js-hide').classList.add('hide');
        btn.classList.remove('hide');
        btn.editing = false;
        btn.addEventListener('click', function(e){
            e.preventDefault();
            edit_note(e.target, form, title, quill, qcontainer, window.location.href );
        }, false);
        var notebook_form = document.getElementById('nb-create-form');
        initColorPicker(notebook_form);    
        var notebookAddForm = document.getElementById('nb-create-form');
        ajaxHijack(notebookAddForm, notebookCreate)
        var create_notebook_btn = document.getElementById('add_id_notebook');
        addHandler(create_notebook_btn);
        function addHandler(el){
            el.addEventListener('click', function(e){
                e.preventDefault();
                var modal = modalBox(el, document.getElementById('js-overlay-notebook'));
            });
        }
    });
}