options.html

<html>
  <head>
    <title>Wandering Mind Options</title>
    <script src="jquery.js"></script>
    <script src="cache.js"></script>
    <script src="underscore.js"></script>
    <script src="wandermind.js"></script>
    <script>
      $(document).ready(function() {
        $("#blacklist").val(blacklist.open())

        _.each(modes, function(mode) {
          $("#" + mode + "-default").val(defaultTime.open(mode))
        })

        $("#whitelist").val(whitelist.open())

        $("#save").click(function(e) {
          blacklist.save($("#blacklist").val())

          _.each(modes, function(mode) {
            defaultTime.save(mode, $("#" + mode + "-default").val())
          })

          whitelist.save($("#whitelist").val())
          
          cache.setItem("whitelist", whitelist)
        })
      })
    </script>
  </head>
  <body>
    <h1>Wandering Mind Options</h1>
    Ban list:<br>
        <textarea rows="15" cols="30" id="blacklist"></textarea><br><br>
        White list:<br>
        <textarea rows="15" cols="30" id="whitelist"></textarea><br><br>
        <label for="work-default">Work:</label>
        <input id="work-default" type="text" size="2" />
        <span>minutes</span>
        &nbsp;&nbsp;
        <label for="break-default">Break:</label>
        <input id="break-default" type="text" size="2" />
        <span>minutes</span><br><br>
      <button id="save">Save</button>
  </body>
</html>