$(document).ready(function(){ 
    // DRAG and Z-INDEX priorities handler
    var a = 3;
    $( '.draggable' ).draggable({ containment: "window" },{            // Setup dragging and containment
        start: function(event, ui) { $(this).css("z-index", a++); }    // Initialize z-index for handelr
    });

    $('#dragZone div').click(function() {                              // Setup z-index handler
        $(this).addClass('top').removeClass('bottom');
        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);
    });

    // CURSOR MOUSE DOWN 
    $('.draggable').on("mousedown", function(){
        $('.draggable').css('cursor', 'grabbing');
    }).on("mouseup mouseleave", function(){
        $('.draggable').css('cursor', 'grab');
    });

    // RESIZE with aspect ratio
    $( ".resizable" ).resizable({ aspectRatio:true, maxHeight:900, minHeight:200 });
    $( ".resizableOriz" ).resizable({ aspectRatio:true, maxHeight:500, minHeight:200 });



    // size random of draggables
    $( ".draggable" ).each(function() {


        let rw = Math.floor(Math.random() * 500) + 300;
        let rh = Math.floor(Math.random() * 400) + 200;

        console.log(rw,rh) 

        $( this ).css("width",rw);
        $( this ).css("height",rh)

        $( this ).append("<button>X</button>")
    });

    // close window
    $(".closable").click(function() { 
        $( this ).fadeOut(); 
      });

    // open window
    $( ".draggable" ).each(function() {
        let idid = $( this ).attr('id')
        console.log(idid)
        $("#icons").append(`<button onclick="$(${idid}).fadeIn()" class="icon"></button>`)
    });
    // TODOS
    // Open window icon (on background 'desktop')
    // Close window button (on 'window' itself)
});