$(function() {
    var $menu = $("#menu");
    var $body = $("body");
    var $h1 = $("#jqtree h1");

    // title
    $h1.html('<span class="first">jq</span><span class="second">Tree</span>');

    // menu
    $menu.affix({
        offset: {
            top: $menu.offset().top,
            bottom: 0
        }
    });

    $body.scrollspy({
        target: "#menu"
    });
    var scrollspy = $body.data("bs.scrollspy");

    // If no menu item is active, then activate first item
    if (!scrollspy.activeTarget) {
        scrollspy.activate("#general");
    }

    // demo tree
    var data = [
        {
            label: "node1",
            id: 1,
            children: [{ label: "child1", id: 2 }, { label: "child2", id: 3 }]
        },
        {
            label: "node2",
            id: 4,
            children: [{ label: "child3", id: 5 }]
        }
    ];

    var $tree1 = $("#tree1");

    $tree1.tree({
        data: data,
        autoOpen: true,
        dragAndDrop: true
    });
});
