/**
 * UI control customizations in customizer
 */
(function($) {

    "use strict";

    $(document).ready(function($) {

        var $control_layout = $('#customize-control-gnar_layout_style'),
            $control_bg_clr = $('#customize-control-background_color'),
            $section_bg_img = $('#accordion-section-background_image'),
            layout = $control_layout.find('select').val(),
            $control_header_style = $('#customize-control-gnar_header_style'),
            $control_clrs = $('#customize-control-gnar_header_logo_color, #customize-control-gnar_header_toggle_color, #customize-control-gnar_mobile_header_toggle_color'),
            header_style = $control_header_style.find('select').val();

        // Show or hide WordPress default background
        // options, depending on if the boxed layout
        // is selected.

        if ( layout == 'stretch' ) {
            $control_bg_clr.css({'height': 0, 'opacity': 0});
            $section_bg_img.css({'height': 0, 'opacity': 0});
        }

        $control_layout.find('select').on('change', function(){
            if ( $(this).val() == 'boxed' ) {
                $control_bg_clr.css({'height': 'auto', 'opacity': 1});
                $section_bg_img.css({'height': 'auto', 'opacity': 1});
            } else {
                $control_bg_clr.css({'height': 0, 'opacity': 0});
                $section_bg_img.css({'height': 0, 'opacity': 0});
            }
        });

        // Show or hide menu and logo color options, not
        // used with modern header style.

        if ( header_style == 'modern' ) {
            $control_clrs.css({'height': 0, 'opacity': 0});
        }

        $control_header_style.find('select').on('change', function(){
            if ( $(this).val() == 'modern' ) {
                $control_clrs.css({'height': 0, 'opacity': 0});
            } else {
                $control_clrs.css({'height': 'auto', 'opacity': 1});
            }
        });


    });

})(jQuery);
