stephenhandley/home.html

## home.html
<html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function (evt) {
      var bookmarks = {
        sites: {
          'g+': 'https://plus.google.com',
          'hacker news': 'http://news.ycombinator.com',
          techcrunch: 'http://techcrunch.com',
          pitchfork: 'http://pitchfork.com',
          nytimes: 'http://nytimes.com'
        },
        docs: {
          jquery: {
            jquery: 'http://api.jquery.com/'
          },
          mongo: {
            geospatial: 'http://www.mongodb.org/display/DOCS/Geospatial+Indexing',
            'geospatial haystack indexing': 'http://www.mongodb.org/display/DOCS/Geospatial+Haystack+Indexing'
          },
          redis: {
            commands: 'http://redis.io/commands',
            resque: 'https://github.com/defunkt/resque'
          },
          testing: {
            capybara: 'https://github.com/jnicklas/capybara',
            machinist: 'https://github.com/notahat/machinist/',
            faker: 'http://rubydoc.info/github/stympy/faker/master/frames'
          },
          etc: {
            'mozilla secure coding': 'https://wiki.mozilla.org/WebAppSec/Secure_Coding_Guidelines'
          }
        }
      }


      function display(container, obj) {
        $.each(obj, function(k,v) {
          if ((typeof v) == 'string') {
            var bookmark = $('<a>').attr({class: 'bookmark ' + k, href: v}).text(k)
            container.append(bookmark)

          } else {
            var group = $('<div>').attr({class: 'group ' + k})
            var title = $('<div>').attr({class: 'name'}).text(k)
            var bookmarks = display($('<div>').attr({class: 'bookmarks'}), v)
            group.append(title).append(bookmarks)
            container.append(group)
          }
        });
        return container;
      }

      $('body').append(display($('<div>').attr({class: 'bookmarks root'}), bookmarks));

      $('.group .name').live('click', function(evt) {
        $(this).siblings('.bookmarks').toggle();
      });

    });

  </script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      padding: 25px;
    }

    a {
      display: block;
      text-decoration: none;
    }
    .group {
      margin-bottom: 10px;
    }

    .group .group {
      margin-left: 10px;
    }

    .group .bookmarks {
      margin-left: 5px;
    }

    .group .name {
      font-weight: bold;
      cursor: pointer;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;
    }

    .root > .group {
      display: inline-block;
      vertical-align: top;
      margin-right: 20px;
    }

  </style>
</head>
<body>
</body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function (evt) {
	var bookmarks = {
	sites: {
	'g+': 'https://plus.google.com',
	'hacker news': 'http://news.ycombinator.com',
	techcrunch: 'http://techcrunch.com',
	pitchfork: 'http://pitchfork.com',
	nytimes: 'http://nytimes.com'
	},
	docs: {
	jquery: {
	jquery: 'http://api.jquery.com/'
	},
	mongo: {
	geospatial: 'http://www.mongodb.org/display/DOCS/Geospatial+Indexing',
	'geospatial haystack indexing': 'http://www.mongodb.org/display/DOCS/Geospatial+Haystack+Indexing'
	},
	redis: {
	commands: 'http://redis.io/commands',
	resque: 'https://github.com/defunkt/resque'
	},
	testing: {
	capybara: 'https://github.com/jnicklas/capybara',
	machinist: 'https://github.com/notahat/machinist/',
	faker: 'http://rubydoc.info/github/stympy/faker/master/frames'
	},
	etc: {
	'mozilla secure coding': 'https://wiki.mozilla.org/WebAppSec/Secure_Coding_Guidelines'
	}
	}
	}


	function display(container, obj) {
	$.each(obj, function(k,v) {
	if ((typeof v) == 'string') {
	var bookmark = $('<a>').attr({class: 'bookmark ' + k, href: v}).text(k)
	container.append(bookmark)

	} else {
	var group = $('<div>').attr({class: 'group ' + k})
	var title = $('<div>').attr({class: 'name'}).text(k)
	var bookmarks = display($('<div>').attr({class: 'bookmarks'}), v)
	group.append(title).append(bookmarks)
	container.append(group)
	}
	});
	return container;
	}

	$('body').append(display($('<div>').attr({class: 'bookmarks root'}), bookmarks));

	$('.group .name').live('click', function(evt) {
	$(this).siblings('.bookmarks').toggle();
	});

	});

	</script>
	<style>
	* {
	padding: 0;
	margin: 0;
	}

	body {
	padding: 25px;
	}

	a {
	display: block;
	text-decoration: none;
	}
	.group {
	margin-bottom: 10px;
	}

	.group .group {
	margin-left: 10px;
	}

	.group .bookmarks {
	margin-left: 5px;
	}

	.group .name {
	font-weight: bold;
	cursor: pointer;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	}

	.root > .group {
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
	}

	</style>
	</head>
	<body>
	</body>
	</html>