Fire JS Bin - PersonalFinance

$(document).ready(function () {
  function o(a, b, c) {
    function e() {
      g(d.j, d.b);
      $("caption", h).html(o.g[d.b] + " " + d.j);
      c(d)
    }
    function g(r, j) {
      var p = (new Date(r, j, 1)).getDay(),
          k = o.h[j],
          i = $("tbody", h).empty(),
          s = 1,
          u = 0,
          v = $("<tr>");
      j == 1 && (r % 4 == 0 && r % 100 != 0 || r % 400 == 0) && (k = 29);
      for (i.append(v); s <= k;) {
        for (var z = 0; z <= 6; z++) {
          var A = $("<td>");
          v.append(A);
          if (s <= k && (u > 0 || z >= p)) {
            var B = ' class="s ';
            if (f.getMonth() == j && f.getFullYear() == r && f.getDate() == s) B += " today";
            A.append($("<a" + B + '">' + s+++"</a>").data("date", new Date(r + "/" + (j + 1) + "/" + (s - 1))))
          }
        }
        v = $("<tr>");
        i.append(v);
        u++
      }
    }
    var f = new Date;
    a = isNaN(a) || a == null ? f.getMonth() : a;
    b = isNaN(b) || b == null ? f.getFullYear() : b;
    var d = this;
    d.b = a;
    d.j = b;
    for (var l = '<table class="cal"><caption>' + o.g[a] + " " + b + '<thead><tr><th colspan="7"><tr>', m = 0; m <= 6; m++) l += "<th>" + o.q[m];
    l += "<tbody>";
    var h = $(l);
    l = $("<span>⇛</span>").click(function () {
      d.b++;
      if (d.b == 12) {
        d.b = 0;
        d.j++
      }
      e()
    });
    m = $("<span>⇚</span>").click(function () {
      d.b--;
      if (d.b == -1) {
        d.b = 11;
        d.j--
      }
      e()
    });
    $("th:first", h).append(m).append(l);
    g(b, a);
    this.a = h;
    c(d)
  }
  function C(a, b) {
    function c() {
      d.empty();
      e();
      new D(d);
      d.submit(function () {
        var j = new n(a);
        $(":input", d).each(function (p, k) {
          var i = $(k),
              s = i.attr("name"),
              u = i.val();
          j[s] = u;
          i.val("")
        });
        j.save();
        location.reload(true);
        return false
      })
    }
    function e(j) {
      for (var p = 0; p < r.length; p++) {
        var k = r[p],
            i = k.name.replace("_", " ");
        d.append("<label>" + i + "</label>");
        d.append(k.a());
        j && l.append("<th>" + i)
      }
      d.append('<input type="hidden" name="id">');
      d.append('<button class="btn">Submit</button>')
    }
    function g(j) {
      var p =
      $("<tr>");
      $.each(j, function (k, i) {
        typeof i !== "function" && k != "id" && k != "" && p.append("<td>" + w[k].f(i))
      });
      p.append($('<td class="b">✎</td>').click(function () {
        c();
        $.each(j, function (k, i) {
          typeof i !== "function" && $(':input[name="' + k + '"]', d).val(i)
        })
      }));
      p.append($('<td class="b">x</td>').click(function () {
        j.r();
        location.reload(true)
      }));
      m.append(p)
    }
    var f = $("<div>"),
        d = $("<form>"),
        l = $("<tr>"),
        m = $('<table class="l" border="1">').append(l),
        h = $('<a class="add btn">Add New</a>'),
        r = b;
    h.click(c);
    this.elem = f.append(h).append(m);
    e(true);
    f = n.i(a);
    for (h = 0; h < f.length; h++) g(f[h])
  }
  function q(a, b) {
    var c = $('<div class="page s">');
    c.append('<h1 class="s">' + a + "</h1>");
    c.attr("id", a);
    b && c.append(b.elem);
    this.c = $('<li class="s" id="' + a + '_nav">' + a + "</li>");
    this.e = c;
    this.c.click(function () {
      $("#nav .act").removeClass("act");
      $(this).addClass("act");
      $(".page").hide();
      c.show();
      y.attr("class", "");
      y.addClass(a);
      window.location.hash = a
    });
    q.c.append(this.c);
    q.e.append(this.e)
  }
  function E(a) {
    for (var b = [], c = n.i("bill"), e = 0; e < c.length; e++) {
      var g =
      c[e],
          f = new Date(g.startTime);
      if (a >= f) switch (g.timeFrame) {
      case x.n:
        !((a - f) / 6048E5 % 1) && a >= f && b.push(g);
        break;
      case x.l:
        !((a - f) / 12096E5 % 1) && a >= f && b.push(g);
        break;
      case x.m:
        if (a.getDate() == f.getDate() || f.getDate() > o.h[a.getMonth()] && a.getDate() == o.h[a.getMonth()]) b.push(g);
        break
      }
    }
    return b
  }
  function D(a) {
    a.addClass("h s");
    var b = $('<div class="o">');
    $("body").append(b);
    $("#c").append(a);
    a.fadeIn();
    b.fadeIn();
    b.click(function () {
      b.remove();
      a.remove();
      $(".z").remove()
    })
  }
  function F(a) {
    return a
  }
  function I() {
    var a = "",
        b = "",
        c = 0,
        e = "";
    $.each(n.i("category"), function (f, d) {
      var l = 0;
      a += d.name + "|";
      for (var m = 1; m <= 12; m++) {
        var h;
        h = m;
        for (var r = d.id, j = o.h[h - 1], p = 0, k = 0, i = 1; i <= j; i++) {
          var s = E(new Date("2010/" + h + "/" + i));
          k += s.length;
          for (var u = 0; u < s.length; u++) {
            var v = s[u];
            if (v.category == r) p += parseInt(v.amount, 10)
          }
        }
        h = p;
        b += h + ",";
        if (h > l) l = h
      }
      c += l;
      b = b.substr(0, b.length - 1) + "|";
      e += Math.floor(Math.random() * 16777215).toString(16) + ","
    });
    var g = "http://chart.apis.google.com/chart?chxl=0:|" + o.g.join("|") + "&chxr=0,0,11|1,0," + c + "&chxt=x,y&chbh=a&chs=620x420&cht=bvs&chco=" + e.substr(0, e.length - 1) + "&chds=0," + c + ",0," + c + "&chd=t:" + b.substr(0, b.length - 1) + "&chdl=" + a.substr(0, a.length - 1) + "&chtt=Expenses+2010";
    return $("<img>").attr("src", g)
  }
  function G() {
    var a = window.location.hash;
    if (a == "") a = "#Overview";
    $(a + "_nav", q.c).click()
  }
  var y = $("body");
  o.q = ["S", "M", "T", "W", "T", "F", "S"];
  o.g = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  o.h = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

body { font-family:sans-serif; margin-right:100px; font-size:95%; background:#bbb; color:#525252; overflow:hidden }
body>div { position:relative; width:715px; margin:20px auto }
h1 { float:left; height:45px; left:-30px; position:relative; top:-5px; width:715px; z-index:99; padding:5px 0 0 30px }
#nav { list-style-type:none; position:absolute; top:120px; right:-110px; z-index:1; margin:0; padding:0 }
#nav li { float:right; clear:both; cursor:pointer; display:block; width:99px; -moz-transform:rotate(-30deg); -webkit-transform:rotate(-30deg); transform:rotate(-30deg); -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', 154.M11=0.5, M12=0.4, M21=-0.6, M22=1)"; height:28px; margin-bottom:30px; -webkit-transition:all .3s ease-in-out; -moz-transition:all .2s ease-in-out; color:#555; font-weight:700; padding:8px 0 0 55px }
#nav li:hover, #nav li.act { position:relative; left:20px; top:-12px }
#nav li.act { cursor:default }
#nav li, .Overview h1 { background:#84b7df }
#nav li:nth-child(2), .Categories h1 { background:#84ea90 }
#nav li:nth-child(3), .Bills h1 { background:#fec28f }
#nav li:nth-child(4), .Reports h1 { background:#fef78f }
#nav li:nth-child(5), .Options h1 { background:#b786e1 }
.page { position:absolute; top:0; left:0; z-index:2; background:#FFF; border-radius:9px; height:710px; width:685px; padding:15px }
.l td { padding:0 5px }
.o { width:100%; height:100%; background:#000; position:absolute; top:0; left:0; opacity:0.6; display:none; z-index:4 }
.h { top:99px; left:157px; width:400px; height:200px; background:#FFF; position:absolute; z-index:5; border-radius:9px; overflow:auto; padding:20px }
.h h2 { margin:0 }
.s { -webkit-box-shadow:0 2px 9px #333; box-shadow:0 2px 9px #333; -moz-box-shadow:0 2px 9px #333 }
table { clear:both; width:100% }
form { border:1px solid #000; overflow:hidden; padding:9px }
input, select { width:200px; float:left }
label { float:left; width:150px; clear:left; text-algin:right; text-transform:capitalize }
.btn, .Options input { background:#222; display:inline-block; color:#fff; text-decoration:none; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border-bottom:1px solid rgba(0, 0, 0, 0.25); position:relative; cursor:pointer; float:left; clear:both; margin:15px; padding:5px 9px 6px }
.b { font-size:1.5em; cursor:pointer; text-align:center; width:20px }
.btn:hover { background-color:#111; color:#fff }
th { text-transform:capitalize }
.cal { background-color:#FFF; position:relative; width:100% }
.cal .today { background:#CCC; font-weight:700 }
.cal td { width:12%; text-align:center; padding:2px }
.cal a { cursor:pointer; display:block; width:96%; height:60%; padding:20% 2% }
.cal a:hover { background:#95D5ED }
.cal span { float:right; position:relative; right:0; font-size:1.6em; cursor:pointer; width:26px; z-index:2; top:-28px; margin-bottom:-20px }
.z span { top:-13px }
.z caption { top:2px; position:absolute; left:60px }
.cal span:hover { color:#3B7A92 }
.cal span:first-child { float:left; left:0 }
.z { width:200px; position:absolute; z-index:9; border:1px solid #000; padding:5px }
#l { height:30px; width:115px; background:#3B7A92; font-size:2.5em; font-variant:small-caps; letter-spacing:5px; font-weight:700; color:#fff; text-shadow:3px 3px 5px #333; position:absolute; bottom:10px; right:10px; opacity:0.5; padding:2px 5px 18px 10px }
#l span { position:absolute }
#l div { background:#95D5ED; position:absolute; width:52px; height:100%; right:0; top:0; z-index:0 }
form .btn, .add { float: right }