jQuery(function() {
  /* add 'plate' class and remove 'for' from label (because we handle onclicks ourselves) */
  jQuery('.adult_option,.child_option').addClass('plate');
  jQuery('.plate label').removeAttr('for');
  highlightPlatesByValue('#adult_options');
  highlightPlatesByValue('#child_options');
  jQuery('.adult_option').click(function() {
    var radio = jQuery(':radio', this);
    radio.attr('checked', !radio.attr('checked'));
    highlightPlatesByValue('#adult_options');
  });
  jQuery('.adult_option').hover(function() {
    var radio = jQuery(':radio', this);
    highlightPlatesUpTo(radio.val(), '#adult_options')
  }, function() {
    highlightPlatesByValue('#adult_options');
  });
  
  jQuery('.child_option').click(function() {
    var radio = jQuery(':radio', this);
    radio.attr('checked', !radio.attr('checked'));
    highlightPlatesByValue('#child_options');
  });
  jQuery('.child_option').hover(function() {
    var radio = jQuery(':radio', this);
    highlightPlatesUpTo(radio.val(), '#child_options')
  }, function() {
    highlightPlatesByValue('#child_options');
  });
});

function highlightPlatesByValue(container) {
  highlightPlatesUpTo(jQuery(':checked', container).val(), container)
}

function highlightPlatesUpTo(value, container) {
  if (value) {
    jQuery('.plate:lt('+value+')', container).removeClass('plate_unhighlighted').addClass('plate_highlighted');		
    jQuery('.plate:eq('+(value-1)+')', container).addClass('plate_current');
    jQuery('.plate:not(:eq('+(value-1)+'))', container).removeClass('plate_current');
    jQuery('.plate:gt('+(value-1)+')', container).removeClass('plate_highlighted').addClass('plate_unhighlighted');
  } else {
    jQuery('.plate', container).removeClass('plate_current').removeClass('plate_highlighted').addClass('plate_unhighlighted');
  }
}