$(function(){
	   
    var $resultsoutput = $('#results');
    
    
    $('#fMake1').change(function getmodels(){
        var vehmake = $("#fMake1").val(); //selected vehicle make
		$.ajax({
               url: "models1.php",
               global: false,
               type: "POST",
               async: false,
               dataType: "html",
               data: "&make="+vehmake, //the name of the $_POST variable and its value
               success: function (response) //'response' is the output provided
                           {
							   //alert(response);
                         //counts the number of dynamically generated options
                        var dynamic_options = $("*").index( $('.dynamic')[0] );
						//alert(dynamic_options);
                        //removes previously dynamically generated options if they exists (not equal to 0)
                        if (dynamic_options != (-1))  $(".dynamic").remove();
						$("#model").attr('disabled', false);
						$("#model").html("");
						 $("#model").append(response);  //append to the select element worked.......!!!
       //                 $("#model").html(response); //instead of writing the html to the select write to a enclosing div...
	   					//alert(response);
						//$("#modelDiv").innerHTML = response; //tried to set the inner html of the div...not worked properly.
                        $(".first").attr({selected: ' selected'}); 
						
						//$("#fMake2").attr('disabled', false);  //enable the second make select box in the second line....
						var selectedMake = $("#fMake1").val();
						/*var selIndex = $("#fMake1 option:selected").prevall.size();*/
						/*alert(selIndex);*/
						/*var selIndex = $("#fMake2 option").index($("#fMake2 option:selected"));*/
						/*$("#fMake2 option[value='Acura']").remove();*/
                        /*$("#fMake2 option:selected").remove();*/ /*works but removes every selected ones.*/
						$("#fMake2").attr('disabled', false);
                       }
              });
              return false
    });
	
	
	    $('#fMake2').change(function getmodels(){
        //var vehyear = $("#year").val();
        var vehmake = $("#fMake2").val();
		//alert(vehmake);
        $.ajax({
               url: "models1.php",
               global: false,
               type: "POST",
               async: false,
               dataType: "html",
               data: "&make="+vehmake, //the name of the $_POST variable and its value
               success: function (response) //'response' is the output provided
                           {
							   $("#model2").attr('disabled','');
							   //alert(response);
                         //counts the number of dynamically generated options
                        var dynamic_options = $("*").index( $('.dynamic')[0] );
						//alert(dynamic_options);
                        //removes previously dynamically generated options if they exists (not equal to 0)
                        if (dynamic_options != (-1)) $(".dynamic").remove();
                        //$("#model2").html(response);
						$("#model2").html("");
						$("#model2").append(response);  //append to the select element worked.......!!!
                        $(".first").attr({selected: ' selected'}); 
						$("#fMake3").attr('disabled', false);
						
                       }
              });
              return false
    });
		
		
		$('#fMake3').change(function getmodels(){
        //var vehyear = $("#year").val();
        var vehmake = $("#fMake3").val();
		//alert(vehmake);
        $.ajax({
               url: "models1.php",
               global: false,
               type: "POST",
               async: false,
               dataType: "html",
               data: "&make="+vehmake, //the name of the $_POST variable and its value
               success: function (response) //'response' is the output provided
                           {
							   //alert(response);
                         //counts the number of dynamically generated options
                        var dynamic_options = $("*").index( $('.dynamic')[0] );
						//alert(dynamic_options);
                        //removes previously dynamically generated options if they exists (not equal to 0)
                        if (dynamic_options != (-1)) $(".dynamic").remove();
                        //$("#fModel3").html(response);
						$("#fModel3").html("");
						$("#fModel3").append(response);  //append to the select element worked.......!!!
                        $(".first").attr({selected: ' selected'}); 
						$("#fModel3").attr('disabled', false);
                       }
              });
              return false
    });
	
	
    $('#model').change(function getstyles(){
       // var vehyear = $("#year").val();
       // var vehmake = $("#make").val();
       // var vehmodel = $("#model").val();
        $.ajax({
               //url: "trims.php",
               //global: false,
               //type: "POST",
               //async: false,
               //dataType: "html",
               //data: "year="+ vehyear+"&make="+vehmake+"&model="+ vehmodel, //the name of the $_POST variable and its value
               success: function (response) //'response' is the output provided
                           {
                        //counts the number of dynamically generated options
                        //var dynamic_options = $("*").index( $('.dynamic')[0] );
                        //removes previously dynamically generated options if they exists (not equal to 0)
                        //if (dynamic_options != (-1)) $(".dynamic").remove();
                        //$("#trim").html(response);
                        $(".first").attr({selected: ' selected'});
                        $("#fMake2").attr('disabled', false);
						//$("#model2").attr('disabled',''); //enables the second model select box...
						
						
						
						}
              });
		
		  
		
              return false
    });               
	
	
	    $('#model2').change(function getstyles(){
         $.ajax({
               //url: "trims.php",
               //global: false,
               //type: "POST",
               //async: false,
               //dataType: "html",
               //data: "year="+ vehyear+"&make="+vehmake+"&model="+ vehmodel, //the name of the $_POST variable and its value
               success: function (response) //'response' is the output provided
                           {
                        //counts the number of dynamically generated options
                        //var dynamic_options = $("*").index( $('.dynamic')[0] );
                        //removes previously dynamically generated options if they exists (not equal to 0)
                        //if (dynamic_options != (-1)) $(".dynamic").remove();
                        //$("#trim").html(response);
                        $(".first").attr({selected: ' selected'});
                        $("#fMake3").attr('disabled', false);
						//$("#model2").attr('disabled',''); //enables the second model select box...
						$("#model2").change(function populatemake2()
							{
								$.ajax({
									   	url: "make.php",
										global: false,
										type: "POST",
										async: false,
										dataType: "html",			
										
									   success: function (response)
									   {
									   }
									   });
								return false
							});
						
						
						}
              });
		
		  
		
              return false
    });               
	

    
    $('form#cardbform select').change(function(){
        if (!$(this).val()){ 
            $resultsoutput.html(''); 
            return; 
        }
        var content = "<b>Selected:</b> " 
            + $('#year').val() + ' '
            + $('#make').val() + ' '
            + $('#model').val() + ' '
            + $('#trim').val();
        $resultsoutput.html(content);    
    });
});