$.app = {
  init: function () {
    $("a[id!=dE]").live("click", function () {
      return false
    });
    if (localStorage.getItem("listData") != null) {
      var b = JSON.parse(localStorage.getItem("listData"));
      $.app.pL(b);
      $("#dE").attr("href", "data:application/json;base64," + window.btoa(localStorage.getItem("listData")));
      $("#dS").val(localStorage.getItem("listData"))
    } else b = [];
    $("nav .add").bind("click", function () {
      $.app.aL()
    });
    $("#tabs a").bind("click", function () {
      var a = $(this).attr("href").substring(1);
      $("#tabs li").removeClass("active");
      $(this).parent().addClass("active");
      $("nav").children("div").hide();
      $("nav div#" + a).show();
      $("nav").removeClass().addClass(a)
    });
    $("#eAD").bind("click", function () {
      $.app.eAD()
    });
    $("#rC").bind("click", function () {
      $.app.rCI()
    });
    $(".dI").bind("click", function () {
      try {
        var a = JSON.parse($(this).siblings("textarea").val());
        $(this).attr("id") == "dO" && $.app.eAD();
        $.app.pL(a);
        $.app.sL()
      } catch (c) {
        alert("Your data couldn't be imported :(")
      }
    })
  },
  pL: function (b) {
    for (var a in b) {
      $.app.aL(a, b[a].title, b[a].hue, b[a].rotation);
      for (var c in b[a].items) $.app.aT(b[a].items[c].text, b[a].items[c].checked, a)
    }
  },
  aT: function (b, a, c, f) {
    var d = $.app.gTO(b, a);
    d.children(".check").bind("click", function () {
      d.toggleClass("checked");
      $.app.sL()
    });
    d.children(".move").bind("click", function () {
      $(this).hasClass("moveUp") ? d.prev().before(d) : d.next().after(d);
      $.app.sL()
    });
    d.children(".remove").bind("click", function () {
      d.remove();
      $.app.sL()
    });
    d.bind("keypress", function (g) {
      if (g.keyCode == "13") {
        $.app.aT("", false, c, d);
        $.app.sL()
      }
    });
    typeof f == "undefined" ? $("#" + c + " ul").append(d) : f.after(d);
    d.children(".task").focus();
    d.bind("focusout", function () {
      $.app.sL()
    })
  },
  gTO: function (b, a) {
    return $("<li" + (a ? ' class="checked"' : "") + '><a class="check" href="#"></a><a class="move remove" href="#">×</a><a class="move moveUp" href="#">↑</a><a class="move moveDown" href="#">↓</a><input class="task" type="text" value="' + b + '" /></li>')
  },
  aL: function (b, a, c, f) {
    var d = b == null ? "list-" + parseInt($("#lists li").size() + 1, 10) : b;
    b = b == null ? "New list" : a;
    c = c == null ? Math.round(Math.random() * 360) : c;
    f = f == null ? (Math.round(Math.random()) == 1 ? "" : "-") + Math.random() * 4 : f;
    var g = $.app.gLMO(d, b);
    g.children("a").children(".icon").css({
      background: "hsl(" + c + ", 35%, 55%)"
    });
    $("#lists").append(g);
    var e = $.app.gLO(d, b);
    e.data("hue", c);
    e.data("rotation", f);
    e.children("h1").css({
      "border-bottom-color": "hsl(" + c + ", 35%, 55%)"
    });
    e.children("h1").children("input").css({
      color: "hsl(" + c + ", 35%, 55%)"
    });
    e.children("h1").children("input").bind("keyup", function (h) {
      g.find(".title").text($(this).val());
      if (h.keyCode == "13") {
        $.app.aT("", false, $(this).parent().parent().attr("id"));
        $.app.sL()
      }
      $(this).bind("focusout", function () {
        $.app.sL()
      })
    });
    e.children(".add").bind("click", function () {
      $.app.aT("", false, $(this).parent().attr("id"))
    });
    $.app.pLOT(e);
    e.css({
      transform: "rotate(" + f + "deg)",
      "-webkit-transform": "rotate(" + f + "deg)",
      "-moz-transform": "rotate(" + f + "deg)",
      background: "hsl(" + c + ", 25%, 95%)"
    });
    $("#lists li").removeClass("active");
    g.addClass("active");
    $("section").append(e);
    g.bind("click", function () {
      $("#lists li").removeClass("active");
      g.addClass("active");
      $.app.pLOT(e)
    });
    g.find(".remove").bind("click", function () {
      if (confirm("Are you sure you want to remove this list?") == true) {
        g.remove();
        e.remove();
        $.app.sL()
      }
    });
    e.bind("click", function () {
      $("#lists li").removeClass("active");
      g.addClass("active");
      $.app.pLOT(e)
    })
  },
  gLO: function (b, a) {
    return $('<div class="list" id="' + b + '"><h1><input type="text" value="' + a + '" /></h1><ul></ul><a class="add" href="#">Add a task</a></div>')
  },
  gLMO: function (b, a) {
    return $('<li><a class="' + b + '" href="#"><span class="icon"></span><span class="title">' + a + '</span><span class="remove">×</span></a></li>')
  },
  pLOT: function (b) {
    var a = [];
    $("section div").each(function (c) {
      a[c] = $(this).css("z-index")
    });
    a.sort($.app.sND);
    b.css("z-index", parseInt(a, 10) + 1)
  },
  sL: function () {
    $.listData = {};
    $("section div").each(function () {
      var a = $(this).attr("id"),
          c = $(this).children("h1").children("input").val();
      $.listData[a] = {
        title: c,
        hue: $(this).data("hue"),
        rotation: $(this).data("rotation")
      }
    });
    $("section div").each(function () {
      var a = $(this).attr("id");
      $.listData[a].items = {};
      $(this).children("ul").children("li").each(function (c) {
        var f = $(this).hasClass("checked");
        if ($(this).children(".task").val() != "") $.listData[a].items[c] = {
          text: $(this).children(".task").val(),
          checked: f
        }
      })
    });
    var b = JSON.stringify($.listData);
    localStorage.setItem("listData", b);
    $("#dE").attr("href", "data:application/json;base64," + window.btoa(b));
    $("#dS").val(b)
  },
  eAD: function () {
    if (confirm("Are you sure you want to erase all data?") == true) {
      $("#lists li").remove();
      $("section .list").remove();
      $.app.sL()
    }
  },
  rCI: function () {
    if (confirm("Are you sure you want to remove all completed items?") == true) {
      $("section li.checked").remove();
      $.app.sL()
    }
  },
  sND: function (b, a) {
    return a - b
  }
};
$(window).ready(function () {
  $.app.init()
});

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <title>ToeDoe</title>
    <meta charset="utf-8">
    <meta name="description" content="ToeDoe">
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/attach/typekit.css" />
  </head>
  
  <body>
    <nav class="lPage">
      <ul id="tabs">
        <li class="active"><a href="#lPage">LISTS</a></li>
        <li><a href="#oPage">OPTIONS</a></li>
        <li><a href="#iPage">IMPORT</a></li>
        <li><a href="#ePage">EXPORT</a></li>
      </ul>
      <div id="lPage">
        <h1>LISTS</h1>
        <ul id="lists"></ul>
        <a class="add" href="#">Add a list</a>
      </div>
      <div id="oPage">
        <h1>Options</h1>
        <h2>Erase data</h2>
        <a id="eAD" class="button" href="#">Remove all lists and items</a>
        <h2>Remove checked items</h2>
        <a id="rC" class="button" href="#">Remove all completed items</a>
      </div>
      <div id="iPage">
        <h1>Import</h1>
        <h2>Import data</h2>
        <textarea>
          Paste your data here and press ‘Import data’.

Add data Overwrite data

Export

As a string

As a file

Download file

* { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent }
body { line-height:1 }
ol, ul { list-style:none }
html, body { height:100%; overflow:hidden }
body { background:#222; color:#222 }
a { color:#555; font-weight:bold; text-decoration:none }
nav, section { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box }
nav { width:33% }
nav { background:#fdfaf2; display:block; float:left; height:100%; overflow:auto }
nav div { background:#fdfaf2; display:none; height:100%; padding:0 1em 0 4.5em }
#lPage { display:block }
#tabs { background:#333 url("../img/border.gif") 52px 0 repeat-y; height:100%; overflow:hidden; padding:0 0 0 1em; position:absolute; width:2.5em }
#tabs li { background:#eee2ba; box-shadow:0 0 10px #000; -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; display:block; height:100px; margin:0 0 -0.5em 0; position:relative; width:100px; -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); z-index:40 }
#tabs li:first-child { margin-top:3.8em }
#tabs li:nth-child(2) { background:#cf6855; z-index:30 }
#tabs li:nth-child(3) { background:#b83b50; z-index:20 }
#tabs li:nth-child(4) { background:#683e4f; z-index:10 }
#tabs .active { background:#fdfaf2 !important; z-index:50 !important }
#tabs a { border-bottom:3px solid #777; display:block; color:rgba(0, 0, 0, 0.7); padding-top:0.4em; text-align:center; text-shadow:0 1px 0 rgba(255, 255, 255, 0.3); line-height:2em }
#tabs .active a { border:0 }
nav h1, nav h2 { border-bottom:1px solid #ccc; color:#444; font-size:1.5em; margin:0 0 0.5em 0; padding:1em 0.5em 0.5em 0.5em; text-align:center }
nav h2 { font-size:1.25em; font-weight:normal; padding-left:0; text-align:left }
#lists { border:1px solid #ccc; border-bottom:0 }
#lists a { background:#f0ede5; border-bottom:1px solid #bbb; color:#333; display:block; padding:1em; min-height:1em }
#lists a:hover, #lists .active a { background:#cac8c1 }
.icon { display:block; float:left; margin:0 1em 0 0; height:1em; width:1em }
.add { display:block; padding:1em }
.add:before { content:"+" }
section { background:#ddc3a5; border:1px solid #444; border-top-color:#f0e3d5; float:right; height:100%; position:relative; width:67% }
section div { box-shadow:1px 2px 6px #000; -moz-box-shadow:1px 2px 6px #000; -webkit-box-shadow:1px 2px 6px #000; height:90%; left:5%; overflow:auto; width:90%; position:absolute; top:5%; z-index:1 }
section h1 { border-bottom:2px solid #c02942; padding:1em 0.5em 0.5em 1em }
section h1 input { color:#c02942; font-size:2em; font-weight:normal; width:90% }
section li { border-bottom:1px solid #b6c4f0; display:block; font-weight:bold; padding:0.5em }
section li .task { display:block; margin-left:2em; min-height:1em; width:80% }
input { border:0; background:none; font-size:1em; font-weight:bold; height:2em; line-height:2em; padding:0 }
.checked .task { color:#aaa; text-decoration:line-through }
.check { border:2px solid #999; display:block; float:left; height:0.8em; margin:0.5em 1em 0 0.5em; width:0.8em }
.checked .check { background:#ccc }
.move, .remove { color:#aaa; display:none; float:right; font-size:1.4em; font-weight:bold; line-height:1.5em; width:1em }
#lists .remove { margin:-0.4em -0.5em 0 0 }
section li:hover .move, #lists li:hover .remove { display:block }
section li:first-child .moveUp, section li:last-child .moveDown { display:none }
.move:hover, .remove:hover { color:#666 !important }
textarea { background:#fff; display:block; font-family:sans-serif; font-size:0.8em; height:100px; border:1px solid #aaa; margin:0 0 1em 0; padding:0.5em; width:95% }
a.button { background:#ccc url("/attach/button.png") 0 0 repeat-x; border:1px solid #999; display:block; padding:1em; margin:0 0 1em 0; text-align:center; text-shadow:0 1px 0 #fff }
a.button:hover { color:#222 }
nav, .icon, section, .check, a.button, textarea, #tabs li { border-radius:0.25em; -moz-border-radius:0.25em; -webkit-border-radius:0.25em }
.task { font-family:"good-kitty-1", "good-kitty-2", cursive; }
body, input { font-family: "museo-sans-1", "museo-sans-2", sans-serif; }