$(document).ready(function () {

	// JavaScript only elements
	$(".jsOnly").show();

	var fuelFlag="petrol";
	
	$("#selectModel select").change(function () {
		$("#selectModel select:visible option:selected").each(function () {
			gradeSwitcher( $(this).text() );
		});
	});

	$("li#diesel").click(function(){
		fuelFlag="diesel";
		$(this).addClass("on");
		$("li#petrol").removeClass("on");
		$("select#petrolSelect").hide();
		$("select#dieselSelect").show();
		$("#selectModel select").change();
		//alert("diesel")
	});
	$("li#petrol").click(function(){
		fuelFlag="petrol";
		$(this).addClass("on");
		$("li#diesel").removeClass("on");
		$("select#dieselSelect").hide();
		$("select#petrolSelect").show();
		$("#selectModel select").change();
		//alert("petrol")
	})
	.click();	// Activate initial change
	
	function gradeSwitcher(strCar) {
		// Default options for when the hint is selected
		if ( $("#selectModel select:visible option:eq(0)").text() == $("#selectModel select:visible option:selected").text() ) {
			strCar = $("#selectModel select:visible option:eq(1)").text();
		}
		
		strCar = strCar.toLowerCase().replace(/\s+/g,'');	// Make lower case and remove white space
		
		if (fuelFlag=="diesel") {
			strCar = "diesel"+strCar;
		}
		
		// Hide all
		$("#content tbody tr").hide();
		$("#carPicHolder img:visible").fadeOut("fast", function(){
			// Show the selected cars
			$("#selectModel table tr." + strCar).fadeIn();
			$("#carPicHolder img." + strCar).fadeIn();
		});
		
	};

	
});