science-ation/chat.inc.php

<?
/* 
   This file is part of the 'Science Fair In A Box' project
   SFIAB Website: http://www.sfiab.ca

   Copyright (C) 2005 Sci-Tech Ontario Inc <info@scitechontario.org>
   Copyright (C) 2005-2008 James Grant <james@lightbox.org>

   This program is free software; you can redistribute it and/or
   modify it under the terms of the GNU General Public
   License as published by the Free Software Foundation, version 2.

   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
    General Public License for more details.

   You should have received a copy of the GNU General Public License
   along with this program; see the file COPYING.  If not, write to
   the Free Software Foundation, Inc., 59 Temple Place - Suite 330,
   Boston, MA 02111-1307, USA.
*/
?>
<?php
function draw_chatbox($subject){
	global $config;
	$chatCollapsed = $_SESSION['chat_collapsed'] ? 1 : 0;
?>
	<style type="text/css">
		#chatbox_wrapper{
			border: 3px solid;
			border-color: #EEEEFF #5C6F90 #5C6F90 #EEEEFF;
			border-radius: 8px;
			display:inline-block;
			width: <?=($chatCollapsed ? '0px' : '30em')?>;
			height: 38em;
			float:right;
			margin: 1em;
			padding: 1.25em;
			background-color: #E0E0FF;
			position:relative;
		}
		#chatbox_dialogue{
			width:100%;
			height: 30em;
			top: 0.5em;
			overflow:auto;
			border: 3px solid;
			border-color: #5C6F90 #EEEEFF #EEEEFF #5C6F90;
			background-color: #FFF;
			border-radius: 3px;
			<?php
			if($chatCollapsed) echo "display: none;\n";
			?>
		}
		#chatbox_separator{
			border-top:1px solid white;
			height: 1.5em;
		}
		#chatbox_input{
			width: 100%;
			background-color: #FFF;
			height: 3em;
			border: 3px solid;
			border-radius: 3px;
			border-color: #5C6F90 #EEEEFF #EEEEFF #5C6F90;
			display: none;
		}
		#chatbox_submit{
			margin: 0;
			margin-top: 0.5em;
			width: 100%;
			border-radius: 3px;
			background-color: #CECEDF;
			border-color: #E8E8EE #5C6F90 #5C6F90 #E8E8EE;
			font-size: 18px;
			height: 1.5em;
			line-height: 1em;
			font-weight: normal;
			display: none;
		}
		div.chatbox_messageHeader{
			margin-top: 1em;
			border-top: 1px solid #668;
			border-bottom: 1px solid #224;
			background-color: #557;
			color: #FFF;
		}
		#chatbox_collapsebutton{
			position: absolute;
			left: 0;/*32em;*/
			top: 0;/*16em;*/
			width: 1.2em; 
			height: 1.2em;
			line-height: 1.2em;
			text-align:center;
			cursor:pointer;
/*			border-radius: 0.5em;
			background-color:  #CECEDF;
			border: 2px solid;
			border-color: #EEEEFF #5C6F90 #5C6F90 #EEEEFF;
*/
		}
	</style>
	<script type="text/javascript">
		var lastMessageIndex = {};
		var ajaxLock = false;
		var refreshRate = 30000;
		var viewCollapsed = <?=$chatCollapsed;?>;
		$(document).ready(function(){
			loadChat('<?=$subject;?>', function(){
				setTimeout(function(){refreshChat('<?=$subject;?>');}, refreshRate);
				if(!viewCollapsed){
					$('#chatbox_input').css('display', 'block');
					$('#chatbox_submit').css('display', 'block');
				}
				$('#chatbox_input').focus(function(event){
					$('#chatbox_input').val('');
					$('#chatbox_input').unbind(event)
				});
			});
		});
		function doSubmit(){
			postMessage('<?=$subject;?>', $('#chatbox_input').val());
			$('#chatbox_input').val('');
		}
		function loadChat(subject, callback){
			ajaxLock = true;
			if(callback == undefined) callback = function(){};
			if(lastMessageIndex[subject] == undefined) lastMessageIndex[subject] = 0;
			$.post(
				'<?=$config['SFIABDIRECTORY']?>/chat.ajax.php',
				{'action':'fetch', 'subject':subject, 'since':lastMessageIndex[subject]},
				function(result){
					ajaxLock = false;
					handleReply(subject, result);
					callback();
				}
			);
		}

		function refreshChat(subject){
			if(ajaxLock == false){
				ajaxLock = true;
				$.post(
					'<?=$config['SFIABDIRECTORY']?>/chat.ajax.php',
					{'action':'fetch', 'subject':subject, 'since':lastMessageIndex[subject]},
					function(result){
						ajaxLock = false;
						handleReply(subject, result);
					}
				);
				setTimeout(function(){refreshChat(subject);}, refreshRate);
			}else{
				setTimeout(function(){refreshChat(subject);}, refreshRate);
			}
		}

		function postMessage(subject, message){
			if(ajaxLock == false){
				ajaxLock = true;
				message = $.trim(message);
				if(message.length > 0){
					$.post(
						'<?=$config['SFIABDIRECTORY']?>/chat.ajax.php',
						{'action':'fetch', 'subject':subject, 'message':message, 'since':lastMessageIndex[subject]},
						function(result){
							ajaxLock = false;
							handleReply(subject, result);
						}
					);
				}
			}else{
				setTimeout(function(){postMessage(subject, message);}, 200 + 400 * Math.random());
			}
		}

		function textMessage(time, speaker, fairname, text){
			var line = $('<div></div>');
			var header = $('<div class="chatbox_messageHeader"></div>');
			if(fairname != null) header.append(fairname + "<br/>");
			header.append('<strong>' + speaker + '</strong>');
			if(time) header.append('<span style="float:right">' + time + '</span>');
			line.html(text);
			$('#chatbox_dialogue').append(header);
			$('#chatbox_dialogue').append(line);
			$('#chatbox_dialogue').animate({ scrollTop: $('#chatbox_dialogue').attr("scrollHeight") - $('#chatbox_dialogue').height() }, 0);
		}

		function errorMessage(text){
			var line = $('<div class="error"></div>');
			line.html('<strong>' + text + '</strong>');
			$('#chatbox_dialogue').append(line);
			$('#chatbox_dialogue').animate({ scrollTop: $('#chatbox_dialogue').attr("scrollHeight") - $('#chatbox_dialogue').height() }, 0);
		}

		function systemMessage(text){
			var line = $('<div></div>');
			line.html('<strong>' + text + '</strong>');
			$('#chatbox_dialogue').append(line);
			$('#chatbox_dialogue').animate({ scrollTop: $('#chatbox_dialogue').attr("scrollHeight") - $('#chatbox_dialogue').height() }, 0);
		}

		function handleReply(subject, response){
			var data;
			eval('data = ' + response);
			if(data.info.length > 0){
				for(n in data.info){
					systemMessage(data.info[n].text);
				}
			}
			if(data.error.length > 0){
				for(n in data.error){
					errorMessage(data.error[n]);
				}
			}
			if(data.message.length > 0){
				for(n in data.message){
					textMessage(
						data.message[n].time,
						data.message[n].speaker,
						data.message[n].fairname,
						data.message[n].text
					);
					lastMessageIndex[subject] = data.message[n].index;
				}
			}
		}

		function toggleView(){
			var newWidth, callback;
			if(viewCollapsed){
				newWidth = '30em';
				viewCollapsed = false;
				$('#chatbox_input').css('display', 'block');
				$('#chatbox_submit').css('display', 'block');
				$('#chatbox_dialogue').css('display', 'block');
				$('#chatbox_collapsebutton').html('&raquo;');
				callback = function(){
					$('#chatbox_dialogue').animate({ scrollTop: $('#chatbox_dialogue').attr("scrollHeight") - $('#chatbox_dialogue').height() }, 0);
				}
			}else{
				newWidth = '0px';
				viewCollapsed = true;
				callback = function(){
					$('#chatbox_input').css('display', 'none');
					$('#chatbox_submit').css('display', 'none');
					$('#chatbox_dialogue').css('display', 'none');
					$('#chatbox_collapsebutton').html('&laquo;');
				}
			}
			$.post('<?=$config['SFIABDIRECTORY']?>/chat.ajax.php',{'collapsed':viewCollapsed ? '1' : '0'});
			$('#chatbox_wrapper').animate({'width':newWidth}, 500, callback);
		}

	</script>
	<div id="chatbox_wrapper">
		<div id="chatbox_dialogue"></div>
		<div id="chatbox_separator"></div>
		<textarea id="chatbox_input">Type your message here...</textarea>
		<button id="chatbox_submit" type="submit" onclick="doSubmit(); return false;">send</button>
		<div id="chatbox_collapsebutton" onclick="toggleView();"><?php
			if($chatCollapsed) echo "&laquo;\n";
			else echo "&raquo;";
		?></div>
	</div>
	<pre>
	</pre>
<?php
}