<style>
/* custom styles for this example */
.demo fieldset {display:block; border:0;}
.demo .short {width:2em;}
#out {border:1px solid #CCC; padding:1em}
</style>

<form id="demo1" class="demo">
    <h6>CacheOffline Instance #1</h6>
    <fieldset>
        <label for="demo1_expires">Data expires after: <input type="text" id="demo1_expires" class="med" value="86400000"> milliseconds
        <input type="button" id="demo1_setExpires" value="Set expires"></label>
    </fieldset>
    <fieldset>
        <label for="demo1_addKey">Key: <input type="text" id="demo1_addKey"></label>
        <label for="demo1_addValue">Value: <input type="text" id="demo1_addValue"></label>
        <input type="button" id="demo1_add" value="Cache value">
    </fieldset>
    <fieldset>
        <label for="demo1_retrieveKey">Key: <input type="text" id="demo1_retrieveKey"></label>
        <input type="button" id="demo1_retrieve" value="Retrieve value">
    </fieldset>
    <fieldset>
        <input type="button" id="demo1_flush" value="Flush cache"></label>
    </fieldset>
</form>

<form id="demo2" class="demo">
    <h6>CacheOffline Instance #2</h6>
    <fieldset>
        <label for="demo2_expires">Data expires after: <input type="text" id="demo2_expires" class="med" value="86400000"> milliseconds
        <input type="button" id="demo2_setExpires" value="Set expires"></label>
    </fieldset>
    <fieldset>
        <label for="demo2_addKey">Key: <input type="text" id="demo2_addKey"></label>
        <label for="demo2_addValue">Value: <input type="text" id="demo2_addValue"></label>
        <input type="button" id="demo2_add" value="Cache value">
    </fieldset>
    <fieldset>
        <label for="demo2_retrieveKey">Key: <input type="text" id="demo2_retrieveKey"></label>
        <input type="button" id="demo2_retrieve" value="Retrieve value">
    </fieldset>
    <fieldset>
        <input type="button" id="demo2_flush" value="Flush cache"></label>
    </fieldset>
</form>
<div id="out">(cache results here)</div>

<script>
YUI().use("node", "datatype-number", "cache-offline" ,function (Y) {
    var cache1 = new Y.CacheOffline({sandbox:"instance1"}),
        out    = Y.one("#out");

    Y.on("click", function(e){
        cache1.set("expires", Y.DataType.Number.parse(Y.one("#demo1_expires").get("value")));
        out.set('text', "Cache 1 \"expires\" set to " + cache1.get("expires") + ".");
    }, "#demo1_setExpires");

    Y.on("click", function(e){
        cache1.add(Y.one("#demo1_addKey").get("value"), Y.one("#demo1_addValue").get("value"));
        var msg = "Value cached. Cache 1 \"size\" is now " + cache1.get("size") + ".";
        out.set('text', msg);
    }, "#demo1_add");

    Y.on("click", function(e){
        var entry = cache1.retrieve(Y.one("#demo1_retrieveKey").get("value")),
            output = entry ? entry.response : "Value not cached.";
        out.set('text', output);
    }, "#demo1_retrieve");

    Y.on("click", function(e){
        cache1.flush();
        out.set('text', "Cache 1 flushed.");
    }, "#demo1_flush");

    var cache2 = new Y.CacheOffline({sandbox:"instance2"});

    Y.on("click", function(e){
        cache2.set("expires", Y.DataType.Number.parse(Y.one("#demo2_expires").get("value")));
        out.set('text', "Cache 2 \"expires\" set to " + cache2.get("expires") + ".");
    }, "#demo2_setExpires");

    Y.on("click", function(e){
        cache2.add(Y.one("#demo2_addKey").get("value"), Y.one("#demo2_addValue").get("value"));
        var msg = "Value cached. Cache 2 \"size\" is now " + cache2.get("size") + ".";
        out.set('text', msg);
    }, "#demo2_add");

    Y.on("click", function(e){
        var entry = cache2.retrieve(Y.one("#demo2_retrieveKey").get("value")),
            output = entry ? entry.response : "Value not cached.";
        out.set('text', output);
    }, "#demo2_retrieve");

    Y.on("click", function(e){
        cache2.flush();
        out.set('text', "Cache 2 flushed.");
    }, "#demo2_flush");
});
</script>
