max-mapper/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
  <title>Noun thingy!</title>
  <script src="http://relaxed.tv/script/lib/jquery-1.6.1.min.js" type="text/javascript"></script>
  <script src="http://relaxed.tv/script/lib/jquery.mustache.js" type="text/javascript"></script>
  <script src="http://relaxed.tv/script/lib/underscore.js" type="text/javascript"></script>
  <style type="text/css">
    .loading { background-image: url('http://fbi.gov/spinner.gif') }

    body {
      margin: 0px 10px }

    h1 {
      font: 14px Helvetica Neue;
      font-size: 36px;
      font-weight: 300 }

    input {
      -webkit-appearance: none;
      -webkit-box-shadow: rgba(0, 0, 0, 0.207031) 0px 2px 2px 0px inset;
      -webkit-rtl-ordering: logical;
      -webkit-user-select: text;
      background-attachment: scroll;
      background-clip: border-box;
      background-color: #F8F7F3;
      background-image: none;
      background-origin: padding-box;
      border-bottom-color: rgba(255, 255, 255, 0.988281);
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      border-left-color: black;
      border-left-style: none;
      border-left-width: 0px;
      border-right-color: black;
      border-right-style: none;
      border-right-width: 0px;
      border-top-color: black;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border-top-style: none;
      border-top-width: 0px;
      box-shadow: rgba(0, 0, 0, 0.207031) 0px 2px 2px 0px inset;
      color: black;
      cursor: auto;
      display: block;
      float: left;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 22px;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      height: 27px;
      left: auto;
      letter-spacing: normal;
      line-height: 20px;
      margin-bottom: 15px;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 0px;
      outline-color: black;
      outline-style: none;
      outline-width: 0px;
      padding-bottom: 5px;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 8px;
      position: static;
      text-align: -webkit-auto;
      text-indent: 0px;
      text-shadow: none;
      text-transform: none;
      vertical-align: baseline;
      visibility: visible;
      width: 96%;
      word-spacing: 0px;}
  </style>

  <script type='text/javascript'>
    var app = {cache: {}};
    $(function() {
      function lookupIcon(word) {
        var params = {
          resource: "http://thenounproject.com/search",
          q: word
        }
        var ajaxOpts = {
          url: "http://jsonpify.heroku.com?" + $.param(params),
          dataType: "jsonp"
        }
        return cachedRequest(ajaxOpts);
      }

      function cachedRequest(opts) {
        var dfd = $.Deferred();
        var key = JSON.stringify(opts);
        if (app.cache[key]) {
          dfd.resolve(jQuery.extend(true, {}, app.cache[key]));
        } else {
          var ajaxOpts = $.extend({}, opts);
          $.ajax(ajaxOpts).then(function(data) {
            app.cache[key] = data;
            dfd.resolve(data);
          })
        }
        return dfd.promise();
      }

      var input = $("form input[name='description']");

      var renderIcons = _.throttle(function() {
          input.addClass('loading');
          app.cache.words = {};
          var words = input.val().replace(/[^\w\s]|_/g, "").replace(/\s+/g, ' ').split(' ');
          var requests = _.map(words, function(word) {
            var request = lookupIcon(word);
            request.then(function(resp) {
              var matches = _.map(_.keys(resp.svg), function(match) {
                return {
                  noun: match.toLowerCase(),
                  svg: resp.svg[match]
                };
              })
              matches = _.select(matches, function(match){ return word === match.noun });
              _.each(matches, function(match) {
                app.cache.words[match.noun] = match;
              })
              var nounsHTML = $.mustache($('.nouns').html(), {nouns: _.map(app.cache.words, function(word) {return word})});
              $('.nounContainer').html(nounsHTML);
            })
            return request.promise();
          })
          $.when.apply(null, requests).then(function() { input.removeClass('loading') })
        }, 1000);

      input.keyup(renderIcons);
    })
  </script>
</head>
<body>
  <div>
    <form>
      <h1>Enter some nouns! (like pizza, dog or milk)</h1>
      <input name="description" value=""></input>
      <div class="nounContainer"></div>
    </form>
  </div>

   <script type="text/mustache" class="nouns">
     {{#nouns}}
       <a href="http://thenounproject.com/noun/{{noun}}/">{{{svg}}}</a>
     {{/nouns}}
   </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
	<title>Noun thingy!</title>
	<script src="http://relaxed.tv/script/lib/jquery-1.6.1.min.js" type="text/javascript"></script>
	<script src="http://relaxed.tv/script/lib/jquery.mustache.js" type="text/javascript"></script>
	<script src="http://relaxed.tv/script/lib/underscore.js" type="text/javascript"></script>
	<style type="text/css">
	.loading { background-image: url('http://fbi.gov/spinner.gif') }

	body {
	margin: 0px 10px }

	h1 {
	font: 14px Helvetica Neue;
	font-size: 36px;
	font-weight: 300 }

	input {
	-webkit-appearance: none;
	-webkit-box-shadow: rgba(0, 0, 0, 0.207031) 0px 2px 2px 0px inset;
	-webkit-rtl-ordering: logical;
	-webkit-user-select: text;
	background-attachment: scroll;
	background-clip: border-box;
	background-color: #F8F7F3;
	background-image: none;
	background-origin: padding-box;
	border-bottom-color: rgba(255, 255, 255, 0.988281);
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: black;
	border-left-style: none;
	border-left-width: 0px;
	border-right-color: black;
	border-right-style: none;
	border-right-width: 0px;
	border-top-color: black;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-top-style: none;
	border-top-width: 0px;
	box-shadow: rgba(0, 0, 0, 0.207031) 0px 2px 2px 0px inset;
	color: black;
	cursor: auto;
	display: block;
	float: left;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 22px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	height: 27px;
	left: auto;
	letter-spacing: normal;
	line-height: 20px;
	margin-bottom: 15px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	outline-color: black;
	outline-style: none;
	outline-width: 0px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 8px;
	position: static;
	text-align: -webkit-auto;
	text-indent: 0px;
	text-shadow: none;
	text-transform: none;
	vertical-align: baseline;
	visibility: visible;
	width: 96%;
	word-spacing: 0px;}
	</style>

	<script type='text/javascript'>
	var app = {cache: {}};
	$(function() {
	function lookupIcon(word) {
	var params = {
	resource: "http://thenounproject.com/search",
	q: word
	}
	var ajaxOpts = {
	url: "http://jsonpify.heroku.com?" + $.param(params),
	dataType: "jsonp"
	}
	return cachedRequest(ajaxOpts);
	}

	function cachedRequest(opts) {
	var dfd = $.Deferred();
	var key = JSON.stringify(opts);
	if (app.cache[key]) {
	dfd.resolve(jQuery.extend(true, {}, app.cache[key]));
	} else {
	var ajaxOpts = $.extend({}, opts);
	$.ajax(ajaxOpts).then(function(data) {
	app.cache[key] = data;
	dfd.resolve(data);
	})
	}
	return dfd.promise();
	}

	var input = $("form input[name='description']");

	var renderIcons = _.throttle(function() {
	input.addClass('loading');
	app.cache.words = {};
	var words = input.val().replace(/[^\w\s]\|_/g, "").replace(/\s+/g, ' ').split(' ');
	var requests = _.map(words, function(word) {
	var request = lookupIcon(word);
	request.then(function(resp) {
	var matches = _.map(_.keys(resp.svg), function(match) {
	return {
	noun: match.toLowerCase(),
	svg: resp.svg[match]
	};
	})
	matches = _.select(matches, function(match){ return word === match.noun });
	_.each(matches, function(match) {
	app.cache.words[match.noun] = match;
	})
	var nounsHTML = $.mustache($('.nouns').html(), {nouns: _.map(app.cache.words, function(word) {return word})});
	$('.nounContainer').html(nounsHTML);
	})
	return request.promise();
	})
	$.when.apply(null, requests).then(function() { input.removeClass('loading') })
	}, 1000);

	input.keyup(renderIcons);
	})
	</script>
	</head>
	<body>
	<div>
	<form>
	<h1>Enter some nouns! (like pizza, dog or milk)</h1>
	<input name="description" value=""></input>
	<div class="nounContainer"></div>
	</form>
	</div>

	<script type="text/mustache" class="nouns">
	{{#nouns}}
	<a href="http://thenounproject.com/noun/{{noun}}/">{{{svg}}}</a>
	{{/nouns}}
	</script>
	</body>
	</html>