<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/SimonMasterPage.Master"
    Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <% if (Request.Url.Host.IndexOf("boonlive") > -1){ %><%: Html.Language("Company")%><% } else { %><%: Html.Language("ProductName")%><% }%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="easyui-layout" data-options="fit:true">
        <div id="sidebar" region="west" data-options="split:true" title="<%: Html.Language("ProductName") %>">
            <div data-bind="template: { name: 'statisticsTemplate', data: Statistics }">
            </div>
        </div>
        <div region="center">
            <div class="easyui-layout" data-options="fit:true">
                <div id="head" region="north" data-options="border:false">
                    <div id="logo">
                    </div>
                    <div id="user">
                        <%: Html.Language("CurrentHotel")%><a id="curHotel" href="javascript:void(0)" data-bind="click: showHotels"></a>&nbsp;&nbsp;|&nbsp;&nbsp;
                        <%: User.Identity.Name %>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="javascript:void(0)" data-bind="click: showChangePassword">
                            <%: Html.Language("ChangePassword") %></a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="javascript:void(0)"
                                data-bind="click: logout">
                                <%: Html.Language("Logout") %></a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="javascript:void(0)"
                                    data-bind="click: showAbout">
                                    <%: Html.Language("About") %></a>
                    </div>
                    <div id="menu">
                        <ul>
                        </ul>
                        <div class="panel">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </div>
                <div region="center" data-options="border:false" style="background: #EFEFEF;">
                    <iframe id="home" name="main" style="width: 100%; height: 99.5%; border: none; overflow-y: hidden"
                        scrolling="auto" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </div>
    <script id="statisticsTemplate" type="text/html">
		<div id="room-statistics" class="box">
			<h1><span> <%: Html.Language("RoomsStatistics") %></span></h1>
			<ul>
				{{each Room}}
				<li>${ Name }<span class="value" data-bind="text: Value"></span></li>
				{{/each}}
			</ul>
		</div>
		<div id="decive-alert" class="box">
            <h1><span><%: Html.Language("FailureAlarm") %></span></h1>
            <ul>
				{{each Peripheral}}
				<li data-bind="style: { background: Color }">
					<a href="javascript:void(0)" data-bind="click: $root.showPeripheral">${ Name }<span class="value" data-bind="text: Value"></span></a>
				</li>
				{{/each}}
			</ul>
        </div>
		<div id="service-alert" class="box">
			<h1><span><%: Html.Language("ServiceAlarm") %></span></h1>
			<ul>
				{{each Services}}
				<li data-bind="style: { background: Color }">
					<a href="javascript:void(0)" data-bind="click: $root.showServiceMsg">${ Name }<span class="value" data-bind="text: Value"></span></a>
				</li>
				{{/each}}
			</ul>
		</div>		
		<%--<div id="room-abnormity" class="box">
			<h1><span><%: Html.Language("RoomAbnormity") %></span></h1>
			<ul>
				{{each Abnormities}}
				<li>
					<a href="javascript:void(0)" data-bind="click: $root.showAbnormityMsg">${ Name }<span class="value" data-bind="text: Value"></span></a>
				</li>
				{{/each}}
			</ul>
		</div>--%>
    </script>
    <div style="display: none;">
        <div id="changePasswordDlg" class="easyui-window" title="<%: Html.Language("ChangePassword") %>"
            style="width: 400px; height: 220px; padding: 5px;" data-options="
			    closed: true,
			    modal: true,
			    collapsible: false,
			    minimizable: false,
			    maximizable: false">
            <div class="easyui-layout" fit="true">
                <div data-options="region:'center'">
                    <table style="margin: 20px 0; width: 370px;">
                        <tr>
                            <th>
                                <label for="iptOldPassword">
                                    <%: Html.Language("CurrentPassword") %></label>
                            </th>
                            <td>
                                <input type="password" id="iptOldPassword" />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label for="iptPassword">
                                    <%: Html.Language("NewPassword")%></label>
                            </th>
                            <td>
                                <input type="password" id="iptPassword" />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label for="iptNewPassword">
                                    <%: Html.Language("ConfirmNewPassword")%></label>
                            </th>
                            <td>
                                <input type="password" id="iptNewPassword" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="text-align: right; margin: 5px 0 0;" data-options="region:'south',border:false">
                    <a class="easyui-linkbutton" iconcls="icon-ok" href="javascript:void(0)" onclick="changePassword()">
                        <%: Html.Language("OK") %></a> <a class="easyui-linkbutton" iconcls="icon-cancel"
                            href="javascript:void(0)" onclick="$('#changePasswordDlg').window('close');">
                            <%: Html.Language("Cancel") %></a>
                </div>
            </div>
        </div>
        <div id="aboutDlg" class="easyui-window" title="<%: Html.Language("About") %>" style="width: 400px;
            height: 280px; display: none;" data-options="
			    closed: true,
			    modal: true,
			    collapsible: false,
			    minimizable: false,
			    maximizable: false
		    ">
            <table>
                <tr>
                    <th colspan="2" style="text-align: center; height: 40px; font-size: 14px;">
                        <%: Html.Language("ProductName") %>
                    </th>
                </tr>
                <tr>
                    <th>
                        <%: Html.Language("ProductVersion") %>：
                    </th>
                    <td>
                        <span class="Version"></span>
                    </td>
                </tr>
                <tr>
                    <th>
                        <%: Html.Language("SerialNumber") %>：
                    </th>
                    <td>
                        <span class="SerialNumber"></span>
                    </td>
                </tr>
                <%--<tr>
                    <th>
                        <%: Html.Language("AuthorizedNumber")%>：
                    </th>
                    <td>
                        <span class="Limit"></span>
                    </td>
                </tr>--%>
                <tr>
                    <th>
                        <%: Html.Language("CurrentHotel")%>：
                    </th>
                    <td>
                        <span class="CurrentHotel"></span>
                    </td>
                </tr>
                <tr>
                    <th>
                        <%: Html.Language("UseTimeLimit")%>：
                    </th>
                    <td>
                        <span class="Expires"></span>
                    </td>
                </tr>
                <%--<tr>
					<th><%: Html.Language("HostAuthorization")%>：</th>
					<td>
						<input id="txtAuthorizationPassword" type="password" class="easyui-validatebox textbox text" style="width:100px;" />
						<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="accreditOk()">确定</a>
					</td>
				</tr>
                <tr>
                    <td colspan="2" style="text-align: center;">
                        <a href="/Help/Help.pdf" target="_blank">
                            <%: Html.Language("Help") %></a>
                    </td>
                </tr>--%>
            </table>
        </div>
        <div id="peripheralDlg" class="easyui-window" title='<%: Html.Language("FailureAlarm") %>'
            style="width: 400px; height: 400px;" data-options="
			    closed: true,
			    modal: true,
			    collapsible: false,
			    minimizable: false,
			    maximizable: false,
			    tools:[
				    { iconCls: 'icon-reload', handler: function(){ $('#dgPeripheral').datagrid('reload'); }}
			    ]
		    ">
            <table id="dgPeripheral" class="easyui-propertygrid" style="width: 300px" data-options="
				    border: false,
				    fit: true,
				    method: 'post',
				    showGroup: true,
				    scrollbarSize: 0,
				    groupField: 'Name',
				    groupFormatter: groupFormatter,
				    columns: [[
					    { field: 'RoomNumber', title: '<%: Html.Language("RoomNumber") %>', width:100, align: 'center', sortable:true }
				    ]]
			    ">
            </table>
        </div>
        <div id="serviceAlertDlg" class="easyui-window" title='<%: Html.Language("ServiceAlarm") %>'
            style="width: 400px; height: 400px;" data-options="
			    closed: true,
			    modal: true,
			    collapsible: false,
			    minimizable: false,
			    maximizable: false,
			    tools:[
				    { iconCls: 'icon-reload', handler: function(){ $('#dgAlarm').datagrid('reload'); }}
			    ]
		    ">
            <table id="dgAlarm" class="easyui-propertygrid" style="width: 300px" data-options="
				    border: false,
				    fit: true,
				    method: 'post',
				    showGroup: true,
				    scrollbarSize: 0,
				    groupField: 'Name',
				    groupFormatter: groupFormatter,
				    columns: [[
					    { field: 'RoomNumber', title: '<%: Html.Language("RoomNumber") %>', width:80, align: 'center', sortable:true },
					    { field: 'Time', title: '<%: Html.Language("Time") %>',width:150, align: 'center', sortable: true, formatter: $.tools.formatDateTime },
					    { field: 'Operation', title: '<%: Html.Language("Operation") %>', width:70, align: 'center', sortable: true, formatter: operationFormatter }
				    ]]
			    ">
            </table>
        </div>
        <div id="hotelDlg" class="easyui-window" title='<%: Html.Language("Hotel") %>' style="width: 660px;
            height: 450px;" data-options="closed:true,modal: true,collapsible: false,minimizable: false,maximizable: false">
            <div data-options="region:'north',border:false" style="overflow: hidden; height: 30px;">
                <div class="toolbar">
                    <label>
                        <%: Html.Language("QueryContent")%>：</label>
                    <input id="txtQueryContent" class="easyui-validatebox" style="width: 120px;" />
                    <a href="javascript:void(0)" class="toolbar-button tb-icon-search" onclick="groupTreeOnSelect();">
                        <%: Html.Language("Query")%></a>
                </div>
            </div>
            <table style="width: 100%; height: 380px;">
                <tr>
                    <td style="width: 75%;">
                        <table id="dgHotel" class="easyui-propertygrid" style="width: 100%;" data-options="
				    border: false,
				    fit: true,
				    method: 'post',
				    showGroup: false,
				    scrollbarSize: 0,
					loadMsg: 'load......',
				    columns: [[
					    { field: 'Operation', title: '<%: Html.Language("Operation") %>', align: 'center', sortable: true, formatter: toggleHotelFormatter },
					    { field: 'Code', title: '<%: Html.Language("Code") %>', align: 'center', sortable:true },
					    { field: 'Name', title: '<%: Html.Language("Name") %>', sortable: true },
					    { field: 'GroupName', title: '<%: Html.Language("Group") %>', sortable: true }
				    ]]
			    ">
                        </table>
                    </td>
                    <td>
                        <table id="groupTree" class="easyui-treegrid" data-options="
					url: '/SysHotel/LoadSysHotelGroupTree/',
					method: 'post',
					idField: 'ID',
					treeField: 'Name',
					fit: true,
					fitColumns: true,
					animate: true,
					border: false,
					loadMsg: 'load......',
					bodyCls: 'easyui-treegrid-no-icon',
                    onLoadSuccess: function (row, data) {if (data[0] != null) {$('#groupTree').treegrid('select', data[0].ID);}},
					onSelect: groupTreeOnSelect
				">
                            <thead>
                                <tr>
                                    <th data-options="field:'Name',width:160">
                                        <%: Html.Language("Name")%>
                                    </th>
                                </tr>
                            </thead>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div id="jplayer">
    </div>
    <div id="jplayer1">
    </div>
    <div id="jplayer2">
    </div>
    <div id="jplayer3">
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
    <link href="/Styles/simon-home-index.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/Scripts/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="/Scripts/knockout-3.3.0.js"></script>
    <script type="text/javascript" src="/Scripts/knockout.mapping-latest.js"></script>
    <script type="text/javascript" src="/Scripts/jplayer/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="/Scripts/simon-home-index.js"></script>
</asp:Content>
