<h3>Inserting</h3>
<label>Data Key</label>
<br/>
<input id="key" type="text" />
<br/>
<label>Data Value</label>
<br/>
<input id="value" type="text" />
<button onclick="APP.insert()">Add</button>

<h3>Searching</h3>
<label>Data Key</label>
<br/>
<input id="search-key" type="text" />
<button onclick="APP.fetch()">Search</button>

<div id="output"></div>

// In the following line, you should include the prefixes of implementations you want to test.
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB* objects:
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)

// Let us open our database
var request = indexedDB.open("testdb", 6);
request.onerror = function(e) {
  console.log(e);
};
request.onupgradeneeded = function (e) {
  console.log('database upgraded');
    var db = e.target.result;
  console.log(db);
  // Create an objectStore for this database
  var objectStore = db.createObjectStore('data', {keyPath:'keyPath'});
}
request.onsuccess = function(event) {
  console.log('database open');
  APP.db = event.target.result;
  APP.ready = true;
};

//Create a minimal API for our APP
var APP = {
  db:null,
  ready:false,
  insert:function() {
    if (!APP.ready) {
      console.log('DB is not ready');
      return;
    }
    var key = $('#key').val();
    var value = $('#value').val();
    var transaction = APP.db.transaction('data', 'readwrite');
    var objectStore = transaction.objectStore('data');
    var object = {keyPath:key, value:value};
    console.log('inserting', object);
    var request = objectStore.put(object);
    request.onsuccess = function(e) {
      console.log(e);
    };
  },
  fetch:function() {
    if (!APP.ready) {
      console.log('DB is not ready');
      return;
    }
    var key = $('#search-key').val();
    var transaction = APP.db.transaction('data', 'readwrite');
    var objectStore = transaction.objectStore('data');
    var request = objectStore.get(key);
    request.onsuccess = function(e) {
      console.log(e);
      $('#output').html(JSON.stringify(e.target.result));
    };
  },
  remove:function() {
    
  }
}