$(function() {
  
  gap_data = {
    '40': {
      '70': "3/32", '80': "1/8", '90': "5/32", '100': "3/16", '110': "7/32", '120': "1/4" 
    },
    '50': {
      '70': "1/16", '80': "3/32", '90': "1/8", '100': "5/32", '110': "3/16", '120': "7/32"
    },
    '60': {
      '70': "1/32", '80': "1/16", '90': "3/32", '100': "1/8", '110': "5/32", '120': "3/16"
    },
    '70': {
      '80': "1/32", '90': "1/16", '100': "3/32", '110': "1/8", '120': "5/32"  
    },
    '80': {
      '90': "1/32", '100':  "1/16", '110': "3/32", '120': "1/8"    
    },
    '90': {
      '100': "1/32", '110': "1/16", '120': "3/32"
    },
    '100': {
      '110': "1/32", '120': "1/16"
    }
  }
  set_result = function() {
    var res = gap_data[$('#select1').val()][$('#select2').val()] + '"';
    $('#result_box').val(res);
  }

  populate_select2 = function() {
    $('#select2_input').remove()
    $('#select2_container').remove();
    var options = '';
    $.each(gap_data[$('#select1').val()], function(j, val) {
      options += '<option value="' + j + '">' + j + '</option>';
    });
    $('#select2').html(options).selectbox({
      onChange: function(e) {
        $('#select2').val($('#select2_input').val());
        set_result();
        return false;
      }
    });
    set_result();
  };
   
  var options = '';
  for (i in gap_data) {
    options += '<option value="' + i + '">' + i + '</option>';
  }
  $('#select1').html(options);  
  populate_select2();
  $('#select1').selectbox({
    onChange: function(e) {
      $('#select1').val($('#select1_input').val());
      populate_select2();
      return false;
    }
  });
});