<html>
<head>
<title>Database Tester</title>
<style>
div.Experiment { border: 1px solid black; 
                 padding: 1 1 1 1; }
</style>
<script>

var junkDB;

openJunkDatabase();

function openJunkDatabase()
{
    if (!window.openDatabase)
        return;
        
    try {
        junkDB = openDatabase("JunkDataTest", "1.0", "Repository for junk data to test quota management", 1);
    } catch(err) { alert("Failed to open database - " + err); }
    
    junkDB.transaction(function(tx) {
        tx.executeSql("SELECT COUNT(*) FROM JunkDataTable", [], null, function(tx, error) {
            tx.executeSql("CREATE TABLE JunkDataTable (data TEXT)", []);
        });
    }, function(err) {
        alert("Error - " + err.code);
    });
    
    return junkDB;
}

var totalAdded = 0;

function addData()
{
    if (!junkDB && !openJunkDatabase())
        return;
        
    var length = Number(dataSizeElement().value);
    var data = makeStringOfLength(length);
    
    junkDB.transaction(function(tx) {
        tx.executeSql("INSERT INTO JunkDataTable (data) VALUES (?)", [data], function(tx, result) {
            totalAdded += length;
            updateTotal();
        }, function(tx, err) {
            alert("Failed to insert data into database - (" + err.code + ") " + err.message);
        });
    }, function(err) {
        alert("Failed to open transaction with junk database - (" + err.code + ") " + err.message);
    });
}

function makeStringOfLength(n)
{
    var str = "X";
    while (str.length < n)
        str += ((str.length << 1) < n ? str : makeStringOfLength(n - str.length));

    return str;
}

var _dataSizeElement;
function dataSizeElement()
{
    if (!_dataSizeElement)
        _dataSizeElement = document.getElementById("DataSize");
    
    return _dataSizeElement;
}

function updateDataSize()
{
    var num = Number(dataSizeElement().value);
    document.getElementById("DataSizeDisplay").value = "Data size: " + num; 
}

function updateTotal()
{
    document.getElementById("TotalAdded").innerHTML = "Total characters added: " + totalAdded;
}

</script>
</head>
<body>
<p>This page is a dumping ground for various tests and features for the HTML5 client side database storage spec.</p>
<p>Any manual tests or experiments needing for development of the storage API can be placed here so they are accessible on a live web page</p>

<div class="Experiment">
<input id="DataSize" type="range" min="0" max="1048576" step="1024" value="1024" oninput="updateDataSize();"><br>
<textarea id="DataSizeDisplay" rows="1" cols="15" readonly style="resize:none"></textarea><br>
<textarea id="TotalAdded" rows="1" cols="25" readonly style="resize:none">Total characters added: 0</textarea><br>
<script>updateDataSize();</script>
<button onclick="addData();">Add Data</button>
</div>
</body>
</html>