
function generate_greeting_node(greeting) {
  return DIV({
    'id': 'greeting'}, DIV({'id': 'greeting-text', 'onclick': function() {
        var oldTopic = getElement('greeting').childNodes[0].innerHTML;
        replaceChildNodes(
          'greeting',
          INPUT({'id': 'greeting-text', 'type': 'text', 'value': oldTopic, 'onblur': function(e) {
            send_data('topic', this.value);
            swapDOM('greeting', generate_greeting_node(this.value));
          }}));
       getElement('greeting-text').focus();
     }}, greeting));
}


function generate_user_dom(username) {
  return DIV({
    'class': 'user',
    'id': 'user-' + username}, username);
}

transformers['topic'] = function(topic) {
  swapDOM('greeting', generate_greeting_node(topic));
}

transformers['alert'] = function(text) {
  alert(text);
}

transformers['initial-render'] = function(args) {
  var greeting = args[0];
  var username = args[1];
  var initial_users = args[2];
  replaceChildNodes(
    'contents',
    generate_greeting_node(greeting),
    DIV({
      'id': 'userlist'},
      BUTTON({
	'id': 'change-username',
        'value': username,
	'onclick': function() {

        var new_nick = prompt('New nick');
        send_data(
	  'nick', {
            'old-nick': this.value,
            'new-nick': new_nick});
      }}, username)),
    DIV({'id': 'conversation'}),
    INPUT({
      'type': 'text',
      'id': 'input-box',
      onkeyup: function(e) {
        if (e.keyCode == 13) {
	  send_data('done', this.value);
	  this.value = '';
        } else {
          send_data('chat', this.value);
        }
      }}));
  for (var i = 0; i < initial_users.length; i++) {
    appendChildNodes('userlist', generate_user_dom(initial_users[i]));
  }
}

function send_system_message(text) {
  appendChildNodes('conversation', DIV({'class': 'system-message'}, text));
}

transformers['new-user'] = function(username) {
  appendChildNodes(
    'userlist',
    generate_user_dom(username));
  send_system_message(username + ' has joined.');
}

transformers['rename-user'] = function(args) {
  var userNode = getElement('user-' + args['old-nick']);
  if (userNode != null) {
    send_system_message(args['old-nick'] + ' is now known as ' + args['new-nick']);
    userNode.innerHTML = args['new-nick'];
    userNode.id = args['new-nick'];
  } else {
    getElement('change-username').value = args['new-nick'];
    getElement('change-username').innerHTML = args['new-nick'];
  }
}

transformers['del-user'] = function(username) {
  removeElement('user-' + username);
  send_system_message(username + ' has left.');
}

transformers['chat'] = function(args) {
  var username = args[0];
  var chat = args[1];
  var chatNode = getElement('chat-' + username);

  if (!chatNode) {
    appendChildNodes(
      'conversation',
      DIV({'id': 'chat-' + username, 'class': 'chat'},
        SPAN({'class': 'username'}, username),
	SPAN({'class': 'chat-text', 'id': 'chat-t-' + username})));
    chatNode = getElement('chat-' + username);
  }
  getElement('chat-t-' + username).innerHTML = chat;
}

transformers['done'] = function(who) {
  getElement('chat-' + who).id = '';
}