<aside class="grid_3">
    <div>
        <h2>Strony</h2>
        <section>

            <!--<button id="createroot" >Główny + </button>-->
            <!--<button onclick="create_folder();">Folder + </button>-->
            <button onclick="create_file();">Podstrona + </button>

            <div id="html1" style="width: 200px">
                <?= $this->tree ?>
            </div>

        </section>
        <div id="event_result"></div>
    </div>

</aside>

<section id="main" class="grid_9 pages" style="height:100%">
    <article id="co" class="content" style="height:100%">
        <h1>Edytuj strony</h1>

        <div>
            <div id="content_page"> </div>
            <div id="ed"> </div>
        </div>

        <div class="clear"></div>
    </article>
</section>
<script type="text/javascript" src="/modules/Core/admin/js/tree/jstree.min.js"></script>

<script>
                $(function() {
                        var root = $("#html1").jstree({
                        core: {
                            check_callback: true
                        },
                        types: {
                                    "default": {
                                        "valid_children": ["default", "file"]
                                    },
                                    "file": {
                                        "icon": "/modules/Core/admin/images/doc.png",
                                        "valid_children": []
                                    }
                                },
                        plugins: ["contextmenu", "dnd", "search",
                                    "state", "types", "wholerow"]
                    })

                    $(document).on('click', '#edit_page', function() {
                        window.location = '/Page/admin_index/edit-page/tree/' + $(this).attr("tree");
                    });
                    
                    $(document).on('click', '#createroot', function() {

                    var c = root.jstree(true).create_node(root, "root1");
                    console.log(c);
                    $.post("/Page/admin_index/create-root",
                                {tree: c});
      
                    });
                    
                    $(document).on('click', '#savemain', function() {
//                        console.log($(this).attr("tree"));
                        $.post("/Page/admin_index/save-main",
                                {tree: $(this).attr("tree"),
                                    route: $("#route").val(),
                                    params: $("#params").val()});
                    });
//                    $('#html1').childreneach(function() {
//                        var id = $(this).attr('id');
//                        console.log(id);
//                    });

                });

                function create_file() {
                    var ref = $('#html1').jstree(true),
                            sel = ref.get_selected();
                    if (!sel.length) {
                        return false;
                    }
                    sel = sel[0];
                    sel = ref.create_node(sel, {"type": "file"});
                    if (sel) {
                        ref.edit(sel);
                    }
                };
                function create_folder() {
                    var ref = $('#html1').jstree(true),
                            sel = ref.get_selected();
                    if (!sel.length) {
                        return false;
                    }
                    sel = sel[0];
                    sel = ref.create_node(sel, {"type": "default"});
                    if (sel) {
                        ref.edit(sel);
                    }
                }
                ;
                $(document).ready(function() {

                    $('#html1').
                            on('rename_node.jstree', function(e, data) {
                                        
                                        if (data.node.parent == "#") {
                                            data.node.parent = "0";
                                        } 
                                        
                                $.post("/Page/admin_index/add-element/tree/" + data.node.id + "/parent/" + data.node.parent + "/name/" + data.text + "/type/" + data.node.type);
                            }).
                            on('delete_node.jstree', function(e, data) {
//                                console.log(data.node.id);
                                $.post("/Page/admin_index/remove-element/id/" + data.node.id);
                            }).
                            on('move_node.jstree', function(e, data) {
                                console.log(data);
                                $.post("/Page/admin_index/save-parent", {tree: data.node.id, parent: data.parent}, function(data) {
                                    console.log(data);
                                });
//                                $.post("/Page/admin_index/remove-element/id/" + data.node.id);
                            }).
                            on('redraw.jstree', function(e, data) {


                                var ord = new Array();
                                $.each($('#html1 ul li'), function(k, v) {
//                                    console.log($(this).attr('id') + '::' + k);
                                    ord[k] = $(this).attr('id');
                                    $.each($('#' + $(this).attr('id') + 'ul li'), function(k, v) {
//                                        console.log($(this).attr('id') + '::' + k);
                                        ord[k] = $(this).attr('id');
                                    });
                                });
//                                console.log(ord);
                                $.post("/Page/admin_index/save-order", {ord: ord}, function(data) {
//                                    console.log (data);
                                });
                            }).
                            on('changed.jstree', function(e, data) {

                            }).
                            on('select_node.jstree', function(e, data1) {

                                $.post("/Page/admin_index/get-content-page/tree/" + data1.node.id, function(data) {
                                    $("#content_page").html(data);
                                });
                            }).
                            jstree({
                                "core": {
                                    "check_callback": true,
                                },
                                "types": {
                                    "#": {
                                        "max_children": 1,
                                        "max_depth": 4,
                                        "valid_children": ["root"]
                                    },
                                    "root": {
                                        "icon": "/static/3.0.0-beta10/assets/images/tree_icon.png",
                                        "valid_children": ["default"]
                                    },
                                    "default": {
                                        "valid_children": ["default", "file"]
                                    },
                                    "file": {
                                        "icon": "/modules/Core/admin/images/doc.png",
                                        "valid_children": []
                                    }
                                },
                                "plugins": ["contextmenu", "dnd", "search",
                                    "state", "types", "wholerow"]});
                });

</script>

