/////////////////////////////////////////////////////

// TODO
    // glyphs
    // what buttons where
        // colophone
    // a bit more interface

// DONE
    // Open window icon (on background 'desktop')
    // Close window button (on 'window' itself)
    // random position

//////////////////////////////////////////////////////

let zIndex = 3;

$(document).ready(function(){ 

    // Generate divs
    Object.values(corpi).forEach(corpus => {

        $('#dragZone' ).append(`
            <div id="${corpus['id']}" class="corpi ui-widget-content draggable" >
                    <h1>${corpus['title']}</h1>
                    <p>${corpus['content']}</p>
                    <button class="closable">X</button>
            </div>
            `)
        $('#icons').append(`
        <div class="iconContainer">
            <a href="#${corpus['id']}" class="innerLink">
                <p><button class="icon" onclick="$(${corpus['id']}).fadeIn().css('z-index', zIndex++)" >${corpus["glyph"]}</button></p>
                <span class="textIcon">${corpus['title']}</span>
            </a>
        </div>
        `)
    });

    // Start mouse UI
    const dragResize = new DragResizeClose(zIndex);
});