$(document).ready(function() {
	refreshShouts();
	$('#doShout').bind('click', function(){
		var nick = $('#shoutNickname').val();
		var msg = $('#shoutMessage').val();
		$.ajax({
			   	type: "POST",
			   	dataType: "xml",
			   	url: "php/getShouts.php",
			   	data: {nickname: nick, message: msg, op: 'newShout'},
			   	error: function() { $('#shoutStatus').empty().addClass('shoutError').html('An error occured! Try again.'); },
			   	success: function(xml){
			   		$('#shoutNickname').val('');
			   		$('#shoutMessage').val('');
			   		if($('shout', xml).size() > 0) {
			   			if($('error', xml).text()) {
							$('#shoutStatus').empty().removeClass().addClass('shoutError').html($('error', xml).text());
			   			} else {
			   				$('#shoutStatus').empty().removeClass().addClass('shoutStatus').html($('status', xml).text());
			   			}
				   		$('shout', xml).each(function(id){
				   			var nickname = $('nickname', this).text();
				   			var message = $('message', this).text();
				   			var date = $('date', this).text();
				   			var cssClass = 'shoutRow1';
				   			if((id%2)/10 == 0)
				   				cssClass = 'shoutRow';
				   			var shoutRow = '<div id="'+cssClass+'"><span id="nickname">'+nickname+': </span><span id="shoutedMessage">'+message+'</span><div class="date"><span id="date">('+date+')</span></div></div>';
				   			if(id == 0)
				   				$('#shoutsContainer').empty().removeClass().addClass('shouts').html(shoutRow);
				   			else
				   				$('#shoutsContainer').removeClass().addClass('shouts').append(shoutRow);
				   		});
			   		} else {
			   			$('#shoutStatus').empty().addClass('shoutError').html($('error', xml).text());
			   			$('#shoutsContainer').empty().removeClass().addClass('noShouts').html('Shouts will be displayed here!');
			   		}
			   	}
		});
	});
});
function refreshShouts() {
	var refreshRate = 50000; // time in milliseconds
	var cacheBuster = (new Date).getTime();
	$.ajax({
	   	type: "POST",
	   	dataType: "xml",
	   	url: "php/getShouts.php",
	   	data: {op: 'tick', time: cacheBuster},
	   	error: function() { $('#shoutStatus').empty().addClass('shoutError').html('An error occured! Try again.'); },
	   	success: function(xml){
	   		if($('shout', xml).size() > 0) {
				$('#shoutStatus').empty().removeClass().addClass('shoutStatus').html('Showing shouts.');
		   		$('shout', xml).each(function(id){
		   			var nickname = $('nickname', this).text();
		   			var message = $('message', this).text();
		   			var date = $('date', this).text();
		   			var cssClass = 'shoutRow1';
		   			if((id%2)/10 == 0)
		   				cssClass = 'shoutRow';
		   			var shoutRow = '<div id="'+cssClass+'"><span id="nickname">'+nickname+': </span><span id="shoutedMessage">'+message+'</span><div class="date"><span id="date">('+date+')</span></div></div>';
		   			if(id == 0)
		   				$('#shoutsContainer').empty().removeClass().addClass('shouts').html(shoutRow);
		   			else
		   				$('#shoutsContainer').removeClass().addClass('shouts').append(shoutRow);
		   		});
	   		} else {
	   			$('#shoutStatus').empty().addClass('shoutError').html($('error', xml).text());
	   			$('#shoutsContainer').empty().removeClass().addClass('noShouts').html('Shouts will be displayed here!');
	   		}
	   	}
	});
	setTimeout('refreshShouts()', refreshRate);
}