var $j = jQuery.noConflict();

$j(document).ready(function(){
	$j(".sponsor").click(function(event){
		event.preventDefault();
		
		$j("#sponsor-form").remove();
		
		$j(this).parents("p").after(
			$j("<div/>").attr("id", "sponsor-form")
				.append($j("<fieldset/>")
					.append("<legend>Thank you for sponsoring a child through Fountain of Hope Children's Home.</legend>")
					.append("<p>Registered Canadian Charity # 839266020 RR0001</p>")
					.append("<p>Please let us know whom you'd like to help, and share your credit card information to complete the process. Your donation will be charged to your credit card on the first day of each month. A tax receipt will be issued.</p>")
					.append("<p>Our photos and bios are being prepared by hand and mailed from Malawi so please be patient with our small, busy team.</p>")
					.append("<p><strong>Thank you again for your generosity!</strong></p>")
					.append($j("<ol/>")
						.append($j("<li/>")
							.append("<label for=\"name\">Your name:</label> ")
							.append("<input type=\"text\" name=\"name\" value=\"\" />")
						)
						.append($j("<li/>")
							.append("<p><strong>I would like to support:</strong></p>")
							.append("<input type=\"radio\" name=\"gender\" id=\"gender-female\" value=\"female\" />")
							.append("<label for=\"gender-female\">girl</label> ")
							.append("<input type=\"radio\" name=\"gender\" id=\"gender-male\" value=\"male\" />")
							.append("<label for=\"gender-male\">boy</label> ")
							.append("<input type=\"radio\" name=\"gender\" id=\"gender-unspecified\" value=\"unspecified\" checked=\"checked\" />")
							.append("<label for=\"gender-unspecified\">whomever needs it most</label>")
						)
						.append($j("<li/>")
							.append("<input type=\"radio\" name=\"age\" id=\"age-0-6\" value=\"0-6\" />")
							.append("<label for=\"age-0-6\">0-6</label> ")
							.append("<input type=\"radio\" name=\"age\" id=\"age-7-13\" value=\"7-13\" />")
							.append("<label for=\"age-7-13\">7-13</label> ")
							.append("<input type=\"radio\" name=\"age\" id=\"age-14-21\" value=\"14-21\" />")
							.append("<label for=\"age-14-21\">14-21</label> ")
							.append("<input type=\"radio\" name=\"age\" id=\"age-unspecified\" value=\"unspecified\" checked=\"checked\" />")
							.append("<label for=\"age-unspecified\">whomever needs it most</label>")
						)
					)
					.append($j("<div/>")
						.append(
							$j("<input/>").attr({ "type": "submit", "value": "Continue" })
								.click(function(){
									var form = $j("#sponsor-form");
									var data = {
										"sponsor-ajax": 1,
										"name": form.find("input[name='name']").val(),
										"gender": form.find("input[name='gender']:checked").val(),
										"age": form.find("input[name='age']:checked").val()
									};
									
									if (data.name == undefined || data.name.length == 0) {
										return alert("Please enter your name.");
									}
									
									if (data.gender == undefined || data.gender.length == 0) {
										return alert("Please enter the gender of the child you wish to support.");
									}
									
									if (data.age == undefined || data.age.length == 0) {
										return alert("Please enter the age of the child you wish to support.");
									}
									
									$j(this).attr("disabled", "disabled");
									$j(this).after(" <img src=\"<?php bloginfo('stylesheet_directory'); ?>/images/loading.gif\" /> Please wait...");
									
									jQuery.post(".", data, function(data) {
										if (data.result == 1) {
											window.location = event.target.href;
										}
										else {
											alert("Error saving your information.");
										}
									}, 'json');
								})
						)
					)
			)
		);
	});
});