@model NP.Model.VMMM
<div class="row">
    <div class="col-sm-5">
        <section class="panel panel-default">
            <header class="panel-heading font-bold">메뉴 트리</header>
            <div class="panel-body" id="treebox" style="overflow-y: auto;">
                <div style="">
                    <ul class="box" id="menutree" style="display: none; list-style: none; padding: 10px 20px;">
                        @foreach (var m in Model.menus)
{
    var visible = ViewBag.mtree.ToString().Contains("/" + (m.pmenuno) + "/");
    var opended = ViewBag.mtree.ToString().Contains("/" + m.menuno + "/");
                    <li data-id="@m.menuno" data-pid="@m.pmenuno" class="@(m.menulevel > 0 ? "draggable" : "") @(m.ccount > 0 ? "isparent" : "") mg-l-@(m.menulevel) @(opended ? "opened" : m.menulevel == 0 || visible ? "" : "initdata")">
                        <a href="#" class="navicon"><span class="glyphicon glyphicon-@(m.ccount > 0 ? ((opended ? "minus" : "plus") + "-sign") : "asterisk")"></span></a>
                        <a href="#" class="naviname" onclick="smenu(this);">@m.menuname</a>
                    </li>
if (m.menulevel > 0 && m.ishid < 1)
{
                    @:
                    <li class="drop-desc drop-bottom">&nbsp;</li>
}
}
                    </ul>
                </div>
            </div>
        </section>
    </div>
    <div class="col-sm-7">
        <section class="panel panel-default" id="menuinfobox">
            <header class="panel-heading font-bold">메뉴등록</header>
            <div class="panel-body">
                <form id="mform" method="post" class="form-horizontal" enctype="multipart/form-data">
                    @Html.Hidden("mno")
                    @Html.HiddenFor(m => m.savedata)
                    @Html.HiddenFor(m => m.tabidx)
                    <div class="form-group">
                        <label class="col-lg-2 control-label">상위메뉴명</label>
                        <div class="col-lg-10">
                            @Html.HiddenFor(m => m.menu.pmenuno)@Html.TextBoxFor(m => m.menu.pmenuname, new { @placeholder = "상위메뉴를 선택하세요.", @class = "readinput form-control" })
                        </div>
                    </div>
                    <div class="line line-dashed line-lg pull-in"></div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">메뉴명</label>
                        <div class="col-lg-10">
                            @Html.HiddenFor(m => m.menu.menuno)@Html.TextBoxFor(m => m.menu.menuname, new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="line line-dashed line-lg pull-in"></div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">메뉴URL</label>
                        <div class="col-lg-10">
                            @Html.TextBoxFor(m => m.menu.menuurl, new { @class = "form-control" })
                        </div>
                    </div>
                    <div class="line line-dashed line-lg pull-in"></div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">메뉴순서</label>
                        <div class="col-lg-10">
                            @Html.TextBoxFor(m => m.menu.menuorder, new { @class = "int form-control" })
                        </div>
                    </div>
                    <div class="line line-dashed line-lg pull-in"></div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">사용여부</label>
                        <div class="col-lg-10">
                            @Html.HiddenFor(m => m.menu.isuse)
                            @Html.Radio(new NP.Model.InputRadio() { Name = "iseuse", Selected = "1", Special = NP.Model.ENUM.Special.IsUse, ChangeId = "menu_isuse" })
                        </div>
                    </div>
                    <div class="line line-dashed line-lg pull-in"></div>
                    <div class="form-group">
                        <label class="col-lg-2 control-label">좌측메뉴에서 제외</label>
                        <div class="col-lg-10">
                            @Html.HiddenFor(m => m.menu.ishid)
                            @Html.Radio(new NP.Model.InputRadio() { Name = "ishid", Selected = "0", Special = NP.Model.ENUM.Special.IsExclude, ChangeId = "menu_ishid" })
                        </div>
                    </div>
                    <div class="line line-dashed line-lg pull-in"></div>
                    <div class="form-group">
                        <div class="col-sm-offset-2">
                            <a href="#" class="btn btn-info" id="btnchild" onclick="addnew();">하위메뉴추가</a>
                            <a href="#" class="btn btn-primary" id="btnsave" onclick="save();">저장</a>
                            <a href="#" class="btn btn-danger" id="btndelete" onclick="deletemenu();">삭제</a>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </div>
</div>
<style type="text/css">
    ul#menutree li{margin-bottom: 3px;}
    ul#menutree li span.glyphicon{font-size: 17px;}
    ul#menutree li.mg-l-1{margin-top: 5px; border-top: 1px solid #ddd}
</style>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
    var pno = "menu_pmenuno";
    var pname = "menu_pmenuname"
    var mno = "menu_menuno";
    var mname = "menu_menuname";
    var murl = "menu_menuurl";
    var moder = "menu_menuorder";
    var isuse = "menu_isuse";
    var ishid = "menu_ishid";
        var _dragging = false;
        function addnew() {
            if (check(mno) || val(mno) === "0") {
                msg("좌측 메뉴구조에서 상위메뉴를 선택한 후 메뉴추가를 해주세요.");
            }
            else {
                $("ul#menutree li").removeClass("focus");
                $("ul#menutree li[data-id=" + val(mno) + "]").addClass("focus");
                rd(val(mno), val(mname), 0, "", "", 0, 1, 0);
                focus(mname);
            }
        }
        function save() {
            if (check(pno) || val(pno) === "0") {
                msg("좌측 메뉴구조에서 상위메뉴를 선택한 후 메뉴추가를 해주세요.");
            }
            else if (check(mname) || val(mname) === "") {
                msg("메뉴명을 입력하세요.");
            }
            else if (confirm(val(mno) === "0" || val(mno) === "" ? "저장하시겠습니까?" : "수정하시겠습니까?")) {
                $("#SaveData").val("");
                cap("/acommon/SaveMenu", "mform", "cbsave", null, true);
            }
        }
        function deletemenu() {
            if (check(mno) || val(mno) == "0") {
                msg("좌측 메뉴구조에서 삭제할 메뉴를 선택하신 후 삭제해주세요.");
            }
            else if (confirm("삭제하시겠습니까?")) {
                if (confirm("해당메뉴를 삭제하면 하위메뉴 및 권한이 동시에 삭제됩니다. 정말 삭제하시겠습니까?")) {
                    cap("/acommon/DeleteMenu", "mform", "cbdel", null, true);
                }
            }
        }
    function cleardesc() {
        $("#menutree div.drop-desc").css("background-color", "inherit");
        $("#menutree li").css("background-color", "inherit");
    }
    //$(window).load(function () {

        //뒤로가기하면, hidden 값들은 최종 바인딩시점의 값을 유지한다, (ajax에 의해 변경된 hidden 요소의 값은 유지되지 못한다.)
        //hashback의 값이 initial 이 아니면 뒤로가기로 접근된 것이다.
        //따라서 필요한 경우 initial 이 아닐경우 post 처리 해서 온전상 화면을 만들 수도 있겠다.
        //또한, 뒤로가기 시 온전한 이전 ajax상태를 유지해야할 경우는 ajax 시점에 location.href.hash = "#" + hidden 값들 처리하고 load event의 initial 아닐 때 수동으로 데이터 바인딩 해줄 수도 있겠다.
        //alert($("#hashback").val());
    //});
    $(document).ready(function () {
        $("#menutree").show();
        //$("#menutree li.draggable").draggable({
        //    start: function (event, ui) {
        //        $(this).draggable("option", "revert", true);
        //        $("#menutree li").css("zIndex", 10);
        //        $(this).css("zIndex", 100);
        //        _dragging = true;
        //        $("#SaveData").val($(this).attr("data-id"));
        //        $(".drop-desc").show();
        //    },
        //    stop: function () {
        //        _dragging = false;
        //        cleardesc();
        //        $(".drop-desc").hide();
        //    }
        //});
        //$("#menutree .drop-desc, #menutree li").droppable({
        //    drop: function (event, ui) {
        //        setv("mno", $("#SaveData").val());
        //        if ($(this).hasClass("drop-desc")) {
        //            if (confirm($(this).prev("li").find("a.naviname").text() + "의 아래로 이동하시겠습니까?")) {
        //                $("#SaveData").val($("#SaveData").val() + ":" + $(this).prev("li").attr("data-pid") + ":" + $(this).prev("li").attr("data-id"));
        //                //cap("/ZAXSystem/U2F2ZU1lbnU", "mform", "cbsave2", null, true);
        //            }
        //        }
        //        else {
        //            if (confirm($(this).find("a.naviname").text() + "의 하위메뉴로 이동하시겠습니까?")) {
        //                $("#SaveData").val($("#SaveData").val() + ":" + $(this).attr("data-id") + ":0");
        //                //cap("/ZAXSystem/U2F2ZU1lbnU", "mform", "cbsave2", null, true);
        //            }
        //        }
        //    },
        //    over: function () {
        //        cleardesc();
        //        if ($(this).hasClass("drop-desc")) {
        //            $(this).css("background-color", "#357ebd");
        //        }
        //        else {
        //            $(this).css("background-color", "#357ebd");
        //        }
        //    }
        //});
        $("#menutree li.isparent a.navicon").on("click", function () {
            if ($(this).parent().hasClass("opened")) {
                hideli("menutree", $(this).parent().attr("data-id"));
            }
            else {
                showli("menutree", $(this).parent().attr("data-id"));
            }
        });
        
        //저장 후 메뉴 포커싱
        var vbmno = '@ViewBag.mno';
        if (vbmno !== '0') {
            _vbmno = vbmno;
            $("#menutree li[data-id=" + vbmno + "]").addClass("focus");
            //메뉴트리 collapse
            //if (($("#menutree li[data-id='" + vbmno + "']").attr("data-pid") || '') != '') {
            //    collapse($("#menutree li[data-id='" + vbmno + "']").attr("data-pid"));
            //}
            //collapse(vbmno);
        }
        $("li.initdata").hide();
        $("#isuse" + $("#menu_isuse").val()).prop("checked", true);
    });
    var _vbmno;
    function collapse(ppid) {
        var thispid = $("#menutree li[data-id='" + ppid + "']").attr("data-pid");
        $("#menutree li[data-id='" + thispid + "'] a span").removeClass("glyphicon-plus-sign").addClass("glyphicon-minus-sign");
        if ((thispid || '') != '') {
            $("#menutree li[data-pid='" + thispid + "']").show().removeClass("initdata").addClass("opened");
            collapse(thispid);
        }
        else {
            $("#menutree li[data-id='" + ppid + "']").show().removeClass("initdata").addClass("opened");
        }
    }
    function cbdel() {
        if (capOK) {
            $("#mno").val(0)
            timesubmit();
        }
    }
    function cbsave() {
        if (capOK) {
            if (val(mno) === "0") {
                $("#mno").val(capResult.obj)
            }
            else {
                $("#mno").val(val(mno))
            }
            timesubmit();
        }
    }
    function cbsave2() {
        if (capOK) {
            timesubmit();
        }
    }
    function smenu(a) {
        if (!_dragging) {
            $("ul#menutree li").removeClass("focus");
            $(a).parents().addClass("focus");
            $("#mno").val($(a).parent().attr("data-id"));
            cap("/acommon/GetMenu", "mform", "cbsmenu", null, true);
        }
    }
    function cbsmenu() {
        if (capOK) {
            var m = capResultObj;
            rd(m.pmenuno, isempty(m.pmenuname) ? "최상위메뉴" : m.pmenuname, m.menuno, m.menuname, m.menuurl, m.menuorder, m.isuse, m.ishid);
            focus("menu_menuname");
        }
    }
    function rd(_pno, _pname, _no, _name, _url, _order, _isuse, _ishid) {
        $("#" + pno).val(_pno);
        $("#" + pname).val(_pname);
        $("#" + mno).val(_no);
        $("#" + mname).val(_name);
        $("#" + murl).val(_url);
        $("#" + moder).val(_order);
        $("#" + isuse).val(_isuse);
        $("#isuse" + _isuse).prop("checked", true);
        $("#" + ishid).val(_ishid);
        $("#ishid" + _ishid).prop("checked", true);
    }
</script>