var defaultOption = '<option value="">Choose:</option>';
var blankOption = '<option value="">---------</option>';
$(function(){
  $("#new_make").html(blankOption); $('#new_make option:first').attr('selected', 'selected');
  $("#new_model").html(blankOption); $('#new_model option:first').attr('selected', 'selected');
  $("#new_trim").html(blankOption); $('#new_trim option:first').attr('selected', 'selected');
  $.getJSON("/carselect",{get: 'years'}, function(j){
    var options = defaultOption;
    for (var i = 0; i < j.length; i++) {
      options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
    }
    $("#new_year").html(options);
    $('#new_year option:first').attr('selected', 'selected');
  });
  $("#new_year").change(function(){
    $("#new_trim").html(blankOption); $('#new_trim option:first').attr('selected', 'selected');
    $("#new_model").html(blankOption); $('#new_model option:first').attr('selected', 'selected');
    $.getJSON("/carselect",{get: 'makes', year: $("#new_year").val()}, function(j){
      var options = defaultOption;
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("#new_make").html(options); $('#new_make option:first').attr('selected', 'selected');
    })
  });
  $("#new_make").change(function(){
    $("#new_trim").html(blankOption); $('#new_trim option:first').attr('selected', 'selected');
    $.getJSON("/carselect",{get: 'models', year: $("#new_year").val(), make: $("#new_make").val()}, function(j){
      var options = defaultOption;
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("#new_model").html(options); $('#new_model option:first').attr('selected', 'selected');
    })
  });
  $("#new_model").change(function(){
    $.getJSON("/carselect",{get: 'trims', year: $("#new_year").val(), make: $("#new_make").val(), model: $("#new_model").val()}, function(j){
      var options = defaultOption;
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("#new_trim").html(options); $('#new_trim option:first').attr('selected', 'selected');
    })
  });
})