// Color One

jQuery('.color_one').click(function(){
    jQuery('#color_one_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    color_one_.setFill(fill);
    color_one_.setStroke(fill);
    layer.draw();
});

jQuery('.color_one_weave').click(function(){
    color_one_clip_.show();
    layer.draw();
});
jQuery('.color_one_flat').click(function(){
    color_one_clip_.hide();
    layer.draw();
});
jQuery('.color_one_matte').click(function(){
    color_one_clip_.hide();
    layer.draw();
});
jQuery('.color_one_defender').click(function(){
    color_one_clip_.hide();
    layer.draw();
});

// Color Two

jQuery('.color_two').click(function(){
    jQuery('#color_two_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    color_two_.setFill(fill);
    color_two_.setStroke(fill);
    layer.draw();
});

jQuery('.color_two_weave').click(function(){
    color_two_clip_.show();
    layer.draw();
});
jQuery('.color_two_flat').click(function(){
    color_two_clip_.hide();
    layer.draw();
});
jQuery('.color_two_matte').click(function(){
    color_two_clip_.hide();
    layer.draw();
});
jQuery('.color_two_defender').click(function(){
    color_two_clip_.hide();
    layer.draw();
});

// Color Three

jQuery('.color_three').click(function(){
    jQuery('#color_three_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    color_three_.setFill(fill);
    color_three_.setStroke(fill);
    layer.draw();
});
jQuery('.color_three_weave').click(function(){
    color_three_clip_.show();
    layer.draw();
});
jQuery('.color_three_flat').click(function(){
    color_three_clip_.hide();
    layer.draw();
});
jQuery('.color_three_matte').click(function(){
    color_three_clip_.hide();
    layer.draw();
});
jQuery('.color_three_defender').click(function(){
    color_three_clip_.hide();
    layer.draw();
});

// Color Four  

jQuery('.color_four').click(function(){
    jQuery('#color_four_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    color_four_.setFill(fill);
    color_four_.setStroke(fill);
    layer.draw();
});
jQuery('.color_four_weave').click(function(){
    color_four_clip_.show();
    layer.draw();
});
jQuery('.color_four_flat').click(function(){
    color_four_clip_.hide();
    layer.draw();
});
jQuery('.color_four_matte').click(function(){
    color_four_clip_.hide();
    layer.draw();
});
jQuery('.color_four_defender').click(function(){
    color_four_clip_.hide();
    layer.draw();
});

// Color Five

jQuery('.color_five').click(function(){
    jQuery('#color_five_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    color_five_.setFill(fill);
    color_five_.setStroke(fill);
    layer.draw();
});

jQuery('.color_five_weave').click(function(){
    color_five_clip_.show();
    layer.draw();
});
jQuery('.color_five_flat').click(function(){
    color_five_clip_.hide();
    layer.draw();
});

// Color Six

jQuery('.color_six').click(function(){
    jQuery('#color_six_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    color_six_.setFill(fill);
    color_six_.setStroke(fill);
    layer.draw();
});

jQuery('.color_six_weave').click(function(){
    color_six_clip_.show();
    layer.draw();
});
jQuery('.color_six_flat').click(function(){
    color_six_clip_.hide();
    layer.draw();
});

// Color Seven

jQuery('.color_seven').click(function(){
    jQuery('#color_seven_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_seven_.setFill(fill);
    color_seven_.setStroke(fill);
    layer.draw();
});

jQuery('.color_seven_weave').click(function(){
    color_seven_clip_.show();
    layer.draw();
});
jQuery('.color_seven_flat').click(function(){
    color_seven_clip_.hide();
    layer.draw();
});

// Color Eight

jQuery('.color_eight').click(function(){
    jQuery('#color_eight_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_eight_.setFill(fill);
    color_eight_.setStroke(fill);
    layer.draw();
});

jQuery('.color_eight_weave').click(function(){
    color_eight_clip_.show();
    layer.draw();
});
jQuery('.color_eight_flat').click(function(){
    color_eight_clip_.hide();
    layer.draw();
});

// Color Nine

jQuery('.color_nine').click(function(){
    jQuery('#color_nine_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_nine_.show();
    color_nine_.setFill(fill);
    color_nine_.setStroke(fill);
    layer.draw();
});

jQuery('.color_nine_weave').click(function(){
    color_nine_clip_.show();
    layer.draw();
});
jQuery('.color_nine_flat').click(function(){
    color_nine_clip_.hide();
    layer.draw();
});

// Color Ten

jQuery('.color_ten').click(function(){
    jQuery('#color_ten_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_ten_.show();
    color_ten_.setFill(fill);
    color_ten_.setStroke(fill);
    layer.draw();
});

jQuery('.color_ten_weave').click(function(){
    color_ten_clip_.show();
    layer.draw();
});
jQuery('.color_ten_flat').click(function(){
    color_ten_clip_.hide();
    layer.draw();
});

// Color Eleven

jQuery('.color_eleven').click(function(){
    jQuery('#color_eleven_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_eleven_.show();
    color_eleven_.setFill(fill);
    color_eleven_.setStroke(fill);
    layer.draw();
});

jQuery('.color_eleven_weave').click(function(){
    color_eleven_clip_.show();
    layer.draw();
});
jQuery('.color_eleven_flat').click(function(){
    color_eleven_clip_.hide();
    layer.draw();
});

// Color Twelve

jQuery('.color_twelve').click(function(){
    jQuery('#color_twelve_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_twelve_.show();
    color_twelve_.setFill(fill);
    color_twelve_.setStroke(fill);
    layer.draw();
});

// Color Thirteen

jQuery('.color_thirteen').click(function(){
    jQuery('#color_thirteen_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_thirteen_.show();
    color_thirteen_.setFill(fill);
    color_thirteen_.setStroke(fill);
    layer.draw();
});

jQuery('.color_thirteen_weave').click(function(){
    color_thirteen_clip_.show();
    layer.draw();
});
jQuery('.color_thirteen_flat').click(function(){
    color_thirteen_clip_.hide();
    layer.draw();
});

// Color Fourteen

jQuery('.color_fourteen').click(function(){
    jQuery('#color_fourteen_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_fourteen_.show();
    color_fourteen_.setFill(fill);
    color_fourteen_.setStroke(fill);
    layer.draw();
});

jQuery('.color_fourteen_weave').click(function(){
    color_fourteen_clip_.show();
    layer.draw();
});
jQuery('.color_fourteen_flat').click(function(){
    color_fourteen_clip_.hide();
    layer.draw();
});

// Color Fifteen

jQuery('.color_fifteen').click(function(){
    jQuery('#color_fifteen_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_fifteen_.show();
    color_fifteen_.setFill(fill);
    color_fifteen_.setStroke(fill);
    layer.draw();
});

jQuery('.color_fifteen_weave').click(function(){
    color_fifteen_clip_.show();
    layer.draw();
});
jQuery('.color_fifteen_flat').click(function(){
    color_fifteen_clip_.hide();
    layer.draw();
});

// Color Sixteen

jQuery('.color_sixteen').click(function(){
    jQuery('#color_sixteen_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    color_sixteen_.show();
    color_sixteen_.setFill(fill);
    color_sixteen_.setStroke(fill);
    layer.draw();
});

jQuery('.color_sixteen_weave').click(function(){
    color_sixteen_clip_.show();
    layer.draw();
});
jQuery('.color_sixteen_flat').click(function(){
    color_sixteen_clip_.hide();
    layer.draw();
});

// Color Seventeen

jQuery('.color_seventeen').click(function(){
    jQuery('#color_seventeen_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    color_seventeen_.show();
    color_seventeen_.setFill(fill);
    color_seventeen_.setStroke(fill);
    layer.draw();
});

jQuery('.color_seventeen_weave').click(function(){
    color_seventeen_clip_.show();
    layer.draw();
});
jQuery('.color_seventeen_flat').click(function(){
    color_seventeen_clip_.hide();
    layer.draw();
});

// Color Eighteen

jQuery('.color_eighteen').click(function(){
    jQuery('#color_eighteen_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    color_eighteen_.show();
    color_eighteen_.setFill(fill);
    color_eighteen_.setStroke(fill);
    layer.draw();
});

jQuery('.color_eighteen_weave').click(function(){
    color_eighteen_clip_.show();
    layer.draw();
});
jQuery('.color_eighteen_flat').click(function(){
    color_eighteen_clip_.hide();
    layer.draw();
});

// Color Nineteen

jQuery('.color_nineteen').click(function(){
    jQuery('#color_nineteen_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_nineteen_.show();
    color_nineteen_.setFill(fill);
    color_nineteen_.setStroke(fill);
    layer.draw();
});

jQuery('.color_nineteen_weave').click(function(){
    color_nineteen_clip_.show();
    layer.draw();
});
jQuery('.color_nineteen_flat').click(function(){
    color_nineteen_clip_.hide();
    layer.draw();
});
jQuery('.color_nineteen_matte').click(function(){
    color_nineteen_clip_.hide();
    layer.draw();
});
jQuery('.color_nineteen_defender').click(function(){
    color_nineteen_clip_.hide();
    layer.draw();
});

// Color Twenty

jQuery('.color_twenty').click(function(){
    jQuery('#color_twenty_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_twenty_.show();
    color_twenty_.setFill(fill);
    color_twenty_.setStroke(fill);
    layer.draw();
});

jQuery('.color_twenty_weave').click(function(){
    color_twenty_clip_.show();
    layer.draw();
});
jQuery('.color_twenty_flat').click(function(){
    color_twenty_clip_.hide();
    layer.draw();
});
jQuery('.color_twenty_matte').click(function(){
    color_twenty_clip_.hide();
    layer.draw();
});
jQuery('.color_twenty_defender').click(function(){
    color_twenty_clip_.hide();
    layer.draw();
});

// Color Twenty One

jQuery('.color_twenty_one').click(function(){
    jQuery('#color_twenty_one_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_twenty_one_.show();
    color_twenty_one_.setFill(fill);
    color_twenty_one_.setStroke(fill);
    layer.draw();
});

jQuery('.color_twenty_one_weave').click(function(){
    color_twenty_one_clip_.show();
    layer.draw();
});
jQuery('.color_twenty_one_flat').click(function(){
    color_twenty_one_clip_.hide();
    layer.draw();
});
jQuery('.color_twenty_one_matte').click(function(){
    color_twenty_one_clip_.hide();
    layer.draw();
});
jQuery('.color_twenty_one_defender').click(function(){
    color_twenty_one_clip_.hide();
    layer.draw();
});

// Color Twenty Two

jQuery('.color_twenty_two').click(function(){
    jQuery('#color_twenty_two_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_twenty_two_.show();
    color_twenty_two_.setFill(fill);
    color_twenty_two_.setStroke(fill);
    layer.draw();
});

jQuery('.color_twenty_two_weave').click(function(){
    color_twenty_two_clip_.show();
    layer.draw();
});
jQuery('.color_twenty_two_flat').click(function(){
    color_twenty_two_clip_.hide();
    layer.draw();
});
jQuery('.color_twenty_two_matte').click(function(){
    color_twenty_two_clip_.hide();
    layer.draw();
});
jQuery('.color_twenty_two_defender').click(function(){
    color_twenty_two_clip_.hide();
    layer.draw();
});

// Color Twenty Three

jQuery('.color_twenty_three').click(function(){
    jQuery('#color_twenty_three_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    color_twenty_three_.show();
    color_twenty_three_.setFill(fill);
    color_twenty_three_.setStroke(fill);
    layer.draw();
});

jQuery('.color_twenty_three_weave').click(function(){
    color_twenty_three_clip_.show();
    layer.draw();
});
jQuery('.color_twenty_three_flat').click(function(){
    color_twenty_three_clip_.hide();
    layer.draw();
});
jQuery('.color_twenty_three_matte').click(function(){
    color_twenty_three_clip_.hide();
    layer.draw();
});
jQuery('.color_twenty_three_defender').click(function(){
    color_twenty_three_clip_.hide();
    layer.draw();
});

// Color Twenty Four

jQuery('.color_twenty_four').click(function(){
    jQuery('#color_twenty_four_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    color_twenty_four_.show();
    color_twenty_four_.setFill(fill);
    color_twenty_four_.setStroke(fill);
    layer.draw();
});

jQuery('.color_twenty_four_weave').click(function(){
    color_twenty_four_clip_.show();
    layer.draw();
});
jQuery('.color_twenty_four_flat').click(function(){
    color_twenty_four_clip_.hide();
    layer.draw();
});
jQuery('.color_twenty_four_matte').click(function(){
    color_twenty_four_clip_.hide();
    layer.draw();
});
jQuery('.color_twenty_four_defender').click(function(){
    color_twenty_four_clip_.hide();
    layer.draw();
});

// Stitching
jQuery('.color_stitching').click(function(){
    jQuery('#color_stitching_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    stitching_.setStroke(fill);
    layer.draw();
});


// Lacing
jQuery('.color_lacing').click(function(){
    jQuery('#color_lacing_span').text(this.value);
    
    jQuery('#').attr('value' , this.value);

    var fill = jQuery(this).attr('data-color-value');
    inner_lacing_.setFill(fill);
    layer.draw();
});

// Pocket Lacing
jQuery('.color_pocket_lacing').click(function(){
    jQuery('#color_pocket_lacing_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    jQuery('.swatches.color_pocket_lacing button').removeClass('selected');
    var fill = jQuery(this).attr('data-color-value');
    pocket_lacing_.setFill(fill);
    layer.draw();
});

// Outer Lacing
jQuery('.color_outer_lacing').click(function(){
    jQuery('#color_outer_lacing_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    outer_lacing_.setFill(fill);
    layer.draw();
});

// Bindings
jQuery('.color_bindings').click(function(){
    jQuery('.swatches.color_bindings button').removeClass('selected');
    jQuery('#color_bindings_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    bindings_.setFill(fill);
    bindings_.setStroke(fill);
    layer.draw();
});

// Transfers
jQuery('.color_lefevre').click(function(){
    jQuery('#color_lefevre_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    var shell_stroke = jQuery(this).attr('data-stroke-color');
    transfers_.setFill(fill);
    transfers_.setStroke(shell_stroke);
    layer.draw();
});

// Embroidery
jQuery('.swatches.embroidery button').click(function(){
    jQuery('#embroidery_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    embroidery_.setFill(fill);
    layer.draw();
});

// Elastic
jQuery('.swatches.color_elastic button').click(function(){
    jQuery('#color_elastic_span').text(this.value);
    jQuery('#').attr('value' , this.value);
    var fill = jQuery(this).attr('data-color-value');
    color_elastic_.setFill(fill);
    color_elastic_.setStroke(fill);
    layer.draw();
});