var MindMapLayout = {
    init: function () {
        this.initView();
        this.initLayout();
        this.doLayout();
        z.dom.event.onchange("#directionSelect", function () {
            this.doLayout();
        }, this);
    },
    initView: function () {
        var gView = z.gv.GView({
            appendTo: "#gvDiv",
            data: this._createDemoData()
        });
        pro.GVUtil.initToolbar(gView);
        this.gView = gView;
    },
    initLayout: function () {
        this.layouter = new pro.gv.layout.MindMapLayout(this.gView, {
            repulsion: 100,
            attraction: 0.1,
            damping: 0.7
        });

    },
    doLayout: function () {
        var direction = z.dom.getValue("#directionSelect");
        var linkType = "ra_hvh";
        var rotation = 0;
        if (["v_center", "top", "bottom"].indexOf(direction) > -1) {
            linkType = "ra_vhv";
            rotation = 90;
        }
        this.gView.eachData(function (data) {
            if (z.type.isLink(data)) {
                data.set("type", linkType);
            } else {
                if (data.getFromLinks().length === 0) {
                    data.set("rotation", rotation);
                }
            }
        });
        var _this = this;
        z.util.animate(function (process) {
            _this.gView.eachData(function (data) {
                data.set("alpha", process);
            });
        }, {
            duration: 300,
            timing_function: "ease"
        });
        this.layouter.set("direction", direction);
        this.layouter.layout();
        _this.gView.zoomFit(true);
    },
    _createDemoData: function () {
        var dataColor = z.dom.getStyle("#dataLegend", "background-color");
        var navigationColor = z.dom.getStyle("#navigationLegend", "background-color");
        var popupColor = z.dom.getStyle("#popupLegend", "background-color");
        var othersColor = z.dom.getStyle("#othersLegend", "background-color");

        var dataArr = [];

        var widgetsNode = this.createNode(dataArr, {
            name: "widgets",
            shape: "circle",
            width: 60,
            height: 60,
            fill: "red"
        });
        var dataNode = this.createNode(dataArr, {name: "DATA", fill: dataColor, shape: "roundrect"}, widgetsNode);
        this.createNode(dataArr, {name: "ListView", fill: dataColor}, dataNode);
        this.createNode(dataArr, {name: "Tree", fill: dataColor}, dataNode);
        this.createNode(dataArr, {name: "Grid", fill: dataColor}, dataNode);
        this.createNode(dataArr, {name: "TreeGrid", fill: dataColor}, dataNode);

        var navigationNode = this.createNode(dataArr, {name: "NAVIGATION", fill: navigationColor, shape: "roundrect"}, widgetsNode);
        this.createNode(dataArr, {name: "Tabs", fill: navigationColor}, navigationNode);
        this.createNode(dataArr, {name: "Menu", fill: navigationColor}, navigationNode);

        var popupNode = this.createNode(dataArr, {name: "POPUP", fill: popupColor, shape: "roundrect"}, widgetsNode);
        this.createNode(dataArr, {name: "Tooltip", fill: popupColor}, popupNode);
        this.createNode(dataArr, {name: "Popover", fill: popupColor}, popupNode);
        this.createNode(dataArr, {name: "Notification", fill: popupColor}, popupNode);
        this.createNode(dataArr, {name: "Loader", fill: popupColor}, popupNode);
        this.createNode(dataArr, {name: "Modal", fill: popupColor}, popupNode);
        this.createNode(dataArr, {name: "MessageBox", fill: popupColor}, popupNode);

        var othersNode = this.createNode(dataArr, {name: "OTHERS", fill: othersColor, shape: "roundrect"}, widgetsNode);
        this.createNode(dataArr, {name: "Collapse", fill: othersColor}, othersNode);
        this.createNode(dataArr, {name: "Pagination", fill: othersColor}, othersNode);
        return dataArr;
    },
    createNode: function (arr, props, parent) {
        var nodeProps = z.util.mergeObject({
            label_position: "center",
            label_fill: "#FFFFFF",
            shape: "rect",
            stroke: null,
            width: 120,
            height: 32
        }, props);
        if (parent) {
            nodeProps.height = 3;
            nodeProps.label_position = "top";
            nodeProps.label_fill = props.fill || "#11999e"
        }
        var node = new z.gv.Node(nodeProps);
        arr.push(node);
        if (parent) {
            // node.set("parent", parent);
            arr.push(new z.gv.Link(parent, node, {
                type: "ra_vhv",
                to_arrow_shape: "arrow",
                stroke_line_width: 2,
                corner_radius: 6,
                stroke: props.fill || "#11999e"
            }))
        }
        return node;
    }
};
z.ready(function () {
    MindMapLayout.init();
});