var test_link = "<?php echo site_url('TestAssign/apply');?>"; //测试流程链接
jsPlumb.ready(function() {
    fc = new FlowChart({
        drawID: "draw"
    });

    // var assign_status = eval(<? php echo $assign_status;?>);
    $(function() {
        borderLayout(document.querySelectorAll('.border-layout')[0]);
        $("#accordion").accordion({
            collapsible: true
        });
        $('#propGrid').jqPropertyGrid(fc.exportToObj(), {
            meta: fc.metaType
        });
        $("#grah,#task").children().draggable({
            helper: "clone",
            scope: "def"
        });
        $(" div.center > div.content").bind("scroll",
        function() {
            // $("#draw  >.drag_node").css({
            //     position: "relative"
            // }); $(".west  >.content") 
            jsPlumb.repaintEverything();
        });
        $("#draw").droppable({
            scope: "def",
            drop: function(event, ui) {
                _node = fc.appendNode({
                    nodeType: ui.draggable[0].id,
                    blockTop: parseInt(ui.offset.top - $(this).offset().top),
                    blockLeft: parseInt(ui.offset.left - $(this).offset().left),

                    divElemt: ui.draggable[0]
                });
                $("#" + _node.nodeId).draggable({
                    containment: "parent"
                }).bind('dragstop',
                function(event, ui) {
                    fc.flowList[_node.nodeId].blockTop = $("#" + _node.nodeId).offset().top + "px"; //节点坐标
                    fc.flowList[_node.nodeId].blockLeft = $("#" + _node.nodeId).offset().left + "px"; //节点坐标
                });
                $('#propGrid').jqPropertyGrid(_node.exportToObj(), {
                    meta: _node.metaType
                });
            }
        }).live("click",
        function() {
            fc.selectedNode = "global";
            $('#propGrid').jqPropertyGrid(fc.exportToObj(), {
                meta: fc.metaType
            });
        });

        jsPlumb.bind("click",
        function(conn, originalEvent) {
            if (confirm("确定删除吗？ ")) {
                for (_id in fc.flowList[conn.sourceId].targetId) {
                    if (fc.flowList[conn.sourceId].targetId[_id] == conn.targetId) {
                        fc.flowList[conn.sourceId].targetId.splice(_id, 1);
                    }
                }
                for (_id in fc.flowList[conn.targetId].sourceId) {
                    if (fc.flowList[conn.targetId].sourceId[_id] == conn.sourceId) {
                        fc.flowList[conn.targetId].sourceId.splice(_id, 1);
                    }
                }
                jsPlumb.detach(conn);
            }

        });

        jsPlumb.bind("connection",
        function(conn, originalEvent) {
            if (conn.connection.sourceId == conn.connection.targetId) {
                jsPlumb.detach(conn);
                alert("不能连接自己！");
            } else {
                fc.flowList[conn.connection.sourceId].targetId.push(conn.connection.targetId) fc.flowList[conn.connection.targetId].sourceId.push(conn.connection.sourceId);
            }
        });

        $("#draw").on("dblclick", ".node",
        function() {
            if (confirm("确定要删除吗?")) {
                jsPlumb.removeAllEndpoints($(this).attr("id")); //全局对象中删除该节点
                fc.flowList[$(this).attr("id")] = undefined; //flowlist 中清空该对象
                //    $('#propGrid').jqPropertyGrid(flow_node, { meta: metaObj });  //属性表置为默认
                $(this).remove();

            }
        });
        $("#draw").on("click", ".node",
        function(event) { //选中节点时,属性表格显示信息
            _node = fc.getNode($(this).attr("id"));
            fc.selectedNode = _node.nodeId;
            $('#propGrid').jqPropertyGrid(_node.exportToObj(), {
                meta: _node.metaType
            });
            event.stopPropagation();

        });
        $('input[id^="pg"], input[id^="gl"],textarea').live("keyup", 'blur',
        function() { //选中节点时,属性表格显示信息
            //保存节点属性信息
            node_info = $('#propGrid').jqPropertyGrid('get'); //节点信息
            if (fc.selectedNode != "global") {
                $("#" + fc.selectedNode).empty().append("<p>" + node_info.nodeName + "</p>");
                fc.flowList[node_info.nodeId] != 'undefined' ? fc.flowList[node_info.nodeId].modifyProperty(node_info) : "";
            } else {
                fc.selectedNode = "global";
                fc.modifyProperty(node_info);
            }

        });
        $("input[id^='pg'][id$='assigner']").live("click",
        function() {
            _option_tmp = "";
            for (var i in assign_status) {
                _option_tmp += '<option value=' + assign_status[i]['CODE_NAME'] + '>' + assign_status[i]['CODE_NAME'] + '-' + assign_status[i]['CONTENT'] + '</option>';
            }
            $('#assign_status').append(_option_tmp);
            str_assign = $("input[id$='assigner']").val() || '';
            if (str_assign != "") {
                $("#assign_select_area").find("tr:gt(0)").remove();
                arr_a = str_assign.split('|');
                for (var dat in arr_a) {
                    if (arr_a[dat] == '') {
                        continue;
                    }
                    arr_b = arr_a[dat].split(':');
                    btn_html = "<button  onclick='delNextAction(this)'>删除</button>";
                    next_html = "<tr><td align='center' colspan=10 >" + arr_b[0] + "</td><td>" + arr_b[1] + "</td><td align='center'>" + btn_html + "</td></tr>"$("#assign_select_area").find("tr :first").after(next_html);
                }
            }
            layer.open({
                type: 1,
                title: '签核者选择',
                area: ['700px', '500px'],
                cancel: function() {
                    str_assign = "";
                    $("#assign_select_area").find("tr:gt(0)").each(function() {
                        _tdArr = $(this).children();
                        _assign_status = _tdArr.eq(0).text();
                        _next_user = _tdArr.eq(1).text();
                        str_assign += _assign_status + ":" + _next_user + "|";
                    });
                    fc.flowList[fc.selectedNode].assigner = str_assign;
                    $("#assign_select_area").find("tr:gt(0)").remove();
                    $("input[id$='assigner']").val(fc.flowList[fc.selectedNode].assigner);
                    $("#next_user").val("");

                },
                content: $("#assign_select_area")
            });
        });

        $("#opTest").live("click",
        function() {
            fc.test();
        });

        $("#opSave").live("click",
        function() {
            fc.save();
            html2canvas(document.querySelector("#draw")).then(canvas = >{
                var strDataURI = canvas.toDataURL("image/jpeg");

                $("body").append("<img src=" + strDataURI + " />");

            });
        });
        $(".border-layout").css({
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        });
        $(window).resize(function() {
            $(".border-layout").css({
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            });
        });
        // $(" div._jsPlumb_endpoint.ui-draggable.ui-droppable").css("position","relative");
    });

});