$(document).ready(function() {
	
	$("#result_wrapper").hide();
						   
	var toggleImage = function(elem) {
		if ($(elem).hasClass("shown")) {
			$(elem).removeClass("shown").addClass("hidden");
			$("img", elem).attr("src", "/images/add.gif");
		}
		else {
			$(elem).removeClass("hidden").addClass("shown");
			$("img", elem).attr("src", "/images/reject.gif");
		}
	};

	$("h2.toggle a").click(function() {
		$(this).parent().next().slideToggle("slow");
		toggleImage($(this).parent());
		return false;
	});
	
	$("#subm").click(function(e) {
		e.preventDefault();	
		
		$("#loading").show();

		
		var $arr = { width: $("#width option:selected").html(), 
					 ar: $("#ar option:selected").html(),
					 wheel: $("#wheel option:selected").html(),
					 newwheel: $("#newwheel option:selected").html()
					};
					
		var d = Math.round( ($arr["wheel"]*25.4 + 2*$arr["width"]*$arr["ar"]/100)) ;
		var s = $arr["width"]*$arr["ar"]/100;
		
		$("#tyreinfo > *").remove();
		var tbl = "<table class=\"tbl\"><tbody></tbody></table>";
		$(tbl).appendTo("#tyreinfo");
		var tbl_c = "<tr class=\"orig_size\"><th>Original Size</th><td>" + $arr["width"] + "/" + $arr["ar"] + "R" + $arr["wheel"] + "</td></tr><tr><th>Wheel Diameter</th><td>" + $arr["wheel"] + "\"</td></tr><tr><th>Thread Width</th><td>" + $arr["width"] + " mm</td><tr><th>Sidewall</th><td>" + s + " mm</td></tr><tr><th>Diameter</th><td>" + d + " mm</td></tr>";
		$(tbl_c).appendTo("#tyreinfo tbody");		

						
		$.post("serv.php", $arr, function(xml) {
						
			$("#result *").remove();
			$("#loading").hide();
			
			if ($(xml).find("err").size()) {
				$("#result_clear").hide();
				var err = "<p><strong>Sorry, no tyres found that could fit.</strong></p>";
				$(err).appendTo("#result");
			} else {
				
				var table = "<table class=\"tbl\"><tbody></tbody></table>";
				$(table).appendTo("#result");
				var header = "<tr><th>Alternate Size</th><th>Sidewall</th><th>Diameter</th><th>Difference</th></tr>";
				$(header).appendTo("#result tbody");
				
				var minimum = Math.abs(($(xml).find('tyre:first').find('perc').text()));
				
				$(xml).find('tyre').each(function() {
					var width = $(this).find('width').text();
					var ar = $(this).find('ar').text();
					var diam = $(this).find('diam').text();
					var nd = $(this).find('nd').text();
					var perc = $(this).find('perc').text();
					if (Math.abs(perc)<minimum) minimum = Math.abs(perc);
					
					var sidewall = width*ar/100;
					var tblrow = "<tr><td>" + width + "/" + ar + "R" + diam +  "</td><td>" + sidewall + " mm</td><td>" + nd + ' mm</td><td class="difference">' + perc + "%</td></tr>";
					$(tblrow).appendTo("#result tbody");
				});

				$("#result_clear").show();
			}
			
			$("#result_wrapper").show();

     	},"xml"); 

	});

});