<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--<meta name="viewport"
  content="width=device-width, initial-scale=1.0, user-scalable=no">--> <!-- Not ready to go live yet -->
<title>MythTV WebFrontend</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/css/site.css">
<link rel="stylesheet" type="text/css" href="/css/setup.css">
<link rel="stylesheet" type="text/css" href="/3rdParty/jquery/jqueryUI/css/jquery-ui.css">
<!-- Icons -->
<link rel="icon"          type="image/x-icon" href="/images/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">
<!-- Scripts -->
<script type="text/javascript" src="/js/websocket_events.js"></script> <!-- Global websocket manager -->
<script type="text/javascript" src="/js/util.qjs"></script>
<script type="text/javascript" src="/3rdParty/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/3rdParty/jquery/jqueryUI/js/jquery-ui-1.10.3.js"></script>
<script type="text/javascript" src="/js/menu.js"></script>

<script type="text/javascript" nonce="<%=CSP_NONCE%>">

$(document).ready(function() {
    $('#header_status').hide();
    $('#header_error').hide();
    loadDiv("menu-bg", "/menu.qsp");
    $('.menu').initMenu();
    showHostName();
});

$(document).keyup(function(e) {
    handleKeyPress(e);
}); 

</script>
</head>
<body>

<div id="header">
    <div id="header_logo">
        <a href="/"><img src="/images/mythtv.png" class="png" width="180" height="64" border="0" alt="MythTV"></a>
    </div>
    <div id="header_login">
<%if (Session.userid > 0) { %>
        Logged in as <span id="session_username"><%=Session.username%></span>
        <span id="session_logout">[<a href="#" onClick="logout()">Logout</a>]</span>
<%
}
else {
%>
        <!-- <a href="">Login</a> -->
<%}%>
    </div>
</div>

<div id="menu-tab" onMouseOver="showMainMenu()">
<div>&#9660; <span>Menu</span> &#9660;</div>
</div>

<div id="menu-bg" class="menu-hidden"> <!-- onMouseOut="hideMainMenu()"> -->
</div>

<iframe id="content" onMouseOver="hideMainMenu()" src="/misc/overview.qsp" seamless>
</iframe>
<!--<div id="content" onMouseOver="hideMainMenu()">
</div>-->

<div id='header_status' class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <div id='header_status_message'>
    </div>
</div>

<div id='header_error' class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
    <div id="header_error_message">
    </div>
</div>

<div id='edit' title='Setup Wizard'>
</div>

<div id='iconBrowser' title='Channel Icon Browser'>
</div>

<div id='helpWindow' title='Help'>
</div>

<div id='confirmWindow' title='Are You Sure?'>
</div>

<div id='fileBrowserWindow'>
    <div id='fileBrowser'>
    </div>
</div>

<div id='busyPopup' title='Please be patient'>
    <p><i18n>Loading ...</i18n></p>
</div>

<div id='debug' title='Debugging Popup'> <!-- Don't remove, used for developer debugging -->
</div>

</body>
</html>