<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<%HEAD%>    
<%SCRIPTS%>
<%STYLES%>

<style type="text/css">

body
{
    position: fixed;
    overflow: hidden;
    padding: 0;
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 9pt;
    font-family:"Segoe UI"; 
    line-height: 1.4;
}

#header
{
    text-align: center;
    
    position:absolute; 
    overflow:hidden;
    top: 0px;
    right: 0px;
    left: 0px;
}

#main
{
    border-style: solid;
    
    position:absolute; 
    overflow: hidden;
    right: 0px;
    left: 0px;
}

#tree
{
    height: 100%;
    overflow: auto;
}

.splitter-resizebar
{
    border-style: solid;
}

#files
{
    height: 100%;
    overflow: auto;
}

#footer
{
    text-align: center;
    
    position:absolute; 
    overflow: hidden;    
    right: 0px;
    bottom: 0px; 
    left: 0px; 
}

table
{
    border-spacing: 0px;
    border-collapse: collapse;
}

th
{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-right-width: 1px;
    border-right-style: solid;
}

.colnames th:hover
{
    background-color: #d9ebf9;
}

td
{
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}

span.fancytree-node.fancytree-folder > span.fancytree-icon,
span.fancytree-node.fancytree-folder > span.fancytree-icon:hover,
span.fancytree-node.fancytree-folder.fancytree-expanded > span.fancytree-icon,
span.fancytree-node.fancytree-folder.fancytree-expanded > span.fancytree-icon:hover
{
  background-position: left center;
}

span.fancytree-node.fancytree-folder > span.fancytree-icon,
span.fancytree-node.fancytree-folder > span.fancytree-icon:hover,
span.fancytree-node.fancytree-folder.fancytree-expanded > span.fancytree-icon,
span.fancytree-node.fancytree-folder.fancytree-expanded > span.fancytree-icon:hover,
.i0
{
  background-image: url("data:image/png;base64,<%FOLDERICON%>");
}

.i0, .i1
{
  background-position: 0px 2px;
  padding-left: 20px;
  background-repeat: no-repeat;
}

.i1
{
  background-image: url("data:image/png;base64,<%FILEICON%>");
}

#tablesort thead tr .sort-header {
	background-repeat: no-repeat;
	background-position: center 1px;
	cursor: pointer;
}
#tablesort thead tr .sort-up {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AcTCREv3cWwhQAAAIlJREFUCNddjbEJAjEARX/MTx+rsw1kl0CyizbiEHKgC1g5Q4p0Vi6RIiOcjRBIAlbCca9+jydCCKL3zpRSwwbnnCCJXa1VK6Ue3vtpIxyUUs/eu5allGqMeZG8WWvfOeev934iObfWjimlRazKPcn7GGOWUp4BnGKMHwAQ60UIQQO4Arj8BQD4AZyTMTh+R3EMAAAAAElFTkSuQmCC');
}
#tablesort thead tr .sort-down {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAFCAYAAACXU8ZrAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AcTCRMFNEgb0QAAAHBJREFUCNeNjLENhTAQQ31IV6QjHfukuCKzUP4MgX4TmCVR9mAKOvooORrQp/yubMvPwB+id/DejwAWACGldD798BgRsQBia20DEG/gNxIRy8yrqoZSyq6qgYi2GwQ556wxJvbePznn4/U8MfO31jpfgEclVM9RIsMAAAAASUVORK5CYII=');
}


</style>

<%USERSTYLES%>

</head>
<body>

<%HEADER%>

<div id="main">
    <div id="tree">
        <ul id="treeData" style="display: none;">
<%TREE%>
        </ul>
    </div>
    <div id="files">
    </div>
</div>

<script type="text/javascript">
var filesData = {
<%FILES%>
};
</script>

<%FOOTER%>

<script type="text/javascript">
$(function(){
    $("#tree li").addClass("folder");
    $("#tree").fancytree({
        activate: function(event, data)
        {
            var i, filesLength;
            var node = data.node;
            var table = '<table id="tablesort">';
            table += '<thead>';
            table += '<%TABLEHEADERROW%>';
            table += '</thead>';
            table += '<tbody>';
            var oddRow = true;
            
            var files = filesData["f"+node.key];
            filesLength = files.length;
            for (i = 0; i < filesLength; i++)
            {
                table += "<tr";
                if (!oddRow)
                {
                    table += " class=\"e\"";
                }
                table += ">";
                table += "<td class=\"i" + files[i][0] + "\">";
                table += files[i].slice(1).join("</td><td>");
                table += "</td>";
                table += "</tr>";
                oddRow = !oddRow;
            }
            table += '</tbody>';
            table += "</table>";
            
            $("#files").html(table);
            new Tablesort($('#tablesort')[0]);
        },
        init: function(event, data)
        {
            var node = data.tree.activateKey("1");
            if (node)
            {
                node.setExpanded();
            }
        },
        autoScroll: true,
        scrollParent: $("#tree"),
    });
    $("#main").splitter({
        "orientation": "horizontal",
        "limit": 100
    });        

    if (shouldActivateKey)
    {
        $("body").on("click", "td.i0 a", function() {
                var tree = $("#tree").fancytree("getTree");
                var href = $(this).attr('href');
                if (href)
                {
                    tree.activateKey(href.substring(1));
                }
                return false;
        });
    }

    
});
</script>
  
</body>
</html>