$.fn.Tab = function (options) {
    var cfg = {
        items: [],
        width: 500,
        height: 500,
        tabcontentWidth: 498,
        tabWidth: 100,
        tabHeight: 35,
        tabScroll: true,
        tabScrollWidth: 19,
        tabClass: 'labels',
        tabContentClass: 'tab-div-content',
        tabClassOn: 'selected',
        tabClassOff: '',
        tabClassClose: 'tab-close',
        tabClassScrollLeft: 'scroll-left',
        tabClassScrollRight: 'scroll-right',
        tabClassDiv: 'tab-div',
        addEvent: null,
        currentEvent: null
    };

    //默认显示第一个li
    var displayLINum = 0;
    $.extend(cfg, options);
    //判断是不是有隐藏的tab
    var tW = cfg.tabWidth * cfg.items.length;
    cfg.tabScroll ? tW -= cfg.tabScrollWidth * 2 : null;
    //tabDiv,该div是自动增加的
    var tab = $('<div />').attr('id', 'jquery_tab_div').height(cfg.tabHeight).addClass(cfg.tabClass);
    //tab target content
    var tabContent = $('<div />').attr('id', 'jquery_tab_div_content').width(cfg.tabcontentWidth).height(cfg.height - cfg.tabHeight).addClass(cfg.tabContentClass);
    var ccW = (cfg.items.length * cfg.tabWidth) - cfg.width;
    var tabH = '';
    //增加一个tab下的li得模板
    var tabTemplate = '<div id="{0}" class="labelItem" data-value="{3}">{1}<div id="labelClose" class="{2}"></div></div>';

    var scrollTab = function (o, flag) {
        //当前的left
        var displayWidth = Number(tab.css('left').replace('px', ''));
        !displayWidth ? displayWidth = 0 : null;
        //显示第几个LI
        var displayNum = 0;
        var DW = 0;
        var left = 0;
        if (flag && displayWidth == 0) {
            return;
        }
        if (flag) {
            displayLINum--;
            left = displayWidth + tab.find('div.labelItem').eq(displayLINum).width();
            left > 0 ? left = 0 : null;
        } else {
            var _rigth = tab.width() - parseInt(tab.offset().left) * -1 - cfg.tabcontentWidth - 82;
            var _step = tab.find('div.labelItem').eq(displayLINum).width();
            if (_rigth > 0) {
                if (_rigth < _step) {
                    _step = _rigth;
                }
            } else {
                return;
            }
            left = displayWidth - _step;
            displayLINum++;
        }
        if (left == 0) {
            tab.animate({ 'left': parseInt(-19) });
        } else {
            tab.animate({ 'left': parseInt(left) });
        }
    }
    function removeTab(item) {
        tab.find("#" + item.id).remove();
        tabContent.find('#iframe' + item.id).remove();
    }
    function addTab(item) {
        if (tab.find("#" + item.id).length == 0) {
            $.loading(true);
            var innerString = tabTemplate.replace("{0}", item.id).replace("{3}", item.privid).replace("{1}", item.title).replace("{2}", cfg.tabClassClose);
            var tabObj = $(innerString);
            tabObj.appendTo(tab).click(function () {
                //右键功能
                tabObj.Contextmenu();
                //判断当前是不是处于激活状态
                if (tabObj.hasClass(cfg.tabClassOn)) return;

                var activeDiv = tabObj.parent().find('div.' + cfg.tabClassOn);
                activeDiv.removeClass(cfg.tabClassOn).addClass(cfg.tabClassOff);

                tabObj.removeClass(cfg.tabClassOn).addClass(cfg.tabClassOn);

                tabContent.find('iframe').hide().removeClass(cfg.tabClassOn);
                tabContent.find('#iframe' + tabObj.attr('id')).show().addClass(cfg.tabClassOn);

                cfg.currentEvent(tabObj.attr('data-value'));
            })
            if (item.url) {
                var $iframe = $("<iframe class=\"UPWIS_iframe\" id=\"iframe" + item.id + "\" height=\"100%\" width=\"100%\" src=\"" + item.url + "\" frameBorder=\"0\"></iframe>")
                tabContent.append($iframe);
                $iframe.load(function () {
                    window.setTimeout(function () {
                        $.loading(false);
                    }, 100);
                });
            }
            if (item.closed) {
                tabObj.find('div#labelClose').click(function () {
                    var index = tab.find('div.labelItem').length;
                    removeTab(item);
                    tab.find('div.labelItem:eq(' + (index - 2) + ')').trigger("click");
                }).hover(function () {
                    //TODO
                }, function () {
                    //TODO
                });
            } else {
                tabObj.find("div:eq(0)").removeClass();
            }
            
            tab.find('div.labelItem:eq(' + (tab.find('div.labelItem').length - 1) + ')').trigger("click");
            cfg.addEvent(item);
        } else {
            tab.find('div.labelItem').removeClass(cfg.tabClassOn).addClass(cfg.tabClassOff);
            tab.find("#" + item.id).removeClass(cfg.tabClassOff).addClass(cfg.tabClassOn);

            tabContent.find('iframe').hide().removeClass(cfg.tabClassOn);
            tabContent.find('#iframe' + item.id).show().addClass(cfg.tabClassOn);
        }
    }
    function newTab(item) {
        if ($("div.labelItem").length >= 10) {
            $.dialogAlert("为保证系统效率,只允许同时运行10个功能窗口,请关闭一些窗口后重试！", 0)
            return false;
        }

        top.$.cookie('currentprivid', item.privid, { path: "/" });

        var nW = tab.width() - 4;
        if (nW > cfg.width) {
            if (!cfg.tabScroll) {
                cfg.tabScroll = true;
                scrollLeft = $('<div class="' + cfg.tabClassScrollLeft + '"><i></i></div>').click(function () {
                    scrollTab(scrollLeft, true);
                });
                srcollRight = $('<div class="' + cfg.tabClassScrollRight + '"><i></i></div>').click(function () {
                    scrollTab(srcollRight, false);
                });
                ccW -= cfg.tabScrollWidth * 2;
                //tabContenter.width(ccW);
                scrollLeft.insertBefore(tabContenter);
                srcollRight.insertBefore(tabContenter);
            }
            var _left = cfg.width - nW;
            tab.animate({ 'left': _left - 2 });
        }

        addTab(item);
    }

    $.each(cfg.items, function (i, item) {
        addTab(item);
    });
    var scrollLeft, srcollRight;
    if (cfg.tabScroll) {
        scrollLeft = $('<div class="' + cfg.tabClassScrollLeft + '"><i></i></div>').click(function () {
            scrollTab($(this), true);
        });
        srcollRight = $('<div class="' + cfg.tabClassScrollRight + '"><i></i></div>').click(function () {
            scrollTab($(this), false);
        });
        cfg.width -= cfg.tabScrollWidth * 2;
    }

    var container = $('<div />').css({
        'position': 'relative',
        'width': cfg.width,
        'height': cfg.tabHeight
    }).append(scrollLeft).append(srcollRight).addClass(cfg.tabClassDiv);
    var tabContenter = $('<div />').css({
        'position': 'relative',
        'width': '100%',
        'height': cfg.tabHeight,
        'border-top': '1px solid #d9d9d9',
        'border-bottom': '1px solid #00A3E1'
    }).append(tab);
    var obj = $(this).append(tabH).append(container.append(tabContenter)).append(tabContent);
    $(window).resize(function () {
        var navWidth = 190;
        if ($(".shrinkBtn").hasClass("show")) {
            navWidth = 0;
        }
        cfg.width = $(window).width() - 192 + navWidth;
        cfg.height = $(window).height() - 56;
        cfg.tabcontentWidth = $(window).width() - 190 + navWidth;
        container.width(cfg.width);
        tabContent.width(cfg.tabcontentWidth).height(cfg.height - cfg.tabHeight);
    });
    //菜单收缩
    $(".shrinkBtn").click(function () {
        var self = $(this);
        if (self.hasClass("show")) {
            $(".homePageMain .navigation").animate({ width: 0 }, 100, function () {
                self.removeClass("show");
                cfg.width = $(window).width() - 8;
                container.width(cfg.width);
                cfg.tabcontentWidth = $(window).width();
                tabContent.width(cfg.tabcontentWidth);
            });
        } else {
            $(".homePageMain .navigation").animate({ width: "190px" }, 100, function () {
                self.addClass("show");
                cfg.width = $(window).width() - 192;
                container.width(cfg.width);
                cfg.tabcontentWidth = $(window).width() - 190;
                tabContent.width(cfg.tabcontentWidth);
            });
        }
    });
    //点击第一
    tab.find('div.labelItem:first').click();
    return obj.extend({ 'addTab': addTab, 'newTab': newTab });
}

//初始化导航
var tablist;
loadnav = function () {
    var navJson = {};
    tablist = $("#tabs-add").Tab({
        items: [
            { id: 'desktop', privid: 'desktop', title: '欢迎首页', closed: false, url: contentPath + '/Home/Desktop' }
        ],
        tabScroll: false,
        width: $(window).width() - 192,
        height: $(window).height() - 56,
        tabcontentWidth: $(window).width() - 190,
        addEvent: function (item) {
            //TODO
        },
        currentEvent: function (privId) {
            top.$.cookie('currentprivid', privId, { path: "/" });
        }
    });

    //动态加载顶部导航菜单
    var _html = "";
    var index = 0;
    $.each(clientMenuParent, function (i) {
        var row = clientMenuParent[i];
        index++;
        var selected = row.MENU_ID == systemId ? "selected" : "";
        _html += '<a href="' + row.EXEC_URL + '">';
        _html += '    <div class="item ' + selected + '" data-index="' + row.MENU_ID + '">';
        _html += '        <div class="icon">';
        _html += '            <i class="iconfont ' + row.MENU_ICON + '"></i>';
        _html += '        </div>' + row.MENU_NAME;
        _html += '    </div>';
        _html += '</a>';
    });
    $("#menuList").append(_html);

    //动态加载左边导航菜单
    _html = "";
    if (clientStaffMenu.length > 0) {
        _html += '<div class="firstLayer">';
        _html += '    <div id="00000" class="navName">';
        _html += '        <div class="icon">';
        _html += '            <i class="iconfont icon-menuicon1"></i>';
        _html += '        </div>我的快捷';
        _html += '    </div>';
        _html += getshortnav();
        _html += '</div>';
    }
    for (var i = 0; i < clientMenuChild.length; i++) {
        var row = clientMenuChild[i];
        if (row.PMENU_ID == systemId) {
            _html += '<div class="firstLayer">';
            _html += '    <div id="' + row.MENU_ID + '" class="navName">';
            _html += '        <div class="icon">';
            _html += '            <i class="iconfont ' + row.MENU_ICON + '"></i>';
            _html += '        </div>' + row.MENU_NAME;
            _html += '    </div>';
            _html += getsubnav(row.MENU_ID);
            _html += '</div>';
            navJson[row.MENU_ID] = row;
        }
    }
    $("#navBox").append(_html);

    //一级菜单事件
    $('#navBox .firstLayer .navName').click(function () {
        var self = $(this).parent();
        if (!self.hasClass("selected")) {
            $(".firstLayer.selected").removeClass("selected").animate({ height: "38px" }, 150);
            var _height = self.find(".secondLayer").length * 25 + 38;
            self.addClass("selected").animate({ height: _height + "px" }, 150, function () {
                self.css("height", "auto");
            });
        } else {
            self.animate({ height: "38px" }, 150).removeClass("selected");
        }
        $(".secondLayer.selected").removeClass("selected").css("height", "25px");
    })
    //点击第一
    $('#navBox .firstLayer .navName:first').click();

    //二级菜单事件
    $('#navBox .secondLayer a').click(function () {
        var self = $(this);
        var secondObj = $(this).parent();
        var id = $(this).attr('id');
        var data = navJson[id];
        if (data.EXEC_URL) {
            tablist.newTab({ id: id, privid: data.PRIV_ID, title: data.MENU_NAME, closed: true, url: contentPath + data.EXEC_URL });
        } else {
            if (!secondObj.hasClass("selected")) {
                secondObj.parent().find(".selected").removeClass("selected").animate({ height: "25px" }, 150);
                var _height = secondObj.find(".thirdLayer").length * 25 + 25;
                secondObj.animate({ height: _height + "px" }, 150).addClass("selected");
            }
        }
    })
    //三级菜单事件
    $('#navBox .thirdLayer a').click(function () {
        var self = $(this);
        var id = $(this).attr('id');
        var data = navJson[id];
        if (data.EXEC_URL) {
            tablist.newTab({ id: id, privid: data.PRIV_ID, title: data.MENU_NAME, closed: true, url: contentPath + data.EXEC_URL });
        }
    })
    //导航二快捷菜单
    function getshortnav() {
        var _html = '';
        for (var i = 0; i < clientStaffMenu.length; i++) {
            var row = clientStaffMenu[i];
            var menu = getClientMenuRow(row.MENU_ID);
            if (null != menu) {
                _html += '<div class="secondLayer">';
                _html += '    <a id="' + menu.MENU_ID + '" style="color:#fff">' + menu.MENU_NAME + '</a>';
                _html += '</div>';
            }
        }
        return _html;
    }
    //导航二菜单
    function getsubnav(menuId) {
        var _html = '';
        for (var i = 0; i < clientMenuChild.length; i++) {
            var row = clientMenuChild[i];
            if (row.PMENU_ID == menuId) {
                _html += '<div class="secondLayer">';
                if (isbelowmenu(row.MENU_ID) == 0) {
                    _html += '';
                } else {
                     _html += '    <div class="openIcon"></div>';
                }
                _html += '    <a id="' + row.MENU_ID + '" style="color:#fff">' + row.MENU_NAME + '</a>';
                if (isbelowmenu(row.MENU_ID) == 0) {
                    _html += '';
                } else {
                    _html += getchildnav(row.MENU_ID);
                }
                _html += '</div>';
                navJson[row.MENU_ID] = row;
            }
        }
        return _html;
    }
    //导航三菜单
    function getchildnav(menuId) {
        var _html = '';
        for (var i = 0; i < clientMenuChild.length; i++) {
            var row = clientMenuChild[i];
            if (row.PMENU_ID == menuId) {
                _html += '<div class="thirdLayer">';
                _html += '    <a id="' + row.MENU_ID + '" style="color:#fff">' + row.MENU_NAME + '</a>';
                _html += row.MENU_NAME;
                _html += '</div>';
                navJson[row.MENU_ID] = row;
            }
        }
        return _html;
    }
    //判断是否有子节点
    function isbelowmenu(menuId) {
        for (var i = 0; i < clientMenuChild.length; i++) {
            var row = clientMenuChild[i];
            if (row.PMENU_ID == menuId) {
                return true;
            }
        }
        return false;
    }
    //查找子菜单
    function getClientMenuRow(menuId) {
        for (var i = 0; i < clientMenuChild.length; i++) {
            var row = clientMenuChild[i];
            if (row.MENU_ID == menuId) {
                return row;
            }
        }
        return null;
    }
}
//移除Tab
$.removeTab = function (type) {
    var iframeId = tabiframeId();
    var tabId = iframeId.substr(6);

    var $tab = $(".tab-div");
    var $tabContent = $(".tab-div-content");
    switch (type) {
        case "reloadCurrent":
            $.currentIframe().$.reload();
            break;
        case "closeCurrent":
            remove(tabId);
            break;
        case "closeAll":
            $tab.find("div.tab-close").each(function () {
                var id = $(this).parents('.labelItem').attr('id');
                remove(id);
            });
            break;
        case "closeOther":
            $tab.find("div.tab-close").each(function () {
                var id = $(this).parents('.labelItem').attr('id');
                if (tabId != id) {
                    remove(id);
                }
            });
            break;
        default:
            break;
    }
    function remove(tabId) {
        $tab.find("#" + tabId).remove();
        $tabContent.find('#iframe' + tabId).remove();

        var index = $tab.find('div.labelItem').length;
        $tab.find('div.labelItem:eq(' + (index - 1) + ')').trigger("click");
    }
}