var form_handler = {
	form: '', 		// CSS selector for our form
	container: '',	// CSS selector for our form's container
	header: '',		// CSS selector for our form's header
	legend: '',		// CSS selector for our form's legend
	disclaimer: '',	// CSS selector for our form's disclaimer
	response: '',	// Our AJAX response

	// Takes a form and breaks its input tags down to key value pairs and returns them as an object
	values: function() {
		var variables = {};

		// For each input element in the form, create an entry with the element's name in our variables element, and attach its value
		$(this.form).find(':input').each(function() {
			variables[$(this).attr('name')] = $(this).val()
		})

		return variables;
	},
	
	// Throbber object, contains its HTML DNA, and on/off functions
	throbber: {
		on: function() {
			$(this.container)
				.after("<div id='throbber' style='display:none'></div>")
				.fadeOut('normal')
			$('#throbber').fadeIn('normal')
		},
		off: function() {
			$(this.container).fadeIn('normal')
			$('#throbber').fadeOut('normal', function() { $(this).remove() })
		}
	},
	
	// On form submit: make the request, hide the form, and show the throbber
	submit: function() {
		this.throbber.on.apply(this) // Turn on the throbber / hide the container; JS's explicit binding == poo

		// Post request to our inteface script. For our post vars, use fetchVars to parse the form's input itemns into an object with the form's current values
		// Come good or ill, we call up diplayReply to parse the server's response and display the relevent info
		var request = $.ajax({
			type:		"POST",
			url:		template_directory + "/includes/interface.php",
			data:		this.values(),
			success:	function(data)	{ form_handler.response = data; form_handler.display_reply() },
			error: 		function()		{ form_handler.response = data; form_handler.display_reply() }
		})
	},

	// All we really need from the server response is the response type; this form parses that out from XML input
	parse_reply: function() {
		// If we have an XML response, the request worked; parse it and grab the reply type
		if (this.response) {
			return $(this.response).find('response:first action').text()
		// Otherwise the request failed; let the switch below default out
		} else {
			return 'error'
		}
	},

	// Take the server response, check the type of response, and display a relevant message, hiding the form element if we have a terminal status (hard error or success)
	display_reply: function() {
		var response_type = this.parse_reply()
		
		// Gut the legend div
		$(this.legend)
			.find('*').remove()
			.end().append('<p></p>')		

		var legend = $(this.legend).find('p:first')	

		// Print out our response message based on our reply from the server
		switch (response_type) {
			case 'success':
				$(this.header).text('Thank you')
				legend.text("Thank you for subscribing! We've added you to our email club, so now you'll be the first to hear about upcoming events and promotions.")
				$(this.form + ',' + this.disclaimer).remove() // We're done, we don't need the form anymore
			break
			case 'retry':
				$(this.header).text('Please try again')
				legend.text("We couldn't add to our email club as your email address appears invalid. Please double-check your email address and try again.")
			break
			case 'error':
				$(this.header).text('Error')
				legend.html("We couldn't add to our email club. Please contact the <a href='mailto:webmaster@ontheedgedesign.com'>Webmaster</a> who will be able to add you to the list.")
				$(this.form + ',' + this.disclaimer).remove() // We're done, we don't need the form anymore
			break
		}
		
		this.throbber.off.apply(this); // Hide the throbber, show the content; JS's explicit binding == poo
	}
}