const stepSize = 100;
const main = document.querySelector('main');
const draggables = document.querySelectorAll(".draggable");
const randomStarts = document.querySelectorAll(".randomStart");

var zIndex = 2;

activateDraggables();

/**
 * 
 * @param {number} n 
 * @returns {number}
 */
function stepedSize(n) {
    return stepSize * Math.round(n / stepSize);
}

function move(e) {
    e.preventDefault();
    let target = e.target;
    target.style['z-index'] = zIndex;
    zIndex++;

    target.moving = true;

    target.setAttribute('data-moving', '1');

    if (e.clientX) {
        target.oldX = e.clientX; // If they exist then use Mouse input
        target.oldY = e.clientY;
    } else {
        target.oldX = e.touches[0].clientX; // Otherwise use touch input
        target.oldY = e.touches[0].clientY;
    }

    target.oldLeft = window.getComputedStyle(target).getPropertyValue('left').split('px')[0] * 1;
    target.oldTop = window.getComputedStyle(target).getPropertyValue('top').split('px')[0] * 1;

    document.addEventListener('mousemove', drag);
    document.addEventListener('touchmove', drag, {passive: true});

    function drag(event) {
        event.preventDefault();

        if (!target.moving) {
            return;
        }
        if (event.clientX) {
            target.distX = event.clientX - target.oldX;
            target.distY = event.clientY - target.oldY;
        } else {
            target.distX = event.touches[0].clientX - target.oldX;
            target.distY = event.touches[0].clientY - target.oldY;
        }

        newLeft = target.oldLeft + target.distX;
        newTop  = target.oldTop + target.distY;
        target.style.left = stepedSize(newLeft) + "px";
        target.style.top = stepedSize(newTop) + "px";
    }

    function endDrag() {
        target.moving = false;
        target.setAttribute('data-moving', '0');
    }
    document.addEventListener('mouseup', endDrag)
    document.addEventListener('touchend', endDrag)
}

function activateDraggables() {
    for (var draggable of draggables) {
        draggable.addEventListener('mousedown', move);
        draggable.addEventListener('touchstart', move, {passive: true});
    }
}

function randomizeDragables() {
    maxX = main.offsetWidth - 150;
    maxY = main.offsetHeight - 150;
    for (var randomStart of randomStarts) {
        randX = Math.floor(Math.random() * maxX);
        randY = Math.floor(Math.random() * maxY);
        randomStart.style.left = randX + "px"; 
        randomStart.style.top = randY + "px";
    }
}

document.addEventListener("DOMContentLoaded", randomizeDragables);