$(document).ready(function(){
	/////////////////////////////.///////////////////
	// JQUERY AJAXSUBMIT SETTINGS FOR COMMENT FORM //
	/////////////////////////////.///////////////////
	var optionsComment = { 
//		beforeSubmit:	showRequest,
		target:			'#output1',				// target element(s) to be updated with server response 
		success:		responseComment,	// post-submit callback 
		dataType:		'json',					// 'xml', 'script', or 'json' (expected server response type) 
		url:			'/_ajax/comment.cfm',	// override for form's 'action' attribute 
		clearForm:	true						// clear all form fields after successful submit 
		
		// other available options: 
		//type:			type			// 'get' or 'post', override for form's 'method' attribute 
		//resetForm:	true			// reset the form after successful submit 

		// $.ajax options can be used here too, for example: 
		//timeout:   3000 
	};
	
/**************************************************************************************************************/

	/////////////////////////////////////////////////
	// CONTROL BACKGROUND IMAGE DISPLAY FOR FIELDS //
	/////////////////////////////////////////////////
	
	// EVENTS FOR DISPLAYING FIELD NAMES ON FORM
	$('input, textarea').keyup(function(){
		if ( $(this).val().length >= 1){	// Check string length of field value
			$(this).removeClass('bg');		//if its true then do this
		}
		else {
			$(this).addClass('bg');			//if its false then do this
		}
	});
	
	// WHEN THE BROWSER IS REFRESHED CHECK WHETHER FORMS FIELDS ARE ALREADY POPULATED
	$('input, textarea').each(function() {
		if ($(this).attr('type') !== 'submit') {
			if ($(this).val().length > 0) $(this).removeClass('bg');
		}
	});
	
/**************************************************************************************************************/

	/////////////////////////////./////////////////
	// SET UP JQUERY VALIDATION FOR COMMENT FORM //
	/////////////////////////////./////////////////
	
	$("#commentForm").validate({
		submitHandler : function(form) {
			$("#commentForm").ajaxSubmit(optionsComment);
		},
		rules : {
			name	: "required",
			comment	: "required"
		},
		messages : {
			name	: "Sorry, what's your name",
			comment	: "What would you like to say?"
		}
	});
	
	$('#gotoLeaveComment').click(function() {
		goToByScroll('leaveComment');
	});
});
//////////////////////////////////
// OTHER GENERIC PAGE FUNCITONS //
//////////////////////////////////

function responseComment(data) {
	// HIDE FORM
	if (data.INTNUMCOMMENTS == 1) {
		$('div.comment_section').prepend(data.COMMENT); // ADD COMMENT
	} else {
		$('div.bubbles').append(data.COMMENT); // ADD COMMENT
	}
	$('#' + data.STRUNIQUEID).fadeIn('slow',function() {
		goToByScroll(data.STRUNIQUEID);
	}); // DISPLAY COMMENT
	$('p.numComments').html(data.INTNUMCOMMENTS);// UPDATE COMMENT COUNT
	Cufon.replace('p.numComments');
	$('input, textarea').each(function() {
		if ( $(this).val().length >= 1){	// Check string length of field value
			$(this).removeClass('bg');		//if its true then do this
		}
		else {
			$(this).addClass('bg');			//if its false then do this
		}
	});
	$('#gotoLeaveComment').click(function() {
		goToByScroll('leaveComment');
	});
}

function showRequest(formData, jqForm, options) { 
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    var queryString = $.param(formData); 
 
    // jqForm is a jQuery object encapsulating the form element.  To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 
 
    alert('About to submit: \n\n' + queryString); 
 
    // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
    return true; 
}