function deselectAll(){
    let windowList = document.querySelectorAll('main > .floating');
    //console.log('selected windows:', windowList);
    for(const e of windowList){
        e.setAttribute('data-window', 'background');
    }
}

export function makeItFloat(target){
    const startTarget = target.querySelector('h1');

    //console.log('selected target :', startTarget);

    let startX, startY;
    let selectedWindow;
    let selectedPointer;

    startTarget.addEventListener('pointerdown', (event) => {
        selectedPointer = event.pointerId;
        startX = event.pageX;
        startY = event.pageY;
        selectedWindow = target;
        deselectAll();
        target.setAttribute('data-window', 'selected');
        //console.log('clicking...')
    })

    document.addEventListener('pointermove', (event) => {
    if(event.pointerId === selectedPointer && selectedWindow === target){
        event.preventDefault();
        document.querySelector('html').style.overflow = 'hidden';
        //console.log('moving...')
        let currentX = event.pageX;
        let currentY = event.pageY;
        let moveX = target.offsetLeft + currentX - startX;
        target.style.left =  moveX + 'px';
        let moveY = target.offsetTop + currentY - startY;
        target.style.top = moveY + 'px';
        startX = currentX;
        startY = currentY;
    }
    });

    document.addEventListener('pointerup', () => {
        //console.log('STOP !')
        selectedPointer = null;
        document.querySelector('html').style.overflow = '';
    })

    document.addEventListener('pointercancel', () => {
        //console.log('STOP !')
        selectedPointer = null;
        document.querySelector('html').style.overflow = '';
    })
}