/********  Facebook Connect Callback Functions ********/
function onConnected(user_id) {
	$('#anon').css('display','none');
	$('#post-comment-heading').css('display','block');
	$('#post-comment').css('display','block');
	$('[name=user-id]').val(user_id);
}

function onNotConnected() {
	$('#anon').css('display','block');
	$('#post-comment-heading').css('display','none');
	$('#post-comment').css('display','none');
}

function loginFacebook(){
	FB.Connect.requireSession();
	return false;
}
/******** End of Facebook Connect Callback Functions ********/


function submitComment(){
	//Captha test
	$.post('/VerifyCaptcha', $('#comment-form').serialize(),
		function(data){
			if(data.captcha.isValid == "true"){
				//Write the comment
				$.post('/CommentEngine', $('#comment-form').serialize(),
					  function(data){
					    //If successful, update the comments
						var responseComments = '';
						
						if(data != ''){
							//Update the count of the comments
							$('#comment-count').html(data.comments.length);
							$('#army-count').html(data.numArmyComments);
							$('#navy-count').html(data.numNavyComments);
							Cufon.replace('.header', {fontFamily: 'TradeGothic'});
							
							//Update the comments
							responseComments += '<div id="user-comments">';
							$.each(data.comments, function(i,comment){
								if(comment.team == 0){
									var team = 'army';
								}else if(comment.team == 1){
									var team = 'navy';
								}else{
									var team = '';
								}
								responseComments += '<div class="comment ' + team + '">';
								responseComments += '<div class="comment-user-pic-overlay ' + team + '">&nbsp;</div>';
								responseComments += '<div class="comment-user-pic"><fb:profile-pic uid="' + comment.userID + '" linked="true" /></div>';
								responseComments += '<div class="comment-user">';
								responseComments += '<span class="name"><fb:name uid="' + comment.userID + '" useyou="false" linked="false" ifcantsee="Army-Navy Fan" /></span><br />';
								responseComments += '<span class="comment-date">' + comment.dateCreated + '</span>';
								responseComments += '</div>';
								responseComments += '<p class="comment-message">' + comment.message + '</p>';
								responseComments += '<div class="clear">&nbsp;</div>';
								responseComments += '</div>';
					          });
							responseComments += '</div>';
						}else{
							responseComments += '<div id="user-comments" class="empty">';
							responseComments += '<p>There are no comments yet.</p>';
							responseComments += '</div>';
						}
						
						$('#user-comments').replaceWith(responseComments);
						
						//Update the Facebook pictures (any FBML tags)
						if ( FB.XFBML.Host.parseDomTree ){
							  setTimeout( FB.XFBML.Host.parseDomTree, 0 );
						}
						
						//Clear the old comment
						$('[name=message]').val('');
						
						//Get a new captcha
						Recaptcha.reload();
						
						//Get the top offset of the anchor
						var target_offset = $('[name=comments]').offset();
						var target_top = target_offset.top;
						//Scroll to the anchor
						$('html, body').animate({scrollTop:target_top}, 500);
						
					},'json');
			}else{
				//Get a new captcha
				Recaptcha.reload();	
			}
		},'json');
}

$('document').ready(function(){
	//Initialize the Facebook Connect
	var qaFBKey = '5222cbd083ad49f1ec64d1624cc02b03';
	var prodFBKey = '7a7fdd2af77ce2ba4b5c26da1aa7b6c6';
	FB.init(prodFBKey,"/xd_receiver.jsp",{"ifUserConnected":onConnected, "ifUserNotConnected":onNotConnected});
	
	//
	$('.fbLogin').bind("click", function(e){
		loginFacebook();
	});
	
	//Toggle for the background colour on the post comment area
	$('#army-comment').bind("click", function(e){
		$('#post-message').removeClass('navy');
		$('#post-message').addClass('army');
	});
	
	$('#navy-comment').bind("click", function(e){
		$('#post-message').removeClass('army');
		$('#post-message').addClass('navy');
	});
	
	$('#both-comment').bind("click", function(e){
		$('#post-message').removeClass();
	});
	
	//Intercept the enter key press to prevent the form from doing a normal submit action (we want to do AJAX)
	$('#comment-form').keypress(function(e) {
		if(e.keyCode == 13) {
			submitComment();
			
			return false;
		}
	});
	
	//Submit button
	$("#submit-button").bind("click", function(e){
		submitComment();
	 });
	
	//Clear button
	$("#clear-button").bind("click", function(e){
		$('[name=message]').val('');
	});
	
	//Style the scrollbar in the comments area
	$('#user-comments').jScrollPane({showArrows:true,scrollbarWidth:12});

});