Смайлики с использованием CSS и JavaScript

Question

Я создаю чат в стиле фейсбука, смайлики / смайлики:

<div class="chat">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <div><button id="">Click to Load Emoticons</button></div>
</div>

И это код JavaScript:

var smileys = {
    ':)': '<img src="smilies/smile.gif" border="0" alt="" />',
    ':-)': '<img src="smilies/smile.gif" border="0" alt="" />',
    ':D': '<img src="smilies/smile.gif" border="0" alt="" />',
    ':-(': '<img src="smilies/angry.gif" border="0" alt="" />',
    'angel': '<img src="smilies/angel.gif" border="0" alt="" />',
    'arrow': '<img src="smilies/arrow.gif" border="0" alt="" />',
    'at': '<img src="smilies/at.gif" border="0" alt="" />'
};
$(document).ready(function() {
    $(".chat > textarea").bind("keyup", function(e) {
        $(".chat .preview").html(emoticon($(".chat > textarea").val()));
    });
});

function emoticon(msg) {
  msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br />');

  for (var key in smileys) {
    msg = msg.replace(key, smileys[key]);
  }

  return msg;
}

Мне нужна ситуация, когда кнопка нажимается так же, как Facebook, позволяет загружать все изображения смайликов, а при выборе любого позволяет привязывать ее к полю textarea. Но на данный момент не знаю, как улучшить дальше. Пожалуйста помоги!