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(title, form, picker, fname, window.url);
    }, false);
}
function activatePicker(form, picker) {
    var inputs = form.getElementsByTagName('input');
    var picker = 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;
            inputs['color_rgb'].value = color.rgbString;
        },
    });
}
function initMultiNotebookEditor(notebooks){
    // Takes an array of elements containing forms 
    var forms = [];
    var btns = [];
    window.bookediting = false;
    for (var i = 0; i < notebooks.length; i++) {
        var nb = notebooks[i];
        var form = forms[i];
        var btn = btns[i];
        // hide the form elements
        var fname = nb.getElementsByTagName('input')['id_name-'+i];
        fname.parentNode.classList.add('hide');
        nb.getElementsByTagName('input')['i-'+i].classList.add('hide');
        form = nb.getElementsByTagName('form')[0];
        form.getElementsByTagName('input')['color_rgb'].disabled = true;
        form.addEventListener('input', function () {
            window.formchange = true;
            console.log('adding change');
        });
        btn = nb.getElementsByTagName('a')['edit-toggle-btn-'+i];
        btn.addEventListener('click', clickHandler, false);
        btn.t = nb.getElementsByTagName('h2')[0].getElementsByTagName('a')[0];
        btn.picker = nb.getElementsByTagName('fieldset')['color-picker-'+i];
        btn.fname = fname;
        btn.form = form;
        btn.url = form['action'];
        btn.trash = nb.getElementsByTagName('button')['trash']
        btn.trash.classList.add('hide') 
        btn.isHidden = true;
        function clickHandler(e) {
            e.preventDefault();
            e.target.textContent = e.target.isHidden ? 'Save' : 'Edit';
            e.target.isHidden = !e.target.isHidden;
            e.target.classList.toggle('save');
            e.target.trash.classList.toggle('hide');
            edit_notebook(e.target.t, e.target.form, e.target.picker, e.target.fname, e.target.url, 'POST');
        };
        var more = form.getElementsByTagName('button')['more-button-'+i]
        if (more !== undefined) {
            more.slider = form.getElementsByTagName('ul')['n-list-'+i]
            var isHidden = true;
            more.addEventListener('click', moreclickHandler, false);
            function moreclickHandler(e) {
                console.log(e.target.slider);
                e.preventDefault();
                e.target.slider.classList.toggle('slideup');
                e.target.slider.classList.toggle('slidedown');
                e.target.textContent = isHidden ? 'Less' : 'More';
                isHidden = !isHidden;
            }
        }
    }
}
function edit_notebook(title, form, picker, fname, url, method){
    var method = method || 'PUT';
    var form_inputs = form.getElementsByTagName('input');
    if (window.bookediting === false) {
        activatePicker(form, picker);
        title.setAttribute('contenteditable', true);
        title.classList.add('highlight');
        form_inputs['color_rgb'].disabled = false;
        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) {
            fname.value = title.innerHTML;
            var data = new FormData(form)
            getJSONFromDjango(method, url, notebookCallback.bind(null, title), data);
        }
        title.setAttribute('contenteditable', false);
        title.classList.remove('highlight');
        form_inputs['color_rgb'].disabled = true;
        document.body.focus();
        window.bookediting = false;
        picker.popup = null;
    }
    return false;
}
function notebookCallback(title, request) {
    if (request.status >= 200 && request.status < 400) {
        if (title.href) {
            var data = JSON.parse(request.responseText);
            title.href = '/nb/'+ data['notebook']['permalink'];
            console.log(title.href);
        }
        if (window.overlay !== undefined) {
            window.overlay.destroy();
        }
    } else {
        console.log(request); 
        console.log('server error');
    }
}
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('nb-list-home') !== null) {
    var newnotebook = document.getElementById('notebook-wrapper');
    newnotebook.classList.add('hide');
    var notebookAddForm = document.getElementById('nb-create-form');
    var btn = document.getElementById('add_id_notebook');
    addNotebookModal(notebookAddForm, btn);
    var create_form = document.getElementById('nb-create-form');
    activatePicker(create_form, create_form.getElementsByTagName('fieldset')['color-picker']);
    initMultiNotebookEditor(document.getElementsByClassName('nb-list-item'));
}