<div class="sys-menu" id="mainnavigation">
    #if($logo)
        <a href="/">
            <img src="$logo" alt="Logo INAB" />
        </a>
    #end
    <nav id="nav-wrapper" role="navigation" aria-expanded="false" aria-label="navigation">
        <div id="toggleMobile" class="sys-mobile-action"><span class="icon open"></span><span class="text">Meny</span></div>
        <div id="menu-wrapper" class="menu-wrapper">
            #set($count = 0)
            #set($curLvl = 0)
            #foreach ($contentItem in $generalContent)
                #set($subClass = "#if($contentItem.childItems.length > 0)has-children#{else}#end")
                #set($ariaExpanded = "#if($contentItem.childItems.length > 0)aria-expanded='false'#{else}#end")
                #set($ariaControls = "#if($contentItem.childItems.length > 0)aria-controls='sub-menu-$foreach.count'#{else}#end")
                #set($ariaPopUp = "#if($contentItem.childItems.length > 0)aria-haspopup='true'#{else}#end")
                #set($count = $count + 1)
                <ul id="menu-$count$curLvl" class="items" aria-label="$contentItem.displayName">
                #set($activeClass = "#if($currentPage == $contentItem.displayName)active current-page#{else}#end")
                    <li class="item $subClass $activeClass">
                        <a href="$contentItem.URL" tabindex="-1">
                            $contentItem.displayName
                        </a>
                        #set($linkHasChildren = "#if($contentItem.childItems.length > 0)link-has-children#{else}link-has-no-children#end")
                        <span class="link-icon-wrapper">
                            <span id="action-$count$curLvl" class="link-icon $linkHasChildren"></span>
                        </span>
                        #if ($contentItem.childItems.length > 0)
                            #set($curLvl = $curLvl + 1)
                            <ul class="child-items" id="sub-menu-$count$curLvl">
                                #foreach ($level2Item in $contentItem.childItems)
                                    #set($activeClass = "#if($currentPage == $level2Item.displayName)active#{else}#end")
                                    <li class="child-item $activeClass">
                                        <a href="$level2Item.URL" tabindex="-1">
                                            $level2Item.displayName
                                        </a>
                                    </li>
                                #end
                            </ul>
                        #end
                    </li>
                </ul>
            #end
        </div>
    </nav>
</div>

<script>
    // Place the submenu.
    const subMenuPlacement = () => {
        let bodyElement = document.querySelector('body');
        let bodyRect = bodyElement.getBoundingClientRect();
        let menues = document.querySelectorAll('[id^="menu-"]');
        if(menues.length) {
            for(let i=0; i < menues.length; i++) {
                let sysMenu = document.getElementById(menues[i].id);
                let menuRect = sysMenu.getBoundingClientRect();
                let subMenues = menues[i].querySelectorAll('[id^="sub-menu-"]');
                if(subMenues.length > 0) {
                    for(let j=0; j < subMenues.length; j++) {
                        if (window.getComputedStyle(subMenues[j]).display !== "none") {
                            let newLeft = bodyRect.left - menuRect.left;
                            subMenues[j].style.left = newLeft + 'px';
                        }
                    }
                }
            }
        }
    }
    // Reduce header heigth for the visual look when there is no submenu.
    const setHeaderHeight = () => {
        let reduceHeaderHeight = true;
        let subMenu = document.querySelectorAll('[id^="sub-menu-"]');
        if(subMenu.length > 0) {
            for(let i=0; i < subMenu.length; i++) {
                if (window.getComputedStyle(subMenu[i]).display !== "none") {
                    reduceHeaderHeight = false;
                }
            }
        }
        if(reduceHeaderHeight) {
            let pageHeaders = document.getElementsByTagName('header');
            pageHeaders[0].style.minHeight = '116px';
        }
    }
    // Set active class on all parent li elements for current active menu li.
    const setActiveMenu = () => {
        let menu = document.getElementById('mainnavigation');
        let activeBranch = menu.querySelector('.active');
        if(activeBranch) {
            let el = activeBranch.parentElement;
            while((el.parentElement) && !el.classList.contains("items")) {
                el = el.parentElement;
                if(el.nodeName === "LI") {
                    el.classList.add("active");
                }
            }        
        }
    }

    // Mobile menu logic. 
    // If screen is smaller than 992px we treat main menu as a mobile menu.
    // Create a new element and add to the header element. Then move menu to that element.
    const setUpMobileMenu = () => {
        let headerNodes = document.getElementsByTagName('header');
        let header = headerNodes[0];
        let sourceParent = document.getElementById('menu-wrapper');
        let checkParent = document.getElementById('nav-mobile-wrapper');
        let targetParent ='';
        if(!checkParent) {
            targetParent = document.createElement("div");
            targetParent.setAttribute("id", "nav-mobile-wrapper");
            targetParent.classList.add("nav-mobile-wrapper");
            targetParent.innerHTML = sourceParent.innerHTML; // Applying menu to new element.        
            header.appendChild(targetParent);
        } else {
            targetParent = document.getElementById('nav-mobile-wrapper');
        }
        sourceParent.innerHTML = ""; // Clear the menu from the default DOM position.
        
    }
    // Move the menu from mobile position to default position and remove any mobile states.
    const removeMobileMenu = () => {
        let headerNodes = document.getElementsByTagName('header');
        let header = headerNodes[0];
        let nav = document.getElementById('nav-wrapper');
        let targetParent = document.getElementById('menu-wrapper');
        //Reset menu satus here before moving it to it´s default DOM position.
        resetMobileMenuToDefault();
        // Move menu to the default DOM position.
        let sourceParent = document.getElementById('nav-mobile-wrapper');
        if(sourceParent) {
            targetParent.innerHTML = sourceParent.innerHTML;
            sourceParent.remove();
        }
    }
    const toggleMobileMenuNode = () => {
        let breakPoint = 992;
        let bodyElement = document.querySelector('body');
        let bodyRect = bodyElement.getBoundingClientRect();
        let vw = bodyRect.right;
        if(vw < breakPoint) {
            setUpMobileMenu();
        }
        if(vw >= breakPoint) {
            removeMobileMenu();
        }   
    }
    // Show/hide ul submenu.
    const toggleSubNavigation = (id) => {
        if(id) {
            // Get the icon element user clicked on to toggle submenu.
            let item = document.getElementById("action-" + id);
            // Get parent span element.
            let parent = item.parentNode;
            // Increase id by 1 to get correct submenu id.
            id++;
            let subMenu = document.getElementById('sub-menu-' + id);
            let isOpen = subMenu.classList.contains('sub-open');
            if(isOpen) {
                // Set list element to default state.
                parent.style.borderBottom = "none";
                item.classList.remove("link-open");
                subMenu.classList.remove("sub-open");
            } else {
                // Set list element to open state.
                parent.style.borderBottom = "1px solid rgba(255,255,255,.8)";
                item.classList.add("link-open");
                subMenu.classList.add("sub-open");
            }
        }
    }
    // Add eventListener on menu li icon to show or hide submenu.
    const setUpMobileMenuActions = () => {
        let navNode = document.getElementById('nav-mobile-wrapper');
        let subMenuActions = navNode.querySelectorAll('.link-has-children');
        if(subMenuActions.length) {
            for(let i=0; i<subMenuActions.length; i++) {
                let id = subMenuActions[i].getAttribute('id');
                id = id.split('-');
                id = id[1];
                subMenuActions[i].addEventListener('click', function() {
                    toggleSubNavigation(id);
                }, false);
            }
        }
    }

    // Toggle menu button (show icon open or close) and return state "open" or "closed".
    // State open = menu and "close icon" is visible.
    const toggleMobileIcon = () => {
        let mobileBtn = document.getElementById("toggleMobile");
        let icon = mobileBtn.querySelector('.icon');
        if(icon.classList.contains("open")) {
            icon.classList.remove("open");
            icon.classList.add("close");
            return "open";
        } else {
            icon.classList.remove("close");
            icon.classList.add("open");
            return "closed";
        }
    }

    // Reset mobile menu to it´s default status.
    const resetMobileMenuToDefault = () => {
        // Reset mobile menu icon.       
        let mobileBtn = document.getElementById("toggleMobile");
        let icon = mobileBtn.querySelector('.icon'); 
        if(icon.classList.contains("close")) {
            icon.classList.remove("close");
            icon.classList.add("open");
        }
        let navMobileWrapper = document.getElementById('nav-mobile-wrapper');
        if(navMobileWrapper) {
            let subMenues = navMobileWrapper.querySelectorAll('[id^="sub-menu-"]');
            for(let i=0; i<subMenues.length; i++) {
                subMenues[i].classList.remove("sub-open");
            }        
        }
    }

    // Funcion to show/hide mobile menu.
    const toggleMobileMenu = (status) => {
        let menu = document.getElementById('mainnavigation');
        let mobileWrapper = document.getElementById('nav-mobile-wrapper');
        status === "open" ? mobileWrapper.style.display = "flex" : mobileWrapper.style.display = "none";
        setUpMobileMenuActions();
    }

    // Add eventListener to open/hide mobile menu when user click on mobile menu button.
    let mobileBtn = document.getElementById("toggleMobile");
    mobileBtn.addEventListener('click', function() {
        let status = toggleMobileIcon();
        toggleMobileMenu(status);
    });




    // Set current active menu tree.
    setActiveMenu();
    // Set submenu left position.
    subMenuPlacement();
    // Set up mobile menu depending on breakpoint.
    toggleMobileMenuNode();
    // On window resize.
    window.addEventListener("resize", () => {
        subMenuPlacement();
        toggleMobileMenuNode();
    });
    // Adjust header min-height if there is no submenu.
    setHeaderHeight();

    // Run when DOM is loaded. 
    // Fix wrong submenu placement on page load when developertools or Sitevision edit screen is visible.
    document.addEventListener('DOMContentLoaded', function(){
        subMenuPlacement();
        toggleMobileMenuNode();
    });

</script>