<!DOCTYPE html>
<html>
<head>

<style type="text/css"><%- inline("./bootstrap.css") %></style>
<style type="text/css">
    .evaluate-item {
        width: 20px;
        height: 20px;
        display: inline-block;
        overflow: hidden;
    }
    .evaluate-item .name {
        display: none;
    }
    .pending {
        background-color:#CC0;
    }
</style>

<script type="text/javascript">
(function() {
    var hash_func = <%- inline("./hash/" + hash_name + ".js") %>
    var decoder_func = <%- inline("./decode/" + decoder_name + ".js") %>

    <%- inline("./localforage.js") %>
    <%- inline("./loader.js") %>

    var loader = new Loader({
        "version": "<%- version %>",
        "manifest_location": "<%- manifest_location %>",
        "prefix": "spa",
        "hash_name": "<%- hash_name %>",
        "hash_func": hash_func,
        "randomize_urls": <%- randomize_urls %>,
        "decoder_name": "<%- decoder_name %>",
        "decoder_func": decoder_func,
    });
    window.loader = loader;

    <%- inline("./bootstrap.js") %>

<% if(passcode_required) { %>
    var oldEvaluationStarted = loader.onEvaluationStarted;
    loader.onEvaluationStarted = function(manifest) {
        if (loader.options.password) {
            if(oldEvaluationStarted) {
                return oldEvaluationStarted(manifest);
            } else {
                return true;
            }
        } else {
            malfunction.stop();
            $("#loader .page").addClass("hide");
            $("#page-pass").removeClass("hide");
            var form = $("#page-pass form");
            form.bind("submit", function(event) {
                loader.options.password = this.elements["passcode"].value;
                loader.load();
                event.preventDefault();
                return false;
            });
            return false;
        }
    }
<% } %>

    window.onload = function() 
    {
        loader.load();
    }

    window.forage_time = function() {
        var c = 0; 
        for(var i = 0; i < loader._stats.evaluate_module_loaded_from_db.length; i++) {
            c += loader._stats.evaluate_module_loaded_from_db[i] - loader._stats.evaluate_module_start[i];
        }
        return c;
    }

    window.evaluation_time = function() {
        var c = 0; 
        for(var i = 0; i<loader._stats.evaluate_module_loaded_from_db.length; i++) {
            c += loader._stats.evaluate_module_start[i+1] - loader._stats.evaluate_module_loaded_from_db[i];
        }
        return c;
    }
})();
</script>

</head>

<body>

<div class="hide">
    <div id="evaluate-item-template" class="evaluate-item">
        <span class="name"></span>
        <span class="state pending">___</span>
        <span class="state success hide">___</span>
        <span class="state error hide">___</span>
    </div>
    <div id="download-item-template" class="download-item">
        <span class="name"></span>
        <span class="state pending">WAITING</span>
        <span class="state progress hide">
            <span class="bytes-loaded"></span>
            <span class="bytes-total"></span>
        </span>
        <span class="state success hide">SUCCESS</span>
        <span class="state error hide">ERROR</span>
    </div>
</div>

<div id="loader">
    <div id="page-init" class="page">
        <h1>Initializing</h1>
    </div>

    <div id="page-pass" class="page hide">
        <h1>Passcode required</h1> 
        <form>
            <input name="passcode" type="password" autofocus>
            <input type="submit" value="enter">
        </form>
    </div>

    <div id="page-load" class="page hide">
        <h1>Running...</h1> 
        <div class="total-progress">
            <span class="modules-loaded"></span>
            <span class="modules-total"></span>
        </div>
        <div class="items"></div>
    </div>

    <div id="page-update" class="page hide">
        <h1>Downloading...</h1>    
        <div class="total-progress">
            <span class="modules-loaded"></span>
            <span class="modules-total"></span>
            <span class="bytes-loaded"></span>
            <span class="bytes-total"></span>
        </div>
        <div class="items"></div>
    </div>

    <div id="page-fail" class="page hide">
        <h1>Malfunction!</h1>
        <div class="error"></div>
        <div class="buttons">
            <button id="btn-retry">Retry</button>
            <button id="btn-force">Force Update</button>
        </div>
    </div>
</div>

</body>
</html>
