$(document).ready(function() {
    if ($(".sku-custom").length > 0) {
        $(".xaaImage").closest("div[id]").hide(); //XAA blade only show on both or console tab
        // SKU layout and behavior wrangling, if SKU chooser exists on page
        let viewportWidth = $(window).outerWidth(true);

        let selectorOption;

        const skuSlider = $(".sku-custom .sku-slider");
        const skuList = document.querySelector(".sku-custom .sku-parent .sku-slider > ul");
        const skuItems = $(".sku-custom .sku-parent .sku-slider > ul > li");

        let skuItemsVisible = $(".sku-custom .sku-parent .sku-slider > ul > li:visible");
        skuItemsVisiblePrevious = null;

        let skuItemCount = skuItems.length;
        let carouselWidth = skuItemCount * 100;
        //let panelWidth = 33.333333333;

        // preset some variables shared all over this script
        let visibleIndex;
        let panelsOffset = 0;
        let transformed = 0;
        let transformFactor = (100 / skuItemsVisible);

        let consoleDesktop = [];
        let consoleMobile = [];
        let consoleReversed;

        thePanels = $(".sku-slider > ul").children("li");

        $(thePanels).each(function(index) {
            thisPanel = $(this);
            consoleDesktop.push(thisPanel);
        });

        consoleMobile = consoleDesktop.toReversed();

        // Determine viewport width and process everything. Limit resize detection to width only.
        $(window).on("resize", function(e) {
            let tempViewportWidth = $(window).outerWidth(true);

            function resizeWrangler() { // smooths out the experience especially with PC is selected. Jumpy otherwise.

                resizeTimer = setTimeout(function() {
                    let newViewportWidth = $(window).outerWidth(true);
                    if (tempViewportWidth === newViewportWidth) {
                        if (newViewportWidth !== viewportWidth) {
                            clearTimeout(resizeTimer);
                            viewportWidth = newViewportWidth;
                            skuWrangler();
                        }
                    } else {
                        resizeWrangler();
                    }
                }, 500);
            }
            resizeWrangler();
        });


        // ============================================================
        // Process everything when needed. Called on load, resize, and on any user interaction with the SKU chooser.
        function skuWrangler(skuMutations) {
            skuItemsVisible = $(".sku-custom .sku-parent .sku-slider > ul > li:visible");

            setTimeout(function() { // hack to prevent racing condition
                consoleWrangler();
            }, 0);

            if (viewportWidth < 1084) {
                carouselWidth = 100 * skuItemsVisible.length;
                $(".sku-custom .sku-parent .sku-slider > ul > li").css("width", "auto");
                $(skuSlider).css("touch-action", "pan-y");

                // TODO:
                // if console is selected, reverse the panel order. If something else is selected, put it back.
                /*
                                setTimeout(function() {// hack to prevent racing condition
                                    if (selectorOption === "pc" || $('li[data-selector-option="pc"]').hasClass("f-active") || $('li[data-selector-option="pc"]').is(":focus")) {
                                            pcWrangler();
                                    }
                                }, 0);
                */

                // on any SKU selection
                swipeReset();
            } else {
                carouselWidth = 100;
                $(".sku-custom .sku-parent .sku-slider > ul > li").css("width", "");
                $(skuItems).attr("aria-hidden", "false");
                setTimeout(function() {
                    $(skuSlider).css("touch-action", "auto");
                }, 200);
                $(".sku-custom .sku-parent .sku-slider > ul").css("transform", "none");
            };

            $(".sku-custom .sku-parent .sku-slider > ul").css("width", carouselWidth + "%");

            // determine how much to slide the slider on swipe
            transformFactor = (100 / skuItemsVisible.length);
            flipperWrangler();
            ariaWrangler();
        }

        // ============================================================
        // Navigate by clicking next and previous panels. 
        // PANELS MUST HAVE IDS.
        $(skuItems).click(function() {
            if (viewportWidth < 1084) {
                clickedId = $(this).attr("id");
                skuItemsVisible = $(".sku-custom .sku-parent .sku-slider > ul > li:visible");
                $(skuItemsVisible).each(function(index) {
                    if (clickedId == $(this).attr("id")) {
                        visibleIndex = index;
                        if (visibleIndex > panelsOffset) {
                            swipeLeft();
                        } else if (visibleIndex < panelsOffset) {
                            swipeRight();
                        }
                    }
                });
            }
        });

        function swipeLeft() {
            if (panelsOffset < (skuItemsVisible.length - 1)) {
                transformed = transformed + transformFactor;
                $(skuList).css("transform", "translateX(-" + transformed + "%");
                panelsOffset++;
                flipperWrangler();
                ariaWrangler();
            };
        }

        function swipeRight() {
            if (panelsOffset > 0) {
                transformed = transformed - transformFactor;
                $(skuList).css("transform", "translateX(-" + transformed + "%");
                panelsOffset--;
                flipperWrangler();
                ariaWrangler();
            };
        }

        function swipeLeftToEnd() {
            if (panelsOffset < (skuItemsVisible.length - 1)) {
                transformed = transformed + transformFactor;
                $(skuList).css("transform", "translateX(-" + transformed + "%");
                panelsOffset++;
                swipeLeftToEnd();
            };
            flipperWrangler();
            ariaWrangler();
            //$(".sku-slider").addClass("animate");
        }

        function pcWrangler() {
            //$(".sku-slider").removeClass("animate");
            swipeLeftToEnd();
            //$(".sku-slider").addClass("animate");
        }

        function consoleWrangler() {
            if ((selectorOption === "console" || $('li[data-selector-option="console"]').hasClass("f-active") || $('li[data-selector-option="console"]').is(":focus")) && viewportWidth < 1084) {
                if (consoleReversed !== true) {
                    $(".sku-slider > ul").children("li").detach();
                    $(".sku-slider > ul").append(consoleMobile);
                    consoleReversed = true;
                }
            } else {
                if (consoleReversed === true) {
                    $(".sku-slider > ul").children("li").detach();
                    $(".sku-slider > ul").append(consoleDesktop);
                    consoleReversed = false;
                }
            }
        }


        function swipeReset() {
            //$(".sku-slider").removeClass("animate");

            $(skuList).css("transform", "none");
            transformed = 0;
            panelsOffset = 0;
            ariaWrangler();

            setTimeout(function() {
                $(".sku-slider").addClass("animate")
            }, 100);
        }

        function ariaWrangler() {
            $(skuItems).attr("aria-hidden", "false").find("button, a").attr("tabindex", "0");

            if (viewportWidth < 1084) {
                $(".sku-custom .sku-parent .sku-slider > ul > li:visible").attr("aria-hidden", "true").find("button, a").attr("tabindex", "-1");
                $(".sku-custom .sku-parent .sku-slider > ul > li:visible").eq(panelsOffset).attr("aria-hidden", "false").find("button, a").attr("tabindex", "0");
            }
        }

        $(".sku-custom .c-flipper.f-previous").click(function() {
            swipeRight();
        });

        $(".sku-custom .c-flipper.f-next").click(function() {
            swipeLeft();
        });

        function flipperWrangler() {
            $(".sku-custom .c-flipper").removeClass("hidden");

            if (skuItemsVisible.length == 1) {
                $(".sku-custom .c-flipper").addClass("hidden");
            }
            if (panelsOffset == (skuItemsVisible.length - 1)) {
                $(".sku-custom .c-flipper.f-next").addClass("hidden");
            }
            if (panelsOffset == 0) {
                $(".sku-custom .c-flipper.f-previous").addClass("hidden");
            }
        }

        // ============================================================
        // show/hide panels based on selection
        $(".sku-selector").on("focus", function() {
            $(this).click();
            skuItemsVisiblePrevious = skuItemsVisible.length;
            selectorOption = $(this).attr("data-selector-option");
            $(".sku-custom .sku-parent .sku-slider > ul > li").removeClass("hidden");
            $(".sku-custom .sku-parent .sku-slider > ul > li").each(function(index) {
                thisOption = $(this).attr("data-panel-option");
                if (thisOption.indexOf(selectorOption) == -1) { // looking for selector option value in data-panel-option
                    $(this).addClass("hidden");
                }
            });

            if (selectorOption === "console") {
                $(".xaaImage").closest("div[id]").show();
            } else {
                $(".xaaImage").closest("div[id]").hide();
            }

            skuItemsVisible = $(".sku-custom .sku-parent .sku-slider > ul > li:visible");
            transformFactor = (100 / skuItemsVisible.length);
            // mutation observer sees these changes and triggers skuWrangler()
        });
        // END show/hide panels based on selection


        // ============================================================
        // mutation observer to detect changes when classes change ("hidden") and call skuWrangler accordingly
        let mainOptions = {
            attributes: true,
            attributeFilter: ['class'],
            subtree: true
        };
        let skuObserver = new MutationObserver(skuWrangler);
        skuObserver.observe(skuList, mainOptions);


        // ============================================================
        // swipe handling for mobile
        const swipeElement = document.getElementsByClassName('sku-wrapper')[0];

        let startX = 0;
        let startY = 0;
        let endX = 0;
        let endY = 0;

        swipeElement.addEventListener('touchstart', function(event) {
            startX = event.changedTouches[0].screenX;
            startY = event.changedTouches[0].screenY;
        }, false);

        swipeElement.addEventListener('touchend', function(event) {
            endX = event.changedTouches[0].screenX;
            endY = event.changedTouches[0].screenY;
            gestureWrangler();
        }, false);

        function gestureWrangler() {
            distanceX = Math.abs(endX - startX);
            distanceY = Math.abs(endY - startY);
            // if left/right distance is greater than up/down
            if (distanceX > distanceY) {
                if (endX < startX) {
                    swipeLeft();
                }
                if (endX > startX) {
                    swipeRight();
                }
            }
        }

        // show/hide page bar when sku chooser is in viewport
        let scrollTimer = null;
        $(window).on("load scroll", function() {
            if (scrollTimer) {
                clearTimeout(scrollTimer); // clear any previous timer to save resources
            }
            scrollTimer = setTimeout(scrollWrangler, 150); // set new timer
        });

        function scrollWrangler() {
            if (viewportWidth < 768) {
                scrollTimer = null; // start over, save resources

                scrollPosition = $(document).scrollTop(); // page scroll position

                const skuChooser = $(".sku-custom");
                let skuHeight = $(skuChooser).height();
                let skuTop = $(skuChooser).offset().top;

                topOfViewport = scrollPosition;
                bottomOfViewport = scrollPosition + window.innerHeight;

                topTarget = skuTop - (window.innerHeight * .15); // set how much of top or bottom shows before taking action
                bottomTarget = topTarget + (skuHeight + (window.innerHeight * .5));


                if ((topTarget < topOfViewport) && (bottomTarget > bottomOfViewport)) {
                    $(".c-in-page-navigation.f-sticky").addClass("hidden");
                } else {
                    $(".c-in-page-navigation.f-sticky").removeClass("hidden");
                }
            } else {
                $(".c-in-page-navigation.f-sticky").removeClass("hidden");
            }
        }
        // END show/hide page bar when buybox is in viewport


        skuWrangler();


        function anchorWrangler() {
            theHash = window.location.hash;
            anchor = theHash.toLowerCase();
            if (anchor === "#join-playonpc") {
                $('li.sku-selector[data-selector-option="pc"]').focus();
            } else if (anchor === "#join-playonconsole") {
                $('li.sku-selector[data-selector-option="console"]').focus();
            } else if (anchor === "#join-playonboth") {
                $('li.sku-selector[data-selector-option="pc+console"]').focus();
            }
        }

        setTimeout(function() {
            anchorWrangler();
        }, 3500);
    }
});