var Dictionary = function () {
    this.elements = new Array();
    //Length of Dictionary
    this.length = function () {
        return this.elements.length;
    };
    //Check whether the Dictionary is empty
    this.isEmpty = function () {
        return (this.length() < 1);
    };
    //remove all elements from the Dictionary
    this.removeAll = function () {
        this.elements = new Array();
    };
    //get specify element of the dictionary
    this.element = function (index) {
        var rlt = null;
        if (index >= 0 && index < this.elements.length) {
            rlt = this.elements[index];
        }
        return rlt;
    }
    //check whether the Dictionary contains this key
    this.Exists = function (key) {
        var rlt = false;
        try {
            for (var i = 0, iLen = this.length(); i < iLen; i++) {
                if (this.elements[i].key == key) {
                    rlt = true;
                    break;
                }
            }
        }
        catch (ex) {
        }
        return rlt;
    };
    //check whether the Dictionary contains this value
    this.containsValue = function (value) {
        var rlt = false;
        try {
            for (var i = 0, iLen = this.length(); i < iLen; i++) {
                if (this.elements[i].value == value) {
                    rlt = true;
                    break;
                }
            }
        }
        catch (ex) {
        }
        return rlt;
    };
    //remove this key from the Dictionary
    this.remove = function (key) {
        var rlt = false;
        try {
            for (var i = 0, iLen = this.length(); i < iLen; i++) {
                if (this.elements[i].key == key) {
                    this.elements.splice(i, 1);
                    rlt = true;
                    break;
                }
            }
        }
        catch (ex) {
        }
        return rlt;
    };
    //add this key/value to the Dictionary,if key is exists,replace the value
    this.add = function (key, value) {
        this.remove(key);
        this.elements.push({
            key: key,
            value: value
        });
    };
    //add this key/value to the Dictionary,if key is exists,append value
    this.set = function (key, value) {
        var arr = this.getItem(key);
        if (arr != null) {
            if (typeof (arr) == "object") {
                arr.unshift.apply(arr, value);
                value = arr;
            }
            else {
                var array = [];
                array.push(arr);
                array.unshift.apply(array, value);
                value = array;
            }
            this.remove(key);
        }
        this.elements.push({
            key: key,
            value: value
        });
    }
    //get value of the key
    this.getItem = function (key) {
        var rlt = null;
        try {
            for (var i = 0, iLen = this.length(); i < iLen; i++) {
                if (this.elements[i].key == key) {
                    rlt = this.elements[i].value;
                    break;
                }
            }
        }
        catch (ex) {
        }
        return rlt;
    };
    //get all keys of the dictionary
    this.keys = function () {
        var arr = [];
        for (var i = 0, iLen = this.length(); i < iLen; i++) {
            arr.push(this.elements[i].key);
        }
        return arr;
    }
    //get all values of the dictionary
    this.values = function () {
        var arr = [];
        for (var i = 0, iLen = this.length(); i < iLen; i++) {
            arr.push(this.elements[i].value);
        }
        return arr;
    }
}
var dicStatus = new Dictionary();
var dicPointValue = new Dictionary();
var dicPointKey = new Dictionary();

var stepLay = function () {
    var _this = this;
    var _stepCount = 0;
    var _widthMainFlow = 0;
    var _imgAreaWidth = 0;
    var _widthFlow = 0;

    // javascript没有内置的类选择方法，可以编写扩展方法
    document.getElementsByClassName = function (className) {
        var el = [],
		_el = document.getElementsByTagName("*"); // 获取所有的元素
        for (var i = 0; i < _el.length; i++) { // 遍历元素集合
            if (_el[i].className == className) { // 获取相同类名的元素
                el[el.length] = _el[i];
            }
        }
        return el;
    }
    //建立节点
    var _create = function (_symbol, _position, _length, _height, _count, _text, _date) {
        var _div = document.getElementById("mainFlowPointContain"); //得到父节点

        //节点内容容器
        var newNodeDiv = document.createElement("div");
        newNodeDiv.id = "mainFlowNode" + _count;
        newNodeDiv.style.cssText = "margin:0;padding:0;width:149px;height:40px;border:none;background-size:149px 40px;background:url(../../../../images/node.png) no-repeat;position:absolute;top:" + _position + "px;left:" + (_length - 74) + "px;z-index:" + (65000 + _count) + ";clear:both;";
        newNodeDiv.setAttribute("class", "nodeTitle");
        newNodeDiv.setAttribute("className", "nodeTitle");
        _div.appendChild(newNodeDiv);

        //节点内容
        var _childDiv = document.getElementById("mainFlowNode1");
        var newNodeTitleDiv = document.createElement("div");
        newNodeTitleDiv.id = "mainFlowNodeTitle" + _count;
        newNodeTitleDiv.setAttribute("class", "mainFlowNodeTitle");
        newNodeTitleDiv.setAttribute("className", "mainFlowNodeTitle");
        newNodeTitleDiv.innerText = _text;
        newNodeDiv.appendChild(newNodeTitleDiv);

        //内容日期
        var newNodeContentDiv = document.createElement("div");
        newNodeContentDiv.id = "mainFlowNodeContent" + _count;
        newNodeContentDiv.setAttribute("class", "mainFlowNodeContent");
        newNodeContentDiv.setAttribute("className", "mainFlowNodeContent");
        newNodeContentDiv.innerText = _date;
        newNodeDiv.appendChild(newNodeContentDiv);

        //节点标线
        var newLineHr = document.createElement("hr");
        newLineHr.id = "mainFlowLine" + _count;
        if (_symbol == 0) {
            //节点在上方
            newLineHr.style.cssText = "margin:0;padding:0;width:1px;height:" + _height + "%;color:#999;border:0px;border-left:1px #81ab00 solid;position:absolute;top:" + (_position + 40) + "px;left:" + _length + "px;z-index:" + (61400 + _count);
        }
        else if (_symbol == 1) {
            //节点在下方
            newLineHr.style.cssText = "margin:0;padding:0;width:1px;height:" + _height + "%;color:#999;border:0px;border-left:1px #81ab00 solid;position:absolute;top:10px;left:" + _length + "px;z-index:" + (61400 + _count);
        }
        newLineHr.setAttribute("class", "nodePointLine");
        newLineHr.setAttribute("className", "nodePointLine");
        newLineHr.setAttribute("align", "center");
        _div.appendChild(newLineHr);

        //节点
        var newPointDiv = document.createElement("div");
        newPointDiv.id = "mainFlowPointHover" + _count;
        newPointDiv.style.cssText = "margin:0;padding:0;width:15px;height:15px;background-color:#81ab00;position:absolute;top:-2px;left:" + (_length - 7) + "px;z-index:" + (62600 + _count) + ";-moz-border-radius-topleft:7px;-moz-border-radius-bottomleft:7px;-moz-border-radius-topright:7px;-moz-border-radius-bottomright:7px;-webkit-border-top-left-radius:7px;-webkit-border-bottom-left-radius:7px;-webkit-border-top-right-radius:7px;-webkit-border-bottom-right-radius:7px;border-top-right-radius:7px;border-bottom-right-radius:7px;border-top-left-radius:7px;border-bottom-left-radius:7px;";
        newPointDiv.innerHTML = "&nbsp;";
        newPointDiv.setAttribute("class", "nodePointHover"); //firefox
        newPointDiv.setAttribute("className", "nodePointHover"); //ie
        _div.appendChild(newPointDiv);
    }

    //图形和查询都复位清空
    var _initialize = function () {
        _widthMainFlow = document.documentElement.clientWidth;
        var _heightMainFlow = document.documentElement.clientHeight;

        document.getElementById("mask").style.width = _widthMainFlow + "px";
        document.getElementById("mask").style.height = _heightMainFlow + "px";
        document.getElementById("mask").style.display = "none";
        document.getElementById("layBg").style.display = "none";
        document.getElementById("layBg").style.left = _widthMainFlow * 0.25 / 2 + "px";
        document.getElementById("layBg").style.top = _heightMainFlow * 0.2 / 2 + "px";

        document.getElementById("mainFlowHover").style.display = "none";

        //加载所有状态
        var _store = Ext.create('DsExt.ux.RefTableStore', {
            fields: [
                    { name: 'STATUS', type: 'string' }
                ],
            proxy: { url: '/MvcShipping/MsOpSeae/GetOpStatusStandard' },
            scope: this
        });
        _store.load(); //{ params: { mblno: _mblno} }

        _store.on("load", function (_store) {
            for (var i = 0; i < _store.getCount(); i++) {
                dicStatus.add(_store.getAt(i).get("STATUS"), _store.getAt(i).get("STATUS"));
            }
        });
    }

    //加载数据，显示层
    var _load = function (_mblno, _bsno) {
        _widthMainFlow = document.documentElement.clientWidth;
        _imgAreaWidth = _widthMainFlow * 0.8 * 0.8; // * 0.88 0.9  //图片区域宽度

        dicPointKey.removeAll();
        dicPointValue.removeAll();

        document.getElementById("secTitle").innerText = _mblno;
        document.getElementById("mainFlowPointContain").innerHTML = "";
        document.getElementById("mainFlowHover").style.display = "none";
        var _store = Ext.create('DsExt.ux.RefTableStore', {
            fields: [
                    { name: 'ST_ID', type: 'string' },
                    { name: 'STATUS', type: 'string' },
                    { name: 'COMPTIME', type: 'string' }
                ],
            proxy: { url: '/MvcShipping/MsOpSeae/GetOpStatus' },
            scope: this
        });
        _store.load({ params: { bsno: _bsno} });

        _store.on("load", function (_store) {
            //得到总节点数，用于直线分段
            _stepCount = _store.getCount();
            _widthFlow = 0;
            if (_stepCount > 1) {
                _widthFlow = parseInt(_imgAreaWidth / (_stepCount - 1)); //节点之间距离   _stepCount - 节点数
            }
            else {
                //只有一个节点，显示在中央位置
                _widthFlow = parseInt(_imgAreaWidth / 2) - 7;
            }

            //建立节点，首先判断弹出层的宽度是否能够容纳下整个节点容器平铺宽度，如果不能容纳，则为不同的节点设
            //置不同的节点线高度，(如果只有一个节点，则不显示进程条，将节点显示在中央 √)

            if (_stepCount == 1) {
                //+/-, _position, _length, _height, _count, _text, _date
                _create(0, -120, _widthFlow, 800, 1, _store.getAt(0).get("STATUS"), _store.getAt(0).get("COMPTIME"));
                dicPointKey.add("0", _store.getAt(0).get("STATUS"));
                dicPointValue.add("0", _store.getAt(0).get("COMPTIME"));
            }
            else if (_stepCount == 2) {
                document.getElementById("mainFlowHover").style.display = "block";
                _create(0, -120, 0, 800, 1, _store.getAt(0).get("STATUS"), _store.getAt(0).get("COMPTIME"));
                _create(0, -120, _widthFlow, 800, 1, _store.getAt(1).get("STATUS"), _store.getAt(1).get("COMPTIME"));
                dicPointKey.add("0", _store.getAt(0).get("STATUS"));
                dicPointKey.add("1", _store.getAt(1).get("STATUS"));
                dicPointValue.add("0", _store.getAt(0).get("COMPTIME"));
                dicPointValue.add("1", _store.getAt(1).get("COMPTIME"));
            }
            else if (_stepCount > 2) {
                document.getElementById("mainFlowHover").style.display = "block";
                if (_imgAreaWidth >= (_stepCount / 2 * 149)) {
                    for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
                        if (iProcess % 2 == 0) {
                            //节点在上方
                            _create(0, -120, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                            dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                            dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                        }
                        else if (iProcess % 2 == 1) {
                            //节点在下方
                            _create(1, 90, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                            dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                            dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                        }
                    }
                }
                else if (_imgAreaWidth < (_stepCount / 2 * 149)) {
                    for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
                        if (iProcess % 2 == 0) {
                            //节点在上方
                            if (iProcess % 3 == 0) {
                                _create(0, -120, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                            }
                            else if (iProcess % 3 == 1) {
                                _create(0, -80, _widthFlow * iProcess, 400, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                            }
                            else if (iProcess % 3 == 2) {
                                _create(0, -160, _widthFlow * iProcess, 1200, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                            }
                        }
                        else if (iProcess % 2 == 1) {
                            //节点在下方
                            if (iProcess % 3 == 0) {
                                _create(1, 90, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                            }
                            else if (iProcess % 3 == 1) {
                                _create(1, 50, _widthFlow * iProcess, 400, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                            }
                            else if (iProcess % 3 == 2) {
                                _create(1, 130, _widthFlow * iProcess, 1200, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                            }
                        }
                    }
                }
            }
        });

        document.getElementById("mask").style.display = "block";
        document.getElementById("layBg").style.display = "block";
    }

    //清空显示
    var _clear = function () {
        _widthMainFlow = document.documentElement.clientWidth;
        var _heightMainFlow = document.documentElement.clientHeight;

        document.getElementById("mask").style.width = _widthMainFlow + "px";
        document.getElementById("mask").style.height = _heightMainFlow + "px";
        document.getElementById("mask").style.display = "block";
        document.getElementById("layBg").style.display = "block";

        document.getElementById("mainFlowPointContain").innerHTML = "";
        document.getElementById("mainFlowHover").style.display = "none";
    }

    //查询提单号
    var _search = function () {
        var _mblno = document.getElementById("txtSearch").value;

        if (_mblno != "(--请输入提单号--)") {
            _clear();

            _widthMainFlow = document.documentElement.clientWidth;
            _imgAreaWidth = _widthMainFlow * 0.8 * 0.8; // * 0.88 0.9  //图片区域宽度

            dicPointKey.removeAll();
            dicPointValue.removeAll();

            document.getElementById("secTitle").innerText = _mblno;

            document.getElementById("mainFlowPointContain").innerHTML = "";
            document.getElementById("mainFlowHover").style.display = "none";
            var _store = Ext.create('DsExt.ux.RefTableStore', {
                fields: [
                    { name: 'ST_ID', type: 'string' },
                    { name: 'STATUS', type: 'string' },
                    { name: 'COMPTIME', type: 'string' }
                ],
                proxy: { url: '/MvcShipping/MsOpSeae/SearchOpStatus' },
                scope: this
            });
            _store.load({ params: { mblno: _mblno} });

            _store.on("load", function (_store) {
                //得到总节点数，用于直线分段
                _stepCount = _store.getCount();
                _widthFlow = 0;
                if (_stepCount > 1) {
                    _widthFlow = parseInt(_imgAreaWidth / (_stepCount - 1)); //节点之间距离   _stepCount - 节点数
                }
                else {
                    //只有一个节点，显示在中央位置
                    _widthFlow = parseInt(_imgAreaWidth / 2) - 7;
                }

                if (_stepCount == 0) {
                    document.getElementById("mainFlowPointContain").innerHTML = "没有记录";
                }
                else if (_stepCount == 1) {
                    _create(0, -120, _widthFlow, 800, 1, _store.getAt(0).get("STATUS"), _store.getAt(0).get("COMPTIME"));
                    dicPointKey.add("0", _store.getAt(0).get("STATUS"));
                    dicPointValue.add("0", _store.getAt(0).get("COMPTIME"));
                }
                else if (_stepCount == 2) {
                    document.getElementById("mainFlowHover").style.display = "block";
                    _create(0, -120, 0, 800, 1, _store.getAt(0).get("STATUS"), _store.getAt(0).get("COMPTIME"));
                    _create(0, -120, _widthFlow, 800, 1, _store.getAt(1).get("STATUS"), _store.getAt(1).get("COMPTIME"));
                    dicPointKey.add("0", _store.getAt(0).get("STATUS"));
                    dicPointKey.add("1", _store.getAt(1).get("STATUS"));
                    dicPointValue.add("0", _store.getAt(0).get("COMPTIME"));
                    dicPointValue.add("1", _store.getAt(1).get("COMPTIME"));
                }
                else if (_stepCount > 2) {
                    document.getElementById("mainFlowHover").style.display = "block";
                    if (_imgAreaWidth >= (_stepCount / 2 * 149)) {
                        for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
                            if (iProcess % 2 == 0) {
                                //节点在上方
                                _create(0, -120, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                            }
                            else if (iProcess % 2 == 1) {
                                //节点在下方
                                _create(1, 90, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                            }
                        }
                    }
                    else if (_imgAreaWidth < (_stepCount / 2 * 149)) {
                        for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
                            if (iProcess % 2 == 0) {
                                //节点在上方
                                if (iProcess % 3 == 0) {
                                    _create(0, -120, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                    dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                    dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                                }
                                else if (iProcess % 3 == 1) {
                                    _create(0, -80, _widthFlow * iProcess, 400, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                    dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                    dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                                }
                                else if (iProcess % 3 == 2) {
                                    _create(0, -160, _widthFlow * iProcess, 1200, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                    dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                    dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                                }
                            }
                            else if (iProcess % 2 == 1) {
                                //节点在下方
                                if (iProcess % 3 == 0) {
                                    _create(1, 90, _widthFlow * iProcess, 800, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                    dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                    dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                                }
                                else if (iProcess % 3 == 1) {
                                    _create(1, 50, _widthFlow * iProcess, 400, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                    dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                    dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                                }
                                else if (iProcess % 3 == 2) {
                                    _create(1, 130, _widthFlow * iProcess, 1200, _stepCount, _store.getAt(iProcess).get("STATUS"), _store.getAt(iProcess).get("COMPTIME"));
                                    dicPointKey.add(iProcess.toString(), _store.getAt(iProcess).get("STATUS"));
                                    dicPointValue.add(iProcess.toString(), _store.getAt(iProcess).get("COMPTIME"));
                                }
                            }
                        }
                    }
                }
            });
            document.getElementById("txtSearch").value = "(--请输入提单号--)";
        }
    }

    //清空搜索框
    var _clearText = function () {
        document.getElementById("txtSearch").value = "";
    }

    //初始化搜索框
    var _blurText = function () {
        if (document.getElementById("txtSearch").value == "") {
            document.getElementById("txtSearch").value = "(--请输入提单号--)";
        }
    }

    //关闭层
    var _close = function () {
        document.getElementById("mask").style.display = "none";
        document.getElementById("layBg").style.display = "none";
    }

    //调整窗口大小时运行
    var _resize = function () {
        _widthMainFlow = document.documentElement.clientWidth;
        var _heightMainFlow = document.documentElement.clientHeight;
        _imgAreaWidth = _widthMainFlow * 0.8 * 0.8; // * 0.88 0.9  //图片区域宽度

        document.getElementById("mask").style.width = _widthMainFlow + "px";
        document.getElementById("mask").style.height = _heightMainFlow + "px";
        document.getElementById("layBg").style.left = _widthMainFlow * 0.25 / 2 + "px";
        document.getElementById("layBg").style.top = _heightMainFlow * 0.2 / 2 + "px";

        document.getElementById("mainFlowPointContain").innerHTML = "";
        document.getElementById("mainFlowHover").style.display = "none";

        _widthFlow = 0;
        if (_stepCount > 1) {
            _widthFlow = parseInt(_imgAreaWidth / (_stepCount - 1)); //节点之间距离   _stepCount - 节点数
        }
        else {
            //只有一个节点，显示在中央位置
            _widthFlow = parseInt(_imgAreaWidth / 2) - 7;
        }
        if (_stepCount == 1) {
            _create(0, -120, _widthFlow, 800, 1, dicPointKey.getItem("0"), dicPointValue.getItem("0"));
        }
        else if (_stepCount == 2) {
            document.getElementById("mainFlowHover").style.display = "block";
            _create(0, -120, 0, 800, 1, dicPointKey.getItem("0"), dicPointValue.getItem("0"));
            _create(0, -120, _widthFlow, 800, 1, dicPointKey.getItem("1"), dicPointValue.getItem("1"));
        }
        else {
            document.getElementById("mainFlowHover").style.display = "block";
            for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
                if (_imgAreaWidth >= (_stepCount / 2 * 149)) {
                    for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
                        if (iProcess % 2 == 0) {
                            //节点在上方
                            _create(0, -120, _widthFlow * iProcess, 800, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
                        }
                        else if (iProcess % 2 == 1) {
                            //节点在下方
                            _create(1, 90, _widthFlow * iProcess, 800, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
                        }
                    }
                }
                else if (_imgAreaWidth < (_stepCount / 2 * 149)) {
                    for (var iProcess = 0; iProcess < _stepCount; iProcess++) {
                        if (iProcess % 2 == 0) {
                            //节点在上方
                            if (iProcess % 3 == 0) {
                                _create(0, -120, _widthFlow * iProcess, 800, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
                            }
                            else if (iProcess % 3 == 1) {
                                _create(0, -80, _widthFlow * iProcess, 400, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
                            }
                            else if (iProcess % 3 == 2) {
                                _create(0, -160, _widthFlow * iProcess, 1200, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
                            }
                        }
                        else if (iProcess % 2 == 1) {
                            //节点在下方
                            if (iProcess % 3 == 0) {
                                _create(1, 90, _widthFlow * iProcess, 800, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
                            }
                            else if (iProcess % 3 == 1) {
                                _create(1, 50, _widthFlow * iProcess, 400, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
                            }
                            else if (iProcess % 3 == 2) {
                                _create(1, 130, _widthFlow * iProcess, 1200, _stepCount, dicPointKey.getItem(iProcess.toString()), dicPointValue.getItem(iProcess.toString()));
                            }
                        }
                    }
                }
            }
        }

    }

    return { fnInitialize: _initialize, fnResize: _resize, fnLoad: _load, fnSearch: _search, fnClose: _close, fnClearText: _clearText, fnBlur: _blurText }
}

var steplay = new stepLay();

Ext.onReady(function () {
    steplay.fnInitialize();

    window.onresize = function () {
        steplay.fnResize();
    }

});