<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebCrypto API Demo: Asynchronous Execution</title>
    <style>
    .inner
    {
        display: inline-block;
    }
    .hidden
    {
        display: none;
    }
    .loader {
        border: 4px solid #f3f3f3; /* Light grey */
        border-top: 4px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 8px;
        height: 8px;
        animation: spin 2s linear infinite;
        display: inline-block;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    </style>
    <script type="text/javascript" src="common.js"></script>
    <script type="text/javascript">
    var plainText = new Uint8Array(104857600); // 100MB
    var keyData = hexStringToUint8Array("2b7e151628aed2a6abf7158809cf4f3c2b7e151628aed2a6abf7158809cf4f3c");
    var iv = hexStringToUint8Array("000102030405060708090a0b0c0d0e0f");
    var times = 10;
    function webkitAES_CBC()
    {
        document.getElementById("webkitAES_CBC").classList.add("hidden");
        document.getElementById("webkitAES_CBC_loader").classList.remove("hidden");
        document.getElementById("webkitAES_CBC_loader").classList.add("loader");
        crypto.webkitSubtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
            var array = [ ];
            for (var i = 0; i < times; i++)
                array.push(crypto.webkitSubtle.encrypt({name: "aes-cbc", iv: iv}, key, plainText));
            Promise.all(array).then(function() {
                document.getElementById("webkitAES_CBC").classList.remove("hidden");
                document.getElementById("webkitAES_CBC_loader").classList.remove("loader");
                document.getElementById("webkitAES_CBC_loader").classList.add("hidden");
            }, failAndLog);
        }, failAndLog);
    }
    function AES_CBC()
    {
        document.getElementById("AES_CBC").classList.add("hidden");
        document.getElementById("AES_CBC_loader").classList.remove("hidden");
        document.getElementById("AES_CBC_loader").classList.add("loader");
        crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
            var array = [ ];
            for (var i = 0; i < times; i++)
                array.push(crypto.subtle.encrypt({name: "aes-cbc", iv: iv}, key, plainText));
            Promise.all(array).then(function() {
                document.getElementById("AES_CBC").classList.remove("hidden");
                document.getElementById("AES_CBC_loader").classList.remove("loader");
                document.getElementById("AES_CBC_loader").classList.add("hidden");
            }, failAndLog);
        }, failAndLog);
    }
    function worker()
    {
        document.getElementById("worker").classList.add("hidden");
        document.getElementById("worker_loader").classList.remove("hidden");
        document.getElementById("worker_loader").classList.add("loader");
        crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
            var worker = new Worker("asynchronous-execution-worker.js");
            worker.onmessage = function(result) {
                document.getElementById("worker").classList.remove("hidden");
                document.getElementById("worker_loader").classList.remove("loader");
                document.getElementById("worker_loader").classList.add("hidden");
            }
            worker.postMessage(key);
        }, failAndLog);
    }
    </script>
</head>
<body>
    <div>
        <h1>Asynchronous executions</h1>
        <p>
            Click the following buttons to see how asynchronous executions could help to improve responsiveness of a website.
            To magnify the effect, a very large file <b>~100MB</b> will be encrypted <b>TEN</b> times. Be aware of your hardware limits.
        </p>
        <div>
            <p>WebKitSubtleCrypto:</p>
            <button type="button" onclick="webkitAES_CBC()" class="inner">AES-CBC Encryption</button>
            <div id="webkitAES_CBC_loader" class="hidden"></div>
            <div id="webkitAES_CBC" class="inner hidden">Done!</div>
        </div>
        <div>
            <p>SubtleCrypto:</p>
            <button type="button" onclick="AES_CBC()" class="inner">AES-CBC Encryption</button>
            <div id="AES_CBC_loader" class="hidden"></div>
            <div id="AES_CBC" class="inner hidden">Done!</div>
        </div>
        <div>
            <p>WebWorkers:</p>
            <button type="button" onclick="worker()" class="inner">AES-CBC Encryption</button>
            <div id="worker_loader" class="hidden"></div>
            <div id="worker" class="inner hidden">Done!</div>
        </div>
    </div>
</body>
</html>