<?php TPL::output('admin/global/header.tpl.htm'); ?>
<!--left-->
<?php TPL::output('admin/global/left.tpl.htm'); ?>
<!--left-->
<!-- main -->

<div id="body-wrapper">
	<div id="main-content">
		<div class="content-box">
			<div class="content-box-header">
				<h3><?php echo $this->crumb['last']['name']; ?></h3>
				<ul class="content-box-tabs">
				</ul>
			</div>
			<div style="width:950px;">
				<div class="content-box-content" style="width:500px;float:left;">
					<div style="padding:15px; border:1px solid #ccc;">
						<form id="nav_menu_list" action="admin/nav_menu/save_ajax/" method="post">
							<input type="hidden" id="nav_sort" name="nav_sort" value=""/>
							<h3 style="">Navigation menu<span style="margin-left:10px;font-size:13px; color:#999999">(Drag menu to sort the order of navigation menu)</span><span style="float:right; font-size:13px; color:#999;margin-right:4px; margin-top:0px;">
								<input class="button" type="button" onClick="ajax_post($('#nav_menu_list'), _form_process);" value="Save menu setting" />
								</span></h3>
							<p groupid="11" name="category_display_mode" style="margin-bottom:15px;height:21px;">
								<select class="medium-input" name="category_display_mode" style="float:left;">
									<option value="list" <?php if ($this->setting['category_display_mode'] == 'list'){ ?> selected="true"<?php } ?>>Text list mode</option>
									<option value="icon" <?php if ($this->setting['category_display_mode'] == 'icon'){ ?> selected="true"<?php } ?>>Icon mode</option>
								</select>
								<label style=" margin-left:15px; margin-top:5px; float:left;">
								<input type="checkbox" value="Y" name="nav_menu_show_child"<?php if($this->setting['nav_menu_show_child'] == 'Y'){ ?> checked="true"<?php } ?>>
								Show sub-category under a category</label>
							</p>
							<?php if($this->nav_menu_list){ ?>
							<div id="nav_menu" style="list-style-type:none; margin-top:20px; clear:both;width:80%; ">
								<?php foreach($this->nav_menu_list as $key => $val){ ?>
								<li style="border:1px solid #ccc; margin-top:10px;height:100%; " data-sort="<?php echo $val['id']; ?>">
									<div class="content-tgbox-header" style="width:100%; ">
										<h6><?php echo $val['title']; ?></h6>
										<span style="float:right; color:#999;margin-right:12px; margin-top:18px;">
										<?php if($val['type'] == 'category'){ ?>
										Classification
										<?php }else if($val['type'] == 'feature'){ ?>
										Feature
										<?php }else{ ?>
										Custom Links
										<?php } ?>
										</span> </div>
									<div style="padding:10px; height:100%; display:none;">
										<p style=" margin:0; padding:0;width: 200px; height:100%; float:left;">
											<label style="margin:1px; line-height:24px;height:50px;">Tag<br />
											<input class="text-input large-input" style="margin:0; padding:0;" name="nav_menu[<?php echo $val['id']; ?>][title]" value="<?php echo $val['title']; ?>" />
											</label>
										</p>
										<div rel="<?php echo $val['id']; ?>" style="margin-top:5px; margin-left:20px; border:dashed 1px #999999; padding:0;width: 50px; height:50px; float:left; text-align:center; vertical-align:middle;"> <img src="<?php if($val['icon']){ ?><?php echo get_setting('upload_url');?>/nav_menu/<?php echo $val['icon']; ?><?php }else{ ?><?php echo GET_STATIC_URL; ?>/css/default/img/default_class_imgs.png<?php } ?>" class="icon_img" rel="<?php echo $val['id']; ?>" style="width:50px; height:50px" /> </div>
										<div id="icon_upload_process" style="float:left; margin-top:28px;margin-left:10px; width:60px;">
											<input type="button" value="Upload" class="button" rel="<?php echo $val['id']; ?>">
										</div>
										<p style="height:100%;clear:both; margin:0; padding:0;width: 95%;">
											<label style=" line-height:24px;height:50px;">Description<br />
											<input class="text-input large-input" style="margin:0; padding:0;" name="nav_menu[<?php echo $val['id']; ?>][description]" value="<?php echo $val['description']; ?>" />
											</label>
										</p>
										<?php if($val['type'] == 'custom'){ ?>
										<p style=" clear:both; height:100%; margin-bottom:2px; width:95%">
											<label style="padding:1px;">Link<br />
											<input class="text-input large-input" style="width:95%;" name="nav_menu[<?php echo $val['id']; ?>][link]" value="<?php echo $val['link']; ?>" />
											</label>
										</p>
										<?php } ?>
										<div style="clear:both; margin: 3px 0 3px;height:30px;">
											<p style="float:right">
												<input class="button" type="button" onClick="if(confirm('OK to delete?')){ajax_request(GET_BASE_URL + '/admin/nav_menu/remove_nav_menu/nav_menu_id-<?php echo $val['id']; ?>');}" value="Delete" />
											</p>
										</div>
									</div>
								</li>
								<?php } ?>
								<?php } ?>
							</div>
						</form>
					</div>
				</div>
				<div style="margin-left:10px; width:350px; float:left;">
					<div style="border:1px solid rgb(204, 204, 204); margin-top:20px;">
						<div class="content-tgbox-header" style="width:100%; ">
							<h4>Classification</h4>
						</div>
						<div class="tab-content default-tab" style="padding:15px;">
							<form action="admin/nav_menu/add_menu_ajax/" method="post">
								<input type="hidden" name="type" value="category" />
								<p>
									<select name="type_id" style="width:200px;">
										<option value="0">No</option>
										<?php echo $this->category_list; ?>
									</select>
								</p>
								<input class="button" type="button" onClick="ajax_post($(this).parents('form'), _form_process);" value="Add to navigation menu" />
							</form>
						</div>
					</div>
					<div style="border:1px solid rgb(204, 204, 204); margin-top:20px;">
						<div class="content-tgbox-header" style="width:100%; ">
							<h4>Feature</h4>
						</div>
						<div class="tab-content default-tab" style="padding:15px;">
							<form action="admin/nav_menu/add_menu_ajax/" method="post">
								<input type="hidden" name="type" value="feature" />
								<?php foreach($this->feature_list as $key => $val){ ?>
								<label style=" font-weight:normal;">
								<input name="type_id" value="<?php echo $val['id']; ?>" type="checkbox" />
								<?php echo $val['title']; ?></label>
								<?php } ?>
								</p>
								<input class="button" type="button" onClick="ajax_post($(this).parents('form'), _form_process);" value="Add to navigation menu" />
							</form>
						</div>
					</div>
					<div style="border:1px solid rgb(204, 204, 204); margin-top:20px;">
						<div class="content-tgbox-header" style="width:100%; ">
							<h4>Custom Links</h4>
						</div>
						<div class="tab-content default-tab" style="padding:15px;">
							<form action="admin/nav_menu/add_menu_ajax/" method="post">
								<input type="hidden" name="type" value="custom" />
								<p style="width: 150px;">
									<label style="padding:0;">Tag<br />
									<input class="text-input large-input" name="title" value="" />
									</label>
								</p>
								<p style="width: 96%;">
									<label style="padding:0;">Description<br />
									<input class="text-input large-input" name="description" value="" />
									</label>
								</p>
								<p style="width: 96%; float:left;">
									<label style="padding:0;">Link<br />
									<input class="text-input large-input" style="width: 100%;" name="link" value="http://" />
									</label>
								</p>
								<p style="clear:both">
									<input class="button" type="button" onClick="ajax_post($(this).parents('form'), _form_process);" value="Add to navigation menu" />
								</p>
							</form>
						</div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
			<!-- footer -->
			<?php TPL::output('admin/global/footer.tpl.htm'); ?>
			<!-- footer -->
		</div>
	</div>
	<div class="clear"></div>
</div>
<!-- main -->
</div>

<script type="text/javascript">

<?php foreach($this->nav_menu_list as $key => $val){ ?>
init_img_uploader(GET_BASE_URL + '/admin/nav_menu/icon_upload_ajax/nav_menu_id-<?php echo $val['id']; ?>', 'icon_file', $('.button[rel=<?php echo $val['id']; ?>]'), null, $('.icon_img[rel=<?php echo $val['id']; ?>]'));
<?php } ?>

$("#nav_menu").dragsort({ dragSelector: "li", dragEnd: function (){
		var data = $("#nav_menu li").map(function() { return $(this).data("sort"); }).get();
		$('#nav_sort').val(data);
	}, dragBetween: false, placeHolderTemplate: "<li></li>"
});
</script>

</body>
</html>