let mousedown = 0;
let selected = null;

let zIndex = 0

/* CLAMP */
function clampPos() {
    if (selected) {
        const sPosX = Number(selected.style.left.replace("px", ""));
        const sPosY = Number(selected.style.top.replace("px", ""));

        const lPad = -selected.offsetWidth / 2;
        const rPad = window.innerWidth - selected.offsetWidth / 2;
        const tPad = 0;

        if (sPosX < lPad) {selected.style.left = lPad + "px"};
        if (sPosX > rPad) {selected.style.left = rPad + "px"};
        if (sPosY < tPad) {selected.style.top = tPad + "px"};

        if (selected) {
            selected.getElementsByTagName("iframe")[0].style.pointerEvents = "all";
        }

        selected = null;

        if (mouseDown > 0) {mouseDown--;};
    }
}

addEventListener("touchend", clampPos);
addEventListener("mouseup", clampPos);

/* DESKTOP */
let mouseDown = 0

addEventListener("mousedown", event => {
    const t = event.target
    if (t.classList.contains("drag")) {
        selected = t.parentElement;
    };

    if (t.parentElement.classList.contains("drag")) {
        selected = t.parentElement.parentElement;
    };

    if (selected) {
        selected.getElementsByTagName("iframe")[0].style.pointerEvents = "none";
        zIndex ++;
        selected.style.zIndex = zIndex;
    }
    mouseDown ++;
});

addEventListener("mousemove", event => {
    if (selected && mouseDown > 0) {
        let curL = selected.style.left.replace("px", "");
        let curT = selected.style.top.replace("px", "");

        curL = Number(curL);
        curT = Number(curT);

        selected.style.left = (curL + event.movementX) + "px";
        selected.style.top = (curT + event.movementY) + "px";
    }
})

/* MOBILE */

let initialTouchPosition = { x: 0, y: 0 };

addEventListener("touchstart", event => {
    const t = event.target;
    if (t.classList.contains("drag")) {
        selected = t.parentElement;
    }

    if (t.parentElement.classList.contains("drag")) {
        selected = t.parentElement.parentElement;
    }

    if (selected) {
        zIndex ++;
        selected.style.zIndex = zIndex;
    }

    initialTouchPosition = {
        x: event.touches[0].clientX,
        y: event.touches[0].clientY
    };
});

addEventListener("touchmove", event => {
    console.log(event)
    if (selected) {      
        let curL = selected.style.left.replace("px", "");
        let curT = selected.style.top.replace("px", "");

        curL = Number(curL);
        curT = Number(curT);

        selected.style.left = (curL + event.touches[0].clientX - initialTouchPosition.x) + "px";
        selected.style.top = (curT + event.touches[0].clientY - initialTouchPosition.y) + "px";

        initialTouchPosition = {
            x: event.touches[0].clientX,
            y: event.touches[0].clientY
        };
    }
});

/* CREATE WINDOW */
function createWindow(url, title, width, height) {
    const win = document.createElement("div");
    win.className = "window";

    const head = document.createElement("div");
    head.classList = "header drag";
    head.innerHTML = "<p>" + title + "</p><button onclick='this.parentNode.parentNode.remove()'>x</button>";

    const frame = `<iframe class='content' src='${url}' width='${width}' height='${height}'></iframe>`;

    win.appendChild(head);
    win.innerHTML += frame;

    win.style.left = ((window.innerWidth / 2) - (Number(width.replace("px","")) / 2)) + "px";
    win.style.top = ((window.innerHeight / 2) - (Number(height.replace("px","")) / 2)) + "px";

    zIndex ++;
    win.style.zIndex = zIndex;

    document.body.appendChild(win);
}

/*
    <div class="window">
        <div class="header drag">
            <p>Slimekoban</p>
            <button onclick="this.parentNode.parentNode.remove()">x</button>
        </div>
        <iframe class="content" src="https://www.possiblyaxolotl.com" width="800px" height="500px"></iframe>
    </div>
    */