/* file: https://fm.cnbc.com/applications/cnbc.com/resources/files/2020/08/10/updated-TVtestfranchiseheader.js?vn=1597072639*/
// previous code code has been commented out and not deleted in case it needs to be referenced
// the styling for the franchise menu has been updated so that the design is consistent across web and mobile-web

$(document).ready(function(){
    $(function () {
        var TV = {
            franchiseID: [15837856],
            Banner: {
                img: {
                    imgUrl: "https://image.cnbcfm.com/api/v1/image/preview?image=eyJjdXN0b21fY29vcmRpbmF0ZXMiOnsiaCI6IjQwIiwidyI6IjEwOTYiLCJ4IjoiMzgiLCJ5IjoiNDUifSwiZmlsZSI6eyJmaWxlbmFtZSI6IjEwNTQ5MDYzOS0xNTM4Nzg1MTk4MTA2Y25iY3R2YmFubmVyX2Rlc2t0b3BfYmx1ZXNpdGVfdjAwMi5wbmciLCJmb2xkZXIiOiJhd3NtZWRpYSIsInBhdGgiOiIyMDE4LzEwLzA1LyIsInZlcnNpb24iOjE1Mzg3NzExNzkzODd9fQ%3D%3D",
                    imgUrlMobile: "https://image.cnbcfm.com/api/v1/image/preview?image=eyJjdXN0b21fY29vcmRpbmF0ZXMiOnsiaCI6IjQwIiwidyI6IjQ4OSIsIngiOiIyOCIsInkiOiI2NSJ9LCJmaWxlIjp7ImZpbGVuYW1lIjoiMTA1NDkwNjQwLTE1Mzg3ODUxNDcyNjRjbmJjdHZiYW5uZXJfbW9iaWxlX2JsdWVzaXRlX3YwMDIucG5nIiwiZm9sZGVyIjoiYXdzbWVkaWEiLCJwYXRoIjoiMjAxOC8xMC8wNS8iLCJ2ZXJzaW9uIjoxNTM4NzcxMTc3OTc2fX0%3D"
                },
                link: {
                    class: "franchise-header-link",
                    href: "https://www.cnbc.com/tv/"
                },
                content: {
                    class: "franchise-header-text",
                    text: ""
                }
            },
            Menu: {
                listItem1: {
                    class: "CNBC-nav-live",
                    link: {
                        href: "http://cnbc.com/live-tv",
                        text: "Watch Live"
                    }
                },
                listItem2: {
                    class: "CNBC-nav-latest",
                    link: {
                        href: "https://www.cnbc.com/latest-video/",
                        text: "Latest Video"
                    }
                },
                listItem3: {
                    class: "CNBC-nav-top-video",
                    link: {
                        href: "https://www.cnbc.com/top-video/",
                        text: "Top Video"
                    }
                },
                listItem4: {
                    class: "CNBC-nav-business-day",
                    link: {
                        href: "https://www.cnbc.com/business-day/",
                        text: "Business Day"
                    }
                },
                listItem5: {
                    class: "CNBC-nav-primetime",
                    link: {
                        href: "https://www.cnbc.com/primetime-shows/",
                        text: "Primetime Shows"
                    }
                },
                listItem6: {
                    class: "CNBC-nav-digital-originals",
                    link: {
                        href: "https://www.cnbc.com/digital-original/",
                        text: "Digital Originals"
                    }
                },
                listItem7: {
                    class: "CNBC-nav-full-episodes",
                    link: {
                        href: "http://www.cnbc.com/live-tv/",
                        text: "Full Episodes"
                    }
                }
            }
        };

        function determineFranchise() {
            var iD;
            (CNBC_Settings.franchise) ? (iD = CNBC_Settings.franchise.id) : (iD = CNBC_Settings.pageNodeId);
            var franchiseID = parseInt(iD);
            var franchises = [TV];
            return $.grep(franchises, function (franchise) {
                return $.inArray(franchiseID, franchise.franchiseID) !== -1
            });
        }

        // function appendByLineToBanner(Franchise) {
        //     if (CNBC_Settings.productName === "web") {
        //         var $franchiseText = $(".franchise-header-text").text();
        //         $(".franchise-banner").after($("<span class=franchise-header-text-tablet>" + Franchise.Banner.content.text + "</span>"));
        //     } else if (CNBC_Settings.productName === "mobile-touch") {
        //         var $franchiseText = $(".franchise-header-text").text();
        //         $(".franchise-banner").after($("<span class=franchise-header-text-mobile>" + Franchise.Banner.content.text + "</span>"));
        //     }
        // };

        // function hideAndShowSubMenu() {
        //     $("li").has(".sub-menu").click(function () {
        //         $(this).children(".sub-menu").toggle();
        //         $(".sub-menu").toggleClass("display-sub-menu");
        //     });

        //     $("li").has(".sub-menu").hover(function () {
        //         $(this).children(".sub-menu").toggle();
        //         $(".sub-menu").toggleClass("display-sub-menu");
        //     });
        // };

        // function adjustHeaderMargins($franchiseBanner) {
        //     var marginsToBeAdjustedMobile = ["cnbcvideo", "creator", "sponsored", "wildcard"];
        //     var marginsToBeAdjustedWeb = ["cnbcnewsstory", "cnbcvideo", "sponsored", "wildcard"];

        //     function sift(arr) {
        //         if (arr.indexOf(CNBC_Settings.nodeType) !== -1) {
        //             $franchiseBanner.css("margin", "40px auto 0px");
        //         }
        //     };
        //     (CNBC_Settings.productName === "mobile-touch") ? sift(marginsToBeAdjustedMobile):
        //         (CNBC_Settings.productName === "web") ? sift(marginsToBeAdjustedWeb) :
        //         console.log("UNKNOWN PRODUCT NAME");
        // };

        function createSpecialBanner(Franchise, $newFranchiseHeader, imgUrl) {
            $newFranchiseHeader.after("<a class=special-banner href=" + Franchise.SpecialBanner.link.href + "></a>")
            $(".special-banner").addClass(Franchise.SpecialBanner.link.class);
            $(".special-banner").append("<img src=" + imgUrl + " alt=" + Franchise.SpecialBanner.img.alt + " class=" + Franchise.SpecialBanner.img.class + ">");
        }

        function chooseSpecialBannerImgSize(Franchise, $newFranchiseHeader) {
            var SpecialBannerImgUrl;
            (Franchise.SpecialBanner && CNBC_Settings.productName === "web") ? (SpecialBannerImgUrl = Franchise.SpecialBanner.img.imgUrl, createSpecialBanner(Franchise, $newFranchiseHeader, SpecialBannerImgUrl)) :
            (Franchise.SpecialBanner && CNBC_Settings.productName === "mobile-touch") ? (SpecialBannerImgUrl = Franchise.SpecialBanner.img.imgUrlMobile, createSpecialBanner(Franchise, $newFranchiseHeader, SpecialBannerImgUrl)) :
            console.log("UNKNOWN PAGE TYPE");
        }

        function updateAccountMenuColor() { // updated for consistent styling
            $(".account-menu-accountMenu").css('color', '#ffffff'); // updated for consistent styling
        }

        function addFranchiseMenuToDOM(Franchise, $newFranchiseHeader, $franchiseMenu) {
            var BannerImgUrl;
            (CNBC_Settings.productName === "web") ? (BannerImgUrl = Franchise.Banner.img.imgUrl) : (BannerImgUrl = Franchise.Banner.img.imgUrlMobile);

            var $franchiseBanner = $("<h1 class=franchise-banner></h1>");
            var $franchiseBannerLink = $("<a class=" + Franchise.Banner.link.class + " href=" + Franchise.Banner.link.href + "></a>");
            var $franchiseBannerContent = $("<span class=" + Franchise.Banner.content.class + ">" + Franchise.Banner.content.text + "</span>");

            $franchiseBanner.css("background-image", "url(" + BannerImgUrl + ")");
            $franchiseBanner.css("background-position", "5px");
            $franchiseMenu.css("background","#005594");
            $franchiseMenu.css('display', 'flex'); // updated for consistent styling
            $franchiseMenu.css('overflow', 'scroll'); // updated for consistent styling
            $franchiseMenu.css('margin-left', '10px'); // updated for consistent styling
            $franchiseMenu.css('margin-right', '10px'); // updated for consistent styling

            var $fixCssListItem = $franchiseMenu.find('li'); // updated for consistent styling
            $fixCssListItem.css('text-align', 'center') // updated for consistent styling
            $fixCssListItem.css('padding', '20px') // updated for consistent styling

            var $fixCssLink = $fixCssListItem.find('a'); // updated for consistent styling
            $fixCssLink.css('color', '#ffffff'); // updated for consistent styling

            $franchiseBanner.append($franchiseBannerLink);

            ($franchiseBanner.after($franchiseBannerContent), $franchiseBannerContent.after($franchiseMenu))
            // (CNBC_Settings.productName === "mobile-touch") ? ($franchiseBanner.after($franchiseBannerContent), $franchiseBannerContent.after($franchiseMenu)) :
            // (CNBC_Settings.productName === "web") ? ($franchiseBannerLink.after($franchiseBannerContent), $franchiseBanner.after($franchiseMenu)) :
            // console.log("UNKNOWN PRODUCT NAME");
            $newFranchiseHeader.append($franchiseBanner);
            if (Franchise.hasOwnProperty('Menu')) {
                $franchiseBanner.after($franchiseMenu);
            }
            // appendByLineToBanner(Franchise);
            // hideAndShowSubMenu();
            // adjustHeaderMargins($franchiseBanner);
            chooseSpecialBannerImgSize(Franchise, $newFranchiseHeader);
            updateAccountMenuColor(); // updated for consistent styling
        }

        function createSubMenu(menuObj) {
            var $subMenu = document.createElement("ul");
            $subMenu.classList = "sub-menu";
            var subMenuObj = menuObj.subMenu;
            Object.keys(subMenuObj).forEach(function (item) {
                var $subMenuListItem = document.createElement("li");
                var $subMenulink = document.createElement("a");
                $subMenuListItem.classList = subMenuObj[item].class;
                $subMenulink.href = subMenuObj[item].link.href;
                $subMenulink.text = subMenuObj[item].link.text;
                $subMenu.append($subMenuListItem);
                $subMenuListItem.appendChild($subMenulink);
            });
            return $subMenu;
        }

        function createMenu($newFranchiseHeader, addFranchiseMenuToDOM) {
            var Franchise = determineFranchise()[0];
            var $franchiseMenu = $("<ul class=franchise-menu></ul>");
            if (Franchise != undefined){
                if (Franchise.hasOwnProperty('Menu')) {
                    Object.keys(Franchise.Menu).forEach(function (item) {
                        var menuObj = Franchise.Menu[item];
                        var $listItem = document.createElement("li");
                        var $link = document.createElement("a");
                        $listItem.classList = menuObj.class;
                        $link.classList = menuObj.link.class;
                        $link.href = menuObj.link.href;
                        $link.innerText = menuObj.link.text;
                        $franchiseMenu.append($listItem);
                        $listItem.appendChild($link);
                        if (menuObj.hasOwnProperty("subMenu")) {
                            var $subMenu = createSubMenu(menuObj);
                            $link.after($subMenu);
                        }
                    });
                    addFranchiseMenuToDOM(Franchise, $newFranchiseHeader, $franchiseMenu);
                } else {
                    addFranchiseMenuToDOM(Franchise, $newFranchiseHeader);
                }
            }
        }

        // function replaceHeaderMobile(element) {
        //     var $newFranchiseHeader = $("<div id=franchise-header></div>");
        //     $(element).replaceWith($newFranchiseHeader);
        //     createMenu($newFranchiseHeader, addFranchiseMenuToDOM);
        // };

        function replaceHeaderWeb(element) {
            var $newFranchiseHeader = $("<div class=franchise-header></div>");
            $(element).replaceWith($newFranchiseHeader);
            createMenu($newFranchiseHeader, addFranchiseMenuToDOM);
        }

        function createHeaderWeb(element) {
            var $newFranchiseHeader = $("<div class=franchise-header></div>");
            $(element).after($newFranchiseHeader);
            createMenu($newFranchiseHeader, addFranchiseMenuToDOM);
        }

        // function createHeaderWebGallery(element) {
        //     var $newFranchiseHeader = $("<div class=franchise-header></div>");
        //     $(element).before($newFranchiseHeader);
        //     createMenu($newFranchiseHeader, addFranchiseMenuToDOM);
        // }

        // function determinePageTypeMobile() {
        //     ($(".top-section").length > 0) ? replaceHeaderMobile(".top-section"):
        //         ($(".banner-header").length > 0) ? replaceHeaderMobile(".banner-header") :
        //         ($("#franchise-header").length > 0) ? replaceHeaderMobile("#franchise-header") :
        //         console.log("UNKNOWN PAGE TYPE - MOBILE");
        // };

        function determinePageTypeWeb() {
            ($("#page_header").length > 0) ? replaceHeaderWeb("#page_header"):
                ($("#franchiseHeader").length > 0) ? replaceHeaderWeb("#franchiseHeader") :
                ($(".franchise_label").length > 0) ? replaceHeaderWeb(".franchise_label") :
                ($("#dart_wrapper_topbanner").length > 0) ? createHeaderWeb("#dart_wrapper_topbanner") :
                (CNBC_Settings.templateName === "slideshow_ng" && CNBC_Settings.brand === "makeit") ? createHeaderWeb(".cnbc-body > .cols2") :
                console.log("UNKNOWN PAGE TYPE - WEB");
        }

        function determineMobileOrWeb() {
            (CNBC_Settings.productName === "mobile-touch") ? determinePageTypeWeb(): // determinePageTypeMobile():
                (CNBC_Settings.productName === "web") ? determinePageTypeWeb() :
                console.log("UNKNOWN PRODUCT NAME");
        }

        determineMobileOrWeb();

    });
});