<%@ page contentType="text/html;charset=utf-8" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!doctype html>
<html lang="ko">
	<head>
	<title><s:message code="manager.site.siteLayOutSet.title"/></title>
	<script src="/js/lib/base64.js"></script>
	</head>
	
	<body>
	
		<div class="page-title-wrap clear">
			<div class="page-title-inner">
				<h3 class="page-title"><s:message code="manager.site.nav.siteLayOutSet"/></h3>
				<div class="tooltipBox type01">
					<button type="button" class="page-tip">페이지안내</button>
					<div class="tooltipText">
						<p>메인, 서브 레이아웃을 수정할 수 있습니다.</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="tab-menu cf">
			<a <c:if test='${siteLayOutType == "main"}'>class="on" </c:if> href="/gtm/<c:out escapeXml='true' value='${siteIdx}' />/siteLayOutSet.do?siteLayOutType=main"><s:message code="manager.site.tab.siteLayOut.main"/></a>
			<a <c:if test='${siteLayOutType == "sub"}'>class="on" </c:if>href="/gtm/<c:out escapeXml='true' value='${siteIdx}' />/siteLayOutSet.do?siteLayOutType=sub"><s:message code="manager.site.tab.siteLayOut.sub"/></a>
		</div>
		
		<div class="layout-content">			
			<div class="layout-title skinTabs">
				<button type="button" class="on" id="header"><div class="header-box"><span class="active-span"></span><span></span><span></span></div>Header</button>
				<button type="button" id="body"><div class="body-box"><span></span><span class="active-span"></span><span></span></div>Body</button>
				<button type="button" id="footer"><div class="footer-box"><span></span><span></span><span class="active-span"></span></div>Footer</button>
				<div class="editor-util-btn">
					<button type="button" class="editor-full-btn">에디터 전체화면</button>
	
					<div class="bookmark-list-pc member li-pos">
						<button type="button">북마크 버튼</button>
						<ul>
							<li><a href="#" onclick="javascript:jf_GETCODE('<c:out value='${siteIdx}' />', '/<c:out value='${siteIdx}' />/<c:out value='${siteLayOutType}' />/top/menu.do', 'gtm');"><img src="<s:message code="manager.site.button.topMenu"/>" alt="<s:message code="manager.site.button.topMenu.alt"/>"><s:message code="manager.site.button.topMenu.alt"/></a></li>
			
							<c:if test='${siteLayOutType == "sub"}'>	
							<li><a href="#" onclick="javascript:jf_GETCODE('<c:out value='${siteIdx}' />', '/<c:out value='${siteIdx}' />/<c:out value='${siteLayOutType}' />/sub/menu.do?siteMenuIdx1=@seed:menuDepth:@seed', 'gtm');"><img src="<s:message code="manager.site.button.subMenu"/>" alt="<s:message code="manager.site.button.subMenu.alt"/>"><s:message code="manager.site.button.subMenu.alt"/></a></li>
							<li><a href="#" onclick="javascript:jf_GETCODE('<c:out value='${siteIdx}' />', '@seed:siteMenuName:@seed', 'gtm');"><img src="<s:message code="manager.site.button.contentsTit"/>" alt="<s:message code="manager.site.button.contentsTit.alt"/>"><s:message code="manager.site.button.contentsTit.alt"/></a></li>
							<li><a href="#" onclick="javascript:jf_GETCODE('<c:out value='${siteIdx}' />', '/common/navigation/<c:out value='${siteIdx}' />/@seed:siteMenuIdx:@seed.do', 'gtm');"><img src="<s:message code="manager.site.button.navigation"/>" alt="<s:message code="manager.site.button.navigation.alt"/>"><s:message code="manager.site.button.navigation.alt"/></a></li>				
							</c:if>
							
							<c:forEach items="${menuAuthList}" var="menuAuthList">
							<c:if test='${menuAuthList._menuType == "A" || menuAuthList._menuType == "M"}'>
							<li>
								<a href="#" onclick="javascript:jf_GETCODEList('<c:out value='${siteIdx}' />', '<c:out value='${menuAuthList._menuCode}' />', 'gtm');"><img src="<s:message code="manager.site.button.${menuAuthList._menuCode}"/>"  alt="<c:out value='${menuAuthList._menuName}' />"/><c:out value='${menuAuthList._menuName}' /></a>
							</li>
							</c:if>
							</c:forEach>
						</ul>
					</div>
				</div>
			</div>
			<div class="editor">
				<span class="rolling"></span>
				<iframe class="iframe" src="/gtm/<c:out escapeXml='true' value='${siteIdx}' />/siteLayOutSetHtml.do?siteLayOutType=<c:out escapeXml='true' value='${siteLayOutType}' />&amp;siteLayOutPosition=header" id="siteLayOutHtmlHeader" name="siteLayOutHtmlHeader"></iframe>
				<iframe class="iframe" src="/gtm/<c:out escapeXml='true' value='${siteIdx}' />/siteLayOutSetHtml.do?siteLayOutType=<c:out escapeXml='true' value='${siteLayOutType}' />&amp;siteLayOutPosition=sub" id="siteLayOutHtmlBody" name="siteLayOutHtmlBody"></iframe>
				<iframe class="iframe" src="/gtm/<c:out escapeXml='true' value='${siteIdx}' />/siteLayOutSetHtml.do?siteLayOutType=<c:out escapeXml='true' value='${siteLayOutType}' />&amp;siteLayOutPosition=footer" id="siteLayOutHtmlFooter" name="siteLayOutHtmlFooter"></iframe>
			</div>
		</div>
		
		<div class="btn_wrap right">
			<button type="button" class="btn-normal btn btn_text btn_46 blue_border lightgray" id="btnPreview"><s:message code="common.button.preview"/></button>
			<button type="button" class="btn-normal btn btn_text btn_46 subgray_border lightgray" id="btnHistory"><s:message code="common.button.history"/></button>
			<button type="button" class="btn-normal btn btn_text btn_46 blue_fill violet" id="btnHeader"><s:message code="common.button.mod"/></button>
			<button type="button" class="btn-normal btn btn_text btn_46 blue_fill violet DSP-NONE" id="btnBody"><s:message code="common.button.mod"/></button>
			<button type="button" class="btn-normal violet DSP-NONE btn btn_text btn_46 blue_fill" id="btnFooter"><s:message code="common.button.mod"/></button>
		</div>
				
		<form id="frmPreview" name="frmPreview">
			<input type="hidden" name="siteLayOutType" id="siteLayOutType" value="<c:out escapeXml='true' value='${siteLayOutType}' />" />
			<input type="hidden" name="siteLayOutPosition" id="siteLayOutPosition" value="" />
			<textarea name="siteLayOutHtml" id="siteLayOutHtml" style="display: none;"></textarea>
		</form>
		
		<script>
		/* <![CDATA[ */
		var layOutSubType = "header";
	
		$("#btnHeader").click(function(){
			$("#siteLayOutHtmlHeader")[0].contentWindow.jf_submit();
		});

		$("#btnBody").click(function(){
			$("#siteLayOutHtmlBody")[0].contentWindow.jf_submit();
		});

		$("#btnFooter").click(function(){
			$("#siteLayOutHtmlFooter")[0].contentWindow.jf_submit();
		});

		$("#header").click(function(){
			layOutSubType = "header";
			
			$("#header").addClass("on");
			$("#body").removeClass("on");
			$("#footer").removeClass("on");
			
			$("#btnHeader").show();
			$("#btnBody").hide();
			$("#btnFooter").hide();
			
			$("#siteLayOutHtmlHeader").show();
			$("#siteLayOutHtmlBody").hide();
			$("#siteLayOutHtmlFooter").hide();
		});

		$("#body").click(function(){
			layOutSubType = "sub";
			
			$("#header").removeClass("on");
			$("#body").addClass("on");
			$("#footer").removeClass("on");
			
			$("#btnHeader").hide();
			$("#btnBody").show();
			$("#btnFooter").hide();
			
			$("#siteLayOutHtmlHeader").hide();
			$("#siteLayOutHtmlBody").show();
			$("#siteLayOutHtmlFooter").hide();
		});

		$("#footer").click(function(){
			layOutSubType = "footer";
			
			$("#header").removeClass("on");
			$("#body").removeClass("on");
			$("#footer").addClass("on");
			
			$("#btnHeader").hide();
			$("#btnBody").hide();
			$("#btnFooter").show();
			
			$("#siteLayOutHtmlHeader").hide();
			$("#siteLayOutHtmlBody").hide();
			$("#siteLayOutHtmlFooter").show();
		});
		
		$("#btnHistory").click(function(){
			
			if(layOutSubType == "header"){
				$("#siteLayOutHtmlHeader")[0].contentWindow.jf_codeSubmit();
			}else if(layOutSubType == "sub"){
				$("#siteLayOutHtmlBody")[0].contentWindow.jf_codeSubmit();
			}else if(layOutSubType == "footer"){
				$("#siteLayOutHtmlFooter")[0].contentWindow.jf_codeSubmit();
			}

			jf_GETCODE("<c:out escapeXml='true' value='${siteIdx}' />", "/gtm/<c:out escapeXml='true' value='${siteIdx}' />/siteAttrLayOutHistory/<c:out escapeXml='true' value='${siteLayOutType}' />/"+layOutSubType+".do", "history");
		});
		
		$("#btnPreview").click(function(){
			
			var frm = document.frmPreview;
			
			if(layOutSubType == "header"){
				$("#siteLayOutHtmlHeader")[0].contentWindow.jf_codeSubmit();
				$("#siteLayOutHtml").val($("#siteLayOutHtml", parent.siteLayOutHtmlHeader.document).val());
			}else if(layOutSubType == "sub"){
				$("#siteLayOutHtmlBody")[0].contentWindow.jf_codeSubmit();
				$("#siteLayOutHtml").val($("#siteLayOutHtml", parent.siteLayOutHtmlBody.document).val());
			}else if(layOutSubType == "footer"){
				$("#siteLayOutHtmlFooter")[0].contentWindow.jf_codeSubmit();
				$("#siteLayOutHtml").val($("#siteLayOutHtml", parent.siteLayOutHtmlFooter.document).val());
			}

			frm.siteLayOutPosition.value = layOutSubType;
			frm.method = "post";
			frm.target = "PreViewHtml";
			frm.action = "/common/<c:out escapeXml='true' value='${siteIdx}' />/preViewHtml.do";
			
			var popup = window.open("", "PreViewHtml", "width=1024px, height=768px, scrollbars=yes, resizable=yes");
			
			popup.focus();
			frm.submit();
		});
		/* ]]> */
		</script>	
	</body>
</html>