const DesktopApps = document.querySelectorAll('.windowIcon');
var AppGrid = null;
var XtileSize;
var YtileSize;
var XTiles;
var YTiles;
function SetUp(){
    for (i = 0; i < DesktopApps.length; i++) {
        DragIcon(DesktopApps[i])
    }
}
function CalculateGrid(){

    XtileSize = DesktopApps[0].offsetWidth + (DesktopApps[0].offsetWidth/12);
    YtileSize = DesktopApps[0].offsetHeight + (DesktopApps[0].offsetHeight/12);
    console.log(XtileSize + " " + YtileSize);

    XTiles = Math.round(innerWidth / XtileSize);
    YTiles = Math.round((innerHeight - document.querySelector('.hotbarWrapper').offsetHeight) / YtileSize);
    console.log(XTiles + " " + YTiles);

    var iteratorX = 0;
    var iteratorY = Math.round(document.querySelector('.hotbarWrapper').offsetHeight/YtileSize);
    console.log(iteratorY);
    for (i = 0; i < DesktopApps.length; i++) {
        if (iteratorY >= YTiles) {
            iteratorY = Math.round(document.querySelector('.hotbarWrapper').offsetHeight/YtileSize);
            iteratorX++;
        }
        DesktopApps[i].style.top = (((4 + (YtileSize * iteratorY))/innerHeight)*100) + "vh";
        DesktopApps[i].style.left = (((4 + (XtileSize * iteratorX))/innerWidth)*100) + "vw";
        iteratorY++;
    }
}
function calculatePosition(AppIcon, startPosX, startPosY) {
    var valid = true
    Xpos = Math.round(AppIcon.offsetLeft / XtileSize);
    Ypos = Math.round(AppIcon.offsetTop / YtileSize);
    for (var j = 0; j < DesktopApps.length; j++) {
        if (DesktopApps[j].offsetLeft === 4 + (Xpos * XtileSize)
            && DesktopApps[j].offsetTop === 4 + (Ypos * YtileSize)) {
            valid = false;
        }
    }
    if (valid === false) {
        AppIcon.style.top = ((startPosY/innerHeight)*100) + "vh";
        AppIcon.style.left = ((startPosX/innerWidth)*100) + "vw";
        AppIcon.style.left =  startPosX + "px";
        AppIcon.style.top = startPosY + "px";
    } else {
        AppIcon.style.top = (((4 + (Ypos * YtileSize))/innerHeight)*100) + "vh";
        AppIcon.style.left = (((4 + (Xpos * XtileSize))/innerWidth)*100) + "vw";
    }
}

function DragIcon(AppIcon){
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0, startposX = AppIcon.offsetLeft, startposY = AppIcon.offsetTop;
    AppIcon.addEventListener('mousedown', mouseDown);
    function mouseDown(e) {
        startposX = AppIcon.offsetLeft;
        startposY = AppIcon.offsetTop;
        AppIcon.style.zIndex = 125;
        e.preventDefault();
        document.addEventListener('mousemove', mouseMove);
        document.addEventListener('mouseup', mouseUp);
        pos3 = e.clientX;
        pos4 = e.clientY;
    }
    function mouseMove(e){
        e.preventDefault();
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        if (AppIcon.offsetTop < window.innerHeight) {
            AppIcon.style.top = (AppIcon.offsetTop - pos2) + 'px';
        }
        else if( pos2 >= 0){
            AppIcon.style.top = (AppIcon.offsetTop - pos2) + 'px';
        }
        if (AppIcon.offsetLeft + (AppIcon.clientWidth/2) + 3< window.innerWidth) {
            AppIcon.style.left = (AppIcon.offsetLeft - pos1) + 'px';
        }
        else if(pos1 >= 0) {
            AppIcon.style.left = (AppIcon.offsetLeft - pos1) + 'px';
        }
    }
    function mouseUp(e) {
        document.removeEventListener('mousemove', mouseMove);
        document.removeEventListener('mouseup', mouseUp);
        document.removeEventListener('touchend', mouseUp);
        AppIcon.style.zIndex = 105;
        calculatePosition(AppIcon, startposX, startposY);
        startposX = AppIcon.offsetLeft;
        startposY = AppIcon.offsetTop
    }
}