(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 = all[i].offsetHeight;
            boxWidth = all[i].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 = all[i].offsetHeight;
            boxWidth = all[i].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);

            var funcTest = function clonePosition() {
                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';
            };

            window.addEventListener("resize", funcTest);
            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]);
                    }
                }, 2000);
            });

            funcTest();

            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;

            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;

            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 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 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(".box");

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

        for (var i = 0; i < 1; 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.classList.toggle("selected");
            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';

            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]);
                    }
                }, 2000);
            });

            document.body.appendChild(clone);
        }
    }

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

        for (var i = 0; i < els.length; i++) {
            els[i].classList.add("animateSize");
        }

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

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

        setTimeout(function() {
            var all = document.querySelectorAll(".tomte1");
            var all1 = document.querySelectorAll(".tomte2");
            var all2 = document.querySelectorAll(".tomte3");
            var all3 = document.querySelectorAll(".tomte4");
            var all4 = document.querySelectorAll(".tomte5");
            var all5 = document.querySelectorAll(".tomte6");
            var all6 = document.querySelectorAll(".tomte7");
            var all7 = document.querySelectorAll(".tomte8");
            var all8 = document.querySelectorAll(".tomte9");
            var all9 = document.querySelectorAll(".tomte10");
            var all10 = document.querySelectorAll(".tomte11");
            var tag = document.getElementsByTagName("body");

            for (var i = 0; i < tag.length; i++) {
                tag[i].style.backgroundColor = "#2c4051";
            }

            for (i = 0; i < all.length; i++) {
                all[i].classList.add("santa");
            }

            for (i = 0; i < all1.length; i++) {
                all1[i].classList.add("circles");
            }

            for (i = 0; i < all2.length; i++) {
                all2[i].classList.add("snow");
            }

            for (i = 0; i < all3.length; i++) {
                all3[i].classList.add("hat");
            }

            for (i = 0; i < all4.length; i++) {
                all4[i].classList.add("hat-end");
            }

            for (i = 0; i < all5.length; i++) {
                all5[i].classList.add("face");
            }

            for (i = 0; i < all6.length; i++) {
                all6[i].classList.add("eyes");
            }

            for (i = 0; i < all7.length; i++) {
                all7[i].classList.add("mouth");
            }

            for (i = 0; i < all8.length; i++) {
                all8[i].classList.add("dirty-overflow");
            }

            for (i = 0; i < all9.length; i++) {
                all9[i].classList.add("body");
            }

            for (i = 0; i < all10.length; i++) {
                all10[i].classList.add("godjul", "godjul2");
            }
        }, 1500);
    }



    function goCrazy() {
        var i = setInterval(function test40() {
            var all = document.querySelectorAll(".selected");

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

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

                all[i].style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                all[i].style.borderRadius = formType[Math.floor(Math.random() * colors.length)];
                all[i].style.left = Math.round(Math.random() * winWidth) / 1.2 + 'px';
                all[i].style.top = Math.round(Math.random() * winHeight) / 1.2 + 'px';
                all[i].style.right = Math.round(Math.random() * winWidth) / 1.2 + 'px';
            }
        }, 199);

        setTimeout(function( ) { clearInterval( i ); }, 1000);
    }

    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]);
            }
        }, 2000);
    });

    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":
                goCrazy();
                break;
            case "1":
                christmas();
                break;
        }
    });

    printConsole();
    centerBox();

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