$(document).ready(function(){
	$("#calculator")
		.before("<link rel='stylesheet' type='text/css' href='/tools/circ.css'>")
		.html("<i>Loading calculator...</i>");
	$("#calculator")
		.load("/tools/circ.php", '', function() {
			$("#calculate").click(function(event){
				$(this)
					.text('Calculating...')
					.attr("disabled", "disabled");
				$.ajax({
					url: "/tools/circ.php",
					type: "POST",
					dataType: "json",
					data: ({
						structure_diameter: $('#structure_diameter').val(),
						pipe_1_angle: $('#pipe_1_angle').val(),
						pipe_1_hole_size: $('#pipe_1_hole_size').val(),
						pipe_2_angle: $('#pipe_2_angle').val(),
						pipe_2_hole_size: $('#pipe_2_hole_size').val()
						}),
					success: function(response){
						$("#calculation_result")
							.text(response.payload)
							.effect('highlight', { color: response.flash_color }, 1000);
					},
					error: function(request, textStatus, errorThrown){
						$("#calculation_result")
							.text("An error occurred. Please try again.")
							.effect('highlight', { color: 'red' }, 1000);
					},
					complete: function (request, textStatus) {
						$('#calculate')
							.text('Calculate')
							.removeAttr('disabled');
					}
				});
			});
	});
});