From e4008fd564d64da872d3db3e8c1e67ea5252ee73 Mon Sep 17 00:00:00 2001
From: ChanMyeong <dece24@gmail.com>
Date: Sun, 16 Sep 2012 03:47:31 +0000
Subject: [PATCH] Issue 2442. Start. Tree UI component prototype and backup
 1.5.

git-svn-id: http://xe-core.googlecode.com/svn/branches/maserati@11238 201d5d3c-b55e-5fd7-737f-ddc643e51545
---
 modules/menu/tpl/sitemap.backup.html | 183 +++++++
 modules/menu/tpl/sitemap.html        | 683 ++++++++++++++++++++-------
 2 files changed, 692 insertions(+), 174 deletions(-)
 create mode 100644 modules/menu/tpl/sitemap.backup.html

diff --git a/modules/menu/tpl/sitemap.backup.html b/modules/menu/tpl/sitemap.backup.html
new file mode 100644
index 000000000..a833b257b
--- /dev/null
+++ b/modules/menu/tpl/sitemap.backup.html
@@ -0,0 +1,183 @@
+<script>
+xe.lang.confirm_delete = "{$lang->confirm_delete}";
+xe.current_layout = {$current_layout};
+jQuery( function() { jQuery('.grant_default').change( function(event) { doShowMenuGrantZone(); } ); doShowMenuGrantZone() } );
+</script>
+<load target="./js/menu_admin.js" usecdn="true" />
+<load target="../../admin/tpl/js/sitemap.js" usecdn="true" />
+<load target="./js/sitemap.js" usecdn="true" />
+
+<div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
+	<p>{$XE_VALIDATOR_MESSAGE}</p>
+</div>
+<h1 class="h1">{$lang->menu_gnb_sub['siteMap']}</h1>
+<block loop="$menu_list=>$key,$value">
+{@$menuSrl = $value->menuSrl}
+<form class="portlet siteMap" id="menu_{$menuSrl}" method="post" action="#menu_{$menuSrl}">
+<input type="hidden" name="module" value="{$module}" />
+<input type="hidden" name="act" value="procMenuAdminArrangeItem" />
+<input type="hidden" name="menu_srl" value="{$menuSrl}" />
+<input type="hidden" name="menu_item_srl" value="" />
+<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}#menuTop_{$menuSrl}" />
+
+	<h2 class="h2" id="menuTop_{$menuSrl}"><input name="title" value="{$value->title}" /></h2>
+	<a href="#nav_{$key}" class="tgMap">{$lang->collapsing}/{$lang->expanding}</a>
+	<ul class="lined" id="nav_{$key}" cond="count($value->menuItems->list > 0)" <!--@if($_COOKIE['sitemap_toggle_#nav_'.$key])-->style="display:none;"<!--@end-->>
+	<block loop="$value->menuItems->list=>$key2,$value2">
+	{@$item = $value2}
+	<include target="sitemap.item.html" />
+	</block>
+	</ul>
+	<p class="btnArea">
+		<span class="btn"><a href="#editMenu" class="modalAnchor _add">{$lang->add_menu}...</a></span>
+		<span class="btn"><button value="procMenuAdminArrangeItem" name="act" type="submit">{$lang->cmd_save}</button></span>
+		<span class="etc">
+			<span class="btn"><button value="procMenuAdminDelete" name="act" type="submit" onclick="return confirmDelete();">{$lang->cmd_delete}</button></span>
+			<span class="btn"><a href="#remakeCache" onclick="doReloadTreeMenu('{$menuSrl}');return false;">{$lang->cmd_remake_cache}</a></span>
+		</span>
+	</p>
+</form>
+</block>
+
+<form action="./" method="post" class="form">
+<input type="hidden" name="module" value="{$module}" />
+<input type="hidden" name="act" value="procMenuAdminInsert" />
+<input type="hidden" name="title" value="{$lang->untitle}" />
+<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}" />
+<div class="btnArea">
+	<span class="btn medium"><button type="submit">{$lang->add_new_sitemap}</button></span>
+</div>
+</form>
+<div class="modal" id="editMenu">
+	<div class="fg">
+		<form ruleset="insertMenuItem" id="editForm" action="./" method="post" enctype="multipart/form-data" class="form">
+		<input type="hidden" name="module" value="menu" />
+		<input type="hidden" name="act" value="procMenuAdminInsertItem" />
+		<input type="hidden" name="menu_srl" value="" />
+		<input type="hidden" name="menu_item_srl" value="{$menu_info->menu_srl}" />
+		<input type="hidden" name="parent_srl" value="{$menu_info->menu_srl}" />
+		<input type="hidden" name="module_srl" value="" />
+		<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}#menuTop_" />
+		<h2 class="h2"><span>{$lang->add_menu}</span><span>{$lang->edit_menu}</span></h2>
+			<ul>
+				<li>
+					<p class="q"><label for="name">{$lang->menu_name}({$lang->browser_title}) <em>*</em></label></p>
+					<div class="a multiLangEdit">
+						<input type="hidden" class="vLang" name="menu_name_key" />
+						<input type="text" class="vLang" id="name" name="menu_name" />
+						<!-- Multilingual -->
+						<div id="langEdit" class="langEdit tgContent">
+							<ul class="langList"></ul>
+							<div class="langInput">
+								<h2>{$lang->multilingual} <strong>{$lang->cmd_modify}...</strong> | <a href="#langEdit">{$lang->cmd_insert}</a></h2>
+								<ul>
+									{@
+										/* move current language to the top */
+										$a = array($lang_type=>$lang_supported[$lang_type]);
+										unset($lang_supported[$lang_type]);
+										$lang_supported = array_merge($a, $lang_supported);
+									}
+									<li loop="$lang_supported=>$code,$name" class="{$code}"><label for="{$code}_var1">{$name}</label> <input type="text" value="" id="{$code}_var1" /></li>
+								</ul>
+								<div class="action">
+									<div class="btnArea">
+										<span class="btn small"><input type="submit" value="{$lang->use}|{$lang->use_after_save}" /></span>
+									</div>
+									<p><a href="{getUrl('act','dispModuleAdminLangcode')}">{$lang->multilingual_manager}</a></p>
+								</div>
+							</div>
+						</div>
+						<!-- /Multilingual -->
+						<span class="desc"><a href="#langEdit" class="editUserLang tgAnchor">{$lang->cmd_set_multilingual}</a></span>
+					</div>
+				</li>
+				<li>
+					<p class="q">{$lang->module_or_url} <em>*</em></p>
+					<p class="a">
+						<input type="radio" name="cType" id="cModule" class="_typeCheck" value="CREATE" /> <label for="cModule">{$lang->create_module_in_menu}</label>
+						<input type="radio" name="cType" id="sModule" class="_typeCheck" value="SELECT" /> <label for="sModule">{$lang->select_module_in_menu}</label>
+						<input type="radio" name="cType" id="url" class="_typeCheck" value="URL" /> <label for="url">{$lang->menu_url}</label>
+					</p>
+				</li>
+				<li id="kindModule">
+					<p class="q"><label for="kModule">{$lang->select_module_in_menu} <em>*</em></label></p>
+					<p class="a">
+						<select style="width:290px" id="kModule" name="module_type">
+							<block loop="$module_list=>$key,$value">
+							<optgroup label="{$lang->page}" cond="$key=='page'">
+								<option value="ARTICLE">{$lang->page_type_name['ARTICLE']}</option>
+								<option value="WIDGET">{$lang->page_type_name['WIDGET']}</option>
+								<option value="OUTSIDE">{$lang->page_type_name['OUTSIDE']}</option>
+							</optgroup>
+							<option value="{$key}" cond="$key!='page'">{$value->title}</option>
+							</block>
+						</select>
+						<select style="width:290px" id="sModule_id" name="select_menu_url">
+						</select>
+					</p>
+				</li>
+				<li id="createModule">
+					<p class="q"><label for="cModule_id">{$lang->create_mid_in_menu} <em>*</em></label></p>
+					<div class="a">
+						<input type="text" id="cModule_id" name="create_menu_url" />
+					</div>
+				</li>
+				<li id="insertUrl">
+					<p class="q"><label for="link_url">{$lang->menu_url} <em>*</em></label></p>
+					<div class="a">
+						<input type="text" id="link_url" name="menu_url" value="http://" />
+					</div>
+				</li>
+				<li id="selectLayout">
+					<p class="q"><label for="layoutSrl">{$lang->layout} <em>*</em></label></p>
+					<div class="a">
+						<select name="layout_srl" id="layoutSrl">
+							<option value="0">{$lang->notuse}</option>
+							<option loop="$layout_list => $key, $val" value="{$val->layout_srl}" <!--@if($val->layout_srl == $current_layout)-->selected="selected"<!--@end-->>{$val->title} ({$val->layout})</option>
+						</select>
+					</div>
+				</li>
+				<li>
+					<p class="q">{$lang->about_menu_open_window} <em>*</em></p>
+					<p class="a">
+						<input type="radio" name="menu_open_window" id="self" value="N" /> <label for="self">{$lang->menu_self_window}</label>
+						<input type="radio" name="menu_open_window" id="blank" value="Y" /> <label for="blank">{$lang->menu_open_window}</label>
+					</p>
+				</li>
+				<li>
+					<p class="q">{$lang->menu_img_btn}</p>
+					<p class="a">
+						<span id="normal_btn_preview"></span><br />
+						<input type="file" name="menu_normal_btn" id="menu_normal_btn" /> <label for="menu_normal_btn">{$lang->menu_normal_btn}</label><br />
+						<span id="hover_btn_preview"></span><br />
+						<input type="file" name="menu_hover_btn" id="menu_hover_btn" /> <label for="menu_hover_btn">{$lang->menu_hover_btn}</label><br />
+						<span id="active_btn_preview"></span><br />
+						<input type="file" name="menu_active_btn" id="menu_active_btn" /> <label for="menu_active_btn">{$lang->menu_active_btn}</label>
+					</p>
+				</li>
+				<li>
+					<p class="q">{$lang->exposure_limits}</p>
+					<p class="a" id="groupList">
+						<select name="menu_grant_default" class="grant_default">
+							<option value="0" selected="selected">{$lang->grant_to_all}</option>
+							<option value="-1">{$lang->grant_to_login_user}</option>
+							<option value="">{$lang->grant_to_group}</option>
+						</select>
+						<div id="zone_menu_grant" style="display:none">
+							<block loop="$group_list=>$key,$value"><input type="checkbox" name="group_srls[]" id="group_srls_{$value->group_srl}" value="{$value->group_srl}" /> <label for="group_srls_{$value->group_srl}">{$value->title}</label></block>
+						</div>
+					</p>
+				</li>
+				<li>
+					<p class="q">{$lang->expand}</p>
+					<p class="a" id="expand">
+						<input type="checkbox" name="menu_expand" value="Y" /> {$lang->about_expand}
+					</p>
+				</li>
+			</ul>
+			<div class="btnArea">
+				<span class="btn"><input type="submit" value="{$lang->cmd_save}" /></span>
+			</div>
+		</form>
+	</div>
+</div>
\ No newline at end of file
diff --git a/modules/menu/tpl/sitemap.html b/modules/menu/tpl/sitemap.html
index baace0090..4d73d6c55 100644
--- a/modules/menu/tpl/sitemap.html
+++ b/modules/menu/tpl/sitemap.html
@@ -1,183 +1,518 @@
-<script>
-xe.lang.confirm_delete = "{$lang->confirm_delete}";
-xe.current_layout = {$current_layout};
-jQuery( function() { jQuery('.grant_default').change( function(event) { doShowMenuGrantZone(); } ); doShowMenuGrantZone() } );
-</script>
-<load target="./js/menu_admin.js" usecdn="true" />
-<load target="../../admin/tpl/js/sitemap.js" usecdn="true" />
-<load target="./js/sitemap.js" usecdn="true" />
-
+<div class="x_page-header">
+	<h1>{$lang->menu_gnb_sub['siteMap']}</h1>
+</div>
 <div cond="$XE_VALIDATOR_MESSAGE" class="message {$XE_VALIDATOR_MESSAGE_TYPE}">
 	<p>{$XE_VALIDATOR_MESSAGE}</p>
 </div>
-<h1 class="h1">{$lang->menu_gnb_sub['siteMap']}</h1>
-<block loop="$menu_list=>$key,$value">
-{@$menuSrl = $value->menuSrl}
-<form class="portlet siteMap" id="menu_{$menuSrl}" method="post" action="#menu_{$menuSrl}">
-<input type="hidden" name="module" value="{$module}" />
-<input type="hidden" name="act" value="procMenuAdminArrangeItem" />
-<input type="hidden" name="menu_srl" value="{$menuSrl}" />
-<input type="hidden" name="menu_item_srl" value="" />
-<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}#menuTop_{$menuSrl}" />
-
-	<h2 class="h2" id="menuTop_{$menuSrl}"><input name="title" value="{$value->title}" /></h2>
-	<a href="#nav_{$key}" class="tgMap">{$lang->collapsing}/{$lang->expanding}</a>
-	<ul class="lined" id="nav_{$key}" cond="count($value->menuItems->list > 0)" <!--@if($_COOKIE['sitemap_toggle_#nav_'.$key])-->style="display:none;"<!--@end-->>
-	<block loop="$value->menuItems->list=>$key2,$value2">
-	{@$item = $value2}
-	<include target="sitemap.item.html" />
-	</block>
-	</ul>
-	<p class="btnArea">
-		<span class="btn"><a href="#editMenu" class="modalAnchor _add">{$lang->add_menu}...</a></span>
-		<span class="btn"><button value="procMenuAdminArrangeItem" name="act" type="submit">{$lang->cmd_save}</button></span>
-		<span class="etc">
-			<span class="btn"><button value="procMenuAdminDelete" name="act" type="submit" onclick="return confirmDelete();">{$lang->cmd_delete}</button></span>
-			<span class="btn"><a href="#remakeCache" onclick="doReloadTreeMenu('{$menuSrl}');return false;">{$lang->cmd_remake_cache}</a></span>
-		</span>
-	</p>
-</form>
-</block>
-
-<form action="./" method="post" class="form">
-<input type="hidden" name="module" value="{$module}" />
-<input type="hidden" name="act" value="procMenuAdminInsert" />
-<input type="hidden" name="title" value="{$lang->untitle}" />
-<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}" />
-<div class="btnArea">
-	<span class="btn medium"><button type="submit">{$lang->add_new_sitemap}</button></span>
-</div>
-</form>
-<div class="modal" id="editMenu">
-	<div class="fg">
-		<form ruleset="insertMenuItem" id="editForm" action="./" method="post" enctype="multipart/form-data" class="form">
-		<input type="hidden" name="module" value="menu" />
-		<input type="hidden" name="act" value="procMenuAdminInsertItem" />
-		<input type="hidden" name="menu_srl" value="" />
-		<input type="hidden" name="menu_item_srl" value="{$menu_info->menu_srl}" />
-		<input type="hidden" name="parent_srl" value="{$menu_info->menu_srl}" />
-		<input type="hidden" name="module_srl" value="" />
-		<input type="hidden" name="success_return_url" value="{getUrl('', 'module', 'admin', 'act', 'dispMenuAdminSiteMap')}#menuTop_" />
-		<h2 class="h2"><span>{$lang->add_menu}</span><span>{$lang->edit_menu}</span></h2>
+<div id="site">
+	<div class="col map">
+		<section class="mapi">
 			<ul>
-				<li>
-					<p class="q"><label for="name">{$lang->menu_name}({$lang->browser_title}) <em>*</em></label></p>
-					<div class="a multiLangEdit">
-						<input type="hidden" class="vLang" name="menu_name_key" />
-						<input type="text" class="vLang" id="name" name="menu_name" />
-						<!-- Multilingual -->
-						<div id="langEdit" class="langEdit tgContent">
-							<ul class="langList"></ul>
-							<div class="langInput">
-								<h2>{$lang->multilingual} <strong>{$lang->cmd_modify}...</strong> | <a href="#langEdit">{$lang->cmd_insert}</a></h2>
-								<ul>
-									{@
-										/* move current language to the top */
-										$a = array($lang_type=>$lang_supported[$lang_type]);
-										unset($lang_supported[$lang_type]);
-										$lang_supported = array_merge($a, $lang_supported);
-									}
-									<li loop="$lang_supported=>$code,$name" class="{$code}"><label for="{$code}_var1">{$name}</label> <input type="text" value="" id="{$code}_var1" /></li>
-								</ul>
-								<div class="action">
-									<div class="btnArea">
-										<span class="btn small"><input type="submit" value="{$lang->use}|{$lang->use_after_save}" /></span>
-									</div>
-									<p><a href="{getUrl('act','dispModuleAdminLangcode')}">{$lang->multilingual_manager}</a></p>
-								</div>
+				<li class="root">
+					<div class="item">
+						<strong>기본 사이트맵</strong>
+						<span class="side">
+							<a href="#add" data-toggle="#add">메뉴추가</a>
+							<a href="#info" data-toggle="#info">속성편집</a>
+						</span>
+					</div>
+					<ul>
+						<li>
+							<i class="v"></i><i class="h"></i>
+							<div class="item">
+								<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1</a>
+								<span class="side">
+									<a href="#add" data-toggle="#add">메뉴추가</a>
+									<a href="#info" data-toggle="#info">속성편집</a>
+								</span>
 							</div>
-						</div>
-						<!-- /Multilingual -->
-						<span class="desc"><a href="#langEdit" class="editUserLang tgAnchor">{$lang->cmd_set_multilingual}</a></span>
-					</div>
-				</li>
-				<li>
-					<p class="q">{$lang->module_or_url} <em>*</em></p>
-					<p class="a">
-						<input type="radio" name="cType" id="cModule" class="_typeCheck" value="CREATE" /> <label for="cModule">{$lang->create_module_in_menu}</label>
-						<input type="radio" name="cType" id="sModule" class="_typeCheck" value="SELECT" /> <label for="sModule">{$lang->select_module_in_menu}</label>
-						<input type="radio" name="cType" id="url" class="_typeCheck" value="URL" /> <label for="url">{$lang->menu_url}</label>
-					</p>
-				</li>
-				<li id="kindModule">
-					<p class="q"><label for="kModule">{$lang->select_module_in_menu} <em>*</em></label></p>
-					<p class="a">
-						<select style="width:290px" id="kModule" name="module_type">
-							<block loop="$module_list=>$key,$value">
-							<optgroup label="{$lang->page}" cond="$key=='page'">
-								<option value="ARTICLE">{$lang->page_type_name['ARTICLE']}</option>
-								<option value="WIDGET">{$lang->page_type_name['WIDGET']}</option>
-								<option value="OUTSIDE">{$lang->page_type_name['OUTSIDE']}</option>
-							</optgroup>
-							<option value="{$key}" cond="$key!='page'">{$value->title}</option>
-							</block>
-						</select>
-						<select style="width:290px" id="sModule_id" name="select_menu_url">
-						</select>
-					</p>
-				</li>
-				<li id="createModule">
-					<p class="q"><label for="cModule_id">{$lang->create_mid_in_menu} <em>*</em></label></p>
-					<div class="a">
-						<input type="text" id="cModule_id" name="create_menu_url" />
-					</div>
-				</li>
-				<li id="insertUrl">
-					<p class="q"><label for="link_url">{$lang->menu_url} <em>*</em></label></p>
-					<div class="a">
-						<input type="text" id="link_url" name="menu_url" value="http://" />
-					</div>
-				</li>
-				<li id="selectLayout">
-					<p class="q"><label for="layoutSrl">{$lang->layout} <em>*</em></label></p>
-					<div class="a">
-						<select name="layout_srl" id="layoutSrl">
-							<option value="0">{$lang->notuse}</option>
-							<option loop="$layout_list => $key, $val" value="{$val->layout_srl}" <!--@if($val->layout_srl == $current_layout)-->selected="selected"<!--@end-->>{$val->title} ({$val->layout})</option>
-						</select>
-					</div>
-				</li>
-				<li>
-					<p class="q">{$lang->about_menu_open_window} <em>*</em></p>
-					<p class="a">
-						<input type="radio" name="menu_open_window" id="self" value="N" /> <label for="self">{$lang->menu_self_window}</label>
-						<input type="radio" name="menu_open_window" id="blank" value="Y" /> <label for="blank">{$lang->menu_open_window}</label>
-					</p>
-				</li>
-				<li>
-					<p class="q">{$lang->menu_img_btn}</p>
-					<p class="a">
-						<span id="normal_btn_preview"></span><br />
-						<input type="file" name="menu_normal_btn" id="menu_normal_btn" /> <label for="menu_normal_btn">{$lang->menu_normal_btn}</label><br />
-						<span id="hover_btn_preview"></span><br />
-						<input type="file" name="menu_hover_btn" id="menu_hover_btn" /> <label for="menu_hover_btn">{$lang->menu_hover_btn}</label><br />
-						<span id="active_btn_preview"></span><br />
-						<input type="file" name="menu_active_btn" id="menu_active_btn" /> <label for="menu_active_btn">{$lang->menu_active_btn}</label>
-					</p>
-				</li>
-				<li>
-					<p class="q">{$lang->exposure_limits}</p>
-					<p class="a" id="groupList">
-						<select name="menu_grant_default" class="grant_default">
-							<option value="0" selected="selected">{$lang->grant_to_all}</option>
-							<option value="-1">{$lang->grant_to_login_user}</option>
-							<option value="">{$lang->grant_to_group}</option>
-						</select>
-						<div id="zone_menu_grant" style="display:none">
-							<block loop="$group_list=>$key,$value"><input type="checkbox" name="group_srls[]" id="group_srls_{$value->group_srl}" value="{$value->group_srl}" /> <label for="group_srls_{$value->group_srl}">{$value->title}</label></block>
-						</div>
-					</p>
-				</li>
-				<li>
-					<p class="q">{$lang->expand}</p>
-					<p class="a" id="expand">
-						<input type="checkbox" name="menu_expand" value="Y" /> {$lang->about_expand}
-					</p>
+							<ul>
+								<li>
+									<i class="v"></i><i class="h"></i>
+									<div class="item">
+										<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1</a>
+										<span class="side">
+											<a href="#add" data-toggle="#add">메뉴추가</a>
+											<a href="#info" data-toggle="#info">속성편집</a>
+										</span>
+									</div>
+									<ul>
+										<li>
+											<i class="v"></i><i class="h"></i>
+											<div class="item">
+												<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1</a>
+												<span class="side">
+													<a href="#add" data-toggle="#add">메뉴추가</a>
+													<a href="#info" data-toggle="#info">속성편집</a>
+												</span>
+											</div>
+											<ul>
+												<li>
+													<i class="v"></i><i class="h"></i>
+													<div class="item">
+														<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1</a>
+														<span class="side">
+															<a href="#add" data-toggle="#add">메뉴추가</a>
+															<a href="#info" data-toggle="#info">속성편집</a>
+														</span>
+													</div>
+													<ul>
+														<li>
+															<i class="v"></i><i class="h"></i>
+															<div class="item">
+																<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1-1</a>
+																<span class="side">
+																	<a href="#add" data-toggle="#add">메뉴추가</a>
+																	<a href="#info" data-toggle="#info">속성편집</a>
+																</span>
+															</div>
+															<ul>
+																<li>
+																	<i class="v"></i><i class="h"></i>
+																	<div class="item">
+																		<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1-1-1</a>
+																		<span class="side">
+																			<a href="#add" data-toggle="#add">메뉴추가</a>
+																			<a href="#info" data-toggle="#info">속성편집</a>
+																		</span>
+																	</div>
+																</li>
+															</ul>
+														</li>
+													</ul>
+												</li>
+												<li>
+													<i class="v"></i><i class="h"></i>
+													<div class="item">
+														<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-2</a>
+														<span class="side">
+															<a href="#add" data-toggle="#add">메뉴추가</a>
+															<a href="#info" data-toggle="#info">속성편집</a>
+														</span>
+													</div>
+													<ul>
+														<li>
+															<i class="v"></i><i class="h"></i>
+															<div class="item">
+																<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-2-1</a>
+																<span class="side">
+																	<a href="#add" data-toggle="#add">메뉴추가</a>
+																	<a href="#info" data-toggle="#info">속성편집</a>
+																</span>
+															</div>
+														</li>
+													</ul>
+												</li>
+											</ul>
+										</li>
+										<li>
+											<i class="v"></i><i class="h"></i>
+											<div class="item">
+												<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1-2</a>
+												<span class="side">
+													<a href="#add" data-toggle="#add">메뉴추가</a>
+													<a href="#info" data-toggle="#info">속성편집</a>
+												</span>
+											</div>
+										</li>
+									</ul>
+								</li>
+								<li>
+									<i class="v"></i><i class="h"></i>
+									<div class="item">
+										<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-2</a>
+										<span class="side">
+											<a href="#add" data-toggle="#add">메뉴추가</a>
+											<a href="#info" data-toggle="#info">속성편집</a>
+										</span>
+									</div>
+								</li>
+							</ul>
+						</li>
+						<li>
+							<i class="v"></i><i class="h"></i>
+							<div class="item">
+								<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2</a>
+								<span class="side">
+									<a href="#add" data-toggle="#add">메뉴추가</a>
+									<a href="#info" data-toggle="#info">속성편집</a>
+								</span>
+							</div>
+							<ul>
+								<li>
+									<i class="v"></i><i class="h"></i>
+									<div class="item">
+										<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-1</a>
+										<span class="side">
+											<a href="#add" data-toggle="#add">메뉴추가</a>
+											<a href="#info" data-toggle="#info">속성편집</a>
+										</span>
+									</div>
+								</li>
+								<li>
+									<i class="v"></i><i class="h"></i>
+									<div class="item">
+										<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-2</a>
+										<span class="side">
+											<a href="#add" data-toggle="#add">메뉴추가</a>
+											<a href="#info" data-toggle="#info">속성편집</a>
+										</span>
+									</div>
+								</li>
+								<li>
+									<i class="v"></i><i class="h"></i>
+									<div class="item">
+										<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-3</a>
+										<span class="side">
+											<a href="#add" data-toggle="#add">메뉴추가</a>
+											<a href="#info" data-toggle="#info">속성편집</a>
+										</span>
+									</div>
+								</li>
+							</ul>
+						</li>
+					</ul>
 				</li>
 			</ul>
-			<div class="btnArea">
-				<span class="btn"><input type="submit" value="{$lang->cmd_save}" /></span>
-			</div>
-		</form>
+		</section>
+		<section class="mapi">
+			<ul>
+				<li class="root">
+					<div class="item">
+						<strong>기본 사이트맵</strong>
+						<span class="side">
+							<a href="#add" data-toggle="#add">메뉴추가</a>
+							<a href="#info" data-toggle="#info">속성편집</a>
+						</span>
+					</div>
+					<ul>
+						<li>
+							<i class="v"></i><i class="h"></i>
+							<div class="item">
+								<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1</a>
+								<span class="side">
+									<a href="#add" data-toggle="#add">메뉴추가</a>
+									<a href="#info" data-toggle="#info">속성편집</a>
+								</span>
+							</div>
+							<ul>
+								<li>
+									<i class="v"></i><i class="h"></i>
+									<div class="item">
+										<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1</a>
+										<span class="side">
+											<a href="#add" data-toggle="#add">메뉴추가</a>
+											<a href="#info" data-toggle="#info">속성편집</a>
+										</span>
+									</div>
+									<ul>
+										<li>
+											<i class="v"></i><i class="h"></i>
+											<div class="item">
+												<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1</a>
+												<span class="side">
+													<a href="#add" data-toggle="#add">메뉴추가</a>
+													<a href="#info" data-toggle="#info">속성편집</a>
+												</span>
+											</div>
+											<ul>
+												<li>
+													<i class="v"></i><i class="h"></i>
+													<div class="item">
+														<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1</a>
+														<span class="side">
+															<a href="#add" data-toggle="#add">메뉴추가</a>
+															<a href="#info" data-toggle="#info">속성편집</a>
+														</span>
+													</div>
+													<ul>
+														<li>
+															<i class="v"></i><i class="h"></i>
+															<div class="item">
+																<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1-1</a>
+																<span class="side">
+																	<a href="#add" data-toggle="#add">메뉴추가</a>
+																	<a href="#info" data-toggle="#info">속성편집</a>
+																</span>
+															</div>
+															<ul>
+																<li>
+																	<i class="v"></i><i class="h"></i>
+																	<div class="item">
+																		<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-1-1-1</a>
+																		<span class="side">
+																			<a href="#add" data-toggle="#add">메뉴추가</a>
+																			<a href="#info" data-toggle="#info">속성편집</a>
+																		</span>
+																	</div>
+																</li>
+															</ul>
+														</li>
+													</ul>
+												</li>
+												<li>
+													<i class="v"></i><i class="h"></i>
+													<div class="item">
+														<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-2</a>
+														<span class="side">
+															<a href="#add" data-toggle="#add">메뉴추가</a>
+															<a href="#info" data-toggle="#info">속성편집</a>
+														</span>
+													</div>
+													<ul>
+														<li>
+															<i class="v"></i><i class="h"></i>
+															<div class="item">
+																<a href="#" class="tx"><i class="x_icon-file"></i> 메뉴1-1-1-2-1</a>
+																<span class="side">
+																	<a href="#add" data-toggle="#add">메뉴추가</a>
+																	<a href="#info" data-toggle="#info">속성편집</a>
+																</span>
+															</div>
+														</li>
+													</ul>
+												</li>
+											</ul>
+										</li>
+										<li>
+											<i class="v"></i><i class="h"></i>
+											<div class="item">
+												<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-1-2</a>
+												<span class="side">
+													<a href="#add" data-toggle="#add">메뉴추가</a>
+													<a href="#info" data-toggle="#info">속성편집</a>
+												</span>
+											</div>
+										</li>
+									</ul>
+								</li>
+								<li>
+									<i class="v"></i><i class="h"></i>
+									<div class="item">
+										<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴1-2</a>
+										<span class="side">
+											<a href="#add" data-toggle="#add">메뉴추가</a>
+											<a href="#info" data-toggle="#info">속성편집</a>
+										</span>
+									</div>
+								</li>
+							</ul>
+						</li>
+						<li>
+							<i class="v"></i><i class="h"></i>
+							<div class="item">
+								<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2</a>
+								<span class="side">
+									<a href="#add" data-toggle="#add">메뉴추가</a>
+									<a href="#info" data-toggle="#info">속성편집</a>
+								</span>
+							</div>
+							<ul>
+								<li>
+									<i class="v"></i><i class="h"></i>
+									<div class="item">
+										<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-1</a>
+										<span class="side">
+											<a href="#add" data-toggle="#add">메뉴추가</a>
+											<a href="#info" data-toggle="#info">속성편집</a>
+										</span>
+									</div>
+								</li>
+								<li>
+									<i class="v"></i><i class="h"></i>
+									<div class="item">
+										<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-2</a>
+										<span class="side">
+											<a href="#add" data-toggle="#add">메뉴추가</a>
+											<a href="#info" data-toggle="#info">속성편집</a>
+										</span>
+									</div>
+								</li>
+								<li>
+									<i class="v"></i><i class="h"></i>
+									<div class="item">
+										<a href="#info" class="tx"><i class="x_icon-file"></i> 메뉴2-3</a>
+										<span class="side">
+											<a href="#add" data-toggle="#add">메뉴추가</a>
+											<a href="#info" data-toggle="#info">속성편집</a>
+										</span>
+									</div>
+								</li>
+							</ul>
+						</li>
+					</ul>
+				</li>
+			</ul>
+		</section>
+		<div class="x_btn-group" style="margin:15px 0;padding:10px;border-top:1px solid #ccc;text-align:right">
+			<button type="button" class="x_btn x_btn-small x_btn-inverse"><i class="x_icon-plus x_icon-white"></i> 사이트맵 추가</button>
+		</div>
+	</div>
+	<div class="col" id="@">
+		...
 	</div>
 </div>
+<style>
+#site{position:relative;overflow-x:auto;overflow-y:hidden}
+#site>.col{position:relative;float:left;height:100%;padding:0 10px;overflow-y:auto;overflow-x:hidden;border-left:1px solid #ddd}
+#site>.col:first-child{border:0;padding-left:0}
+	/* .mapi * */
+.mapi{margin:0 0 15px 0;min-width:200px}
+.mapi ul{margin:0;padding:0;list-style:none}
+.mapi li{padding:0 80px 0 0;white-space:nowrap;position:relative;line-height:30px;border-radius:3px;vertical-align:top}
+.mapi li>ul{margin:0 -80px 0 0}
+.mapi a{text-decoration:none}
+.mapi>ul{padding:1px}
+	/* .root */
+.mapi .root>ul{margin-top:10px}
+.mapi .root>.item{position:relative;border-bottom:1px solid #ccc;margin:0 -80px 0 0;zoom:1}
+.mapi .root>.item>strong{font-size:16px}
+	/* li>i.v || li>i.h */
+.mapi .v,
+.mapi .h{position:absolute;border:0;border-style:dotted;border-color:#ccc;overflow:hidden}
+.mapi .v{width:0;top:30px;border-left-width:1px;display:none}
+.mapi .h{width:14px;height:0;top:15px;border-top-width:1px}
+.mapi .open>.v{display:block}
+.mapi .hover .v,
+.mapi .hover li>.h{border:1px solid #666}
+.mapi .hover>.item,
+.mapi .selected>.item{background:#666}
+.mapi .root>ul>li>i.h{display:none}
+	/* li>.item */
+.mapi .root li>.item{position:relative;z-index:2;border-radius:3px;margin:0 -80px 0 0;padding:0 80px 0 0;zoom:1}
+.mapi .selected>.item{opacity:.75;filter:alpha(opacity=75)}
+	/* li>.item>.tx */
+.mapi .tx{position:relative;z-index:2;display:block;line-height:30px;padding-right:30px;color:#000}
+.mapi .hover>.item>.tx,
+.mapi .selected>.item>.tx{color:#fff}
+	/* li>.item>a.tx */
+.mapi .root>ul>li>.item>a{padding-left:24px}
+.mapi .root>ul>li>ul>li>.item>a{padding-left:48px}
+.mapi .root>ul>li>ul>li>ul>li>.item>a{padding-left:72px}
+.mapi .root>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:96px}
+.mapi .root>ul>li>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:120px}
+.mapi .root>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:144px}
+.mapi .root>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:168px}
+.mapi .root>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:192px}
+.mapi .root>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>ul>li>.item>a{padding-left:216px}
+	/* li>.item>.tx>i */
+.mapi .tx>i[class^="x_icon-"]{position:relative;left:-20px;margin:0 -20px 0 0;opacity:.5;filter:alpha(opacity=50)}
+.mapi .hover>.item>.tx>i[class*="-white"],
+.mapi .selected>.item>.tx>i[class*="-white"]{opacity:1;filter:alpha(opacity=100)}
+	/* li>.item>.side */
+.mapi .side{position:absolute;z-index:2;top:3px;right:3px;line-height:0}
+.mapi .side>a{display:inline-block;border-radius:3px;width:24px;height:24px;overflow:hidden;line-height:0;text-indent:24px;background:#94A55C url({getUrl('')}common/img/glyphicons-halflings-white.png) no-repeat}
+.mapi .side>a[href="#add"]{background-position:5px -91px}
+.mapi .side>a[href="#info"]{background-position:-427px 5px}
+.mapi .side>a:hover,
+.mapi .side>a:focus,
+.mapi .side>a.active{background-color:#333}
+	/* li>.item>ul */
+.mapi .root>ul ul{display:none}	
+.mapi .root>ul li.open>ul{display:block}
+</style>
+<!--[if IE 7]>
+<script>
+jQuery(function($){
+// IE .col width bug fix
+	$('.col').each(function(){
+		var $this = $(this);
+		setTimeout(function(){
+			var childW = $this.children().width();
+			$this.width(childW);
+		},0);
+	});
+});
+</script>
+<![endif]-->
+<script>
+//<![CDATA[
+jQuery(function($){
+// Set #site height fix
+	$(window).resize(function(){
+		var wHeigh = $(window).height();
+		var $site = $('#site');
+		$site.height(wHeigh - 270);
+	}).resize();
+// Draw .h/.v line and display file/folder icon
+	var $mapi = $('.map .root li');
+	$mapi.addClass('open');
+	function drawMap(){
+		$mapi.each(function(){
+			var $this = $(this);
+			var verticalX = parseInt($this.find('>.item>.tx').css('paddingLeft'));
+			// Draw line
+			$this.find('>.h').css({ // Horizontal line position
+				left: verticalX -39
+			});
+			var submenu = $this.find('>ul').length;
+			var hasopen = $this.hasClass('open');
+			if(submenu){ // Vertical line position
+				var verticalH = parseInt($this.height())-15;
+				var removeH = parseInt($this.find('>ul>li:last-child').height());
+				$this.find('>.v').css({
+						left: verticalX -15,
+						height: verticalH - removeH
+					});
+				$this.find('>.item>.tx>i').removeClass('x_icon-file'); // Remove file icon
+			} else {
+				$this.find('>.v').remove();
+			}
+			// Display icon
+			var folderOpen = 'x_icon-folder-open';
+			var folderClose = 'x_icon-folder-close';
+			if(submenu && hasopen){
+				$this.find('>.item>.tx>i').removeClass(folderClose).addClass(folderOpen);
+			} else if(submenu && !hasopen) {
+				$this.find('>.item>.tx>i').removeClass(folderOpen).addClass(folderClose);
+			}
+			
+		});
+	}
+	drawMap();
+// li.hover class toggle
+	$mapi.bind({
+		mouseover: function(event){
+			$(this).addClass('hover');
+			$(this).not('.selected').find('>.item>.tx>i').addClass('x_icon-white');
+			event.stopPropagation();
+		},
+		mouseout: function(event){
+			$(this).removeClass('hover');
+			$(this).not('.selected').find('>.item>.tx>i').removeClass('x_icon-white');
+			event.stopPropagation();
+		}
+	});
+// a.tx submenu toggle
+	$mapi.find('>.item>.tx').click(function(){
+		$(this).closest('li').toggleClass('open');
+		drawMap();
+		return false;
+	});
+// li.selected and .side>a toggle
+	var $mapi = $('.map li');
+	$mapi.find('>.item>.side>a')
+		.click(function(){
+			var $this = $(this);
+			var iconWhite = 'x_icon-white';
+			$mapi.removeClass('selected').find('>.item>.side>a').not($this).removeClass('active');
+			$mapi.find('>.item').not($this.closest('.item')).find('>.tx>i').removeClass(iconWhite);
+			$this.toggleClass('active').siblings().removeClass('active');
+			if($this.parent('.side').children('a.active').length){
+				$this.closest('li:not(".root")').addClass('selected').find('>.item>.tx>i').addClass(iconWhite);
+			}
+		})
+		.hover(
+			function(){
+				var $this = $(this);
+				var title = $this.text();
+				$this.attr('title', title);
+			},
+			function(){
+				var $this = $(this);
+				$this.removeAttr('title');
+			}
+		);
+});
+//]]>
+</script>