Add /say and global announcements

www/assets/css/ytsync.css

@@ -56,6 +56,14 @@
     border-left: 0;
 }
 
+#messagebuffer div {
+    white-space: pre-wrap; /* css-3 */
+    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+    white-space: -pre-wrap; /* Opera 4-6 */
+    white-space: -o-pre-wrap; /* Opera 7 */
+    word-wrap: break-word; /* Internet Explorer 5.5+ */
+}
+
 #chatline {
     width: 456px;
 }
@@ -71,12 +79,12 @@
 }
 
 .userlist_op {
-    color: #00cc00;
+    color: #00aa00;
 }
 
 .action {
     font-style: italic;
-    color: #aaaaaa;
+    color: #888888;
 }
 
 .spoiler {
@@ -92,6 +100,12 @@
     color: #789922; /* Color value directly from 4chan */
 }
 
+.shout {
+    color: #ff0000;
+    font-weight: bold;
+    font-size: 18pt;
+}
+
 .option button {
     margin-right: 15px;
 }

www/assets/js/callbacks.js

@@ -19,6 +19,10 @@ function initCallbacks() {
         showChannelRegistration();
     });
 
+    socket.on('announcement', function(data) {
+        showAnnouncement(data.title, data.text);
+    });
+
     socket.on('registerChannel', function(data) {
         if(data.success) {
             $('#chregnotice').remove();

www/assets/js/functions.js

@@ -128,6 +128,8 @@ function formatChatMessage(data) {
         var name = document.createElement('span');
         var message = document.createElement('span');
         name.innerHTML = "<strong>&lt;" + data.username + "&gt;</strong> ";
+        if(data.msgclass == "shout")
+            $(name).addClass("shout");
         $(message).addClass(data.msgclass);
         message.innerHTML = data.msg;
         div.appendChild(name);
@@ -517,3 +519,13 @@ function showChannelRegistration() {
             socket.emit('registerChannel');
         });
 }
+
+function showAnnouncement(title, text) {
+    var div = $('<div/>').addClass('alert')
+        .insertAfter($('.row')[0]);
+    $('<button/>').addClass('close pull-right').text('×')
+        .appendTo(div)
+        .click(function() { div.remove(); });
+    $('<h3/>').text(title).appendTo(div);
+    $('<p/>').html(text).appendTo(div);
+}