$(document).ready(function(){
  var color = [ //small
  {
    'When': 'small',
    'Value': 'lavender',
    'Text': 'lavender'
  }, {
    'When': 'small',
    'Value': 'mauve',
    'Text': 'mauve'
  }, {
    'When': 'small',
    'Value': 'mint',
    'Text': 'mint'
  }, {
    'When': 'small',
    'Value': 'olive',
    'Text': 'olive'
  }, {
    'When': 'small',
    'Value': 'yellow',
    'Text': 'yellow'
  }, //medium
  {
    'When': 'medium',
    'Value': 'lavender',
    'Text': 'lavender'
  }, {
    'When': 'medium',
    'Value': 'light_blue',
    'Text': 'light blue'
  }, {
    'When': 'medium',
    'Value': 'mauve',
    'Text': 'mauve'
  }, {
    'When': 'medium',
    'Value': 'mint',
    'Text': 'mint'
  }, {
    'When': 'medium',
    'Value': 'olive',
    'Text': 'olive'
  }, {
    'When': 'medium',
    'Value': 'pink',
    'Text': 'pink'
  }, {
    'When': 'medium',
    'Value': 'yellow',
    'Text': 'yellow'
  }, //large
  {
    'When': 'large',
    'Value': 'lavender',
    'Text': 'lavender'
  }, {
    'When': 'large',
    'Value': 'light_blue',
    'Text': 'light blue'
  }, {
    'When': 'large',
    'Value': 'mauve',
    'Text': 'mauve'
  }, {
    'When': 'large',
    'Value': 'mint',
    'Text': 'mint'
  }, {
    'When': 'large',
    'Value': 'olive',
    'Text': 'olive'
  }, {
    'When': 'large',
    'Value': 'pink',
    'Text': 'pink'
  }, {
    'When': 'large',
    'Value': 'yellow',
    'Text': 'yellow'
  }, //extra_large
  {
    'When': 'extra_large',
    'Value': 'lavender',
    'Text': 'lavender'
  }, {
    'When': 'extra_large',
    'Value': 'light_blue',
    'Text': 'light blue'
  }, {
    'When': 'extra_large',
    'Value': 'mauve',
    'Text': 'mauve'
  }, {
    'When': 'extra_large',
    'Value': 'mint',
    'Text': 'mint'
  }, {
    'When': 'extra_large',
    'Value': 'olive',
    'Text': 'olive'
  }, {
    'When': 'extra_large',
    'Value': 'yellow',
    'Text': 'yellow'
  }];
  /* Connect #4_color to #1_size */
  jQuery("#2_color").cascade("#1_size", {
    list: color,
    template: commonTemplate,
    match: commonMatch
  });
  $('#1_size').trigger("change.cascade");
});
