@model NP.Model.VMSystem
<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;">
                        @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.IsHidden < 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)
                    <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">메뉴유형</label>
                        <div class="col-lg-10">
                            @Html.HiddenFor(m => m.menu.MenuType)@Html.Partial("./Partial/Radio", Model.menu.MenuType, new ViewDataDictionary() { { "checked", Model.menu.MenuType }, { "special", "menutype" }, { "name", "MenuType" }, { "changeid", "menu_MenuType" } })
                        </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 = "IsUse", 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">
                        <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>
@section scriptscdn{
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
}
@section scripts{
    <script>
    var pno = "menu_PMenuNo";
    var pname = "menu_PMenuName"
    var mno = "menu_MenuNo";
    var mname = "menu_MenuName";
    var murl = "menu_MenuUrl";
    var mtype = "menu_MenuType";
        var moder = "menu_MenuOrder";
        var isuse = "menu_IsUse";
        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, $("ul#menutree li[data-pid=" + val(mno) + "]").length + 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("/SystemAX/SaveMenu", "mform", "cbsave", null, true);
            }
        }
        function deletemenu() {
            if (check(mno) || val(mno) == "0") {
                msg("좌측 메뉴구조에서 삭제할 메뉴를 선택하신 후 삭제해주세요.");
            }
            else if (confirm("삭제하시겠습니까?")) {
                if (confirm("해당메뉴를 삭제하면 하위메뉴 및 권한이 동시에 삭제됩니다. 정말 삭제하시겠습니까?")) {
                    cap("/SystemAX/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("/SystemAX/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.MenuType, m.MenuOrder, m.IsUse);
            focus("menu_MenuName");
        }
    }
        function rd(_pno, _pname, _no, _name, _url, _mtype, _order, _isuse) {
            alert(_mtype);
        _mtype = _mtype || "0";
        $("#" + pno).val(_pno);
        $("#" + pname).val(_pname);
        $("#" + mno).val(_no);
        $("#" + mname).val(_name);
        $("#" + murl).val(_url);
        $("#" + mtype).val(_mtype);
        $("#" + moder).val(_order);
        $("#" + isuse).val(_isuse);
        $("#IsUse" + _isuse).prop("checked", true);
        $("#MenuType" + _mtype).prop("checked", true);
    }
    </script>
}