$(function(){

  $("select#tyreMake").change(function(){
    $("div#loading-small")
      .fadeIn("fast");
    $("select#tyreSize")
      .attr("value", "0")
      .attr("disabled", "disabled");
    $("select#tyreModel")
      .attr("value", "0")
      .attr("disabled", "disabled");
    $("div#results")
      .html('')
      .fadeOut("slow");
    if (0 != $("select#tyreMake").attr("value")) {
    $.getJSON("/tyre.php", {tyreMake: $("select#tyreMake").attr("value"), tyreModel: $("select#tyreModel").attr("value"), tyreSize: $("select#tyreSize").attr("value"), ajax: 1}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].modelId + '">' + j[i].modelName + '</option>';
      }
      $("select#tyreModel")
        .html(options)
        .removeAttr("disabled");
      $("div#loading-small")
        .fadeOut("fast");
    })
    } else {
      $("div#loading-small")
        .fadeOut("fast");
    }
  })
  
  $("select#tyreModel").change(function(){
    $("div#loading-small")
      .fadeIn("fast");
    $("select#tyreSize")
      .attr("value", "0")
      .attr("disabled", "disabled");
    $("div#results")
      .html('')
      .fadeOut("slow");
    if (0 != $("select#tyreModel").attr("value")) {
    $.getJSON("/tyre.php", {tyreMake: $("select#tyreMake").attr("value"), tyreModel: $("select#tyreModel").attr("value"), tyreSize: $("select#tyreSize").attr("value"), ajax: 1}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].sizeId + '">' + j[i].sizeSize + '</option>';
      }
      $("select#tyreSize")
        .html(options)
        .removeAttr("disabled");
      $("div#loading-small")
        .fadeOut("fast");
    })
    } else {
      $("div#loading-small")
        .fadeOut("fast");
    }
  })
  
  $("select#tyreSize").change(function(){
    $("div#loading-small")
      .fadeIn("fast");
    $("div#results")
      .html('')
      .fadeOut("slow");
    if (0 != $("select#tyreSize").attr("value")) {
    $.get("/tyre.php", {tyreMake: $("select#tyreMake").attr("value"), tyreModel: $("select#tyreModel").attr("value"), tyreSize: $("select#tyreSize").attr("value"), ajax: 1}, function(j){
      $("div#results")
        .html(j)
        .fadeIn("slow");
      $("div#results")
      $("div#loading-small")
        .fadeOut("fast");
    })
    } else {
      $("div#loading-small")
        .fadeOut("fast");
    }
  })
  
})