$(document).ready(function() {

		// Trim any input fields on any forms
		$("input").change( function() 
						{ 
							$(this).attr("value", $.trim( $(this).attr("value")	) );
						});
		
		$('form').submit( function() {
					$(this).fadeTo('fast',0.3) ;
	   } ).focus( function() {
					$(this).fadeTo('fast',1) ;
	   } ) ;

		$("#MainBodyContent").corner("round 8px cc:#014bbb").parent().css('padding', '4px').corner("round 10px") ;
        
		//hide when page loads
		$("#ajaxloading_year").css('visibility','hidden' );
		$("#ajaxloading_make").css('visibility','hidden' );
		$("#ajaxloading_width").css('visibility','hidden' );
		$("#ajaxloading_aspectratio").css('visibility','hidden' );
		$("#make").html("<option value=''>Choose Make</option>");
		$("#model").html("<option value=''>Choose Model</option>");
		$("#aspectRatio").html("<option value=''>Choose Aspect Ratio</option>");
		$("#diameter").html("<option value=''>Choose Diameter</option>");
		
		$('#year').change(function() {
			ClearVehicleSearchHighlight() ;
								   
			var year = $("#year option:selected").attr("value") ;
			var make = $("#make option:selected").attr("value") ;
			var model = $("#model option:selected").attr("value") ;
			
			// Set make and model to default values
			$("#make").html("<option value=''>Choose Make</option>");
			$("#model").html("<option value=''>Choose Model</option>");
			
			if ( year.length > 0 )
			{
				$.ajax({ type: "GET", 
					url: "/Data/SearchVehicles.php"  ,
					data: "year=" + escape( year ) , 
					dataType: "xml", 
					cache: true,
					async: true ,
					beforeSend: function( XMLHttpRequest ) { 
								$( "#ajaxloading_year" ).css('visibility','visible');
							},
					complete: function(XMLHttpRequest, textStatus) {
								$( "#ajaxloading_year" ).css('visibility','hidden');
							},
					error: function( a,b,c ) {
						alert("Error returned" ) ;
						SetVehicleSearchHighlight() ;
						//alert(a ); alert(b); alert(c );
					},
					success: function(xml){
							// get options
							pageTracker._trackPageview("/ajax/submit_year");
							$( "#ajaxloading_year" ).css('visibility','hidden');
							SetVehicleSearchHighlight() ;
							$(xml).find('make').each(function(){
									var item_text = $(this).text();
									$("#make").append("<option value='" + item_text + "'>" + item_text + "</option>");
								});
							// Set the make
							if ( make.length > 0 )
							{
								var o = $("#make").attr("options") ;
								var oL = o.length;
								for(var i = 0; i<oL; i++)
								{
									if( o[i].value == make)
									{
										o[i].selected = true;
										break;
									}
								}
								$("#make").change() ;
							}
							// Set the model
							if ( model.length > 0 )
							{
								var o = $("#model").attr("options") ;
								var oL = o.length;
								for(var i = 0; i<oL; i++)
								{
									if( o[i].value == model)
									{
										o[i].selected = true;
										break;
									}
								}
							}					
					}
				} );
			}
		}).change() ;

		$('#make').change(function() {
			ClearVehicleSearchHighlight() ;
			
			var year = $("#year option:selected").attr("value") ;
			var make = $("#make option:selected").attr("value") ;
			var model = $("#model option:selected").attr("value") ;
			
			// Set make and model to default values
			$("#model").html("<option value=''>Choose Model</option>");
			
			if ( make.length > 0 )
			{
				var Data = "year=" + escape( year ) + "&make=" + escape( make ) ;
				$.ajax({ type: "GET", 
					url: "/Data/SearchVehicles.php" ,
					data: Data , 
					dataType: "xml", 
					cache: true,
					async: true ,
					beforeSend: function( XMLHttpRequest ) { 
							$( "#ajaxloading_make" ).css('visibility','visible');			
						},
					complete: function(XMLHttpRequest, textStatus) {
							$( "#ajaxloading_make" ).css('visibility','hidden');	
						},
					error: function( a,b,c ) {
						alert("Error returned" ) ;
							SetVehicleSearchHighlight() ;
						//alert(a ); alert(b); alert(c );
					},
					success: function(xml){
							pageTracker._trackPageview("/ajax/submit_yearmake");
							$( "#ajaxloading_make" ).css('visibility','hidden');	
							SetVehicleSearchHighlight() ;
							// get options
							$(xml).find('model').each(function(){
									var item_text = $(this).text();
									$("#model").append("<option value='" + item_text + "'>" + item_text + "</option>");
								});
							// Set the model
							if ( model.length > 0 )
							{
								var o = $("#model").attr("options") ;
								var oL = o.length;
								for(var i = 0; i<oL; i++)
								{
									if( o[i].value == model)
									{
										o[i].selected = true;
										break;
									}
								}
							}						
					}
				} );
			}
		});
		$('#model').change(function() {
			ClearVehicleSearchHighlight() ;
			SetVehicleSearchHighlight() ;
			$( "#ajaxloading_model" ).css('visibility','visible');	
			pageTracker._trackPageview("/ajax/submit_yearmakemodel");
			$(this).closest("form").submit() ;
		} ) ;

		function ClearVehicleSearchHighlight() {
			$("#VehicleSizes select").css("background-color","#ffffff") ;
			$("#search_vehicle").attr( "disabled", "disabled" ) ;
		}
		function SetVehicleSearchHighlight() {
			ClearVehicleSearchHighlight() ;
			var year = $("#year option:selected").attr("value") ;
			var make = $("#make option:selected").attr("value") ;
			var model = $("#model option:selected").attr("value") ;
			if ( year == "" ) {
				//$("#diameter").animate({ backgroundColor: "#FFFF00" }, 400);
			}
			else if( make == "" ) {
				$("#make").animate({ backgroundColor: "#FFFF00" }, 400). css("background-color","#ffff00");
			}
			else if ( model == "" ) {
				$("#model").animate({ backgroundColor: "#FFFF00" }, 400). css("background-color","#ffff00");
			}
		}		
		
		

		$('#width').change(function() {
			ClearTireSizeHighlight() ;
			var width = $("#width option:selected").attr("value") ;
			var aspectRatio = $("#aspectRatio option:selected").attr("value") ;
			var diameter = $("#diameter option:selected").attr("value") ;
			
			// Set aspectratio and diameter to default values
			$("#aspectRatio").html("<option value=''>Choose Aspect Ratio</option>");
			$("#diameter").html("<option value=''>Choose Diameter</option>");
			
			if ( width.length > 0 )
			{
				$.ajax({ type: "GET", 
					url: "/Data/SearchTireSize.php"  ,
					data: "width=" + escape( width ) , 
					dataType: "xml", 
					cache: true,
					async: true ,
					beforeSend: function( XMLHttpRequest ) { 
							$( "#ajaxloading_width" ).css('visibility','visible');	
						},
					complete: function(XMLHttpRequest, textStatus) {
							$( "#ajaxloading_width" ).css('visibility','hidden');	
						},
					error: function( a,b,c ) {
						alert("Error returned" ) ;
							SetTireSizeHighlight() ;
						//alert(a ); alert(b); alert(c );
					},
					success: function(xml){
							pageTracker._trackPageview("/ajax/submit_width");
							$( "#ajaxloading_width" ).css('visibility','hidden');	
							SetTireSizeHighlight() ;
							// get options
							$(xml).find('aspectRatio').each(function(){
									var item_text = $(this).text();
									$("#aspectRatio").append("<option value='" + item_text + "'>" + item_text + "</option>");
								});
							// Set the aspectratio
							if ( aspectRatio.length > 0 )
							{
								var o = $("#aspectRatio").attr("options") ;
								var oL = o.length;
								for(var i = 0; i<oL; i++)
								{
									if( o[i].value == aspectRatio)
									{
										o[i].selected = true;
										break;
									}
								}
								$("#aspectRatio").change() ;
							}
							// Set the diameter
							if ( diameter.length > 0 )
							{
								var o = $("#diameter").attr("options") ;
								var oL = o.length;
								for(var i = 0; i<oL; i++)
								{
									if( o[i].value == diameter)
									{
										o[i].selected = true;
										break;
									}
								}
							}
					}
				} );
			}
			
		}).change() ;

		$('#aspectRatio').change(function() {
			ClearTireSizeHighlight() ;
			var width = $("#width option:selected").attr("value") ;
			var aspectRatio = $("#aspectRatio option:selected").attr("value") ;
			var diameter = $("#diameter option:selected").attr("value") ;
			
			// Set aspectratio and diameter to default values
			$("#diameter").html("<option value=''>Choose Diameter</option>");
			
			if ( aspectRatio.length > 0 )
			{
				$.ajax({ type: "GET", 
					url: "/Data/SearchTireSize.php"  ,
					data: "width=" + escape( width ) + "&aspectRatio=" + escape( aspectRatio ) , 
					dataType: "xml", 
					cache: true,
					async: true ,
					beforeSend: function( XMLHttpRequest ) { 
							$( "#ajaxloading_aspectratio" ).css('visibility','visible');			
						},
					complete: function(XMLHttpRequest, textStatus) {
							$( "#ajaxloading_aspectratio" ).css('visibility','hidden');	
						},
					error: function( a,b,c ) {
						alert("Error returned" ) ;
							SetTireSizeHighlight() ;
						//alert(a ); alert(b); alert(c );
					},
					success: function(xml){
							pageTracker._trackPageview("/ajax/submit_widthaspectRatio");
							$( "#ajaxloading_aspectratio" ).css('visibility','hidden');	
							SetTireSizeHighlight() ;
							// get options
							$(xml).find('diameter').each(function(){
									var item_text = $(this).text();
									$("#diameter").append("<option value='" + item_text + "'>" + item_text + "</option>");
								});
							// Set the diameter
							if ( diameter.length > 0 )
							{
								var o = $("#diameter").attr("options") ;
								var oL = o.length;
								for(var i = 0; i<oL; i++)
								{
									if( o[i].value == diameter)
									{
										o[i].selected = true;
										break;
									}
								}
							}
					}
				} );
			}
		});
		$('#diameter').change(function() {
					pageTracker._trackPageview("/ajax/submit_widthaspectRatiodiameter");
					ClearTireSizeHighlight() ;
					SetTireSizeHighlight() ;
					$( "#ajaxloading_diameter" ).css('visibility','visible');	
					$(this).closest("form").submit() ;
		} ) ;
		function ClearTireSizeHighlight() {
			$("#ProductList select").css("background-color","#ffffff") ;
			$("#search_size").attr( "disabled", "disabled" ) ;
		}
		function SetTireSizeHighlight() {
			ClearTireSizeHighlight();
			var width = $("#width option:selected").attr("value") ;
			var aspectRatio = $("#aspectRatio option:selected").attr("value") ;
			var diameter = $("#diameter option:selected").attr("value") ;
			if ( width == "" ) {
				//$("#diameter").animate({ backgroundColor: "#FFFF00" }, 400);
			}
			else if( aspectRatio == "" ) {
				$("#aspectRatio").animate({ backgroundColor: "#FFFF00" }, 400). css("background-color","#ffff00");
			}
			else if ( diameter == "" ) {
				$("#diameter").animate({ backgroundColor: "#FFFF00" }, 400). css("background-color","#ffff00");
			} 
		}
		
		
		
	});//end document.ready