(function (win, doc, $) {
    'use strict';

    if (typeof $ === 'undefined' || typeof $.fn.slick === 'undefined') {
        return;
    }

    const OUTPUTJSON = {};

    const classNames = {
        globalNavigation: '.js-output-globalNavigation',
        sectionCategoryRoot: '.js-output-sectionCategoryRoot',
        categoryLink: '.js-output-categoryLink',
        categoryNameDisp: '.js-output-categoryNameDisp',
        categoryDescription: '.js-output-categoryDescription',
        contentLink: '.js-output-contentLink',
        mediaSlider: '.js-output-mediaSlider',
        currentSlide: '.js-output-currentSlide',
        totalSlide: '.js-output-totalSlide',
        sectionApplicationId: '.js-output-sectionApplicationId',
        appName: '.js-output-appName',
        appImage: '.js-output-appImage-main',
        tagGroupOuter: '.js-output-tagGroup-outer',
        tagGroup: '.js-output-tagGroup',
        tag: '.js-output-tag',
        categoryName: '.js-output-categoryName',
        appDescription: '.js-output-appDescription',
        imageNoneHook: '.js-imageNone-hook',
        appContentRootSub1: '.js-appContentRoot-sub1',
        appContentRootSub2: '.js-appContentRoot-sub2',
        appHeader1: '.js-output-appHeader1',
        appHeader2: '.js-output-appHeader2',
        appTitle1: '.js-output-appTitle1',
        appTitle2: '.js-output-appTitle2',
        appCaptionSub1: '.js-output-appCaption-sub1',
        appCaptionSub2: '.js-output-appCaption-sub2',
        appImageSub1: '.js-output-appImage-sub1',
        appImageSub2: '.js-output-appImage-sub2',
        seriesExcerpt: '.js-output-seriesExcerpt',
        seriesName: '.js-output-seriesName',
        assetButtonLink: '.js-output-assetButton-link',
        priceButtonLink: '.js-output-priceButton-link',
        thumbnailImage: '.js-output-thumbnailImage',
        headerClassName1: '.js-output-headerClassName1',
        headerClassName2: '.js-output-headerClassName2',
        mediaNavigationLink: '.js-output-mediaNavigation-link',
        titleText: '.js-headingLevel1-text',
        listNotes: '.js-output-listNotes',
        listNotesText: '.js-output-listNotes-text',
        categoryNameDispHook: '.js-categoryNameDisp-hook',
        mediaNavigationHook: '.js-mediaNavigation-hook',
    };

    OUTPUTJSON.config = {
        suz_LanguagePath: win.suz_LanguagePath,
        requestURL: win.suz_LanguagePath + '/ss/products/sensor/application-selecting/application-selecting.json',
        categoryPageURL: win.suz_LanguagePath + '/ss/products/sensor/application-selecting/contents.jsp',
        navigationArray: [],
        contentArray: [],
        categoryParam: {},
        categoryIdKey: 'category_id',
        dict: {},
        dlAssetId: [],
    };

    OUTPUTJSON.fragments = {
        sectionCategory: doc.createDocumentFragment(),
        mediaSlider: doc.createDocumentFragment(),
        tagGroup: doc.createDocumentFragment(),
        application: doc.createDocumentFragment(),
        mediaNavigation: doc.createDocumentFragment(),
    };

    OUTPUTJSON.sliderConfig = {
        root: '.js-output-mediaSlider',
        configGroup: '.js-mediaSlider-configGroup',
        buttonGroup: '.js-mediaSlider-buttonGroup',
        prevButton: '.js-mediaSlider-buttonPrev',
        nextButton: '.js-mediaSlider-buttonNext',
        slidesToShow: 4,
        slidesToScroll: 4,
        largeScreenMql: win.matchMedia('(max-width: 1365px)'),
        smallScreenMql: win.matchMedia('(max-width: 1023px)'),
        extraSmallScreenMql: win.matchMedia('(max-width: 767px)'),
        breakPointLarge: 1366,
        breakPointSmall: 1024,
        breakPointExtraSmall: 768,
        totalNumber: [],
        currentNumber: [],
        optionNum: [],
    };

    OUTPUTJSON.templateElements = {
        globalNavigation: doc.getElementById('js-template-globalNavigation'),
        sectionCategory: doc.getElementById('js-template-sectionCategory'),
        mediaSlider: doc.getElementById('js-template-mediaSlider'),
        sectionApplication: doc.getElementById('js-template-sectionApplication'),
        tagGroup: doc.getElementById('js-template-tagGroup'),
        mediaNavigation: doc.getElementById('js-template-mediaNavigation'),
    };

    OUTPUTJSON.outputElements = {
        globalNavigation: doc.querySelector('.js-output-globalNavigation'),
        sectionCategory: doc.querySelector('.js-output-sectionCategory'),
        sectionApplication: doc.querySelector('.js-output-sectionApplication'),
        outputMediaNavigation: doc.querySelector('.js-output-mediaNavigation'),
    };

    OUTPUTJSON.init = function () {
        const self = this;

        self.polyfillSetChildNodeRemove();
        self.outputContents();
    };

    OUTPUTJSON.checkSupportTemplate = function () {
        return 'content' in doc.createElement('template');
    };

    OUTPUTJSON.createNodeClone = function (template, selectorForIE) {
        const self = this;

        if (self.checkSupportTemplate() === true) {
            return doc.importNode(template.content, true);
        }

        return doc.importNode(template.querySelector(selectorForIE), true);
    };

    OUTPUTJSON.outputContents = function () {
        const self = this;

        self.getJSONData().then(function (response) {
            if (!response || !response.navigations || !response.contents) {
                return;
            }

            self.config.navigationArray = response.navigations;
            self.config.contentArray = response.contents;
            self.checkPage();
        });
    };

    OUTPUTJSON.checkPage = function () {
        const self = this;
        const categoryParamDict = self.makeQueryIntoDict();

        if (!('category_id' in categoryParamDict)) {
            self.outputIndexPage();
            self.setSlider();
        } else {
            self.outputContentPage();
        }
    };

    OUTPUTJSON.makeContentArrayIntoObject = function () {
        const self = this;
        const contentDict = {};

        for (let i = 0; i < self.config.contentArray.length; i++) {
            const keys = Object.keys(self.config.contentArray[i]);
            const key = keys[0];

            contentDict[key] = self.config.contentArray[i][key];
        }

        return contentDict;
    };

    OUTPUTJSON.removeEmptyArr = function (array) {
        return array.filter(function (x) {
            return !(x === null || x === undefined || x === '');
        });
    };

    OUTPUTJSON.makeQueryIntoDict = function () {
        const self = this;

        const query = location.search.substring(1).split('&');
        const emptyQuery = self.removeEmptyArr(query);
        const dict = {};

        if (emptyQuery.length) {
            for (let i = 0; i < query.length; i++) {
                const arr = query[i].split('=');
                if (arr[1]) {
                    dict[arr[0]] = arr[1];
                } else {
                    dict[arr[0]] = '';
                }
            }
        }

        return dict;
    };

    OUTPUTJSON.setSlider = function () {
        const self = this;

        $(self.sliderConfig.root).each(function () {
            const $this = $(this);
            const $prevButton = $this.parent().find(self.sliderConfig.prevButton);
            const $nextButton = $this.parent().find(self.sliderConfig.nextButton);

            if (!$prevButton || !$nextButton) {
                return;
            }

            if (self.sliderConfig.extraSmallScreenMql.matches) {
                self.sliderConfig.optionNum = 1;
            } else if (self.sliderConfig.smallScreenMql.matches) {
                self.sliderConfig.optionNum = 2;
            } else if (self.sliderConfig.largeScreenMql.matches) {
                self.sliderConfig.optionNum = 3;
            } else {
                self.sliderConfig.optionNum = 4;
            }

            $prevButton.each(function () {
                const _this = $(this);
                _this.attr('disabled', true);
            });

            $this.slick({
                infinite: false,
                speed: 300,
                slidesToShow: 4,
                slidesToScroll: 4,
                arrows: false,
                responsive: [
                    {
                        breakpoint: self.sliderConfig.breakPointLarge,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 3,
                        },
                    },
                    {
                        breakpoint: self.sliderConfig.breakPointSmall,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 2,
                        },
                    },
                    {
                        breakpoint: self.sliderConfig.breakPointExtraSmall,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1,
                        },
                    },
                ],
            });

            const $totalSlide = $this.find('.slick-slide');

            if (self.sliderConfig.extraSmallScreenMql.matches) {
                self.sliderConfig.optionNum = 1;
            } else if (self.sliderConfig.smallScreenMql.matches) {
                self.sliderConfig.optionNum = 2;

                if ($totalSlide.length <= self.sliderConfig.optionNum) {
                    const buttonGroup = $this.parent().find(self.sliderConfig.buttonGroup);
                    buttonGroup[0].style.display = 'none';
                }
            } else if (self.sliderConfig.largeScreenMql.matches) {
                self.sliderConfig.optionNum = 3;
            } else {
                self.sliderConfig.optionNum = 4;
            }

            $prevButton.on('click', function () {
                $this.slick('slickPrev');
            });
            $nextButton.on('click', function () {
                $this.slick('slickNext');
            });

            $this.on('breakpoint', function (event, slick, breakpoint) {
                if (breakpoint === self.sliderConfig.breakPointLarge) {
                    const optionNum = $this.slick('slickGetOption', 'slidesToShow');

                    self.sliderConfig.optionNum = optionNum;
                    self.setTotalSlide($totalSlide, $this);

                    if ($totalSlide.length <= self.sliderConfig.optionNum) {
                        const configGroup = $this.parent().find(self.sliderConfig.configGroup);
                        configGroup[0].style.display = 'none';
                    } else {
                        const configGroup = $this.parent().find(self.sliderConfig.configGroup);
                        configGroup[0].style.display = null;
                    }
                } else if (breakpoint === self.sliderConfig.breakPointSmall) {
                    const optionNum = $this.slick('slickGetOption', 'slidesToShow');

                    self.sliderConfig.optionNum = optionNum;
                    self.setTotalSlide($totalSlide, $this);

                    if ($totalSlide.length <= self.sliderConfig.optionNum) {
                        const buttonGroup = $this.parent().find(self.sliderConfig.buttonGroup);
                        buttonGroup[0].style.display = 'none';
                    } else {
                        const buttonGroup = $this.parent().find(self.sliderConfig.buttonGroup);
                        buttonGroup[0].style.display = null;
                    }
                } else if (breakpoint === self.sliderConfig.breakPointExtraSmall) {
                    const optionNum = $this.slick('slickGetOption', 'slidesToShow');

                    self.sliderConfig.optionNum = optionNum;
                    self.setTotalSlide($totalSlide, $this);

                    if ($totalSlide.length <= self.sliderConfig.optionNum) {
                        const buttonGroup = $this.parent().find(self.sliderConfig.buttonGroup);
                        buttonGroup[0].style.display = 'none';
                    } else {
                        const buttonGroup = $this.parent().find(self.sliderConfig.buttonGroup);
                        buttonGroup[0].style.display = null;
                    }
                } else {
                    self.sliderConfig.optionNum = 4;
                    self.setTotalSlide($totalSlide, $this);

                    if ($totalSlide.length <= self.sliderConfig.optionNum || self.sliderConfig.smallScreenMql.matches) {
                        const configGroup = $this.parent().find(self.sliderConfig.configGroup);
                        configGroup[0].style.display = 'none';
                        const buttonGroup = $this.parent().find(self.sliderConfig.buttonGroup);
                        buttonGroup[0].style.display = 'none';
                    } else {
                        const configGroup = $this.parent().find(self.sliderConfig.configGroup);
                        configGroup[0].style.display = null;
                        const buttonGroup = $this.parent().find(self.sliderConfig.buttonGroup);
                        buttonGroup[0].style.display = null;
                    }
                }
            });

            self.setTotalSlide($totalSlide, $this);
            self.setCurrentSlide($this, $prevButton, $nextButton, $totalSlide);
            self.checkTotalSlide($totalSlide, $this);
        });
    };

    OUTPUTJSON.setTotalSlide = function ($totalSlide, $this) {
        const self = this;
        const slideDivision = $totalSlide.length / self.sliderConfig.optionNum;

        self.sliderConfig.totalNumber = Math.ceil(slideDivision);
        $this.closest(classNames.sectionCategoryRoot).find(classNames.totalSlide)[0].innerText = self.sliderConfig.totalNumber;
    };

    OUTPUTJSON.setCurrentSlide = function ($this, $prevButton, $nextButton, $totalSlide) {
        const self = this;

        $this.closest(classNames.sectionCategoryRoot).find(classNames.currentSlide)[0].innerText = 1;

        $this.on('afterChange', function () {
            const currentSlideIndex = $this.slick('slickCurrentSlide');
            const currentSlideDivision = currentSlideIndex / self.sliderConfig.optionNum;
            const numberAdjustment = currentSlideDivision + 1;
            const currentSlideNumber = Math.ceil(numberAdjustment);

            $this.closest(classNames.sectionCategoryRoot).find(classNames.currentSlide)[0].innerText = currentSlideNumber;

            const slideDivision = $totalSlide.length / self.sliderConfig.optionNum;
            self.sliderConfig.totalNumber = Math.ceil(slideDivision);

            self.setButtonDisabled($this, $prevButton, $nextButton, currentSlideNumber);
        });
    };

    OUTPUTJSON.checkTotalSlide = function ($totalSlide, $this) {
        const self = this;

        if ($totalSlide.length <= self.sliderConfig.optionNum && !self.sliderConfig.smallScreenMql.matches) {
            const configGroup = $this.parent().find(self.sliderConfig.configGroup);
            configGroup[0].style.display = 'none';
        } else {
            const configGroup = $this.parent().find(self.sliderConfig.configGroup);
            configGroup[0].style.display = null;
        }
    };

    OUTPUTJSON.setButtonDisabled = function ($this, $prevButton, $nextButton, currentSlideNumber) {
        const self = this;

        if (currentSlideNumber === 1) {
            $prevButton.each(function () {
                const _this = $(this);
                _this.attr('disabled', true);
            });
            $nextButton.each(function () {
                const _this = $(this);
                _this.removeAttr('disabled');
            });
        } else if (currentSlideNumber === self.sliderConfig.totalNumber) {
            $nextButton.each(function () {
                const _this = $(this);
                _this.attr('disabled', true);
            });
            $prevButton.each(function () {
                const _this = $(this);
                _this.removeAttr('disabled');
            });
        } else {
            $nextButton.each(function () {
                const _this = $(this);
                _this.removeAttr('disabled');
            });
            $prevButton.each(function () {
                const _this = $(this);
                _this.removeAttr('disabled');
            });
        }
    };

    OUTPUTJSON.scrollToTarget = function () {
        const anchor = location.hash;
        const targetId = /^#/.test(anchor) ? anchor.replace(/^#/, '') : null;
        const target = doc.getElementById(targetId);

        if (!target || !win.SmoothScroll) {
            return;
        }

        const smoothScroll = new win.SmoothScroll();
        smoothScroll.animateScroll(target, null, {
            speed: 500,
            easing: 'easeInOutQuart',
            updateURL: false, 
            speedAsDuration: true,
        });
    };

    OUTPUTJSON.readyToAnchorScroll = function () {
        const self = this;
        const allImages = self.outputElements.sectionApplication.querySelectorAll('img');
        let imgLoadCounter = 0;

        Array.prototype.forEach.call(allImages, function (image) {
            image.addEventListener('load', function () {
                imgLoadCounter++;
                if (imgLoadCounter === allImages.length) {
                    self.scrollToTarget();
                }
            });
        });
    };

    OUTPUTJSON.getJSONData = function () {
        const self = this;

        return new Promise(function (resolve, reject) {
            const requestURL = self.config.requestURL;
            const request = new XMLHttpRequest();

            request.open('GET', requestURL);

            request.addEventListener('load', function () {
                if (request.status === 200) {
                    resolve(JSON.parse(request.response));
                } else {
                    reject(new Error(request.statusText));
                }
            });

            request.onerror = function () {
                reject(new Error('Network Error'));
            };

            request.send(null);
        });
    };

    OUTPUTJSON.outputIndexPage = function () {
        const self = this;
        const contentJSONObj = self.makeContentArrayIntoObject();

        if (!self.templateElements.globalNavigation ||
            !self.outputElements.globalNavigation ||
            !self.templateElements.sectionCategory ||
            !self.outputElements.sectionCategory ||
            !self.fragments.sectionCategory ||
            !self.templateElements.mediaSlider
        ) {
            return;
        }

        const templateGlobalNavigation = self.templateElements.globalNavigation;
        const outputGlobalNavigation = self.outputElements.globalNavigation;
        const templateSectionCategory = self.templateElements.sectionCategory;
        const sectionCategory = self.outputElements.sectionCategory;
        const sectionCategoryFragment = self.fragments.sectionCategory;
        const templateMediaSlider = self.templateElements.mediaSlider;

        self.config.navigationArray.forEach(function (navigationCategory) {
            const cloneGlobalNavigation = self.createNodeClone(templateGlobalNavigation, 'li');
            const cloneSectionCategory = self.createNodeClone(templateSectionCategory, 'section');
            const categoryURL = self.config.categoryPageURL + '?' + self.config.categoryIdKey + '=' + navigationCategory.category_id;
            const globalNavCategoryNameDisp = cloneGlobalNavigation.querySelector(classNames.categoryNameDisp);
            const sectionCategoryLink = cloneSectionCategory.querySelector(classNames.categoryLink);
            const sectionCategoryNameDisp = cloneSectionCategory.querySelector(classNames.categoryNameDisp);
            const outputTarget = cloneSectionCategory.querySelector(classNames.categoryDescription);
            const innerContent = navigationCategory.category_description;
            const parse = $.parseHTML(innerContent);
            const categoryNameDispHook = cloneGlobalNavigation.querySelector(classNames.categoryNameDispHook);
            const sectionCategoryRoot = cloneSectionCategory.querySelector(classNames.sectionCategoryRoot);

            parse.forEach(function (item) {
                outputTarget.appendChild(item);
            });

            if (globalNavCategoryNameDisp && (navigationCategory.category_skip_flag === '0' || navigationCategory.category_skip_flag === undefined)) {
                globalNavCategoryNameDisp.href = categoryURL;
                globalNavCategoryNameDisp.textContent = navigationCategory.category_name_disp;
            } else {
                categoryNameDispHook.remove();
            }

            if (sectionCategoryLink) {
                sectionCategoryLink.href = categoryURL;
            }

            if (sectionCategoryNameDisp && (navigationCategory.category_skip_flag === '0' || navigationCategory.category_skip_flag === undefined)) {
                sectionCategoryNameDisp.textContent = navigationCategory.category_name_disp;
            } else {
                sectionCategoryRoot.remove();
            }

            outputGlobalNavigation.appendChild(cloneGlobalNavigation);

            sectionCategoryFragment.appendChild(cloneSectionCategory);
            const mediaSlider = sectionCategoryFragment.querySelector(classNames.mediaSlider);
            const mediaSliderFragment = self.fragments.mediaSlider;

            contentJSONObj[navigationCategory.category_id].forEach(function (categoryContent) {
                const cloneMediaSlider = self.createNodeClone(templateMediaSlider, 'div');
                const appName = cloneMediaSlider.querySelector(classNames.appName);
                const imagePath = self.config.suz_LanguagePath + categoryContent.app_img_main_path;
                const appImage = cloneMediaSlider.querySelector(classNames.appImage);
                const contentLink = cloneMediaSlider.querySelector(classNames.contentLink);

                if (appName) {
                    appName.textContent = categoryContent.app_name;
                }

                if (appImage) {
                    appImage.src = imagePath;
                }

                if (contentLink) {
                    contentLink.href = categoryURL + '#' + categoryContent.app_id;
                }

                mediaSliderFragment.appendChild(cloneMediaSlider);
                mediaSlider.appendChild(mediaSliderFragment);

                const tags = categoryContent.app_tag;
                const tagArray = tags.split(',');
                const templateTagGroup = self.templateElements.tagGroup;
                const tagGroup = mediaSlider.lastElementChild.querySelector(classNames.tagGroup);
                const tagGroupOuter = mediaSlider.lastElementChild.querySelector(classNames.tagGroupOuter);

                if (!tagArray[0] && !tagArray[1] && !tagArray[2] && tagGroupOuter) {
                    tagGroupOuter.style.display = 'none';
                }

                tagArray.forEach(function (currentTag) {
                    if (!currentTag) {
                        return;
                    }

                    const cloneTagGroup = self.createNodeClone(templateTagGroup, 'li');
                    const tag = cloneTagGroup.querySelector(classNames.tag);
                    const tagGroupFragment = self.fragments.tagGroup;

                    if (tag) {
                        tag.textContent = currentTag;
                    }

                    tagGroupFragment.appendChild(cloneTagGroup);
                });

                if (tagGroup) {
                    tagGroup.appendChild(self.fragments.tagGroup);
                }
            });

            sectionCategory.appendChild(sectionCategoryFragment);
        });
    };

    OUTPUTJSON.outputContentPage = function () {
        const self = this;
        const categoryParamDict = self.makeQueryIntoDict();
        const contentJSONObj = self.makeContentArrayIntoObject();
        const userAgent = win.navigator.userAgent.toLowerCase();

        if (userAgent.indexOf('trident') >= 0) {
            win.scrollTop = 0;
        }

        const applicationFragment = self.fragments.application;
        const mediaNavigationFragment = self.fragments.mediaNavigation;
        const templateSectionApplication = self.templateElements.sectionApplication;
        const sectionApplication = self.outputElements.sectionApplication;

        if (!applicationFragment ||
            !mediaNavigationFragment ||
            !templateSectionApplication ||
            !sectionApplication
        ) {
            return;
        }

        const categoryIdSplit = categoryParamDict.category_id.split('c');
        const categoryIdString = Number(categoryIdSplit[1]);
        const categoryName = doc.querySelectorAll(classNames.categoryName);
        const cateNum = self.config.navigationArray[categoryIdString - 1];

        if (!categoryName.length) {
            return;
        }

        if (cateNum !== undefined) {
            Array.prototype.forEach.call(categoryName, function (element) {
                element.textContent = cateNum.category_name_disp;
            });
        }

        const LocalTitleText = doc.title;
        const pageTitleElement = doc.querySelector(classNames.titleText);

        if (!pageTitleElement) {
            return;
        }

        const pageTitleText = pageTitleElement.textContent;

        doc.title = self.config.navigationArray[categoryIdString - 1].category_name_disp + ' | ' + pageTitleText + LocalTitleText;

        const metaDescription = doc.querySelector('meta[name="description"]');
        const metaDescriptionText = self.config.navigationArray[categoryIdString - 1].category_meta_description;

        if (metaDescription) {
            metaDescription.setAttribute('content', metaDescriptionText);
        }

        contentJSONObj[categoryParamDict.category_id].forEach(function (categoryContent) {
            const cloneSectionApplication = self.createNodeClone(templateSectionApplication, 'section');

            if (!cloneSectionApplication) {
                return;
            }

            const appName = cloneSectionApplication.querySelector(classNames.appName);
            const sectionApplicationId = cloneSectionApplication.querySelector(classNames.sectionApplicationId);
            const priceButtonLink = cloneSectionApplication.querySelector(classNames.priceButtonLink);
            const inquiryURL = self.config.suz_LanguagePath + categoryContent.app_series_link_path + 'get-pricing/';
            const listNotesText = cloneSectionApplication.querySelector(classNames.listNotesText);
            const listNotes = cloneSectionApplication.querySelector(classNames.listNotes);

            if (appName) {
                appName.textContent = categoryContent.app_name;
            }

            if (sectionApplicationId) {
                sectionApplicationId.id = categoryContent.app_id;
            }

            if (priceButtonLink) {
                priceButtonLink.href = inquiryURL;
            }

            if (!categoryContent.app_group_id ||
                !categoryContent.app_type_id ||
                !categoryContent.app_series_id
            ) {
                return;
            }

            if (listNotesText && (categoryContent.app_notes !== null && categoryContent.app_notes !== undefined)) {
                listNotesText.textContent = categoryContent.app_notes;
            } else {
                listNotes.remove();
            }

            if (categoryContent.app_series_download_path) {
                self.config.download_path = [];

                categoryContent.app_series_download_path.split(',').forEach(function (download_path) {
                    self.config.download_path += download_path;
                    const catalogURL = self.config.suz_LanguagePath + '/download/download/confirmation/' + self.config.download_path;
                    const assetButtonLink = cloneSectionApplication.querySelector(classNames.assetButtonLink);

                    if (!assetButtonLink) {
                        return;
                    }
                    assetButtonLink.href = catalogURL;
                });
            }

            const imagePathMain = self.config.suz_LanguagePath + categoryContent.app_img_main_path;
            const imagePathsub1 = self.config.suz_LanguagePath + categoryContent.app_img_sub_1_path;
            const imagePathsub2 = self.config.suz_LanguagePath + categoryContent.app_img_sub_2_path;

            const appDescription = cloneSectionApplication.querySelector(classNames.appDescription);
            const appTitle1 = cloneSectionApplication.querySelector(classNames.appTitle1);
            const headerClassName1 = cloneSectionApplication.querySelector(classNames.headerClassName1);
            const appHeader1 = cloneSectionApplication.querySelector(classNames.appHeader1);
            const appTitle2 = cloneSectionApplication.querySelector(classNames.appTitle2);
            const headerClassName2 = cloneSectionApplication.querySelector(classNames.headerClassName2);
            const appHeader2 = cloneSectionApplication.querySelector(classNames.appHeader2);
            const appCaptionSub1 = cloneSectionApplication.querySelector(classNames.appCaptionSub1);
            const appCaptionSub2 = cloneSectionApplication.querySelector(classNames.appCaptionSub2);
            const appContentRootSub1 = cloneSectionApplication.querySelector(classNames.appContentRootSub1);
            const appImageSub1 = cloneSectionApplication.querySelector(classNames.appImageSub1);
            const appContentRootSub2 = cloneSectionApplication.querySelector(classNames.appContentRootSub2);
            const appImageSub2 = cloneSectionApplication.querySelector(classNames.appImageSub2);
            const imageNoneHook = cloneSectionApplication.querySelector(classNames.imageNoneHook);
            const seriesExcerpt = cloneSectionApplication.querySelector(classNames.seriesExcerpt);
            const seriesName = cloneSectionApplication.querySelector(classNames.seriesName);
            const appImage = cloneSectionApplication.querySelector(classNames.appImage);

            if (categoryContent.app_description) {
                const innerContent = categoryContent.app_description;
                const parse = $.parseHTML(innerContent);

                parse.forEach(function (item) {
                    if (appDescription) {
                        appDescription.appendChild(item);
                    }
                });
            } else {
                if (appDescription) {
                    appDescription.remove();
                }
            }

            if (categoryContent.app_img_sub_1_title !== null && categoryContent.app_content_type !== 'of-width-full') {
                if (appTitle1) {
                    appTitle1.textContent = categoryContent.app_img_sub_1_title;
                }
                if (headerClassName1) {
                    headerClassName1.classList.add(categoryContent.app_content_type);
                }
            } else if (categoryContent.app_img_sub_1_title === null && categoryContent.app_content_type === 'of-width-full') {
                if (appHeader1) {
                    appHeader1.remove();
                }
                if (appContentRootSub1) {
                    appContentRootSub1.classList.add(categoryContent.app_content_type);
                }
            } else {
                if (appHeader1) {
                    appHeader1.remove();
                }
            }

            if (categoryContent.app_img_sub_2_title !== null) {
                if (appTitle2) {
                    appTitle2.textContent = categoryContent.app_img_sub_2_title;
                }
                if (headerClassName2) {
                    headerClassName2.classList.add(categoryContent.app_content_type);
                }
            } else {
                if (appHeader2) {
                    appHeader2.remove();
                }
            }

            if (categoryContent.app_img_sub_1_caption !== null) {
                const innerContent = categoryContent.app_img_sub_1_caption;
                const parse = $.parseHTML(innerContent);

                if (appCaptionSub1) {
                    parse.forEach(function (item) {
                        appCaptionSub1.appendChild(item);
                    });
                }
            } else {
                if (appCaptionSub1) {
                    appCaptionSub1.remove();
                }
            }

            if (categoryContent.app_img_sub_2_caption !== null) {
                const innerContent = categoryContent.app_img_sub_2_caption;
                const parse = $.parseHTML(innerContent);

                if (appCaptionSub2) {
                    parse.forEach(function (item) {
                        appCaptionSub2.appendChild(item);
                    });
                }
            } else {
                if (appCaptionSub2) {
                    appCaptionSub2.remove();
                }
            }

            if (categoryContent.app_img_sub_1_path !== null) {
                if (appImageSub1) {
                    appImageSub1.src = imagePathsub1;
                }
            } else {
                if (appContentRootSub1) {
                    appContentRootSub1.remove();
                }
            }

            if (categoryContent.app_img_sub_2_path !== null) {
                if (appImageSub2) {
                    appImageSub2.src = imagePathsub2;
                }
            } else {
                if (appContentRootSub2) {
                    appContentRootSub2.remove();
                }
            }

            if (categoryContent.app_img_sub_1_path === null && categoryContent.app_img_sub_2_path === null) {
                if (imageNoneHook) {
                    imageNoneHook.remove();
                }
            }

            if (appImage) {
                appImage.src = imagePathMain;
            }

            if (seriesExcerpt) {
                seriesExcerpt.textContent = categoryContent.app_series_excerpt;
            }

            if (seriesName) {
                seriesName.textContent = categoryContent.app_series_name;
            }

            applicationFragment.appendChild(cloneSectionApplication);
        });

        sectionApplication.appendChild(applicationFragment);

        self.readyToAnchorScroll();

        const templateMediaNavigation = self.templateElements.mediaNavigation;
        const outputMediaNavigation = self.outputElements.outputMediaNavigation;

        if (!templateMediaNavigation || !outputMediaNavigation) {
            return;
        }

        self.config.navigationArray.forEach(function (navigationCategory) {
            const cloneMediaNavigation = self.createNodeClone(templateMediaNavigation, 'div');

            if (!cloneMediaNavigation) {
                return;
            }

            const categoryNameDisp = cloneMediaNavigation.querySelector(classNames.categoryNameDisp);
            const thumbnailPath = self.config.suz_LanguagePath + navigationCategory.category_thumbnail_path;
            const thumbnailImage = cloneMediaNavigation.querySelector(classNames.thumbnailImage);
            const localNavLink = self.config.categoryPageURL + '?' + self.config.categoryIdKey + '=' + navigationCategory.category_id;
            const mediaNavigationLink = cloneMediaNavigation.querySelector(classNames.mediaNavigationLink);
            const mediaNavigationHook = cloneMediaNavigation.querySelector(classNames.mediaNavigationHook);

            if (categoryNameDisp && (navigationCategory.category_skip_flag === '0' || navigationCategory.category_skip_flag === undefined)) {
                categoryNameDisp.textContent = navigationCategory.category_name_disp;
            } else {
                mediaNavigationHook.remove();
            }

            if (thumbnailImage) {
                thumbnailImage.src = thumbnailPath;
            }

            if (mediaNavigationLink) {
                mediaNavigationLink.href = localNavLink;
            }

            mediaNavigationFragment.appendChild(cloneMediaNavigation);
        });
        outputMediaNavigation.appendChild(mediaNavigationFragment);
    };

    OUTPUTJSON.polyfillSetChildNodeRemove = function () {
        var arr = [Element.prototype, CharacterData.prototype, DocumentType.prototype];

        arr.forEach(function (item) {
            item.remove = item.remove || function () {
                this.parentNode.removeChild(this);
            };
        });
    };

    doc.addEventListener('DOMContentLoaded', function () {
        OUTPUTJSON.init();
    });
}(window, document, window.jQuery));
(function (win, doc) {
    'use strict';

    const CONFIG = {
        smallScreenMql: win.matchMedia('(max-width: 1023px)'),
        IS_SHOW: 'is-show',
        IS_FIX: 'is-fix',
    };

    const FixPageTop = function () {
        this.fixElement = doc.querySelector('.js-fixPageTop');
        this.fixElementHook = doc.querySelector('.js-fixPageTop-hook');
        this.showElementHook = doc.querySelector('.js-showPageTop-hook');
    };

    FixPageTop.prototype = {
        init: function () {
            const self = this;

            self.monitorIntersection();
        },

        monitorIntersection: function () {
            const self = this;

            if (!self.fixElementHook || !self.fixElement || !self.showElementHook) {
                return;
            }

            const options = {
                threshold: [0, 1],
            };

            const showObserver = new IntersectionObserver(self.headerMonitoring.bind(self), options);
            showObserver.observe(self.showElementHook);

            const fixObserver = new IntersectionObserver(self.footerMonitoring.bind(self), options);
            const listener = function (e) {
                if (e.matches) {
                    fixObserver.observe(self.fixElementHook);
                } else {
                    fixObserver.disconnect();
                    self.fixElement.classList.remove(CONFIG.IS_FIX);
                }
            };

            CONFIG.smallScreenMql.addListener(listener);
            listener(CONFIG.smallScreenMql);
        },

        headerMonitoring: function (entries) {
            const self = this;
            entries.forEach(function (entry) {
                if (entry.intersectionRatio > 0) {
                    self.fixElement.classList.remove(CONFIG.IS_SHOW);
                } else if (entry.intersectionRatio === 0) {
                    self.fixElement.classList.add(CONFIG.IS_SHOW);
                }
            });
        },

        footerMonitoring: function (entries) {
            const self = this;
            entries.forEach(function (entry) {
                if (entry.intersectionRatio > 0) {
                    self.fixElement.classList.add(CONFIG.IS_FIX);
                } else {
                    self.fixElement.classList.remove(CONFIG.IS_FIX);
                }
            });
        },
    };

    doc.addEventListener('DOMContentLoaded', function () {
        const fixPageTop = new FixPageTop();

        fixPageTop.init();
    });
}(window, document));