Fire JS Bin - GitHubBrowser

$(function () {
  u = "https://github.com/api/v2/json/FFF?callback=?";
  tr = false;
  L = $("#load");
  grav = localStorage.getItem("grav");
  grav = grav ? JSON.parse(grav) : {};
  fav = localStorage.getItem("fav");
  fav = fav ? JSON.parse(fav) : {};
  for (f in fav) {
    $("#f ul").append("<li>" + fav[f].html + "</li>")
  }
  $("form").submit(function () {
    return false
  });
  var d = function (j, k) {
    $("#f ul").append("<li>" + k + "</li>");
    $("#f ul li:last a:last").remove();
    k = $("#f ul li:last").append('<a href="#rfav" rel="' + j + '" class="d b">Remove from Bookmarks</a>').html();
    fav[j] = {
      html: k
    };
    localStorage.setItem("fav", JSON.stringify(fav))
  };
  var g = function () {
    delete fav[$(this).attr("rel")];
    localStorage.setItem("fav", JSON.stringify(fav));
    $(this).parent().remove();
    return false
  };
  var e = function () {
    L.show();
    $("#branches").remove();
    if (!$("#u select").val()) {
      $("#u h2,#u h3,#u ul li").remove();
      L.hide();
      return
    }
    $("#u form p").append('<select id="branches"><option>master</option></select>');
    $("#u h2,#u h3").remove();
    $("#u ul").before("<h3>" + unescape($("#u select option:selected").attr("title")) + "</h3>");
    $("#branches").change(a);
    $.ajax({
      url: u.replace("FFF", "repos/show/" + $("#u input").val() + "/" + $("#u select").val() + "/branches"),
      dataType: "json",
      success: function (j) {
        for (i in j.branches) {
          if (i != "master") {
            $("#branches").append("<option>" + i + "</option>")
          }
        }
      }
    });
    a()
  };
  var a = function () {
    $("#u ul").empty();
    L.show();
    $.ajax({
      url: u.replace("FFF", "commits/list/" + $("#u input").val() + "/" + $("#u select").val() + "/" + $("#branches").val()),
      dataType: "json",
      success: function (j) {
        for (i in j.commits) {
          dc = j.commits[i];
          src = "http://www.gravatar.com/avatar/?s=64&d=mm";
          if (dc.author.login in grav && grav[dc.author.login]) {
            src = "http://www.gravatar.com/avatar/" + grav[dc.author.login] + "?s=64&d=mm"
          } else {
            grav[dc.author.login] = "";
            $.ajax({
              url: u.replace("FFF", "user/show/" + dc.author.login),
              dataType: "json",
              success: function (k) {
                grav[k.user.login] = k.user.gravatar_id;
                $("#u ul ." + k.user.login).attr("src", "http://www.gravatar.com/avatar/" + k.user.gravatar_id + "?s=64&d=mm");
                localStorage.setItem("grav", JSON.stringify(grav))
              }
            })
          }
          ul = dc.author.name;
          if (dc.author.login) {
            ul = '<a href="#u" rel="' + dc.author.login + '">' + dc.author.name + "</a> (author)"
          }
          ulc = "";
          if (dc.author.email != dc.committer.email) {
            ulc = "<br>" + dc.committer.name;
            if (dc.committer.login) {
              ulc = '<br><a href="#u" rel="' + dc.committer.login + '">' + dc.committer.name + "</a> (committer)"
            }
          }
          cd = new Date((dc.committed_date || "").replace(/T.+$/g, "").replace(/-/g, "/"));
          c = '<li>              <div class="h">                <pre><a href="' + dc.url + '">' + dc.message + '</a> </pre>                <div class="g"><img src="' + src + '" alt="" width="30" height="30" class="' + dc.author.login + '"></div>                <div class="n">' + ul + ulc + '</div>                <div class="d"><abbr title="' + cd + '"> ' + cd.toDateString() + '</abbr></div>              </div>              <div class="m">                commit  <a href="' + dc.url + '" class="c">' + dc.id.substr(0, 20) + '</a><br>                tree    <a href="http://github.com/' + $("#u input").val() + "/" + $("#u select").val() + "/tree/" + dc.id + '">' + dc.tree.substr(0, 20) + "</a><br>";
          for (p in dc.parents) {
            c += 'parent  <a href="http://github.com/' + $("#u input").val() + "/" + $("#u select").val() + "/commit/" + dc.parents[p].id + '">' + dc.parents[p].id.substr(0, 20) + "</a><br>"
          }
          c += "</div></li>";
          $("#u ul").append(c);
          L.hide()
        }
      }
    })
  };
  $("#u input").change(function () {
    L.show();
    $("#u ul").empty();
    $("#u h2,#u h3").remove();
    $("#u select").remove();
    $.ajax({
      url: u.replace("FFF", "repos/show/" + $(this).val()),
      dataType: "json",
      success: function (j) {
        localStorage.setItem("user", $("#u input").val());
        h = '<select><option value="">Select a repository</option>';
        for (i in j.repositories) {
          di = j.repositories[i];
          h += '<option val="' + escape(di.name) + '" title="' + escape(di.description) + '">' + escape(di.name) + "</option>"
        }
        h += "</select>";
        $("#u form p").append(h);
        $("#u ul").empty();
        if (tr) {
          $("#u select").val(tr);
          e();
          tr = false
        } else {
          L.hide()
        }
        $("#u select").change(e)
      }
    })
  });
  $("#s form").submit(function () {
    $("#s ul").empty();
    L.show();
    $.ajax({
      url: u.replace("FFF", "repos/search/" + escape($("input:first", this).val())),
      dataType: "json",
      success: function (j) {
        for (i in j.repositories) {
          di = j.repositories[i];
          if (di.username + "/" + di.name in fav) {
            b = ""
          } else {
            b = '<a href="#addfav" rel="' + di.username + "/" + di.name + '" class="d b">Bookmark this repository</a>'
          }
          $("#s ul").append('<li><h4><a href="#u" rel="repo" class="' + di.username + '">' + di.name + "</a></h4><pre>" + di.description + " (" + di.username + ")</pre> " + b + "</li>")
        }
        L.hide()
      }
    });
    return false
  });
  $("a[rel=repo]").live("click", function () {
    tr = $(this).text();
    $("#u input").val($(this).attr("class"));
    $("#u ul").empty();
    $("#u input").change();
    $('nav a[href="#u"]').click();
    return false
  });
  $("#u ul a[href=#u]").live("click", function () {
    $("#u input").val($(this).attr("rel"));
    $("#u ul").empty();
    $("#u input").change();
    $('nav a[href="#u"]').click();
    return false
  });
  $('li a[href="#addfav"]').live("click", function () {
    t = $(this);
    d($(this).attr("rel"), $(this).parent().html());
    $(this).remove();
    return false
  });
  $('li a[href="#rfav"]').live("click", g);
  if (localStorage.getItem("user")) {
    $("#u input").val(localStorage.getItem("user"))
  }
  $("#u input").change();
  $("nav a").each(function () {
    $(this).click(function () {
      $("section").hide();
      $("nav a").removeClass("selected");
      $(this).addClass("selected");
      $($(this).attr("href")).show();
      return false
    })
  });
  $("nav a:first").click()
});

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <title>GitHub Browser</title>
    <meta charset="utf-8">
    <meta name="description" content="Browse github account">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  
  <body>
    <article>
      <header>
        <h1>GitHub Commit Browser</h1>
        <p>Browse repository commit history via the GitHub API…</p>
        <nav>
          <ul>
            <li><a href="#s" class="selected">Search</a></li>
            <li><a href="#u">User Lookup</a></li>
            <li><a href="#f">Bookmarks</a></li>
            <li id="load">Loading…</li>
          </ul>
        </nav>
      </header>
      <section id="s">
        <form>
          <p>
            Search for
            <input type="text" placeholder="Search Term">
            <input type="submit" value="go">
          </p>
        </form>
        <ul></ul>
      </section>
      <section id="u">
        <form><p>View user <input type="text" placeholder="GitHub User"></p></form>
        <ul></ul>
      </section>
      <section id="f"><ul></ul></section>
    </article>
  </body>

</html>

body { line-height:1; font:14px normal Helvetica, Arial, sans-serif; padding:10px; width:950px; margin:0 auto; position:relative; }
a { text-decoration:none; color:#000; }
a:visited { color:#603; }
a:hover { text-decoration:underline; }
nav { display:block; background:#d9d9d9; border:1px solid #DDD; border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; height:30px; margin:10px 0 0; padding:6px 10px; border-bottom:1px solid #DDD; background-image:-moz-linear-gradient(top, #eee, #ddd); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #eee), color-stop(1, #ddd)); }
nav li { float:left; }
nav li a { color:#666; display:block; height:18px; padding:5px 10px; margin-right:10px; outline:0; text-shadow:rgba(255, 255, 255, 0.699219) 1px 1px 0; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; }
nav li a:hover { color:#333; background-color:#ccc; text-decoration:none; }
nav li a.selected { background-color:#fafafa; font-weight:bold; border:1px solid #ccc; border-bottom-color:#EEE; border-right-color:#EEE; color:#333; position:relative; top:-1px; }
#load { float:right; font-size:12px; color:#666; padding:5px 5px 0 0; display:none; }
section { clear:left; }
section form { border:1px solid #ddd; border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px; border-bottom:1px solid #D2D2D2; border-top:1px solid #FAFAFA; padding:5px 10px; background-color:#f0f0f0; font-size:12px; }
ul { list-style:none; margin:0; padding:0; }
h1 { font-weight:normal; margin:0; padding:10px 5px; }
p { margin:0; padding:5px 5px; }
section p { padding:0; }
section li { border:1px solid #BEDCE7; border-radius:2px; background-color:#EAF2F5; margin:0; padding:5px 10px 10px; min-height:64px; clear:both; margin:10px 0 0 0; background-image:-moz-linear-gradient(top, #EcF4F7, #EAF2F5); background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ecf4f7), color-stop(1, #e1f2f1)); }
section li:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
h4 { margin:0; padding:5px 0; }
.h { float:left; width:70%; font-size:14px; line-height:1.5; }
.g { border:1px solid #d0d0d0; padding:2px; background-color:white; float:left; margin-right:.7em; width:30px; height:30px; }
.m { float:right; width:18em; padding:.8em 0 .8em 1.2em; border-left:1px solid #bedce7; color:#808080; font:.7em normal Monaco, "Courier New", monospace; line-height:1.5em; }
.m a { color:#4183C4; }
pre, code { font:12px Monaco, "Courier New", monospace; margin:0; padding:5px 0 10px; white-space:pre-wrap; word-wrap:break-word; }
.h pre a { color:#000; }
.d { margin-left:45px; }
.n, .d { color:#888; font-size:12px; line-height:1.5em; }
.n a { color:#333; font-size:13px; }
.b { margin-left:0; }
#u img { float:left; margin-right:10px; }
input, select { border:1px solid #ccc; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; font-size:12px; padding:3px 5px 4px; margin:0 4px; }

@media screen and /*!*/ /*!*/(max-width:600px) {
  body { font-size:14px; padding:5px; width:460px; }
  h1 { font-size:22px; padding:5px; }
  header p { display:none; }
  input, select { margin-bottom:10px; font-size:1em; }
  .h { width:50%; }
  #load { position:absolute; top:18px; right:10px; color:#666; }
}

@media screen and /*!*/ /*!*/(max-width:320px) {
  body { width:300px; font-size:12px;   }
  .h { width:auto; float:none; }
  .m { float:none; clear:left; padding:.8em 0 .8em 4.8em; border-left:0; font-size:.8em; }
  select { display: block; }
}