From eda37d731ecd56984b35b1d0183b489f07813b04 Mon Sep 17 00:00:00 2001
From: enko <enko@thewired.hacked.jp>
Date: Wed, 19 Nov 2008 00:25:14 +0100
Subject: [PATCH] big fat merge

---
 chat.css  | 54 +++++++++++++++++++++++++++++++++++-------
 chat.html | 10 ++++----
 chat.js   | 81 ++++++++++++++++++++++++++++++++++++++++++++++++---------------
 chat.php  | 42 ---------------------------------
 4 files changed, 112 insertions(+), 75 deletions(-)
 delete mode 100644 chat.php

diff --git a/chat.css b/chat.css
index 2fe33f8..5b7632c 100644
--- a/chat.css
+++ b/chat.css
@@ -1,6 +1,6 @@
 body {
     font-family: verdana, sans-serif;
-    font-size: 12px;
+    font-size: 14px;
 }
 
 fieldset {
@@ -20,7 +20,21 @@ fieldset {
 }
 
 label {
-    margin: 5px;
+	font-size: 0.8em;
+}
+	
+.error {
+	background-color: red;
+	color: white;
+}
+
+.status {
+	background-color: #eee;
+}
+	
+.success {
+	background-color: green;
+	color: white;
 }
 
 .timestamp {
@@ -28,19 +42,25 @@ label {
 }
 
 .timestamp:after {
-    content: ']  '
+    content: ']';
+    margin-right: 2px;
 }
 
 .timestamp:before {
     content: '[';
 }
 
+.nick {
+	font-style: italic;	
+}
+
 .nick:before {
     content: '<';
 }
 
 .nick:after {
-    content: '> ';
+    content: '>';
+    margin-right: 5px;
 }
 
 .loading-image {
@@ -48,11 +68,29 @@ label {
     display: none;
 }
 
-#messagebox input {
-    width: 90%;
+#chatlog {
+	border: 2px solid #ccc;
+}
+
+.logEntry {
+	border-top: 1px dashed #ccc;
+}
+	
+.logEntry:FIRST-CHILD {
+	border-top: 0px;
+}
+
+#inputfield {
+	margin-top: 10px;
+}
+
+#textinput {
+	width: 95%;
+	margin-top: 3px;
 }
 
 .loading {
-    background:transparent url(loading.gif) no-repeat scroll 0 3px;
-    padding:1px 0 1px 18px;
+	background-image: url(loading.gif);
+	background-repeat: no-repeat;
+	background-position: 100% 2px;
 }
\ No newline at end of file
diff --git a/chat.html b/chat.html
index 74e0f69..606b83a 100644
--- a/chat.html
+++ b/chat.html
@@ -25,13 +25,11 @@
 	  <input type="submit" name="submit_nick" />
 	</p>
       </fieldset>
-      <fieldset id="chatlog-fieldset">
-	<legend>Wellcome my dear!</legend>
 	<div id="chatlog"></div>
-	<div id="messagebox">
-	  <input type="text" name="message" />
-	</div>
-      </fieldset>
+	<fieldset id="inputfield">
+		<input type="text" name="textinput" id="textinput" />
+		<label for="textinput">Enter your text you whish to send me and press return.</label>
+	</fieldset>
     </div>
     <div id="nojs">
       You need Javascript to use this chatbox!
diff --git a/chat.js b/chat.js
index e3eb1fa..d7b2fa0 100644
--- a/chat.js
+++ b/chat.js
@@ -1,19 +1,67 @@
 // Settings
 
+// Config starts here
 var endpoint = 'xmpphp/chat_backend.php'
+var history_size = 20;
+// Config ends here
 
+var InputBuffer = new Array();
+var History = new Array();
+var HistoryPosition = 0;
+
+function addBuffer(message) {
+	InputBuffer.push(message);
+}
+
+function outBuffer() {
+	InputBuffer.reverse();
+	while (InputBuffer.length > 0) {
+		raw_message = InputBuffer.pop();
+		$('#messagebox input').addClass('loading');
+		$.getJSON(endpoint, {op: 'SendMessage', message : $("input[name='message']").attr('value')}, function(data){
+			    addChatMessage($("input[name='nick']").attr('value'), $("input[name='message']").attr('value'));
+			    $('#messagebox input').removeClass('loading');
+			  });
+	}
+	setTimeout('outBuffer()',500);
+}
+
+function now() {
+	var timestamp = new Date();
+	timestamp = timestamp.format('HH:MM:s');
+	return timestamp;
+}
+
+function addError(error) {
+	var message = '<div class="logentry error"><span class="timestamp">'+now()+'</span><span class="logmessage">'+error+'</span></div>';
+	$(message).appendTo('#chatlog');
+	cleanLog();
+}
+
+function addStatus(status) {
+	var message = '<div class="logentry status"><span class="timestamp">'+now()+'</span><span class="logmessage">'+status+'</span></div>';
+	$(message).appendTo('#chatlog');
+	cleanLog();
+}
+
+function addSuccess(success) {
+	var message = '<div class="logentry success"><span class="timestamp">'+now()+'</span><span class="logmessage">'+success+'</span></div>';
+	$(message).appendTo('#chatlog');
+	cleanLog();
+}
 
 function addLog(logEntry){
-  var history_size = 20;
-  var timestamp = new Date();
-  timestamp = timestamp.format('HH:MM:s');
-  var fullentry = '<div class="logEntry"><span class="timestamp">'+timestamp+'</span><span class="logmessage">'+logEntry+'</span></div>';
+  var fullentry = '<div class="logEntry"><span class="timestamp">'+now()+'</span><span class="logmessage">'+logEntry+'</span></div>';
   $(fullentry).appendTo('#chatlog');
-  if ($('.logEntry').length > history_size) {
-    $('.logEntry:last').remove();
-  }
+  cleanLog();
 };
 
+function cleanLog() {
+	if ($('.logEntry').length > history_size) {
+	    $('.logEntry:last').remove();
+	  }
+}
+
 function addChatMessage(nick, message) {
   var logentry = '<span class="nick">'+nick.split('@')[0]+'</span><span class="message">'+message+'</span>';
   addLog(logentry);
@@ -50,27 +98,22 @@ $(document).ready(function(){
 					  });
 
 		    $("input[name='message']").bind('keypress', function(e){
-						      if (e.which == 13) {
-							// Sending our chat message
-							$('#messagebox input').addClass('loading');
-							$.getJSON(endpoint, {op: 'SendMessage', message : $("input[name='message']").attr('value')}, function(data){
-								    addChatMessage($("input[name='nick']").attr('value'), $("input[name='message']").attr('value'));
-								    $("input[name='message']").attr('value','');
-								    $('#messagebox input').removeClass('loading');
-								  });
-						      }
-						    });
+		    	if (e.which == 13) {
+		    		// Sending our chat message
+		    		outBuffer($("input[name='message']").attr('value'));
+		    	}
+		    });
 
 		    $("input[name='submit_nick']").bind('click',function(e){
 							  $('#asknick').fadeOut('fast');
 							  $('#chatlog-fieldset legend').text('Welcome ' + $("input[name='nick']").attr('value'));
 							  $('#chatlog-fieldset').fadeIn('fast');
-							  addLog('Connecting...');
+							  addStatus('Connecting...');
 							  // establish a connection to the ajax socket
 							  $('#messagebox input').addClass('loading');
 							  $.getJSON(endpoint,{'op' : 'InitConnection', 'nick' : $("input[name='nick']").attr('value')}, function(data) {
 								      if(data['status'] == 0) {
-									addLog(data['message']);
+									addStatus(data['message']);
 									handleEvent();
 									$('#messagebox input').removeClass('loading');
 								      }
diff --git a/chat.php b/chat.php
deleted file mode 100644
index 74e0f69..0000000
--- a/chat.php
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
-
-  <head>
-    <title>Chatbox</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <link rel="stylesheet" type="text/css" href="chat.css" />
-
-    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
-    <script type="text/javascript" src="jquery.timers.js"></script>
-    <script type="text/javascript" src="date.format.js"></script>
-    <script type="text/javascript" src="chat.js"></script>
-
-  </head>
-
-  <body>
-    <div id="chatbox">
-      <div id="error"></div>
-      <fieldset id="asknick">
-	<legend>Chat with me!</legend>
-	<p>
-	  <label for="name">Your name</label><input type="text" name="nick" />
-	</p>
-	<p>
-	  <input type="submit" name="submit_nick" />
-	</p>
-      </fieldset>
-      <fieldset id="chatlog-fieldset">
-	<legend>Wellcome my dear!</legend>
-	<div id="chatlog"></div>
-	<div id="messagebox">
-	  <input type="text" name="message" />
-	</div>
-      </fieldset>
-    </div>
-    <div id="nojs">
-      You need Javascript to use this chatbox!
-    </div>
-
-  </body>
-</html>
-
-- 
2.11.4.GIT