$(function () {
    loadBoard();
    loadNotes();
});


const ratio = '16:9'
let divCanvas;
let canWidth;
let canHeight;
let notes = [];

function loadBoard(){
    let placeholder = $('#divPlaceholder');
    placeholder.empty();

    let tmpSplit = ratio.split(':');
    canWidth = placeholder.width();
    canHeight = canWidth / (parseFloat(tmpSplit[0]) / parseFloat(tmpSplit[1]));
    divCanvas = $(`<div id='divCanvas'></div>`);
    placeholder.append(divCanvas);
    divCanvas.css({
        'width': '100%',
        'height': canHeight + 'px',
        'background-color': 'white',
        'padding': '5px'
    });
}

function loadNotes(){
    let note = new Note(1, divCanvas, 200, 0, 400, 240, '<h3>Naslov</h3><hr/><p>Test</p>' );

    notes.push(note);

    let note2 = new Note(2, divCanvas, 0, 0, 400, 240);
    notes.push(note2);

    notes.forEach(note => {
        note.refresh();
    });
}

function openModalEditNote(id){
    $('#inpModalEditNoteIdNote').val(id);
    note = getNote(id);

    $('#divModalEditNote').modal('show');
    $('#divModalEditNoteSummernote').summernote('destroy');
    $('#divModalEditNoteSummernote').html(note.content);
    $('#divModalEditNoteSummernote').summernote({});
}

function saveModalEditNote(){
    let idNote = parseInt($('#inpModalEditNoteIdNote').val());
    note = getNote(idNote);
    note.content = $('#divModalEditNoteSummernote').summernote('code');
    note.refresh();
    $('#divModalEditNote').modal('hide');
}

function getNote(id){
    let note;
    notes.forEach(e => {
        if (e.id === id){
            note = e;
        }
    });
    return note;
}

function svgTest(){
    var node = document.getElementById('divCanvas');

    htmlToImage.toSvg(node)
    .then(function (dataUrl) {
        var link = document.createElement('a');
        link.href = dataUrl;
        link.download = 'Download.jpg';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        return;
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });
}