{inc:header.htm}
<div class="nav">
    <ul class="cc">
        <li class="current"><a href="index.php?u=navigate-index">导航管理</a></li>
        <li><a href="javascript:add();">添加导航</a></li>
    </ul>
</div>
<style type="text/css">
#nav_cont{position:relative}
#nav_cont .list,#kp_widget_holder{padding:2px}
#nav_cont .list ul{padding:4px;background:#ECF2F5;border:1px solid #C2D5E3;border-radius:5px;cursor:move}
#nav_cont .list ul li{height:26px;line-height:26px;padding:2px 0 2px 2px}
#nav_cont .list ul:hover{background:#FFFFBB}
.nav_l{float:left;width:150px}
.nav_l input{float:left;vertical-align:top}
.nav_l .inp{width:108px}
.nav_l .check_box{cursor:pointer;margin:6px 0 0 5px}
.nav_c{float:left;width:50%}
.nav_c .inp{width:90%}
.nav_r{float:right;width:120px}
.nav_r .but2{float:right;margin:3px 8px 0 0}
.nav_rank_2{margin-left:50px}
.nav_transport{display:none}
.cf:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    overflow: hidden;
}
</style>

<div class="m">

	<div class="p c2">
		<div class="cc">
			{if:empty($nav_arr)}<div class="sky warning bnote"><i></i><b>暂无数据</b></div>{/if}
			<div id="nav_cont">
				{inc:navigate_content.htm}
			</div>
		</div>
		<div class="btn_wrap">
	    	<div class="btn_wrap_pd" id="navi_save">             
	        	
	      	</div>
	    </div>
	</div>
</div>
<style type="text/css">
.case_type {
    padding: 8px;
}
.case_type a {
    background: none repeat scroll 0 0 #90cef2;
    border-radius: 5px;
    color: #fff;
    display: inline;
    float: left;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    margin-right: 5px;
    text-align: center;
    width: 50px;
}
.case_type a.on {
    background: none repeat scroll 0 0 #0b6092;
}
</style>
<script id="add_nav" type="text/html">
	<div class="case_type cf">
		<a href="javascript:set_type(0);" class="on">分类</a>
		<a href="javascript:set_type(1);">链接</a>
	</div>

	<div id="category">
		{if:empty($category_list)}
		<div style="padding:10px 15px;font-size:14px">暂无分类，请先到分类管理增加分类。</div>
		{else}
		{loop:$category_list $arr $mid}
		<div class="category">
			<dl class="h_a">
				<dd>　{php} echo $mod_name[$mid];{/php}分类</dd>
			</dl>

			<div class="table_full" cid="{$v[cid]}" mid="{$v[mid]}">
				<table width="100%">
					<tbody>
					{loop:$arr $v}		
					<tr>
						<td width="30"><input type="checkbox" value="{$v[cid]}"></td>
						<td class="cat_name">{php} echo str_repeat("　　", $v['pre']-1);{/php} {$v[name]}</td>
					</tr>
					{/loop}
					</tbody>
				</table>
			</div>
		</div>
		{/loop}
		{/if}
	</div>

	<div id="outnav" style="display:none">
		<div class="h_a">基本属性</div>
		<div class="table_full">
		<table width="100%">
			<tr>
				<th width="80">名称</th>
				<td><input name="name" type="text" class="input w1" /></td>
			</tr>
			<tr>
				<th>链接</th>
				<td><input name="url" style="width:300px;" type="text" value="http://" class="input w1" /></td>
			</tr>
			<tr>
				<th>新窗口打开</th>
				<td><input name="target" type="checkbox" checked="checked"></td>
			</tr>
		</table>
		</div>
	</div>
</script>

<script type="text/javascript">
//添加分类
function add(){
	window.setType = 0;
	window.addHeight = Math.max(350, document.documentElement.clientHeight-30);
	$.maybeDialog({content:$("#add_nav").html(), resizable:true, open:true, modal:true, width:600, height:addHeight, minW:500});

	//提交
	$("#maybedialog_button>.ok").click(function(){
		if(window.setType == 0) {
			//添加分类
			var cate = [];
			$(".category input[type='checkbox']").each(function(i) {
				if(this.checked) {
					cate[i] = [$(this).parent().siblings(".cat_name").text().trim(), $(this).val()];
				}
			});
			maybeAjax.postd("index.php?u=navigate-add_cate-ajax-1", {"cate":cate}, function(data){
				maybeAjax.alert(data);
				$.maybeDialog("remove");
				setTimeout("window.location.reload()",1000);
			});
		}else{
			//添加链接
			var name = $("#outnav input[name='name']").val();
			var url = $("#outnav input[name='url']").val();
			var target = $("#outnav input[name='target']")[0].checked ? 1 : 0;
			maybeAjax.postd("index.php?u=navigate-add_link-ajax-1", {"name":name, "url":url, "target":target}, function(data){
				maybeAjax.alert(data);
				$.maybeDialog("remove");
				setTimeout("window.location.reload()",1000);
			});
		}
	});
}

//选择类型
function set_type(type) {
	var h;
	if(type == 0) {
		$("#outnav").hide();
		$("#category").show();
		h = window.addHeight;
		window.setType = 0;
	}else{
		$("#category").hide();
		$("#outnav").show();
		h = 275;
		window.setType = 1;
	}
	$("#maybedialogbox").css("height", h);
	$("#maybedialog_content").css("height", h-64);
	$(".case_type>a").removeAttr("class");
	$(".case_type>a").eq(type).addClass("on");
}

//拖拽插件
$.fn.kpdragsort = function(options) {
	var container = this;

	$(container).children(".list").off("mousedown").mousedown(function(e) {
		if(e.which != 1 || $(e.target).is("input, textarea, a") || window.kp_only) return; // 排除非左击和其他元素
		e.preventDefault(); // 阻止选中文本

		var x = e.pageX;
		var y = e.pageY;
		var _this = $(this); // 点击选中块
		var w = _this.width();
		var h = _this.height();
		var w2 = w/2;
		var h2 = h/2;
		var p = _this.position();
		var left = p.left;
		var top = p.top;
		var sTop = $(".p:first").scrollTop();
		window.kp_only = true;
		window.twoNav = null;

		// 运输二级导航
		if(!_this.is(".nav_rank_2")) {
			var i = _this.index(".list");
			var iObj = $("#nav_cont>.list");
			var iSon = _this.children(".nav_transport");
			for(++i; i<iObj.length; i++) {
				if(!iObj.eq(i).is(".nav_rank_2")) break;
				iObj.eq(i).appendTo(iSon);
			}
			if(iSon.children().length) iSon.show();
		}

		// 添加虚线框
		_this.after('<div id="kp_widget_holder"></div>');
		var wid = $("#kp_widget_holder");
		wid.css({"border":"2px dashed #ccc", "height":_this.height()-4, "margin-left":_this.css("margin-left")});

		// 保持原来的宽高
		_this.css({"width":w, "height":h, "position":"absolute", opacity: 0.8, "z-index": 999, "left":left, "top":top});

		// 绑定mousemove事件
		$(document).mousemove(function(e) {
			e.preventDefault();

			// 移动选中块
			var l = left + e.pageX - x;
			var t = top + ($(".p:first").scrollTop() - sTop) + e.pageY - y;
			_this.css({"left":l, "top":t});

			var widPrevFun = function() {
				var prev = wid.prev();
				if(prev.is(_this)) return prev.prev();
				return prev;
			}

			var widNextFun = function() {
				var next = wid.next();
				if(next.is(_this)) return next.next();
				return next;
			}

			var rankOneFun = function() {
				_this.attr("_rank", 1);
				wid.css({"margin-left":0});
				window.twoNav = 1;
			}

			var rankTwoFun = function() {
				_this.attr("_rank", 2);
				wid.css({"margin-left":50});
				window.twoNav = 2;
			}

			// 当拖拽到第一个时变成一级 或 有下级时只能为一级
			var widPrev = widPrevFun();
			if(!widPrev.is(".list") || _this.find(".nav_transport>.list").length > 0) {
				rankOneFun();
			}else{
				// 二级如果是最后一个时可以拖拽为一级
				var winNext = widNextFun();
				if(!winNext.is(".nav_rank_2")) {
					if(left < l-50) {
						rankTwoFun();
					}else if(left > l) {
						rankOneFun();
					}
				}else{
					// 如果上一个对象是二级，那它直接为二级
					if(widPrev.is(".nav_rank_2")) {
						rankTwoFun();
					}else{
						// 如果下一个对象为二级，说明他有下级，那不能被代替
						if(winNext.is(".nav_rank_2")) {
							rankTwoFun();
						}else{
							if(left < l-50) {
								rankTwoFun();
							}else if(left > l) {
								rankOneFun();
							}
						}
					}
				}
			}

			// 选中块的中心坐标
			var ml = l+w2;
			var mt = t+h2;

			// 遍历所有块的坐标
			$(container).children(".list").not(_this).each(function(i) {
				var obj = $(this);
				var p = obj.position();
				var a1 = p.left;
				var a2 = p.left + obj.width();
				var a3 = p.top;
				var a4 = p.top + obj.height();

				// 移动虚线框
				if(a1 < ml && ml < a2 && a3 < mt && mt < a4) {
					if(!obj.next("#kp_widget_holder").length) {
						wid.insertAfter(this);
					}else{
						wid.insertBefore(this);
					}
				}
			});
		});

		// 绑定mouseup事件
		var _mouseup = function() {
			$(document).off('mouseup').off('mousemove');

			// 拖拽回位，并删除虚线框
			var p = wid.position();

			if(window.twoNav) {
				if(window.twoNav === 2) {
					p.left = p.left + 50;
					_this.addClass("nav_rank_2");
				}else{
					_this.removeClass("nav_rank_2");
				}
			}

			_this.animate({"left":p.left, "top":p.top}, 100, function() {
				_this.removeAttr("style");
				wid.replaceWith(_this);

				// 运输结束
				_this.children(".nav_transport").removeAttr("style");
				_this.find(".nav_transport>.list").insertAfter(_this);

				window.kp_only = null;
				if(parent) parent.document.onmouseup = null;

				check_change();
			});
		};
		$(document).mouseup(_mouseup);
		if(parent) parent.document.onmouseup = _mouseup;
	});
}


//删除
function nav_del(obj) {
	var o = $(obj).parent().parent().parent();
	var name = o.find(".name").val();
	var key = o.attr("_key");
	var s_end = (!o.is(".nav_rank_2") && o.next().is(".nav_rank_2")) ? "及下级导航" : "";
	maybeAjax.confirm("删除不可恢复，确定删除“<font color='red'>"+name+"</font>”" + s_end +"？", function(){
		maybeAjax.postd("index.php?u=navigate-del-ajax-1", {"key":key}, function(data){
			maybeAjax.alert(data);
			if(window.maybeData.err==0) setTimeout("window.location.reload()",1000);
		});
	});
}

$(function(){
	$("#nav_cont").kpdragsort();
	window.keys = get_navi();
	$("input[type='checkbox']").change(check_change);
	$("input[type='text']").focusin(nav_change).focusout(check_change);
});

//内容改变
function nav_change() {
	if(!$("#nav_change").length){
		$("#navi_save").append('<input id="nav_change" onclick="nav_save()" type="button" value="保存修改" class="btn btn_submit mr10" />');
	}
}

//保存修改
function nav_save() {
	maybeAjax.postd("index.php?u=navigate-nav_save-ajax-1", {"navi":get_navi()}, function(data){
		maybeAjax.alert(data);
		if(window.maybeData.err==0) setTimeout("window.location.reload()",1000);
	});
}

//获取所有数据
function get_navi() {
	var navi = [];
	$("#nav_cont>.list").each(function(i) {
		var cid = $(this).attr("_cid");
		var name = $(this).find(".name").val();
		var url = $(this).find(".url").val();
		var target = $(this).find("input[type='checkbox']")[0].checked ? 1 : 0;
		var rank = $(this).attr("_rank");
		navi[i] = [cid, name, url, target, rank];
	});
	return navi;
}

//检查参数是否改变
function check_change() {
	var len = $("#nav_cont>.list").length;
	for(var i = 0; i < len; i++) {
		var obj = $("#nav_cont>.list").eq(i);
		var cid = obj.attr("_cid");
		var name = obj.find(".name").val();
		var url = obj.find(".url").val();
		var target = obj.find("input[type='checkbox']")[0].checked ? 1 : 0;
		var rank = obj.attr("_rank");

		try{
			var keys = window.keys;
			if(keys[i][0] !== cid || keys[i][1] !== name || keys[i][2] !== url || keys[i][3] !== target || keys[i][4] !== rank) {
				nav_change();
				return;
			}
		}catch(e){}
	}
	if($("#nav_change").length) $("#nav_change").remove();
}

</script>
{inc:footer.htm}