// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        beforeSubmit:	showRequest,  // pre-submit callback 
        success:	showResponse,  // post-submit callback
	dataType:	'json'        // 'xml', 'script', or 'json' (expected server response type) 
 
        // other available options: 
        //target:		'#new_comment',   // target element(s) to be updated with server response 
	//url:		'http://opsterkwater.nl/2.0/pivotx/extensions/gastenboek/comments.php' /// override for form's 'action' attribute 
	//type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 
 
    // bind form to submitfunction 
    $('#frm_comment').ajaxForm(options);
    $('#new_comment').hide();
    $('#gb_submit').hide();
    $('#gb_thanks').fadeTo(0,0);
}); 
 
// pre-submit callback 
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]; 
 	
	$('#gb_submit').show(0);
 	$('#gb_submit').fadeTo(0, 0);
 	$('#gb_submit').fadeTo('slow', 0.5);
 
	// 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; 
} 
 
// post-submit callback 
function showResponse(data, success, jqForm)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 
 
    // if the ajaxForm method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 
 
    // if the ajaxForm method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 
    
	var curForm = jqForm[0];
    
	$('#gb_submit').hide();
 
	if(data.ar_error) {

		// errors verwerken
		if(data.ar_error.naam) curForm.naam.style.backgroundColor = "#f90";
		else curForm.naam.style.backgroundColor = mainBgColor;
		if(data.ar_error.email) curForm.email.style.backgroundColor = "#f90";
		else curForm.email.style.backgroundColor = mainBgColor;
		if(data.ar_error.comment) curForm.comment.style.backgroundColor = "#f90";
		else curForm.comment.style.backgroundColor = mainBgColor;
		if(data.ar_error.checksum) curForm.checksum.style.backgroundColor = "#f90";
		else curForm.checksum.style.backgroundColor = mainBgColor;
	} else {

		var new_name_html = curForm.naam.value;
		// evt e-mail toevoegen
		var mailimageurl = $('#mailicon')[0].src;
		if(curForm.email.value && curForm.hide.value!='on') new_name_html += '<a href="mailto:'+curForm.email.value+'"><img id="mailicon" src="'+mailimageurl+'" /></a>';
		$('#new_name').html(new_name_html);	
		
		var new_comment_html = "";
		// bericht strippen en invoegen
		new_comment_html = curForm.comment.value.replace(/(<([^>]+)>)/ig,"");
		
		// datum / tijd invoegen
		var currentTime = new Date();
		var month = currentTime.getMonth() + 1;
		if(month < 10) month = "0"+month;
		var day = currentTime.getDate();
		if(day < 10) day = "0"+day;
		var year = currentTime.getFullYear();
		var hours = currentTime.getHours();
		if(hours<10) hours = "0"+hours;
		var minutes = currentTime.getMinutes();
		if(minutes<10) minutes = "0"+minutes;
		
		new_comment_html += '<br /><span id="sub">'+day+'-'+month+'-'+year+' | '+hours+':'+minutes+' | ';
		
		// geselecteerde voorstelling invoegen
		var selvoorstelling = curForm.voorstelling.selectedIndex;
		if (selvoorstelling > 1) new_comment_html += curForm.voorstelling.options[selvoorstelling].text.substr(13);
		
		new_comment_html += '</span>';
		
		$('#new_comment_body').html(new_comment_html);
		
                     
		$('#new_comment').show(0);
		$('#new_comment').fadeTo(0, 0);
		$('#new_comment').fadeTo("slow", 1);
		$('#gb_sign').hide();
		$('#gb_thanks').fadeTo("slow", 1);
		
		
	}
    
}