console.clear();

const nav = document.querySelector("nav");
const navLinksContainer = document.querySelector(".nav-links");
const navLinks = [...document.querySelectorAll(".link")];
const menuBtn = document.querySelector(".menu-btn");
const subMenuBtn = document.querySelector(".sub-menu-btn");

function createHoverEl() {
	let hoverEl = document.createElement("div");
	hoverEl.className = "hover-el";
	hoverEl.style.setProperty("--y", "0px");
	hoverEl.style.setProperty("--mousex", "0px");
	hoverEl.style.setProperty("--mousey", "0px");
	navLinksContainer.appendChild(hoverEl);
}
createHoverEl();

navLinks.forEach((link, index) => {
	let hoverEl = navLinksContainer.querySelector(".hover-el");
	link.style.setProperty("--delay", `${index * 50}ms`);
	link.addEventListener("mousemove", function(e) {
		hoverEl.style.setProperty("--y", `${index * 60}px`);
		hoverEl.style.setProperty("opacity", "1");
		hoverEl.style.setProperty("--mousex", `${e.pageX - hoverEl.offsetLeft}px`);
		hoverEl.style.setProperty("--mousey", `${e.pageY - hoverEl.offsetTop}px`);
	});
	navLinksContainer.addEventListener("mouseout", function() {
		hoverEl.style.setProperty("opacity", "0");
	});
	link.addEventListener("click", function() {
		let hoverEl = navLinksContainer.querySelector(".hover-el");
		hoverEl.style.opacity = '0';
		toggleSubmenu(link);
	});
});

menuBtn.addEventListener("click", function() {
	nav.classList.toggle("nav-open");
	menuBtn.classList.toggle("close");
});
subMenuBtn.addEventListener("click", function() {
	nav.classList.toggle("sub-menu-open");
	removeSubmenu();
});

function toggleSubmenu(el) {
	let subMenu = nav.querySelector(".sub-menu");
	if (el.children[1]) {
		createSubmenu(el);
	} else if (nav.contains(subMenu)) {
		removeSubmenu();
	} else {
		return;
	}
}

function createSubmenu(el) {
	let subMenuContainer = document.createElement("div");
	subMenuContainer.className = "sub-menu";
	let subMenuItem = el.children[1].cloneNode(true);
	let subMenuItemList = [...subMenuItem.children];
	subMenuItemList.forEach((item, index) => {
		item.classList.add("off-menu");
		item.style.setProperty("--delay", `${index * 40}ms`);
	});
	nav.classList.toggle("sub-menu-open");
	nav.appendChild(subMenuContainer);
	subMenuContainer.appendChild(subMenuItem);
	setTimeout(function() {
		subMenuItemList.forEach(item => {
			item.classList.remove("off-menu");
			item.classList.add("on-menu");
		});
	}, 200);
}
function removeSubmenu() {
	let subMenu = nav.querySelector(".sub-menu");
	let subMenuItemList = [...subMenu.children[0].children];
	if (nav.contains(subMenu)) {
		subMenuItemList.forEach(item => {
			item.classList.add("off-menu");
			item.classList.remove("on-menu");
		});
		setTimeout(function() {
			nav.removeChild(subMenu);
		}, 500);
	}
}




$(document).ready(function(){
    mobile_menu();
});

function mobile_menu(){
    /* 변수 선언 */
    var $menu = null;
    var $left_gnb = null; // 영역 전체
    var $depth1_wrap = null;
    var $depth1 = null;
    var $depth1_btn = null;
    
    /* 시작 함수 */
    function start(){
        init();
        init_event();
    }
    /* 변수 초기화 함수 */
    function init(){
        $menu = $('.menu');
        $left_gnb = $('.left_gnbWrap'); // 영역 전체
        $depth1_wrap = $('.left_gnb>li');
        $depth1 = $depth1_wrap.children('ul');
        $depth1_btn = $depth1_wrap.children('a');
    }
    /* 이벤트 함수 */
    function init_event(){
        
        /* 모바일 메뉴 버튼 클릭했을때 모바일 메뉴영역 나오게 하기 */
        $menu.click(function(event){
            event.preventDefault();
            $left_gnb.addClass('on');
        });
        
        /* x버튼 눌렀을때 모바일 메뉴 닫기 */
        $('.close').click(function(event){
            event.preventDefault();

            $left_gnb.removeClass('on');
            
            // x버튼 누르면 시간차 약간두고 소메뉴 닫히게 하기
            setTimeout(function(){
                $depth1_btn.removeClass('on');
                $depth1.slideUp();
            },300)
        });
        
        /* depth1의 각메뉴 클릭시 depth2 나오게 하기 */
        $depth1_btn.click(function(event){
            event.preventDefault();
            var $this = $(this);
            var $this_ul = $this.siblings('ul');

            var check = $this.hasClass('on');
            if(check){
                $this.removeClass('on');
                $this_ul.stop(true,true).slideUp();
            }else{
                $depth1_btn.removeClass('on');
                $depth1.stop().slideUp();
                $this.addClass('on');
                $this_ul.stop(true,true).slideDown();
            }
        });
        
        /* 디바이스 크기 변경시 모바일 메뉴영역 숨기기 */
        $(window).resize(function(){
            $left_gnb.removeClass('on');
        });
    }
    
    start(); // 시작 호출
}