$(document).ready(function(){

    var color = [/*Dependent On: 1_design */   
    /* baby_carriage  */
    {
        'When': 'baby_carriage',
        'Value': 'blue',
        'Text': 'blue'
    }, {
        'When': 'baby_carriage',
        'Value': 'green',
        'Text': 'green'
    },{
        'When': 'baby_carriage',
        'Value': 'pink',
        'Text': 'pink'
    },  {
        'When': 'baby_carriage',
        'Value': 'yellow',
        'Text': 'yellow'
    },
	/*onesie*/
	{
        'When': 'onesie',
        'Value': 'blue',
        'Text': 'blue'
    },  {
        'When': 'onesie',
        'Value': 'green',
        'Text': 'green'
    },{
        'When': 'onesie',
        'Value': 'pink',
        'Text': 'pink'
    }, {
        'When': 'onesie',
        'Value': 'yellow',
        'Text': 'yellow'
    },
	 /* bib  */ {
        'When': 'bib',
        'Value': 'blue',
        'Text': 'blue'
    }, {
        'When': 'bib',
        'Value': 'green',
        'Text': 'green'
    },{
        'When': 'bib',
        'Value': 'pink',
        'Text': 'pink'
    },  {
        'When': 'bib',
        'Value': 'yellow',
        'Text': 'yellow'
    }, /* rocking_horse_not_personalized  */ {
        'When': 'rocking_horse_not_personalized',
        'Value': 'blue',
        'Text': 'blue'
    },{
        'When': 'rocking_horse_not_personalized',
        'Value': 'green',
        'Text': 'green'
    }, {
        'When': 'rocking_horse_not_personalized',
        'Value': 'pink',
        'Text': 'pink'
    },  {
        'When': 'rocking_horse_not_personalized',
        'Value': 'yellow',
        'Text': 'yellow'
    }, /* ducky */ {
        'When': 'ducky',
        'Value': 'default',
        'Text': 'default'
    }, /* teddy bear */ {
        'When': 'teddy_bear',
        'Value': 'blue',
        'Text': 'blue'
    }, {
        'When': 'teddy_bear',
        'Value': 'pink',
        'Text': 'pink'
    }, {
        'When': 'teddy_bear',
        'Value': 'yellow',
        'Text': 'yellow'
    }, /* moon_and_star*/ {
        'When': 'moon_and_star',
        'Value': 'blue',
        'Text': 'blue'
    }, {
        'When': 'moon_and_star',
        'Value': 'pink',
        'Text': 'pink'
    }, ];
    
    /* Connect #2_color to #1_design */
    jQuery("#2_color").cascade("#1_design", {
        list: color,
        template: commonTemplate,
        match: commonMatch
    });
  
    $("#1_design").bind("change", function(e){
        $('#3_text1').val(''); //set value to none when onchange
        $('#4_text2').val(''); //set value to none when onchange
        $('#5_text3').val(''); //set value to none when onchange
        var opt = this.options[this.selectedIndex].value;
        
        if (opt == 'ducky' || opt == 'baby_carriage' ) {
            $('#3_text1div').show();
            $('#4_text2div').show();
            $('#5_text3div').hide();
        }
        if (opt == 'moon_and_star' || opt == 'teddy_bear'|| opt == 'bib') {
            $('#5_text3div').show();
            $('#3_text1div').show();
            $('#4_text2div').show();
        }
        if (opt == 'onesie' || opt == 'rocking_horse_not_personalized') {
            $('#5_text3div').hide();
            $('#3_text1div').hide();
            $('#4_text2div').hide();
        }
        
    });
    $('#1_design').trigger("change.cascade");
});
