window.onload = function() {
  var messages = [];
  var socket = io.connect('http://localhost:8080');
  var field = document.getElementById("field");
  var sendButton = document.getElementById("send");
  var content = document.getElementById("content");
  var passwordField = document.getElementById("password");
  
  socket.on('message', function (data) {
    if(data.message) {
      messages.push(data);
      var html = '';
      
      console.log("Number of messages: " + messages.length);
      
      for(var i = 0; i < messages.length; i++){
        var m = messages[i].message;
        html += '<div class="message-wrapper" data-encmsg="' + m + '">';
        html += '<b>' + 'Other' + ': </b>';
        html += '<input class="input-box message-code">';
        html += '<input type="button" class="apply-message-code" value="apply"><br />';
        html += '<p class="message message-' + i + '">';
        html += m + '</p></div><br />';
      }

      content.innerHTML = html;
      content.scrollTop = content.scrollHeight;

      // set click + enter key handlers for applying code to messages in chat window
      createCodeEntryHandlers();

    } else {
      console.log("There is a problem: ", data);
    }
  });

  function applyCode(parent){
    var message_tag = parent.getElementsByClassName("message").item(0);
    var password = parent.getElementsByClassName("message-code").item(0).value;
    var encrypted_msg = parent.dataset.encmsg;
    var decrypted_msg = decryptMessage(encrypted_msg, password);

    message_tag.innerHTML = decrypted_msg;
  }

  function createCodeEntryHandlers(){

    var applyButtons = document.getElementsByClassName('apply-message-code');
    var messageCodes = document.getElementsByClassName('message-code');

    console.log(applyButtons)

    for (var i = 0; i < applyButtons.length; i++){
      applyButtons.item(i).onclick = function(){
        applyCode(this.parentNode);
      };
    }

    for (var i = 0; i < messageCodes.length; i++){
      messageCodes.item(i).onkeypress = function(e){
        // if enter key
        if (e.keyCode == 13){
          applyCode(this.parentNode);
        }
      };
    }


  }

  // send a message from the data in the form

  function sendMessage(){
    var message = field.value;

    var password = passwordField.value;
    var encrypted_msg = encryptMessage(message,password);

    socket.emit('send', {
      message: encrypted_msg
    });
    
    field.value = ""; // clear message field after sending
  }

  // button click and enter key press handlers for form

  sendButton.onclick = function(){
    sendMessage();
  };
  
  field.onkeypress = function(e){
    // if enter key
    if (e.keyCode == 13){
      sendMessage();
    }
  }
}
@@ -383,116 +383,36 @@
     
-messages.push(data);%0A      var html = '';%0A      %0A      console.log(%22Number of messages: %22 + messages.length)
+var html = content.innerHTML
 ;%0A  
@@ -426,77 +426,20 @@
     
-for(
 var 
-i = 0; i %3C messages.length; i++)%7B%0A        var m = messages%5Bi%5D
+m = data
 .mes
@@ -444,18 +444,16 @@
 essage;%0A
-  
       ht
@@ -513,34 +513,32 @@
 m + '%22%3E';%0A      
-  
 html += '%3Cb%3E' + 
@@ -553,26 +553,24 @@
 + ': %3C/b%3E';%0A
-  
       html +
@@ -609,26 +609,24 @@
 ge-code%22%3E';%0A
-  
       html +
@@ -697,34 +697,32 @@
 %3E%3Cbr /%3E';%0A      
-  
 html += '%3Cp clas
@@ -735,33 +735,13 @@
 sage
- message-' + i + '
 %22%3E';%0A
-  
     
@@ -773,24 +773,16 @@
 %3Cbr /%3E';
-%0A      %7D
 %0A%0A      

write messages as they appear, no rewriting each send