$(document).ready(function(){
   
    var color = [/*Dependent On: 1_design */  
     /* casino  */
    {
        'When': 'casino',
        'Value': 'aruba',
        'Text': 'aruba'
    }, {
        'When': 'casino',
        'Value': 'bahama_blue',
        'Text': 'bahama blue'
    }, {
        'When': 'casino',
        'Value': 'blue',
        'Text': 'blue'
    }, {
        'When': 'casino',
        'Value': 'burgundy',
        'Text': 'burgundy'
    }, {
        'When': 'casino',
        'Value': 'butter_yellow',
        'Text': 'butter yellow'
    }, {
        'When': 'casino',
        'Value': 'chocolate',
        'Text': 'chocolate'
    }, {
        'When': 'casino',
        'Value': 'deep_blue',
        'Text': 'deep blue'
    }, {
        'When': 'casino',
        'Value': 'deep_green',
        'Text': 'deep green'
    }, {
        'When': 'casino',
        'Value': 'deep_red',
        'Text': 'deep red'
    }, {
        'When': 'casino',
        'Value': 'gold',
        'Text': 'gold'
    }, {
        'When': 'casino',
        'Value': 'lilac',
        'Text': 'lilac'
    }, {
        'When': 'casino',
        'Value': 'mint',
        'Text': 'mint'
    }, {
        'When': 'casino',
        'Value': 'periwinkle',
        'Text': 'periwinkle'
    }, {
        'When': 'casino',
        'Value': 'pink',
        'Text': 'pink'
    }, {
        'When': 'casino',
        'Value': 'sage',
        'Text': 'sage'
    }, {
        'When': 'casino',
        'Value': 'sky',
        'Text': 'sky'
    }, {
        'When': 'casino',
        'Value': 'tuxedo',
        'Text': 'tuxedo'
    },    /* fifth_avenue*/
    {
        'When': 'fifth_avenue',
        'Value': 'aruba',
        'Text': 'aruba'
    }, {
        'When': 'fifth_avenue',
        'Value': 'bahama_blue',
        'Text': 'bahama blue'
    }, {
        'When': 'fifth_avenue',
        'Value': 'blue',
        'Text': 'blue'
    }, {
        'When': 'fifth_avenue',
        'Value': 'burgundy',
        'Text': 'burgundy'
    }, {
        'When': 'fifth_avenue',
        'Value': 'butter_yellow',
        'Text': 'butter yellow'
    }, {
        'When': 'fifth_avenue',
        'Value': 'chocolate',
        'Text': 'chocolate'
    }, {
        'When': 'fifth_avenue',
        'Value': 'coco_pink',
        'Text': 'coco pink'
    }, {
        'When': 'fifth_avenue',
        'Value': 'deep_blue',
        'Text': 'deep blue'
    }, {
        'When': 'fifth_avenue',
        'Value': 'deep_red',
        'Text': 'deep red'
    }, {
        'When': 'fifth_avenue',
        'Value': 'gold',
        'Text': 'gold'
    }, {
        'When': 'fifth_avenue',
        'Value': 'grapefruit',
        'Text': 'grapefruit'
    }, {
        'When': 'fifth_avenue',
        'Value': 'lilac',
        'Text': 'lilac'
    }, {
        'When': 'fifth_avenue',
        'Value': 'mint',
        'Text': 'mint'
    }, {
        'When': 'fifth_avenue',
        'Value': 'pale_pink',
        'Text': 'pale pink'
    }, {
        'When': 'fifth_avenue',
        'Value': 'periwinkle',
        'Text': 'periwinkle'
    }, {
        'When': 'fifth_avenue',
        'Value': 'pink',
        'Text': 'pink'
    }, {
        'When': 'fifth_avenue',
        'Value': 'sage',
        'Text': 'sage'
    }, {
        'When': 'fifth_avenue',
        'Value': 'sky',
        'Text': 'sky'
    }, {
        'When': 'fifth_avenue',
        'Value': 'spice',
        'Text': 'spice'
    }, {
        'When': 'fifth_avenue',
        'Value': 'tangerine',
        'Text': 'tangerine'
    }, {
        'When': 'fifth_avenue',
        'Value': 'tuxedo',
        'Text': 'tuxedo'
    },/* filigree */ {
        'When': 'filigree',
        'Value': 'aruba',
        'Text': 'aruba'
    }, {
        'When': 'filigree',
        'Value': 'bahama_blue',
        'Text': 'bahama blue'
    }, {
        'When': 'filigree',
        'Value': 'blue',
        'Text': 'blue'
    }, {
        'When': 'filigree',
        'Value': 'burgundy',
        'Text': 'burgundy'
    }, {
        'When': 'filigree',
        'Value': 'butter_yellow',
        'Text': 'butter yellow'
    }, {
        'When': 'filigree',
        'Value': 'chocolate',
        'Text': 'chocolate'
    }, {
        'When': 'filigree',
        'Value': 'coco_pink',
        'Text': 'coco pink'
    }, {
        'When': 'filigree',
        'Value': 'deep_blue',
        'Text': 'deep blue'
    }, {
        'When': 'filigree',
        'Value': 'deep_red',
        'Text': 'deep red'
    }, {
        'When': 'filigree',
        'Value': 'gold',
        'Text': 'gold'
    }, {
        'When': 'filigree',
        'Value': 'grapefruit',
        'Text': 'grapefruit'
    }, {
        'When': 'filigree',
        'Value': 'lilac',
        'Text': 'lilac'
    }, {
        'When': 'filigree',
        'Value': 'mint',
        'Text': 'mint'
    }, {
        'When': 'filigree',
        'Value': 'pale_pink',
        'Text': 'pale pink'
    }, {
        'When': 'filigree',
        'Value': 'periwinkle',
        'Text': 'periwinkle'
    }, {
        'When': 'filigree',
        'Value': 'pink',
        'Text': 'pink'
    }, {
        'When': 'filigree',
        'Value': 'sage',
        'Text': 'sage'
    }, {
        'When': 'filigree',
        'Value': 'sky',
        'Text': 'sky'
    }, {
        'When': 'filigree',
        'Value': 'spice',
        'Text': 'spice'
    }, {
        'When': 'filigree',
        'Value': 'tangerine',
        'Text': 'tangerine'
    }, {
        'When': 'filigree',
        'Value': 'tuxedo',
        'Text': 'tuxedo'
    },/* cosmopolitan  */ {
        'When': 'cosmopolitan',
        'Value': 'aruba',
        'Text': 'aruba'
    }, {
        'When': 'cosmopolitan',
        'Value': 'bahama_blue',
        'Text': 'bahama blue'
    }, {
        'When': 'cosmopolitan',
        'Value': 'blue',
        'Text': 'blue'
    }, {
        'When': 'cosmopolitan',
        'Value': 'burgundy',
        'Text': 'burgundy'
    }, {
        'When': 'cosmopolitan',
        'Value': 'butter_yellow',
        'Text': 'butter yellow'
    }, {
        'When': 'cosmopolitan',
        'Value': 'chocolate',
        'Text': 'chocolate'
    }, {
        'When': 'cosmopolitan',
        'Value': 'coco_pink',
        'Text': 'coco pink'
    }, {
        'When': 'cosmopolitan',
        'Value': 'deep_blue',
        'Text': 'deep blue'
    }, {
        'When': 'cosmopolitan',
        'Value': 'deep_red',
        'Text': 'deep red'
    }, {
        'When': 'cosmopolitan',
        'Value': 'gold',
        'Text': 'gold'
    }, {
        'When': 'cosmopolitan',
        'Value': 'grapefruit',
        'Text': 'grapefruit'
    }, {
        'When': 'cosmopolitan',
        'Value': 'lilac',
        'Text': 'lilac'
    }, {
        'When': 'cosmopolitan',
        'Value': 'mint',
        'Text': 'mint'
    }, {
        'When': 'cosmopolitan',
        'Value': 'pale_pink',
        'Text': 'pale pink'
    }, {
        'When': 'cosmopolitan',
        'Value': 'periwinkle',
        'Text': 'periwinkle'
    }, {
        'When': 'cosmopolitan',
        'Value': 'pink',
        'Text': 'pink'
    }, {
        'When': 'cosmopolitan',
        'Value': 'sage',
        'Text': 'sage'
    }, {
        'When': 'cosmopolitan',
        'Value': 'sky',
        'Text': 'sky'
    }, {
        'When': 'cosmopolitan',
        'Value': 'spice',
        'Text': 'spice'
    }, {
        'When': 'cosmopolitan',
        'Value': 'tangerine',
        'Text': 'tangerine'
    }, {
        'When': 'cosmopolitan',
        'Value': 'tuxedo',
        'Text': 'tuxedo'
    },/* riva  */ {
        'When': 'riva',
        'Value': 'aruba',
        'Text': 'aruba'
    }, {
        'When': 'riva',
        'Value': 'bahama_blue',
        'Text': 'bahama blue'
    }, {
        'When': 'riva',
        'Value': 'blue',
        'Text': 'blue'
    }, {
        'When': 'riva',
        'Value': 'burgundy',
        'Text': 'burgundy'
    }, {
        'When': 'riva',
        'Value': 'butter_yellow',
        'Text': 'butter yellow'
    }, {
        'When': 'riva',
        'Value': 'chocolate',
        'Text': 'chocolate'
    }, {
        'When': 'riva',
        'Value': 'coco_pink',
        'Text': 'coco pink'
    }, {
        'When': 'riva',
        'Value': 'deep_blue',
        'Text': 'deep blue'
    }, {
        'When': 'riva',
        'Value': 'deep_red',
        'Text': 'deep red'
    }, {
        'When': 'riva',
        'Value': 'gold',
        'Text': 'gold'
    }, {
        'When': 'riva',
        'Value': 'grapefruit',
        'Text': 'grapefruit'
    }, {
        'When': 'riva',
        'Value': 'lilac',
        'Text': 'lilac'
    }, {
        'When': 'riva',
        'Value': 'mint',
        'Text': 'mint'
    }, {
        'When': 'riva',
        'Value': 'pale_pink',
        'Text': 'pale pink'
    }, {
        'When': 'riva',
        'Value': 'periwinkle',
        'Text': 'periwinkle'
    }, {
        'When': 'riva',
        'Value': 'pink',
        'Text': 'pink'
    }, {
        'When': 'riva',
        'Value': 'sage',
        'Text': 'sage'
    }, {
        'When': 'riva',
        'Value': 'sky',
        'Text': 'sky'
    }, {
        'When': 'riva',
        'Value': 'spice',
        'Text': 'spice'
    }, {
        'When': 'riva',
        'Value': 'tangerine',
        'Text': 'tangerine'
    }, {
        'When': 'riva',
        'Value': 'tuxedo',
        'Text': 'tuxedo'
    },/*softhearts*/
	{
        'When': 'softhearts',
        'Value': 'aruba',
        'Text': 'aruba'
    }, {
        'When': 'softhearts',
        'Value': 'bahama_blue',
        'Text': 'bahama blue'
    }, {
        'When': 'softhearts',
        'Value': 'blue',
        'Text': 'blue'
    }, {
        'When': 'softhearts',
        'Value': 'butter_yellow',
        'Text': 'butter yellow'
    }, {
        'When': 'softhearts',
        'Value': 'deep_red',
        'Text': 'deep red'
    }, {
        'When': 'softhearts',
        'Value': 'gold',
        'Text': 'gold'
    }, {
        'When': 'softhearts',
        'Value': 'grapefruit',
        'Text': 'grapefruit'
    }, {
        'When': 'softhearts',
        'Value': 'lilac',
        'Text': 'lilac'
    }, {
        'When': 'softhearts',
        'Value': 'mint',
        'Text': 'mint'
    }, {
        'When': 'softhearts',
        'Value': 'pale_pink',
        'Text': 'pale pink'
    }, {
        'When': 'softhearts',
        'Value': 'periwinkle',
        'Text': 'periwinkle'
    }, {
        'When': 'softhearts',
        'Value': 'pink',
        'Text': 'pink'
    }, {
        'When': 'softhearts',
        'Value': 'sage',
        'Text': 'sage'
    }, {
        'When': 'softhearts',
        'Value': 'sky',
        'Text': 'sky'
    }, {
        'When': 'softhearts',
        'Value': 'spice',
        'Text': 'spice'
    }, {
        'When': 'softhearts',
        'Value': 'tangerine',
        'Text': 'tangerine'
    }, ];
	
    /* Connect #2_color to #1_design */
    jQuery("#2_color").cascade("#1_design", {
        list: color,
        template: commonTemplate,
        match: commonMatch
    });
	 function setMaxLength(element_id, length){
        $(element_id).attr("maxlength", length);
        note = element_id + '_note';
        $(note).html('(up to ' + length + ' characters)');
    }
	 $("#1_design").change(function(){
		textfieldChange();
  });
  $("#3_shape").change(function(){
		textfieldChange();
  });
   //$("#1_design").bind("change", textfieldChange());
  // $("#3_shape").bind("change", textfieldChange());
   
    function textfieldChange(){
 		$('#4_text1').val(''); //set value to none when onchange
        $('#5_text2').val(''); //set value to none when onchange
         var design = $('#1_design').val();
		 var shape = $('#3_shape').val();
		if (shape =='round_MS22' && design == 'casino'){
			setMaxLength('#4_text1', 25);
            setMaxLength('#5_text2', 25);
		}
		if (shape =='round_MS22' && design == 'fifth_avenue'){
			setMaxLength('#4_text1', 36);
            setMaxLength('#5_text2', 18);
		}
		if (shape =='round_MS22' && design == 'filigree'){
			setMaxLength('#4_text1', 25);
            setMaxLength('#5_text2', 30);
		}
		if (shape =='round_MS22' && design == 'cosmopolitan'){
			setMaxLength('#4_text1', 25);
            setMaxLength('#5_text2', 25);
		}
		if (shape =='round_MS22' && design == 'riva'){
			setMaxLength('#4_text1', 35);
            setMaxLength('#5_text2', 2);
		}
		if (shape =='round_MS22' && design == 'softhearts'){
			setMaxLength('#4_text1', 32);
            setMaxLength('#5_text2', 40);
		}
		
		if (shape =='square_MS21' && design == 'casino'){
			setMaxLength('#4_text1', 25);
            setMaxLength('#5_text2', 25);
		}
		if (shape =='square_MS21' && design == 'fifth_avenue'){
			setMaxLength('#4_text1', 40);
            setMaxLength('#5_text2', 20);
		}
		if (shape =='square_MS21' && design == 'filigree'){
			setMaxLength('#4_text1', 30);
            setMaxLength('#5_text2', 25);
		}
		if (shape =='square_MS21' && design == 'cosmopolitan'){
			setMaxLength('#4_text1', 30);
            setMaxLength('#5_text2', 35);
		}
		if (shape =='square_MS21' && design == 'riva'){
			setMaxLength('#4_text1', 40);
            setMaxLength('#5_text2', 2);
		}
		if (shape =='square_MS21' && design == 'softhearts'){
			setMaxLength('#4_text1', 32);
            setMaxLength('#5_text2', 40);
		}
 };
    $('#1_design').trigger("change");
    $('#1_design').trigger("change.cascade");
});