<!DOCTYPE html>
<html>
<head>
    <meta content="" charset="utf-8"/>
    <title>Web File Manager</title>
    <link type="text/css" rel="stylesheet" href="resources/css/base.css"/>
    <link type="text/css" rel="stylesheet" href="resources/css/main.css"/>
    <link rel="shortcut icon" type="image/png" href="favicon.png"/>
</head>
<body onload="onloadSetBG(); getDir('/')" contextmenu="menu">
    <!-- Background -->
    <img id="bg" />

    <!-- Create the menu -->
    <menu type="context" id="menu">
        <menuitem label="Home Directory" onclick="clearDirCookie()"></menuitem>
        <menuitem label="Show Server Messages" onclick="tgglElmView('serverMsgView')"></menuitem>
        <menuitem label="Clear Upload List" onclick="clearDlList()"></menuitem>
        <menuitem label="Download" onclick="downloadItem()"></menuitem>
        <menuitem label="Delete" onclick="deleteItem()"></menuitem>
    </menu>

    <!-- Uploader -->
    <h2 id="controls">
        <button type="button" title="Other Options" onclick="tgglElmView('popOutControls')">&#9881;</button>
        <button type="button" title="Refresh" onclick="getDir('./')">&#8635;</button>
        <button type="button" title="Back" onclick="getDir('../')">&lArr;</button>
        <input type="text" placeholder="Search..." onkeyup="searchPage(this)" name="" value="">
        <button type="button" onclick="clearSearch()" title="Clears search..." >Clear Search</button>
        <button onclick="getFavesList(); tgglElmView('favesList')">Faves List &#8597;</button>
        <button type="button" onclick="lockFolders()" title="Lock unlocked folders..." >Lock Unlocked Folders</button>
    </h2>

    <h2 id="fullPathHeader">
        <button type="button" id="faves" onclick="faveManager(this)" title="Add/Delete from favorites..." >&#9734;</button>
        Path:<span id="path"></span>
    </h2>

    <!-- Dynamic content targets -->
    <ul id="favesList" style="display: none;"> </ul>
    <div id="dynDiv"></div>

    <div id="popOutControls" style="display:none;">
        <center>
        <form>
            <input class="ulFile" type="file" title="files To Upload" name="filesToUpload[]" data-multiple-caption="{count} files selected" multiple />
            <input type="button" onclick="uploadFiles()" name="UploadFiles" title="Upload File(s)" value="Upload File(s)" />
            <input type="reset" title="Clear" id="CLEARBTTN" value="Clear" style="display:none;">
            <input type="text" id="DIRPATHUL" name="DIRPATHUL" value="">
        </form>
        <br/>
            <input type="text" id="NewItem" value=""/>
            <input type="button" value="New Dir" onclick="createItem('dir')"/>
            <input type="button" value="New File" onclick="createItem('file')"/>
            <input type="button" value="Show Server Messages" onclick="tgglElmView('serverMsgView')"/>
        <br/>
            <input id="MergeType" type="checkbox" onchange="getDir('./')" />
            <label for="MergeType">Show seassons in same list.</label>
    </center>
    </div>

    <!-- Uploader processor -->
    <div id="serverMsgView" style="display:none;"> </div>


    <!--  Templates  -->
    <template id="dirTemplate">
        <div class="dirStyle" tabindex="1">
            <img id="dirID" class="systemIcon" src="" />
            <input id="titleID" class="dirTitle" type="text" value="" readonly="true" />
        </div>
    </template>
    <template id="vidTemplate">
        <span id="movieID" class="movieStyle" tabindex="1">
            <input id="titleID" class="movieTitle" type="text" value="" readonly="true" />
        </span>
    </template>
    <template id="imgTemplate">
        <img id="imageID" class="iconImg" src="" alt="">
    </template>
    <template id="filTemplate">
        <div class="fileStyle">
            <img id="fileID" class="systemIcon" src="" />
            <input id="titleID" class="fileTitle" type="text" value="" readonly="true" />
        </div>
    </template>


    <script type="text/javascript">
    if (window.self !== window.top) {
        setTimeout(function () {
            let elm = document.getElementById("bg");
            elm.parentElement.removeChild(elm);

            // Stylesheet for iframe views
            var link = document.createElement("link");
            link.href = "resources/css/iframe.css";
            link.type = "text/css";
            link.rel = "stylesheet";
            document.getElementsByTagName("head")[0].appendChild(link);
        }, 500);
    }
    </script>

    <script type="text/javascript" src="resources/js/favorites.js" charset="utf-8"></script>
    <script type="text/javascript" src="resources/js/passwordFieldInsert.js" charset="utf-8"></script>
    <script type="text/javascript" src="resources/js/cookieHandler.js" charset="utf-8"></script>
    <script type="text/javascript" src="resources/js/xmlParser.js" charset="utf-8"></script>
    <script type="text/javascript" src="resources/js/ajax.js" charset="utf-8"></script>
    <script type="text/javascript" src="resources/js/uiActions.js" charset="utf-8"></script>
    <script type="text/javascript" src="resources/js/filesystemActions.js" charset="utf-8"></script>
    <script type="text/javascript" src="resources/js/uiEvents.js" charset="utf-8"></script>
</body>
</html>