//all in one index page
var IndexItems = [
    {
        name: "GView",
        children: [
            {
                name: "Basic",
                children: [
                    {name: "Node", url: "./gview/node/index.html"},
                    {name: "Link", url: "./gview/link/index.html"},
                    {name: "Group", url: "./gview/group/index.html"},
                    {name: "Subview", url: "./gview/subview/index.html"},
                    {name: "Text", url: "./gview/text/index.html"}
                ]
            },
            {
                name: "Network",
                children: [
                    {name: "Topology", url: "./gview/topology/index.html"},
                    {name: "Rack", url: "./gview/rack/index.html"}
                ]
            },
            {
                name: "XChart",
                children: [
                    {name: "FlowChart", url: "./gview/flowchart/index.html"},
                    {name: "OrgChart", url: "./gview/orgchart/index.html"}
                ]
            },
            {
                name: "Others",
                children: [
                    {name: "Animation", url: "./gview/animation/index.html"},
                    {name: "Layout", url: "./gview/layout/index.html"},
                    {name: "Editor", url: "./gview/editor/index.html"},
                    {name: "Map", url: "./gview/map/index.html"}
                ]
            }
        ]
    },
    {
        name: "Widgets",
        children: [
            {
                name: "Data Management",
                children: [
                    {name: "Grid", url: "./widgets/grid/index.html"},
                    {name: "TreeGrid", url: "./widgets/treegrid/index.html"},
                    {name: "Tree", url: "./widgets/tree/index.html"},
                    {name: "ListView", url: "./widgets/listview/index.html"}
                ]
            },
            {
                name: "Navigation",
                children: [
                    {name: "Tabs", url: "./widgets/tabs/index.html"},
                    {name: "Menu", url: "./widgets/menu/index.html"}
                ]
            },
            {
                name: "Popup",
                children: [
                    {name: "Tooltip", url: "./widgets/tooltip/index.html"},
                    {name: "Popover", url: "./widgets/popover/index.html"},
                    {name: "Notification", url: "./widgets/notification/index.html"},
                    {name: "Loader", url: "./widgets/loader/index.html"},
                    {name: "Modal", url: "./widgets/modal/index.html"},
                    {name: "MessageBox", url: "./widgets/msgbox/index.html"}
                ]
            },
            {
                name: "Others",
                children: [
                    {name: "Collapse", url: "./widgets/collapse/index.html"},
                    {name: "Pagination", url: "./widgets/pagination/index.html"}
                ]
            }
        ]
    },
    {
        name: "Form",
        children: [
            {name: "Form", url: "./form/form/index.html"},
            {name: "Validator", url: "./form/validator/index.html"},
            {name: "I18n", url: "./form/i18n/index.html", change: "update"}
        ]
    },
    {
        name: "Pro",
        children: [
            {name: "pro.css", url: "./pro/css/pro_css.html"}
        ]
    }
];
var Index = {
    init: function () {
        var bodyDiv = z.dom.query("body>.page-body>.demo-list") || z.dom.query("body>.page-body") || document.body; //for website
        IndexItems.forEach(function (item) {
            var children = item.children;
            if (children) {
                Index.createCard(item, bodyDiv);
            } else {
                Index.createItem(item, bodyDiv);
            }
        });
    },
    createCard: function (item, parent) {
        var cardDiv = z.dom.create("div", "card");
        var headerDiv = z.dom.create("div", "header");
        headerDiv.innerHTML = item.name;
        var bodyDiv = z.dom.create("div", "body");
        cardDiv.appendChild(headerDiv);
        cardDiv.appendChild(bodyDiv);
        Index.createChildren(item.children, bodyDiv);
        if (parent) {
            parent.appendChild(cardDiv);
        }
        return bodyDiv;
    },
    createChildren: function (children, parent) {
        children.forEach(function (cItem) {
            if (cItem.children) {
                Index.createGroup(cItem, parent);
            } else {
                Index.createItem(cItem, parent);
            }
        });
    },
    createGroup: function (item, parent) {
        var groupDiv = z.dom.create("div", "group");
        var groupTitle = z.dom.create("div", "title");
        groupTitle.innerHTML = item.name;
        groupDiv.appendChild(groupTitle);
        var groupItems = z.dom.create("div", "items");
        groupDiv.appendChild(groupItems);

        Index.createChildren(item.children, groupItems);

        if (parent) {
            parent.appendChild(groupDiv);
        }
        return groupItems;
    },
    createItem: function (item, parent) {
        var a = z.dom.create("a");
        a.setAttribute("href", item.url);
        a.setAttribute("target", "_blank");
        a.innerHTML = (item.icon || "") + item.name;
        var span = z.dom.create("span", "link-item");
        span.appendChild(a);
        var change = item.change;
        if (change) {
            var cSpan = z.dom.create("span", change);
            cSpan.innerHTML = change;
            span.appendChild(cSpan);
        }
        if (parent) {
            parent.appendChild(span);
        }
        return a;
    }
};
z.ready(function () {
    Index.init();
});