clouds script

    addLoadEvent(function () {

        var cloundsInitialized = false;

        function initHeaderClouds() {

            var imagesLoaded = 0;

            var cloud1 = {
                url: 'https://lorwolf.azureedge.net/layout/Header-Clouds-1-v2.png',
                loaded: false,
            }

            var cloud1Behind = {
                url: 'https://lorwolf.azureedge.net/layout/Header-Clouds-2-v2.png',
                loaded: false,
            }

            var cloud2 = {
                url: 'https://lorwolf.azureedge.net/layout/Header-Clouds-1-v2.png',
                loaded: false,
            }

            var cloud2Behind = {
                url: 'https://lorwolf.azureedge.net/layout/Header-Clouds-2-v2.png',
                loaded: false,
            }

            var cloud3 = {
                url: 'https://lorwolf.azureedge.net/layout/Header-Clouds-1-v2.png',
                loaded: false,
            }

            var cloud3Behind = {
                url: 'https://lorwolf.azureedge.net/layout/Header-Clouds-2-v2.png',
                loaded: false,
            }

            function imageLoaded() {
                imagesLoaded++;
                if (imagesLoaded >= 8) {
                    initClouds();
                    $('#headerCloudsContainer').removeClass('invisible');
                }
            }

            var skyImage = new Image();
            skyImage.onload = imageLoaded
            skyImage.src = 'https://lorwolf.azureedge.net/static/Title Screen Sky.png';

            var forgroundImage = new Image();
            forgroundImage.onload = imageLoaded
            forgroundImage.src = 'https://lorwolf.azureedge.net/layout/Title-Screen-Front.png';

            var cloud1Loader = new Image();
            cloud1Loader.onload = function () {

                imageLoaded();
            }
            cloud1Loader.src = cloud1.url;

            var cloud1BehindLoader = new Image();
            cloud1BehindLoader.onload = function () {

                imageLoaded();
            }
            cloud1BehindLoader.src = cloud1Behind.url;



            var cloud2Loader = new Image();
            cloud2Loader.onload = function () {

                imageLoaded();
            }
            cloud2Loader.src = cloud2.url;

            var cloud2BehindLoader = new Image();
            cloud2BehindLoader.onload = function () {

                imageLoaded();
            }
            cloud2BehindLoader.src = cloud2Behind.url;



            var cloud3Loader = new Image();
            cloud3Loader.onload = function () {

                imageLoaded();
            }
            cloud3Loader.src = cloud3.url;

            var cloud3BehindLoader = new Image();
            cloud3BehindLoader.onload = function () {

                imageLoaded();
            }
            cloud3BehindLoader.src = cloud3Behind.url;


            var canvas = document.getElementById('headerClouds');
            var stage = new createjs.Stage("headerClouds");

            createjs.Ticker.setFPS(45);

            var shapes = [];
            var shapeIndex = 0;

            function addImage(url, x, y, width, height, alpha, alternateStage) {
                var stageToUpdate = stage;
                if (alternateStage) {
                    stageToUpdate = alternateStage;
                }
                alpha = alpha || 1;
                var img = new Image();
                var shape = null;
                var currentShapeIndex = shapeIndex;
                shapeIndex++;
                img.onload = function () {
                    shape = new createjs.Shape();
                    shape.alpha = alpha;
                    stageToUpdate.addChild(shape);
                    shapes[currentShapeIndex] = shape;
                    img.scaleY = height / img.height;
                    img.scaleX = width / img.width;
                    var m = new createjs.Matrix2D();
                    m.translate(x, y);
                    m.scale(width / img.width, height / img.height);
                    shape.graphics.clear().beginBitmapFill(img, 'no-repeat', m);
                    var fill = shape.graphics.drawRect(x, y, width, height).command;

                    shape.cache(x, y, fill.w, fill.h); // added

                    stageToUpdate.update();
                };
                img.src = url;
                return currentShapeIndex;
            }

            function initClouds() {

                var cloudSpeed = -.05; // -X pixels per frame
                var cloudBehindSpeed = -.1; // -X pixels per frame
                var cloudWidth = 2000;

                function handleClouds() {

                    if (document.hidden)
                        return; // tab is not active in browser

                    var currentScrollTop = $(window).scrollTop();
                    var cloudsHeight = $('#headerClouds').height();
                    if (currentScrollTop > cloudsHeight)
                        return; // user is scrolled past the clouds

                    // cloud 1
                    if (!cloud1.loaded) {
                        cloud1.loaded = true;
                        cloud1.shapeIndex = addImage(cloud1.url, 0, 0, cloudWidth, 300, 1, null);
                    } else {
                        if (shapes[cloud1.shapeIndex]) {
                            shapes[cloud1.shapeIndex].x += cloudSpeed;
                            if (cloud1.hasBeenMoved) {
                                if (shapes[cloud1.shapeIndex].x <= -cloudWidth) {
                                    shapes[cloud1.shapeIndex].x = cloudWidth * 2;
                                }
                            } else {
                                if (shapes[cloud1.shapeIndex].x <= -cloudWidth) {
                                    cloud1.hasBeenMoved = true;
                                    shapes[cloud1.shapeIndex].x = cloudWidth * 2;
                                }
                            }
                        }
                    }

                    // cloud 1 behind
                    if (!cloud1Behind.loaded) {
                        cloud1Behind.loaded = true;
                        cloud1Behind.shapeIndex = addImage(cloud1Behind.url, 0, 0, cloudWidth, 300, 1, null);
                    } else {
                        if (shapes[cloud1Behind.shapeIndex]) {
                            shapes[cloud1Behind.shapeIndex].x += cloudBehindSpeed;
                            if (cloud1Behind.hasBeenMoved) {
                                if (shapes[cloud1Behind.shapeIndex].x <= -cloudWidth) {
                                    shapes[cloud1Behind.shapeIndex].x = cloudWidth * 2;
                                }
                            } else {
                                if (shapes[cloud1Behind.shapeIndex].x <= -cloudWidth) {
                                    cloud1Behind.hasBeenMoved = true;
                                    shapes[cloud1Behind.shapeIndex].x = cloudWidth * 2;
                                }
                            }
                        }
                    }

                    // cloud 2
                    if (!cloud2.loaded) {
                        cloud2.loaded = true;
                        cloud2.shapeIndex = addImage(cloud2.url, cloudWidth, 0, cloudWidth, 300, 1, null);
                    } else {
                        if (shapes[cloud2.shapeIndex]) {
                            shapes[cloud2.shapeIndex].x += cloudSpeed;
                            if (cloud2.hasBeenMoved) {
                                if (shapes[cloud2.shapeIndex].x <= -cloudWidth * 2) {
                                    shapes[cloud2.shapeIndex].x = cloudWidth;
                                }
                            } else {
                                if (shapes[cloud2.shapeIndex].x <= -cloudWidth * 2) {
                                    cloud2.hasBeenMoved = true;
                                    shapes[cloud2.shapeIndex].x = cloudWidth;
                                }
                            }
                        }
                    }

                    // cloud 2 behind
                    if (!cloud2Behind.loaded) {
                        cloud2Behind.loaded = true;
                        cloud2Behind.shapeIndex = addImage(cloud2Behind.url, cloudWidth, 0, cloudWidth, 300, 1, null);
                    } else {
                        if (shapes[cloud2Behind.shapeIndex]) {
                            shapes[cloud2Behind.shapeIndex].x += cloudBehindSpeed;
                            if (cloud2Behind.hasBeenMoved) {
                                if (shapes[cloud2Behind.shapeIndex].x <= -cloudWidth * 2) {
                                    shapes[cloud2Behind.shapeIndex].x = cloudWidth;
                                }
                            } else {
                                if (shapes[cloud2Behind.shapeIndex].x <= -cloudWidth * 2) {
                                    cloud2Behind.hasBeenMoved = true;
                                    shapes[cloud2Behind.shapeIndex].x = cloudWidth;
                                }
                            }
                        }
                    }

                    // cloud 3
                    if (!cloud3.loaded) {
                        cloud3.loaded = true;
                        cloud3.shapeIndex = addImage(cloud3.url, cloudWidth * 2, 0, cloudWidth, 300, 1, null);
                    } else {
                        if (shapes[cloud3.shapeIndex]) {
                            shapes[cloud3.shapeIndex].x += cloudSpeed;
                            if (cloud3.hasBeenMoved) {
                                if (shapes[cloud3.shapeIndex].x <= -cloudWidth * 3) {
                                    shapes[cloud3.shapeIndex].x = 0;
                                }
                            } else {
                                if (shapes[cloud3.shapeIndex].x <= -cloudWidth * 3) {
                                    cloud3.hasBeenMoved = true;
                                    shapes[cloud3.shapeIndex].x = 0;
                                }
                            }
                        }
                    }

                    // cloud 3 behind
                    if (!cloud3Behind.loaded) {
                        cloud3Behind.loaded = true;
                        cloud3Behind.shapeIndex = addImage(cloud3Behind.url, cloudWidth * 2, 0, cloudWidth, 300, 1, null);
                    } else {
                        if (shapes[cloud3Behind.shapeIndex]) {
                            shapes[cloud3Behind.shapeIndex].x += cloudBehindSpeed;
                            if (cloud3Behind.hasBeenMoved) {
                                if (shapes[cloud3Behind.shapeIndex].x <= -cloudWidth * 3) {
                                    shapes[cloud3Behind.shapeIndex].x = 0;
                                }
                            } else {
                                if (shapes[cloud3Behind.shapeIndex].x <= -cloudWidth * 3) {
                                    cloud3Behind.hasBeenMoved = true;
                                    shapes[cloud3Behind.shapeIndex].x = 0;
                                }
                            }
                        }
                    }

                    stage.update();
                }

                createjs.Ticker.addEventListener("tick", handleClouds);

            }
        }

        function initCloudsIfApplicable() {
            if (!cloundsInitialized) {
                if (!isMobile() && !isTablet() && !$("html").hasClass("darkMode")) {
                    initHeaderClouds();
                    cloundsInitialized = true;
                }
            }
        }

        initCloudsIfApplicable();
        $(window).resize(initCloudsIfApplicable);

    })