<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="kc" uri="/WEB-INF/tlds/kcc_tld.tld"%>
<%@ page
	import="egovframework.rte.fdl.security.userdetails.util.EgovUserDetailsHelper"%>

<script type="text/javascript">
	$(document).ready(
			function() {
				// 탑메뉴
				$("nav#menu ul.depth01").find('li').each(
						function(index, item) {
							$($(this).find('a')[0]).attr(
									'href',
									$($(this).find('.depth02').find('a')[0])
											.attr('href'));
						});

				//사이트맵
				$('.full_menu ul.depth01').find('li').each(
						function(index, item) {
							$($(this).find('a')[0]).attr(
									'href',
									$($(this).find('.depth02').find('a')[0])
											.attr('href'));
						});
			});

	/* 화면 확대 축소 */
	var nowZoom = 100;

	function zoomOut() { // 화면크기축소
		nowZoom = nowZoom - 10;
		if (nowZoom <= 70)
			nowZoom = 70; // 화면크기 최대 축소율 70%
		zooms();
	}

	function zoomIn() { // 화면크기확대
		nowZoom = nowZoom + 10;
		if (nowZoom >= 200)
			nowZoom = 200; // 화면크기 최대 확대율 200%
		zooms();
	}

	function zooms() {
		document.body.style.zoom = nowZoom + "%";
	}

	function depthTwoClick(obj) {
		var url = $($(obj).parent().find('ul.menu_depth03 li:first-child a'))
				.attr('href');
		if ($(obj).parents('[class]').first().attr('class') == 'm_sub_menu') {
			url = $($(obj).parent().find('ul.m_sub_depth02 li:first-child a'))
					.attr('href');
		}
		if (typeof url != 'undefined') {
			location.href = url;
		}
	}

	function searchTotalHeader() {
		$('#searchFormHeader #totalSearchKeyword').val(
				$('#searchTextHeader').val());
		$('#searchFormHeader').attr("action", "/web/usr/search/totalSearch.do")
		$('#searchFormHeader').submit();
	}
</script>

<form id="searchFormHeader" name="searchFormHeader"
	action="/web/usr/search/totalSearch.do" method="post">
	<input type="hidden" id="totalSearchKeyword" name="totalSearchKeyword"
		value="" />
</form>

<!-- skip메뉴 -->
<div class="skip_menu">
	<a href="#sub" class="contGo" title="본문 바로가기">본문 바로가기</a>
</div>

<!-- ============== header ============== -->
<header class="header">
	<style>
.mobile_nav, .sitemap {
	display: none;
}

.mobile_nav.active, .sitemap.active {
	display: flex !important;
}
</style>
	<div class="header_container">
		<div class="inner">
			<h1 class="logo">
				<a href="/web/main/mainPage.do"><img
					src="/publish/usr/images/common/logo.png" alt=""></a>
			</h1>
			<nav>
				<ul class="gnb">
					<c:forEach var="menu1" items="${menuResultList}">
						<c:if test="${menu1.depths eq '1'}">
							<li><a href="#" class="depth01"> <c:out
										value="${menu1.menuNm}" />
							</a>
								<div class="depth02_container">
									<ul class="depth02_ul">
										<c:forEach var="menu2" items="${menuResultList}">
											<c:if
												test="${menu2.depths eq '2' && menu2.upperMenuId eq menu1.menuNo}">
												<li><a
													href="${menu2.menuType ne 'M' ? menu2.url : '#'}"
													class="depth02"
													${menu2.menuType eq 'O' ? 'target="_blank"' : '' }> <c:out
															value="${menu2.menuNm}" />
												</a></li>
											</c:if>
										</c:forEach>
									</ul>
								</div></li>
						</c:if>
					</c:forEach>
				</ul>
			</nav>

			<ul class="header_util">
				<!-- <li><button type="button" class=""><i></i></button></li> -->
				<!-- <li><button type="button" class="btn_search" title="전체메뉴 보기"><i></i></button></li> -->
				<li>
					<div class="lang_switch">
						<i class="icon lang"></i>
						<button type="button" id="lang-kor" class="${param.menuUserType ne 'ENG' ? 'active' : ''}">KOR</button>
						<button type="button" id="lang-eng" class="${param.menuUserType eq 'ENG' ? 'active' : ''}">ENG</button>
					</div>
<script type="text/javascript">
$(document).ready(function() {
    // Language selection handling
    var menuUserType = sessionStorage.getItem('menuUserType');
    if (!menuUserType) {
        const urlParams = new URLSearchParams(window.location.search);
        menuUserType = urlParams.get('menuUserType') || 'KOR';
        sessionStorage.setItem('menuUserType', menuUserType);
    }

    if (menuUserType === 'ENG') {
        $('#lang-kor').removeClass('active');
        $('#lang-eng').addClass('active');
    } else {
        $('#lang-eng').removeClass('active');
        $('#lang-kor').addClass('active');
    }

    $('#lang-kor').on('click', function() {
        sessionStorage.setItem('menuUserType', 'KOR');
        var url = new URL(window.location.href);
        url.searchParams.set('menuUserType', 'KOR');
        window.location.href = url.href;
    });

    $('#lang-eng').on('click', function() {
        sessionStorage.setItem('menuUserType', 'ENG');
        var url = new URL(window.location.href);
        url.searchParams.set('menuUserType', 'ENG');
        window.location.href = url.href;
    });

    // Append menuUserType to menu links
    var currentLang = sessionStorage.getItem('menuUserType') || 'KOR';
    $('a.depth02').each(function() {
        var href = $(this).attr('href');
        if (href && href !== '#') {
            var newHref = href;
            if (href.indexOf('?') > -1) {
                newHref += '&menuUserType=' + currentLang;
            } else {
                newHref += '?menuUserType=' + currentLang;
            }
            $(this).attr('href', newHref);
        }
    });
});
</script>

				</li>
				<li><button type="button" class="btn_sitemap" title="전체메뉴 보기">
						<i></i>
					</button></li>
			</ul>
		</div>
	</div>

	<nav class="mobile_nav">
		<div class="mobile_nav_top">
			<h1 class="logo">
				<a href="/web/main/mainPage.do"><img
					src="/publish/usr/images/common/logo.png" alt=""></a>
			</h1>
			<button type="button" class="btn_close">
				<i class="icon close"></i>
			</button>
		</div>
		<ul class="gnb">
			<c:forEach var="menu1" items="${menuResultList}">
				<c:if test="${menu1.depths eq '1'}">
					<li>
						<button type="button" class="depth01">
							<c:out value="${menu1.menuNm}" />
							<i class="icon arrow bottom"></i>
						</button>
						<ul class="depth02_ul">
							<c:forEach var="menu2" items="${menuResultList}">
								<c:if
									test="${menu2.depths eq '2' && menu2.upperMenuId eq menu1.menuNo}">
									<li><a href="${menu2.menuType ne 'M' ? menu2.url : '#'}"
										class="depth02"
										${menu2.menuType
                                eq 'O' ? 'target="_blank"' : '' }>
											<c:out value="${menu2.menuNm}" />
									</a></li>
								</c:if>
							</c:forEach>
						</ul>
					</li>
				</c:if>
			</c:forEach>
		</ul>
	</nav>

	<nav class="sitemap">
		<div class="sitemap_top inner">
			<h1 class="logo">
				<a href="/web/main/mainPage.do"><img
					src="/publish/usr/images/common/logo.png" alt=""></a>
			</h1>
			<button type="button" class="btn_close">
				<i class="icon close"></i>
			</button>
		</div>
		<div class="inner">
			<ul class="sitemenu">
				<c:forEach var="menu1" items="${menuResultList}">
					<c:if test="${menu1.depths eq '1'}">
						<li><a href="#" class="depth01"> <c:out
									value="${menu1.menuNm}" />
						</a>
							<ul class="depth02_ul">
								<c:forEach var="menu2" items="${menuResultList}">
									<c:if
										test="${menu2.depths eq '2' && menu2.upperMenuId eq menu1.menuNo}">
										<li><a href="${menu2.menuType ne 'M' ? menu2.url : '#'}"
											class="depth02"
											${menu2.menuType
                                  eq 'O' ? 'target="_blank"' : '' }>
												<c:out value="${menu2.menuNm}" />
										</a></li>
									</c:if>
								</c:forEach>
							</ul></li>
					</c:if>
				</c:forEach>
			</ul>
		</div>
	</nav>
</header>
<!-- ============== header 끝 ============== -->