$(document).ready(function() {
	refreshShouts();
	$('#doShout').bind('click', function(){
		var msg = $('#shoutMessage').val();
		if (msg != undefined) {
			$.ajax({
					type: "POST",
					dataType: "xml",
					url: "./shoutbox/php/getShouts.php",
					data: {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 id="date">('+date+')</span>: </span><span id="shoutedMessage">'+message+'</span></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 = 5000; // time in milliseconds
	var cacheBuster = (new Date).getTime();
	$.ajax({
	   	type: "POST",
	   	dataType: "xml",
	   	url: "./shoutbox/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('<br>');
		   		$('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 id="date">('+date+')</span>: </span><span id="shoutedMessage">'+message+'</span></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);
}