Facebook chat letters with Emoticons

index.html

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
<div class="from">
	<label>Type here:</label>
	<textarea>Hello :trollface:</textarea>
</div>
<div class="to">
        <label>Use this:</label>
	<textarea></textarea>
</div>
<div class="preview">
  <label>Preview:</label>
  <div></div>
</div>
<div class="reference">
  <label>Reference:</label>
  <div></div>
</div>

<style>
textarea, .preview div, .reference div { margin: 0; width: 100%; padding: 10px; background: #eee; border: solid 1px #ddd; border-radius: 4px; height: 100px; color: #333; text-shadow: 1px 1px 0 #fff; }
.reference div { overflow: auto; }
.from textarea { background: #fafafa; }
textarea:focus { outline: 0; border: solid 1px #aaa; }
div { margin: 10px; }
textarea, label { font-size: 10pt; font-family: sans-serif; }
label { padding: 5px 0; display: block; }
body { color: #999; }
.preview img, .reference img { width: 16px; height: 16px; background: #fff; display: inline-block; }
</style>

<script>
var Letters = {
  A: '[[399197913893]]',
  B: '[[115345298505025]]',
  C: '[[53872404042]]',
  D: '[[226910642728]]',
  E: '[[140775945956538]]',
  F: '[[136046106447549]]',
  G: '[[119431374760220]]',
  H: '[[205082339544090]]',
  I: '[[432883640525]]',
  J: '[[228315337208110]]',
  K: '[[56926372437]]',
  L: '[[221310038416]]',
  M: '[[161672657237726]]',
  N: '[[203933512990765]]',
  O: '[[116564658357124]]',
  P: '[[64245738440]]',
  Q: '[[196390043757013]]',
  R: '[[111884958838844]]',
  S: '[[136198113087158]]',
  T: '[[142464449131926]]',
  U: '[[172843133886]]',
  V: '[[77189649729]]',
  W: '[[116928513730]]',
  X: '[[108075899233912]]',
  Y: '[[140715832616884]]',
  Z: '[[165724910215]]'
};

var Emoticons = {
  areyoufuckingkiddingme: '[[143220739082110]]',
  cerealguy: '[[170815706323196]]',
  challangaccepted: '[[100002727365206]]',
  derp: '[[224812970902314]]',
  derpina: '[[192644604154319]]',
  dumbbitch: '[[218595638164996]]',
  feellikeasir: '[[168040846586189]]',
  foreveralone: '[[177903015598419]]',
  foreveralonechristmas: '[[125038607580286]]',
  fuckyeah: '[[105387672833401]]',
  lamp: '[[100001256102462]]',
  lolface: '[[168456309878025]]',
  megusta: '[[211782832186415]]',
  mog: '[[142670085793927]]',
  motherofgod: '[[142670085793927]]',
  notbadobama: '[[169919399735055]]',
  no: '[[167359756658519]]',
  noguy: '[[167359756658519]]',
  notbad: '[[notbaad]]',
  okayface: '[[100002752520227]]',
  pokerface: '[[129627277060203]]',
  questionmark: '[[100002727365206]]',
  rageface: '[[FUUUOFFICIAL]]',
  sociallyawkwardpenguin: '[[98438140742]]',
  trollface: '[[171108522930776]]',
  yaoming: '[[218595638164996]]',
};

$(".from textarea").live("keyup", function update() {
  var str = replaceWordsWithTags($(this).val());

  $(".to textarea").val(str);
  $(".preview div").html(tagsToImgs(str));
});

function replaceWordsWithTags(str) {
  // Regex each word in the string
  return str.replace(/[:\w]+/g, function(word) {
    if(word[0] == ":" && word.slice(-1) == ":") {
      var emoticon = word.slice(1,-1).toLowerCase();
      if(emoticon && Emoticons[emoticon]) {
        return Emoticons[emoticon];
      }
    }
    else {
      return word.replace(/[A-Za-z]/g, function(letter) {
	      letter = letter.toUpperCase();
        return Letters[letter] + ' ';
      });
    }
  });
}

// Replace [[tags]] with <img>s
function tagsToImgs(str) {
  return str.replace(/\[\[(.*?)\]\]/g, function(_, id) {
    return "<img src='https://graph.facebook.com/"+id+"/picture' />";
  });
}

$(function() {
  $(".from textarea").trigger('keyup');
 
  var reference = "";
  // Create the reference string
  for(var emoticon in Emoticons) {
    // Make sure we're not grabbing something from the prototype chain.
    if(Emoticons.hasOwnProperty(emoticon)) {
      reference += tagsToImgs(Emoticons[emoticon]);
      reference += " :" + emoticon + ":<br />";
    }
  }
  $(".reference div").html(reference);
});
</script>