From fc27736017c97cfb757cbc5e8e386b2d76142729 Mon Sep 17 00:00:00 2001
From: calzoneman <calzoneman@gmail.com>
Date: Tue, 5 Mar 2013 14:07:21 -0600
Subject: [PATCH] Fixes to clientside chat stuff

---
 www/assets/css/ytsync.css  |  6 +++---
 www/assets/js/callbacks.js |  8 +-------
 www/assets/js/functions.js | 20 ++++++++++++++++++++
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/www/assets/css/ytsync.css b/www/assets/css/ytsync.css
index bc2f5822..5969b515 100644
--- a/www/assets/css/ytsync.css
+++ b/www/assets/css/ytsync.css
@@ -75,8 +75,8 @@
 }
 
 .action {
-    text-decoration: italic;
-    color: #bbbbbb;
+    font-style: italic;
+    color: #aaaaaa;
 }
 
 .spoiler {
@@ -89,5 +89,5 @@
 }
 
 .greentext {
-    color: #99ff99;
+    color: #789922; /* Color value directly from 4chan */
 }
diff --git a/www/assets/js/callbacks.js b/www/assets/js/callbacks.js
index 07387839..413ff834 100644
--- a/www/assets/js/callbacks.js
+++ b/www/assets/js/callbacks.js
@@ -42,13 +42,7 @@ function initCallbacks() {
     });
 
     socket.on('chatMsg', function(data) {
-        var div = document.createElement('div');
-        var span = document.createElement('span');
-        $(span).addClass(data.msgclass);
-        if(data.msgclass != "action")
-            data.msg = "<strong>&lt;" + data.username + "&gt;</strong> " + data.msg;
-        span.innerHTML = data.msg;
-        div.appendChild(span);
+        var div = formatChatMessage(data);
         $('#messagebuffer')[0].appendChild(div);
         // Cap chatbox at most recent 100 messages
         if($('#messagebuffer').children().length > 100) {
diff --git a/www/assets/js/functions.js b/www/assets/js/functions.js
index 7c337703..9aaa0709 100644
--- a/www/assets/js/functions.js
+++ b/www/assets/js/functions.js
@@ -96,6 +96,26 @@ function addUserDropdown(entry, name) {
     return ul;
 }
 
+function formatChatMessage(data) {
+    var div = document.createElement('div');
+    if(data.msgclass == "action") {
+        var message = document.createElement('span');
+        $(message).addClass('action');
+        message.innerHTML = data.username + " " + data.msg;
+        div.appendChild(message);
+    }
+    else {
+        var name = document.createElement('span');
+        var message = document.createElement('span');
+        name.innerHTML = "<strong>&lt;" + data.username + "&gt;</strong> ";
+        $(message).addClass(data.msgclass);
+        message.innerHTML = data.msg;
+        div.appendChild(name);
+        div.appendChild(message);
+    }
+    return div;
+}
+
 // Creates and formats a queue entry
 function makeQueueEntry(video) {
     var li = $('<li />');