<%@ Page Language="C#" Inherits="VA.FX.WebBase.BasePage_Admin" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><% = base.webSiteConfig.WebSiteName%></title>
<link rel="stylesheet" type="text/css" href="/app_themes/default/css/basic.css" />
<link rel="stylesheet" type="text/css" href="/app_themes/default/css/entry.css" />
<link rel="stylesheet" type="text/css" href="/uicontrols/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/uicontrols/easyui/themes/icon.css" />
<script type="text/javascript" src="/uicontrols/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/uicontrols/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/uicontrols/easyui/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">

    //页面初始化；
    function init() {
        initLayout();
        initMenus();
        initTabs();
        initSwitchBar();
    }

    //初始化页面整体布局；
    function initLayout() {
        
        resizeLayout();
        
        $(window).resize(function(){
           resizeLayout(); 
        });        
    }

    //初始化顶级菜单和左侧栏菜单项（绑定事件、设置宽高）；
    function initMenus() {
        
        //给顶级菜单绑定事件；
        var topestMenuList = $("#topestMenu > li");
        var length = topestMenuList.length;
        topestMenuList.bind("click", function () {

            //清除所有选中的样式；
            $("#topestMenu > li").removeClass("selected");

            //设置选中项的样式和二级菜单；
            $(this).addClass("selected");

            //隐藏所有的二级菜单，然后再显示当前的选中的二级菜单；            
            var index = $(this).index();
            hideAllTopestMenuContent(length);
            showTopestMenuContent(index);

            //重新左侧栏菜单项的宽高；
            resizeSubMenu();
        });

        //隐藏所有左侧栏菜单项，然后根据当前选中的顶级菜单来显示左侧对应的子菜单项；
        hideAllTopestMenuContent(length);
        showTopestMenuContent(0);

        //初始化左侧栏子菜单项（绑定事件）、设置宽高；
        initSubMenu();
        resizeSubMenu();
    }

    //初始化页面主体区域标签页控件；
    function initTabs() {
        //标签双击关闭
        $('#tabs1 ul.tabs').bind("dblclick", function (e) {
            var tabTitle = $(e.target).text();
            //alert(tabTitle);
            e.stopPropagation(); //阻止事件冒泡；

            //关闭标签；
            $('#tabs1').tabs('close', tabTitle);
        });

        //给tabs控件绑定鼠标右键事件
        $(".tabs-header .tabs-wrap .tabs ").bind('contextmenu', function () {
            event.preventDefault();
            $("#contextMenu").menu('show', { left: event.pageX, top: event.pageY });
        });
    }

    function initSwitchBar(){
        $("#switchBar").bind("click",function(){
            toggleSwitchBar();
        });

        $("#topestMenuName").bind("click",function(){
            toggleSwitchBar();
        });
    }

    function toggleSwitchBar(){
        var sideBarObj = $("#sideBar");
        var switchBarObj = $("#switchBar");
        var visiblity = sideBarObj.css("display");
        if (visiblity != "none"){
            sideBarObj.css("display", "none");
            switchBarObj.css("display", "block");
        }
        else{
            sideBarObj.css("display", "");
            switchBarObj.css("display", "none");
        }
        resizeLayout();
    }

    //当浏览器窗口大小发生变化时，重置页面布局（设置宽高以适应浏览器窗口）；
    function resizeLayout(){
        //height : 不包含padding，不包含border
        //innerHeight : 包含padding，但不包含border
        //outerHeight : 包含padding和border，也就相当于实际高度；

         //一定要先将#main的宽度规0一下，否则窗口宽度在取值时可能会计算垂直滚动条的宽度；
        //因为当将sideBar由隐藏设置为显示后，#main的宽度仍是全屏的宽度，此时就html
        //解析的角度来说，浏览器会认为应该出现垂直滚动条，所以windowWidth是去除了垂直
        //滚动条后的宽度，如果将#main归0一下，则浏览器认为不会出现垂直滚动条，此时取值
        //就能取到正确的值；
        $("#main").width(0);

        var windowHeight = $(this).outerHeight();
        var windowWidth = $(this).outerWidth();
        var headerHeight = $("#header").outerHeight();
        var sideBarWidth = $("#sideBar").outerWidth();        
        var switchBarWidth = $("#switchBar").outerWidth();
        var footerHeight = $("#footer").outerHeight();
        var sideBarHeight = 0;
        var mainHeight = 0;
        var mainWidth = 0;

        //如果sideBar为隐藏状态，则将sideBarWidth
        var sideBarDisplayProperty = $("#sideBar").css("display");
        if (sideBarDisplayProperty.toLowerCase() == "none"){
            sideBarWidth = 0;            
        }
        else{
            switchBarWidth = 0;
            $("#switchBar").css("display", "none");
        }

        sideBarHeight = windowHeight - headerHeight - footerHeight - 2;
        mainHeight = sideBarHeight;        
        mainWidth = windowWidth - sideBarWidth - switchBarWidth - 1;

        //alert(windowWidth + "|" + sideBarWidth + "|" + switchBarWidth + "|" + mainWidh);

        $("#sideBar").height(sideBarHeight);
        $("#switchBar").height(sideBarHeight);
        $("#main").height(mainHeight);
        $("#main").width(mainWidth);
        
        //设置当前选中项的".body"部分高度；	
        resizeSubMenu();

        //重置标签控件的大小；
        $('#tabs1').tabs('resize');
    }

    //隐藏所有顶级菜单的内容（也就是左侧栏菜单）；
    function hideAllTopestMenuContent(length) {
        for (var i = 0; i < length; i++) {
            $("#topestMenuContent" + i).css("display", "none");
        }
    }

    //显示给定索引项的顶级菜单的内容（也就是左侧栏菜单）； 
    function showTopestMenuContent(index) {
        $("#topestMenuContent" + index).css("display", "block");

        //给顶级菜单绑定事件；
        var topestMenuList = $("#topestMenu > li");
        var topestMenuItem = topestMenuList.get(index);        
        $(topestMenuItem).addClass("selected");
        var topestMenuItemTitle = $(topestMenuItem).find("input").eq(0).val();
        $("#topestMenuName_text").html(topestMenuItemTitle);
    }

    //初始化子菜单项（绑定事件）；
    function initSubMenu() {
        $("#menus .submenu .head").bind("click", function(event){   
            var moduleID = $(event.target).parent().parent().attr("id");        
            $("#menus #"+ moduleID +" .selected").removeClass("selected");
            $(this).parent().addClass("selected");

            //设置当前选中项的".body"部分高度；	
            resizeSubMenu();
        });
    }

    //设置当前选中项的".body"部分高度；
    function resizeSubMenu() {

        var currentTopestMenuContentID = null;            
        var height_total = 0;
        var height_used = 0;
        var height_remain = 0;
        var headHeight = 0;

        $(".topestMenu-content:visible").each(function(){
            currentTopestMenuContentID = $(this).attr("id");
            //alert(currentTopestMenuContentID);
        });        

        height_total = $("#sideBar").outerHeight();        

        //计算所有菜单项头部所占的高度；
        $("#menus #"+ currentTopestMenuContentID +" .submenu .head").each(function () {
            headHeight = $(this).outerHeight(true); //加上1像素的边框          
            height_used += headHeight;
        });

        height_used += $("#topestMenuName").outerHeight();

        //设置当前选中的“.module"块的”.body“的高度为：总高度 - 所有菜单项头部的高度。
        height_remain = height_total - height_used - 1;

        $("#menus #"+currentTopestMenuContentID+" .selected .body").height(height_remain);
    }

    //添加选项卡；
    function addTab(pageTitle, pageURL) {
       
        /*如果已经打开过，则不再重复打开，并定位到该标签*/
        var exists = $("#tabs1").tabs('exists', pageTitle); ;
        if (exists) {
            $("#tabs1").tabs('select', pageTitle);
            return;
        }
        
        // add a new tab panel    
        $('#tabs1').tabs('add', {
            title: pageTitle,
            style: 'padding:10px;overflow-x:hidden;border:0px;',
            content: '<iframe src="' + pageURL + '" style="width:100%;height:100%;border:0px;margin:0px;padding:0px;"  ></iframe>',
            //content: '<iframe src="' + pageURL + '" scrolling="no" style="width:100%;height:100%;border:0px;margin:0px;padding:0px;"  ></iframe>',
            closable: true,
            /*
            tools: [{
                iconCls: 'icon-mini-refresh',
                handler: function () {
                    alert('refresh');
                }
            }]
            */
        });       
    }

    function logout(){
        if (confirm('确定要退出吗？')){
            window.location.href= 'logout.aspx';
        }
    }

    $(function () {
        init();
    });

</script>

</head>

<body>   

    <div id="header">
        <div id="logo"></div>
        <ul id="topestMenu">
            <%--<li><img src="../app_themes/default/images/menu/topm_icon_1.jpg" border="0" /><input type="hidden" value="通讯录" /></li>
            <li><img src="../app_themes/default/images/menu/topm_icon_2.jpg" border="0" /><input type="hidden" value="模型管理" /></li>                                            
            <li><img src="../app_themes/default/images/menu/topm_icon_3.jpg" border="0" /><input type="hidden" value="模块设计" /></li>
            <li><img src="../app_themes/default/images/menu/topm_icon_4.jpg" border="0" /><input type="hidden" value="图纸打印" /></li>
            <li><img src="../app_themes/default/images/menu/topm_icon_5.jpg" border="0" /><input type="hidden" value="文件管理" /></li>--%>

            <li><img src="../app_themes/default/images/menu/topm_icon_1.jpg" border="0" /><input type="hidden" value="通讯录" /></li>
            <li><img src="../app_themes/default/images/menu/topm_icon_2.jpg" border="0" /><input type="hidden" value="模型管理" /></li>                                            
            <li><img src="../app_themes/default/images/menu/topm_icon_3.jpg" border="0" /><input type="hidden" value="模块设计" /></li>
            <li><img src="../app_themes/default/images/menu/topm_icon_4.jpg" border="0" /><input type="hidden" value="图纸打印" /></li>
            <li><img src="../app_themes/default/images/menu/topm_icon_5.jpg" border="0" /><input type="hidden" value="文件管理" /></li>

        </ul>
        <div id="headerRight">
            <div class="topmenu"><a href="javascript:help();" class="help">帮助</a> | <a href="javascript:logout();">退出</a> | <a href="about.aspx">关于</a></div>
            <div class="userinfo"><% = base.userID %></div>
        </div>
    </div>
    <div id="sideBar">
        <div id="menus">

        <div id="topestMenuName">
            <span id="topestMenuName_text">通讯录</span>
        </div>

        <div id="topestMenuContent0" class="topestMenu-content currentTopestMenuContent">
        <div class="submenu selected">
		    <h1 class="head">成员管理</h1>
		    <div class="body">
			    <ul>
                <li><a href="javascript:addTab('添加数据','/modules/devtemplate/editpage/employee_edit_3.aspx');">添加数据</a></li>				                
                <li><a href="javascript:addTab('管理数据（无刷新）','/modules/devtemplate/smartlisttable/nofresh/employee_editlist_nofresh_7.aspx');">列表-无刷新</a></li>				
                <li><a href="javascript:addTab('管理数据（无刷新）','/modules/devtemplate/smartlisttable/nofresh/employee_editlist_nofresh_6.aspx');">列表-无刷新6</a></li>				
                <li><a href="javascript:addTab('管理数据（半刷新）','/modules/devtemplate/smartlisttable/partfresh/employee_editlist.aspx');">列表-半刷新</a></li>				
                <li><a href="javascript:addTab('管理数据（全刷新）','/modules/devtemplate/smartlisttable/allfresh/employee_editlist.aspx');">列表-全刷新</a></li>				              
                <li><a href="javascript:addTab('superlisttable（无刷新）','/modules/devtemplate/superlisttable/nofresh/employee_editlist_nofresh.aspx');">superlisttable（无刷新）</a></li>				              
                <li><a href="javascript:addTab('superlisttable（全刷新）','/modules/devtemplate/superlisttable/allfresh/employee_editlist.aspx');">superlisttable（全刷新）</a></li>			
                <li><a href="javascript:addTab('normallisttable（全刷新）','/modules/devtemplate/normallisttable/allfresh/employee_editlist.aspx');">普通列表</a></li>				              	              
                </ul>
		    </div>
	    </div>
        <div class="submenu">
		    <h1 class="head menuhead_icon_msg">留言管理</h1>
		    <div class="body">
			    <ul>
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>				
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>				
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>				
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>				
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>				
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>					    
                </ul>
		    </div>
	    </div>
         <div class="submenu">
		    <h1 class="head menuhead_icon_edit">留言管理</h1>
		    <div class="body">
			    <ul>
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>				
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>				
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>				
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>				
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>				
                <li><a href="javascript:addTab('列表数据管理','data_editlist.aspx');">订单管理</a></li>					    
                </ul>
		    </div>
	    </div>
         <div class="submenu">
		    <h1 class="head menuhead_icon_calendar">操作员管理</h1>
		    <div class="body">
			    <ul>
                <li><a href="javascript:addTab('操作员管理','/sysmembership/User/UserEditList.aspx');">操作员管理</a></li>				
                <li><a href="javascript:addTab('模块管理','/sysmembership/ModuleEdit.aspx');">模块管理</a></li>	
                <li><a href="javascript:addTab('权限项管理','/sysmembership/Privilege/PrivilegeEditList.aspx');">权限项管理</a></li>				
                <li><a href="javascript:addTab('角色管理','/sysmembership/Role/RoleEditList.aspx');">角色管理</a></li>				
                <li><a href="javascript:addTab('公共页面','/sysmembership/CommonPagesEdit.aspx');">公共页面</a></li>				
                <li><a href="javascript:addTab('修改密码','/sysmembership/ChangeMyPassword.aspx');">修改密码</a></li>				
                <li><a href="javascript:addTab('主题设置','/sysmembership/ThemeConfig.aspx');">主题设置</a></li>				
                </ul>
		    </div>
	    </div>        
      
        </div><!--module.END-->

        <div id="topestMenuContent1" class="topestMenu-content">
        <div class="submenu selected">
		    <h1 class="head">FAQ管理</h1>
		    <div class="body">
			    <ul>
                <li><a href="../FAQ/Category_EditList.aspx" target="theFrame">类别管理</a></li>
			    <li><a href="../FAQ/Question_Edit.aspx" target="theFrame">添加问题</a></li>
			    <li><a href="../FAQ/Question_EditList.aspx" target="theFrame">管理问题</a></li>
                </ul>
		    </div>
	    </div>
        <div class="submenu">
		    <h1 class="head">产品管理</h1>
		    <div class="body">
			    <ul>
                <li><a href="../FAQ/Category_EditList.aspx" target="theFrame">类别管理</a></li>
			    <li><a href="../FAQ/Question_Edit.aspx" target="theFrame">添加问题</a></li>
			    <li><a href="../FAQ/Question_EditList.aspx" target="theFrame">管理问题</a></li>
                </ul>
		    </div>
	    </div>
        <div class="submenu">
		    <h1 class="head">产品管理</h1>
		    <div class="body">
			    <ul>
                <li><a href="../FAQ/Category_EditList.aspx" target="theFrame">类别管理</a></li>
			    <li><a href="../FAQ/Question_Edit.aspx" target="theFrame">添加问题</a></li>
			    <li><a href="../FAQ/Question_EditList.aspx" target="theFrame">管理问题</a></li>
                </ul>
		    </div>
	    </div>

        </div><!--module.END-->

        </div><!--menus.END-->
    </div>
    <div id="switchBar"></div>
    <div id="main">
        <div class="easyui-tabs" style="width:300px;border-bottom:0px;overflow:hidden;" fit=true id="tabs1" >
            <div title="首页" data-options="closable:false">            
                <iframe src="welcome.html" style="width:100%;height:100%;border:0px;margin:0px;padding:0px;"  ></iframe>                
            </div>
        </div>
    </div>
    <div id="footer">
        <div class="dateinfo">&nbsp;&nbsp;<% = DateTime.Now.ToString("yyyy年MM月dd日") %>&nbsp;&nbsp;<% = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetDayName(DateTime.Now.DayOfWeek) %></div>
        <div class="copyright">服务电话：400-666-0008，网址：<a href="#" target="_blank">http://www.jtongtech.com</a></div>
    </div>

    <div id="contextMenu" class="easyui-menu" data-options="onClick:menuHandler" style="width:120px;">
	    <div data-options="name:'closeCurrent'">关闭</div>
	    <div data-options="name:'closeAll'">关闭全部</div>
        <div data-options="name:'closeAllExceptCurrent'">除此之外全部关闭</div>
    </div>

    <script type="text/javascript">
        function menuHandler(item) {
            var tabs = $('#tabs1').tabs("tabs"); //注意：返回的是dom对象，不是JQuery对象；
            var selectedTab = $('#tabs1').tabs('getSelected');
            var selectedTabIndex = $('#tabs1').tabs('getTabIndex', selectedTab);
            var selectedTabTitle = selectedTab.panel('options').tab.text();

            if (item.name == "closeCurrent") {
                $('#tabs1').tabs('close', selectedTabTitle);
            }
            else if (item.name == "closeAll") {
                var tabTitles = new Array();
                for (var i = 0; i < tabs.length; i++) {
                    var title = tabs[i].panel('options').tab.text();
                    tabTitles.push(title);
                }
                for (var i = 0; i < tabTitles.length; i++) {
                    $("#tabs1").tabs("close", tabTitles[i]);
                }
            }
            else if (item.name == "closeAllExceptCurrent") {
                var tabTitles = new Array();
                for (var i = 0; i < tabs.length; i++) {
                    var title = tabs[i].panel('options').tab.text();
                    if (title != selectedTabTitle) {
                        tabTitles.push(title);
                    }
                }
                for (var i = 0; i < tabTitles.length; i++) {
                    $("#tabs1").tabs("close", tabTitles[i]);
                }
            }
        }
    </script>     
</body>  

</html>
