(function () {
    'use strict';

    var box1 = document.getElementById("box1");
    var winHeight = window.innerHeight;
    var winWidth = window.innerWidth;
    var boxHeight = box1.offsetHeight;
    var boxWidth = box1.offsetWidth;

    function printConsole() {
        console.log(winHeight);
        console.log(winWidth);
        console.log(boxHeight);
        console.log(boxWidth);
        console.log(window.getComputedStyle(box1).left);
        console.log(window.getComputedStyle(box1).top);
    }

    function centerBox() {
        winHeight = window.innerHeight;
        winWidth = window.innerWidth;
        boxHeight = box1.offsetHeight;
        boxWidth = box1.offsetWidth;

        box1.style.left = (winWidth / 2) - (boxWidth / 2) + "px";
        box1.style.top = (winHeight / 2) - (boxHeight / 2) + "px";
    }

    function circle() {
        var all = document.getElementsByClassName("selected");

        for (var i = 0; i < all.length; i++) {
            all[i].classList.toggle("circle");
        }
    }

    function increaseSize() {
        var all = document.getElementsByClassName("selected");

        for (var i = 0; i < all.length; i++) {
            winHeight = window.innerHeight;
            winWidth = window.innerWidth;
            boxHeight = box1.offsetHeight;
            boxWidth = box1.offsetWidth;

            all[i].style.width = boxWidth + 5 + "px";
            all[i].style.height = boxHeight + 5 + "px";
            box1.style.left = (winWidth / 2) - (boxWidth / 2) + "px";
            box1.style.top = (winHeight / 2) - (boxHeight / 2) + "px";
        }
    }

    function decreaseSize() {
        var all = document.getElementsByClassName("selected");

        for (var i = 0; i < all.length; i++) {
            winHeight = window.innerHeight;
            winWidth = window.innerWidth;
            boxHeight = box1.offsetHeight;
            boxWidth = box1.offsetWidth;

            all[i].style.width = boxWidth - 5 + "px";
            all[i].style.height = boxHeight - 5 + "px";
            box1.style.left = (winWidth / 2) - (boxWidth / 2) + "px";
            box1.style.top = (winHeight / 2) - (boxHeight / 2) + "px";
        }
    }

    function switchColor() {
        var all = document.getElementsByClassName("selected");

        for (var i = 0; i < all.length; i++) {
            var test1 = window.getComputedStyle(all[i]).getPropertyValue("background-color");

            if (test1 == "rgb(0, 0, 255)") {
                all[i].style.backgroundColor = "rgb(0, 128, 0)";
            }

            if (test1 == "rgb(255, 0, 0)") {
                all[i].style.backgroundColor = "rgb(0, 0, 255)";
            }

            if (test1 == "rgb(255, 255, 0)") {
                all[i].style.backgroundColor = "rgb(255, 0, 0)";
            }

            if (test1 == "rgb(0, 128, 0)") {
                all[i].style.backgroundColor = "rgb(255, 255, 0)";
            }
        }
    }

    function cloneObj() {
        var all = document.querySelectorAll(".selected");

        winHeight = window.innerHeight;
        winWidth = window.innerWidth;

        for (var i = 0; i < all.length; i++) {
            var clone = all[i].cloneNode(true);


            clone.addEventListener("click", function(event) {
                event.target.classList.toggle("selected");
            });

            clone.addEventListener("dblclick", function(event) {
                event.target.classList.toggle("animateSize");

                setTimeout(function() {
                    var all = document.querySelectorAll(".animateSize");

                    for (var i = 0; i < all.length; i++) {
                        document.body.removeChild(all[i]);
                    }
                }, 3000);
            });

            function clonePosition() {
                clone.style.position = 'absolute';
                // Stick on the left
                clone.style.left = Math.round(Math.random() * winWidth) / 1.2 + 'px';
                clone.style.top = Math.round(Math.random() * winHeight) / 1.2 + 'px';

                // Stick on the right
                clone.style.right = Math.round(Math.random() * winWidth) / 1.2 + 'px';
                clone.style.top = Math.round(Math.random() * winHeight) / 1.2 + 'px';
            }

            window.addEventListener("resize", clonePosition);

            clonePosition();
            // Add it to body
            var newOne = document.body.appendChild(clone);

            console.log("Antal Kloner = " + all.length)
        }
    }

    function indexMinus() {
        var all = document.getElementsByClassName("selected");


        for (var i = 0; i < all.length; i++) {
            var test1 = window.getComputedStyle(all[i]).getPropertyValue("z-index");

            all[i].style.zIndex = test1 - 1;
        }
    }

    function indexPlus() {
        var all = document.getElementsByClassName("selected");

        for (var i = 0; i < all.length; i++) {
            var test2 = window.getComputedStyle(all[i]).getPropertyValue("z-index");

            all[i].style.zIndex = parseInt(test2) + 1;
        }
    }

    function removeObj() {
        var all = document.querySelectorAll(".selected");

        for (var i = 0; i < all.length; i++) {
            document.body.removeChild(all[i]);
        }
    }

    function arrowUp() {
        var all = document.getElementsByClassName("selected");
        var step = 10;

        for (var i = 0; i < all.length; i++) {
            var top = all[i].offsetTop;
            var left = all[i].offsetLeft;

            all[i].style.top = (top - step) + "px";
        }
    }

    function arrowDown() {
        var all = document.getElementsByClassName("selected");
        var step = 10;

        for (var i = 0; i < all.length; i++) {
            var top = all[i].offsetTop;
            var left = all[i].offsetLeft;

            all[i].style.top = (top + step) + "px";
        }
    }

    function arrowLeft() {
        var all = document.getElementsByClassName("selected");
        var step = 10;

        for (var i = 0; i < all.length; i++) {
            var top = all[i].offsetTop;
            var left = all[i].offsetLeft;

            all[i].style.left = (left - step) + "px";
        }
    }

    function arrowRight() {
        var all = document.getElementsByClassName("selected");
        var step = 10;

        for (var i = 0; i < all.length; i++) {
            var top = all[i].offsetTop;
            var left = all[i].offsetLeft;

            all[i].style.left = (left + step) + "px";
        }
    }

    function unTarget() {
        var els = document.getElementsByClassName("selected");

        els[0].classList.remove("selected")
        if (els[0]) unTarget()
    }

    function addClass() {
        var els = document.getElementsByClassName("box");

        for (var i = 0; i < els.length; i++) {
            els[i].classList.add("selected");
        }
        console.log("Antal element med classen 'selected' = " + els.length)
    }

    function slumpClone() {
        var all = document.querySelectorAll(".selected");

        winHeight = window.innerHeight;
        winWidth = window.innerWidth;

        for (var i = 0; i < all.length; i++) {
            var clone = all[i].cloneNode(true);
            var colors = ["rgb(0, 0, 255)", "rgb(0, 128, 0)", "rgb(255, 0, 0)", "rgb(255, 255, 0)"];
            var formType = ["0%", "50%"];

            clone.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
            clone.style.borderRadius = formType[Math.floor(Math.random() * colors.length)];
            clone.style.position = 'absolute';
            clone.style.left = Math.round(Math.random() * winWidth) / 1.2 + 'px';
            clone.style.top = Math.round(Math.random() * winHeight) / 1.2 + 'px';
            clone.style.right = Math.round(Math.random() * winWidth) / 1.2 + 'px';
            clone.style.top = Math.round(Math.random() * winHeight) / 1.2 + 'px';

            // Add it to body
            clone.addEventListener("click", function(event) {
                event.target.classList.toggle("selected");
            });

            clone.addEventListener("dblclick", function(event) {
                event.target.classList.toggle("animateSize");

                setTimeout(function() {
                    var all = document.querySelectorAll(".animateSize");

                    for (var i = 0; i < all.length; i++) {
                        document.body.removeChild(all[i]);
                    }
                }, 3000);
            });

            var newOne = document.body.appendChild(clone);
        }
    }

    window.addEventListener("resize", centerBox);
    box1.addEventListener("click", function(event) {
        event.target.classList.toggle("selected");
    });

    box1.addEventListener("dblclick", function(event) {
        event.target.classList.toggle("animateSize");

        setTimeout(function() {
            var all = document.querySelectorAll(".animateSize");

            for (var i = 0; i < all.length; i++) {
                document.body.removeChild(all[i]);
            }
        }, 3000);
    });

    document.addEventListener("keydown", function(event) {
        var key = event.key;

        switch(key) {
            case "e":
                circle();
                break;
            case "q":
                increaseSize();
                break;
            case "w":
                decreaseSize();
                break;
            case "r":
                switchColor();
                break;
            case "t":
                cloneObj();
                break;
            case "a":
                indexMinus();
                break;
            case "s":
                indexPlus();
                break;
            case "y":
                removeObj();
                break;
            case "ArrowUp":
                event.preventDefault();
                arrowUp();
                break;
            case "ArrowDown":
                event.preventDefault();
                arrowDown();
                break;
            case "ArrowLeft":
                event.preventDefault();
                arrowLeft();
                break;
            case "ArrowRight":
                event.preventDefault();
                arrowRight();
                break;
            case "u":
                unTarget();
                break;
            case "i":
                addClass();
                break;
            case "p":
                slumpClone();
                break;
            case "d":
                slumpClone();
                break;
        }
    });

    printConsole();
    centerBox();

    console.log('Kmom05 Done!');
})();