/*! 2024. 5. 2. 오후 4:59:11 */
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
const { actions } = ShopbySkin;

(() => {
  const bannerId = document.currentScript.getAttribute('shopby-banner-id');

  if (bannerId) {
    actions?.getBannerById?.({ bannerId });
  }
})();

/******/ })()
;
setTimeout(() => {
    const apBrand = (function () {
        let currentIndex = null;
        let wheelObserver = null;
        let anchorTrigger = null;
        let isScrolling = false;
        let isWheelSlides = false;

        const anchorAttr = '[data-scroll-anchor]';
        const anchorSections = document.querySelectorAll(`#main ${anchorAttr}`);
        const inner = document.querySelector('.ap-post__inner');
        const kv = document.querySelector('.ap-section--kv');
        //const intro = document.querySelector('.ap-section--intro');
        const videoS = document.querySelector('.ap-section--video');
        //const info = document.querySelector('.ap-section--info');
        //const pillar = document.querySelector('.ap-section--pillar');
        // const product = document.querySelector(".ap-section--product");
        const end = document.querySelector('.ap-section--end');
        const productClassName = 'ap-section--product';
        const productImgSwipers = [];
        const scrollToOffsetY = 0;

        const mm = gsap.matchMedia();
        const options = {
            isMobile: "(max-width: 720px)",
            isDesktop: "(min-width: 721px)",
            isTablet: "(max-width: 1440px) and (orientation: portrait)",
        };

        const isAnchor = function (section) {
            if (section) {
                const dataAnchor = section.dataset.scrollAnchor;
                const dataIgnore = section.dataset.anchorIgnore;
                const dataAnchorAutoTarget = section.dataset.anchorAutoTarget;
                let result = null;

                mm.add(options, (ctx) => {
                    ctx.revert();
                    const { isMobile, isDesktop, isTablet } = ctx.conditions;
                    
                    if (dataAnchor && dataAnchor === 'true') {
                        const targetSection = section.querySelector(dataAnchorAutoTarget);
                        const getPos = targetSection && targetSection.getBoundingClientRect();
                        const deviceCheck = (isMobile && dataIgnore === 'mobile') || (isTablet && dataIgnore === 'mobile') || (isDesktop && dataIgnore === 'pc');

                        if (deviceCheck || dataIgnore === 'auto' && Math.trunc(info.offsetHeight) > window.innerHeight) {
                            result = false;
                        } else {
                            result = true;
                        }
                    }
                });
                
                return result;
            }
        };

        const isTouchEvt = function (e) {
            return e.touches && e.touches.length > 0;
        };

        const preventScroll = {
            disableObserver: function () {
                if (wheelObserver.isEnabled) {
                    wheelObserver.disable();
                    
                    debugConsole.update();
                }
            },
            enableObserver: function () {
                if (!wheelObserver.isEnabled) {
                    wheelObserver.enable();
                    
                    debugConsole.update();
                }
            }
        }

        const setCurrentIndex = function () {
            anchorSections.forEach((section, index) => {
                anchorTrigger = ScrollTrigger.create({
                    trigger: section,
                    id: `section${index}`,
                    start: `top-=1px top`,
                    end: 'bottom top',
                    onToggle: (self) => {
                        if (self.isActive) {
                            setToggleObserver(self);

                            debugConsole.update();
                        }
                    },
                    onUpdate: (self) => {
                        if (self.isActive) {
                            if (currentIndex !== index) {
                                currentIndex = index;
            
                                debugConsole.update();
                            }
                        }
                    },
                    onRefresh: (self) => {
                        if (self.isActive) {
                            currentIndex = index;
            
                            debugConsole.update();
                        }
                    },
                    invalidateOnRefresh: true,
                    preventOverlaps: true,
                    // markers: true

                });
            });
        };

        const setToggleObserver = function(st) {
            if (isScrolling) return;

            if (st.direction === -1) {
                if (!isAnchor(anchorSections[currentIndex])) {
                    // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                    preventScroll.disableObserver();
                } else {
                    preventScroll.enableObserver();
                }
            } else {
                if (!isAnchor(anchorSections[currentIndex]) || currentIndex === anchorSections.length - 1) {
                    // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                    preventScroll.disableObserver();
                } else {
                    preventScroll.enableObserver();
                }
            }
        };

        
        const setAnimateEffect = (function() {
            const createScrollTrigger = function(trigger, start, end, scrub = false, pin = false, animation = null) {
                ScrollTrigger.create({
                    trigger,
                    start,
                    end,
                    scrub,
                    pin,
                    animation,
                    toggleActions: 'play pause play reverse',
                    invalidateOnRefresh: true,
                    // markers:true,
                });
            }

            const endEffect = function() {
                createScrollTrigger(end.querySelector(".ap-section__body"), "top top", "bottom top", null, false, null);
            }

            const onInit = function() {
                endEffect();
            }
            
            return {
                init: onInit
            }
        })();
        
        const setProductPillars = function () {
            const onInit = function () {
                const updateContent = function (swiper, slideIdx) {
                    const parentEl = swiper.el.closest(`.${productClassName}`);

                    if (parentEl) {
                        const linkBtns = parentEl.querySelectorAll('.ap-link');
                        // const colorTexts = parentEl.querySelectorAll('.text--colored');
                        // const colorClasses = [];
                        let _index = 0;

                        // linkBtns.forEach((btn, index) => {
                        //     if (index === slideIdx) {
                        //         btn.classList.add('is-active');
                        //         _index = index;
                        //     } else {
                        //         btn.classList.remove('is-active');
                        //     }

                        //     //colorClasses.push(`color-${index + 1}`);
                        // });

                        // colorTexts.forEach((text) => {
                        //     // ���대� 而щ윭 蹂�寃쎌쓣 �꾪븳 class 異붽�
                        //     text.classList.remove(...colorClasses);
                        //     text.classList.add(colorClasses[_index]);
                        // });
                    }
                };

                const imgSwiper = document.querySelectorAll(`.${productClassName} .swiper`);
                imgSwiper.forEach((swiper, index) => {
                const parentElement = swiper.closest(`.${productClassName}`);
                const options = {
                    speed: 1000,
                    followFinger: false,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    pagination: {
                        el: '.swiper-pagination-s',
                        clickable: true,
                    },
                    on: {
                    init: function () {
                        const slideIdx = this.activeIndex;
                        updateContent(this, slideIdx);
                    },
                    slideChange: function () {
                        const slideIdx = this.activeIndex;
                        updateContent(this, slideIdx);

                        setTimeout(() => {
                        if (slideIdx >= 0 && slideIdx <= this.slides.length) {
                            if (isWheelSlides) {
                            isWheelSlides = false;
                            }

                            debugConsole.update();
                        }
                        }, 500);
                    },
                    },
                };

                // if (parentElement && parentElement.classList.contains('ap-section--product') && parentElement.getAttribute('data-product-section-index') === '0') {
                //     options.effect = 'fade';
                // }

                const prdocutImgSwiper = new Swiper(swiper, options);

                swiper.closest(`.${productClassName}`).dataset.productSectionIndex = index; // section index媛� �명똿
                productImgSwipers.push(prdocutImgSwiper);
                });
            };

            onInit();
        };

        const scrollToSection = function (index) {
            const targetSection = anchorSections[index] || anchorSections[currentIndex];
            let setOffsetObj = { y: targetSection, offsetY: scrollToOffsetY };

            if (isScrolling && !isAnchor(targetSection)) return;
            
            gsap.to(window, {
                duration: 1,
                scrollTo: setOffsetObj,
                ease: 'power2.inOut', // 遺��쒕윭�� �ㅽ겕濡ㅼ쓣 �꾪븳 easing
                onStart: () => {
                    isScrolling = true;

                    debugConsole.update();
                },
                onComplete: () => {
                    currentIndex = index;
                    isScrolling = false;

                    if (!isAnchor(anchorSections[currentIndex]) || currentIndex === anchorSections.length - 1) {
                        // wheelObserver 鍮꾪솢�깊솕 - �쇰컲 �ㅽ겕濡ㅻ줈 蹂�寃�
                        preventScroll.disableObserver();
                    } else {
                        preventScroll.enableObserver();
                    }

                    debugConsole.update();
                },
            });
        };

        const scrollToPrevSection = function (observer) {
            if (currentIndex >= 0) {
                const currentSection = anchorSections[currentIndex];
                const isProductSection = currentSection && currentSection.classList.contains(productClassName);
                const isSectionInView = Math.trunc(currentSection.getBoundingClientRect().top) < scrollToOffsetY;

                const goPrevSection = function () {
                    const prevIndex = currentIndex > 0 ? currentIndex - 1 : currentIndex;
                    
                    if (isSectionInView) {
                        scrollToSection(currentIndex);
                    } else {
                        scrollToSection(prevIndex);
                    }
                };

                if (isProductSection) {
                    // product pillars �곸뿭 �덉쇅泥섎━
                    const dataIndex = Number(currentSection.dataset.productSectionIndex);
                    const imgSwiper = currentSection.querySelector('.swiper');
                    const linkBtn = currentSection.querySelector('.ap-link.is-active');
                    const textContent = currentSection.querySelector('.ap-text__content');

                    const changeSlide = function () {
                        if (productImgSwipers[dataIndex].slides.length > 0) {
                            if (isWheelSlides) return;
                            
                            // wheel濡� �щ씪�대뱶 �섍린湲�
                            if (productImgSwipers[dataIndex].isBeginning || isSectionInView) {
                                // �щ씪�대뱶 泥ル쾲吏몄옣�쇰븣 �ㅼ쓬 �뱀뀡�쇰줈 �대룞
                                goPrevSection();
                            } else {
                                // �댁쟾 �щ씪�대뱶 蹂닿린
                                isWheelSlides = true;
                                productImgSwipers[dataIndex].slidePrev(1000, true);
                            }

                            debugConsole.update();
                        }
                    };

                    if (isAnchor(currentSection)) {
                        changeSlide();
                    }
                } else {
                    goPrevSection();
                }
            }
        };

        const scrollToNextSection = function (observer) {
            if (currentIndex < anchorSections.length - 1) {
                const currentSection = anchorSections[currentIndex];
                const isProductSection = currentSection && currentSection.classList.contains(productClassName);
                const isSectionInView = Math.trunc(currentSection.getBoundingClientRect().top) < scrollToOffsetY;

                const goNextSection = function () {
                    const nextIndex = currentIndex + 1;
                    scrollToSection(nextIndex);
                };

                if (isProductSection) {
                    // product pillars �곸뿭 �덉쇅泥섎━
                    const dataIndex = Number(currentSection.dataset.productSectionIndex);
                    const imgSwiper = currentSection.querySelector('.swiper');
                    const linkBtn = currentSection.querySelector('.ap-link.is-active');
                    const textContent = currentSection.querySelector('.ap-text__content');

                    const changeSlide = function () {
                        if (productImgSwipers[dataIndex].slides.length > 0) {
                            if (isWheelSlides) return;
                            
                            // wheel濡� �щ씪�대뱶 �섍린湲�
                            if (productImgSwipers[dataIndex].isEnd || isSectionInView) {
                                // �щ씪�대뱶 留덉�留됱옣�쇰븣�� �ㅼ쓬 �뱀뀡�쇰줈 �대룞
                                goNextSection();
                            } else {
                                // �ㅼ쓬 �щ씪�대뱶 蹂닿린
                                isWheelSlides = true;
                                productImgSwipers[dataIndex].slideNext(1000, true);
                            }

                            debugConsole.update();
                        }
                    };

                    if (isAnchor(currentSection)) {
                        changeSlide();
                    }
                } else {
                    goNextSection();
                }
            }
        };

        const wheelEvt = function () {
            wheelObserver = ScrollTrigger.observe({
                target: window,
                type: 'wheel,touch,pointer',
                dragMinimum: 30,
                tolerance: 30,
                lockAxis: true, // drag �쒗븳 - �띿뒪�� �좏깮�� �꾪븳 �붾㈃ �쒕옒洹� �됱쐞 �� 怨좊젮
                preventDefault: true,
                onUp: (self) => {
                    const e = self.event;

                    if (isScrolling) return;

                    if (currentIndex !== null) {
                        if (isTouchEvt(e)) {
                            // touch �대깽�� �쇰븣�� 諛섎� 諛⑺뼢 - mobile only
                            scrollToNextSection(self);
                        } else {
                            scrollToPrevSection(self);
                        }
                        
                        debugConsole.update();
                    }
                },
                onDown: (self) => {
                    const e = self.event;

                    if (isScrolling) return;

                    if (currentIndex !== null) {
                        if (isTouchEvt(e)) {
                            // touch �대깽�� �쇰븣�� 諛섎� 諛⑺뼢 - mobile only
                            scrollToPrevSection(self);
                        } else {
                            if (wheelObserver.isEnabled) {
                                scrollToNextSection(self);
                            }
                        }

                        debugConsole.update();
                    }
                }
            });
        };


        // �붾쾭源낆슜 �ㅽ겕由쏀듃
        const debugConsole = (function () {
            let consoleEl = null;

            const onUpdate = function () {
                if (consoleEl) {
                    if (consoleEl.querySelector('.log')) {
                        consoleEl.querySelector('.log').textContent = `
                            currentIndex: ${currentIndex} / 
                            isScrolling : ${isScrolling} / 
                            isWheelSlides : ${isWheelSlides} / 
                            wheelObserver.isEnabled : ${wheelObserver && wheelObserver.isEnabled}
                        `;
                    }

                    if (consoleEl.querySelectorAll('button').length > 0) {
                        consoleEl.querySelectorAll('button').forEach((button, index) => {
                            if (index === currentIndex) {
                                button.classList.add('is-active');
                            } else {
                                button.classList.remove('is-active');
                            }
                        });
                    }
                }
            };

            const onInit = function () {
                const newEl = document.createElement('div');
                newEl.classList.add('debug-console');
                document.body.appendChild(newEl);
                consoleEl = document.querySelector('.debug-console');

                if (consoleEl) {
                    let html = '';

                    html += '<p class="log"></p>';
                    anchorSections.forEach((section, index) => {
                        const isActive = index === currentIndex ? 'is-active' : '';
                        html += `<button type="button" onclick="apBrand.toSection(${index})" class="${isActive}">${index}</button>`;
                    });
                    consoleEl.insertAdjacentHTML('beforeend', html);
                    onUpdate();
                }
            };

            return {
                init: onInit,
                update: onUpdate,
            };
        })();

        const onInit = function () {
            gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
            
            setAnimateEffect.init();
            setProductPillars();
            wheelEvt();
            setCurrentIndex();
            AOS.init();

            // debugConsole.init(); // 媛쒕컻 �묒뾽�� - 諛고룷�쒖뿉�� 二쇱꽍 泥섎━
        };

        ScrollTrigger.config({
            autoRefreshEvents: "visibilitychange,DOMContentLoaded,load,resize",
            limitCallbacks: true
        });
        
        let resizeTimer;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);

            resizeTimer = setTimeout(() => {
                ScrollTrigger.refresh();
                AOS.refresh()
            }, 250);
        });
        
        return {
            init: onInit,
            toSection: scrollToSection,
        };
    })();
   apBrand.init();
}, 600);