chat.php

<?php
	session_start();
	if (!isset($_SESSION['username']) || !isset($_SESSION['password'])) {
		header('location: http://www.astraldevgroup.com');
	} else {
?>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<title>Astral Dev - Chat</title>
	Welcome <?php echo $_SESSION['username']; ?>
	<input id="clearchat" type="submit" value="Clear Chat" />
	<div id="chatbox" width="430px" height="270px"><?php
		if (file_exists("chatlog.html") && filesize("chatlog.html") > 0) {
			$handle = fopen("chatlog.html", "r");
			$contents = fread($handle, filesize("chatlog.html"));
			fclose($handle);
			echo $contents;
		}
	?></div>

	<form name="message">
		<input name="usermsg" type="text" id="usermsg" size="63" />
		<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
	</form>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
	<script>
		$(document).ready(function() {
			$("#submitmsg").click(function() {
				var message = $("#usermsg").val();
				$.post("sendchatmsg.php", {cmsg: message});
				$("#usermsg").attr("value", "");
				return false;
			});

			$("#clearchat").click(function() {
				$.post("clearchat.php");
			});

			function loadLog() {
				var lastScrollHeight = $("#chatbox").attr("scrollHeight") - 20;

				$.ajax({
					url: "chatlog.html",
					cache: false,
					success: function(html) {
						$("#chatbox").html(html);

						//Auto scroll
						var newScrollHeight = $("#chatbox").attr("scrollHeight") - 20;

						if (newScrollHeight > oldScrollHeight) {
							$("#chatbox").animate({scrollTop: newScrollHeight}, "normal");
						}
					},
				});
			}

			setInterval(loadLog, 50);
		});
	</script>
</html>
<?php
}
?>