jQuery.fn.fancyForm = function() {
  return this.each(function(){
    //create a new postJSON function... I prefer post over get because of codeignitor
    $.postJSON = function(url, data, callback) {
	$.post(url, data, callback, "json");
	};
    
    //now wrap the form in a div with relative positioning and another with absulute
    //this will allow us to fade the form out and the ajax status in
    $(this).wrap("<div id='fancyFormContainer'><div id='fancyFormContent'></div></div>");
    
    //set the container to have same width and height as our form
    var h = $(this).height();
    $('div#fancyFormContainer').height(h);
    
    //now append our loading div and status div
    $('div#fancyFormContainer').append("<div id='fancyFormLoading'></div><div id='fancyFormStatus'></div>");
    
    //now bind to the form's submit function and do some magic
    $(this).submit(function() {
    	//step one hide the form and show loader div
    	$('div#fancyFormContent').fadeOut('slow');
    	$('div#fancyFormLoading').fadeIn('slow');
    	
    	//step two send the form
    	var formData = $(this).serialize(); //load in all the form fields
    	var formAction = $(this).attr('action'); // grab the forms action for sending
    	$.postJSON(formAction + '?callback=json', 
    		formData,
    		function(data) {
	    		//if all went well then show success message
	    		if(data.status == 'success') {
	    			$('div#fancyFormLoading').fadeOut('slow');
	    			$('div#fancyFormStatus').append("<p id='fancyFormMessage'>"+ data.message +"</p>").fadeIn('slow');
	    		}
	    		// if all did not go so well show failure message
	    		else { alert('Complete and utter failure has occured'); }
	    	}
    	);
    	return false;
    });
  });
};