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

    /**
     * NOTES - How to use JS within the Theme Customizer
     * 
     * The following are examples on how to interact with the wp.customize JS object when
     * this JS script is queued specifically with 'customize_controls_enqueue_scripts':
     * 
     *  1. Remove a section:
     *      $( '#accordion-section-title_tagline' ).addClass( 'hidden' );
     *      
     *  2. Remove a control:
     *      $( '#customize-control-blogdescription' ).addClass( 'hidden' );
     *      
     *  3. Add markup to the top of the controls area:
     *      $( '#customize-info .preview-notice' ).append( $( '<p>test</p>' ) );
     *      
     *  4. Add markup to the top of the preview area:
     *      $( '#customize-preview' ).append( $( '<p>test</p>' );
     *      
     *  5. Change the style of a section header (note the lack of hyphens in the CSS props and that color/background has no effect):
     *      $( '#accordion-section-title_tagline' ).css( {
     *          color: '#fff',
     *          background: '#000',
     *          borderBottom: '1px solid #303030',
     *          borderTop: '1px solid #000'
     *      });
     *      
     *  6. React to a settings CONTROL change:
     *      $( '[data-customize-setting-link=blogdescription]' ).on( 'change', function( e ) {
     *          e.preventDefault();
     *          console.log( this.value );
     *      });
     *      
     *  7. React to a settings VALUE change:
     *      wp.customize( 'bpq_opt_display_alarm', function( value ) { 
     *          value.bind( function( to ) {
     *              console.log( to );
     *          });
     *      });
     *      
     *  8. Get the list of all settings:
     *      wp.customize._value
     *      
     *      EXTRA:
     *          Settings are only available in the 'bind' call:
     *              wp.customize( 'bpq_opt_display_alarm', function( value ) { 
     *                  value.bind( function( to ) {
     *                      console.log( wp.customize._value );
     *                  });
     *              });
     *          OR within a block like this (good for initialization analysis):
     *              $( function() {
     *                  console.log( wp.customize._value );
     *              });
     *      
     *  9. Get a single setting:
     *      wp.customize.value( 'bpq_opt_display_masthead' )();
     *          OR
     *      wp.customize._value.bpq_opt_display_masthead()
     *      
     *  10. Set a single setting while in the "bind" call:
     *      wp.customize.value( 'bpq_opt_display_masthead' )( 1 );
     *          OR
     *      wp.customize._value.bpq_opt_display_masthead( 1 )
     *      
     *      
     * If this script were queued with 'customize_preview_init' instead of
     * 'customize_controls_enqueue_scripts', then you could do the following:
     *          
     *  11. Get the list of settings:
     *      window._wpCustomizeSettings
     *          OR
     *      parent.wp.customize
     *      
     *  12. Get a single setting:
     *      window._wpCustomizeSettings.values.ski_opt_checkbox
     *
     *  13. Change where the preview points (this causes a possibly undesirable reload flash):
     *      window.location.href = 'http://localhost/blueprintq/wp-admin/';
     */

    /**
     * Can toggle display of controls within a section.  Intention is to only
     * show the controls that make sense with the currently-selected options.
     */
    function display_control( selector, show )
    {
        if ( show ) $( selector ).show();
        else        $( selector ).hide();
    }

    /**
     * Can toggle between active and inactive states on sections.  Intention is
     * to show the user that the section (and corresponding controls) exists, but
     * the section is turned off from preview since it is not enabled in the format.
     * 
     * @param {string} selector The CSS selector of the section to activate/deactivate
     * @param {boolean} active Indicates whether the section should be activated/deactivated
     */
    function activate_section( selector, active )
    {
        if ( active )   $( selector ).removeClass( 'inactive-section' );
        else            $( selector ).addClass( 'inactive-section' );
    }

    /**
     * Can toggle between active and inactive states on panels.  Pretty much the
     * same kind of rationale and logic as the activate_section function, above.
     * 
     * @param {string} selector The CSS selector of the panel to activate/deactivate
     * @param {boolean} active Indicates whether the panel should be activated/deactivated
     */
    function activate_panel( selector, active )
    {
        if ( active )   $( selector ).removeClass( 'inactive-panel' );
        else            $( selector ).addClass( 'inactive-panel' );
    }

    /**
     * Should wrap functions inside of jQuery to ensure that wp.customize
     * object has been prepped by WP before trying to access it.
     */
    $( function() {

        /**
         * Toggle element display on initialization and as settings are changed.
         */

        //
        //  SECTION: Preview (affects Frame/Content/Auxiliary panels to act like the WP Widgets panel.
        //

        activate_panel( '#accordion-panel-bpq_cz_panel_frame', wp.customize._value.bpq_opt_preview_template() != 'preview' );
        activate_panel( '#accordion-panel-bpq_cz_panel_content', wp.customize._value.bpq_opt_preview_template() != 'preview' );
        activate_panel( '#accordion-panel-bpq_cz_panel_auxiliary', wp.customize._value.bpq_opt_preview_template() != 'preview' );
        wp.customize( 'bpq_opt_preview_template', function( value ) { 
            value.bind( function( to ) {
                activate_panel( '#accordion-panel-bpq_cz_panel_frame', to != 'preview' );
                activate_panel( '#accordion-panel-bpq_cz_panel_content', to != 'preview' );
                activate_panel( '#accordion-panel-bpq_cz_panel_auxiliary', to != 'preview' );
            });
        });

        //
        //  SECTION: Format
        //

        activate_section( '#accordion-section-bpq_cz_section_alarm', wp.customize._value.bpq_opt_format_display_alarm() );
        wp.customize( 'bpq_opt_format_display_alarm', function( value ) { 
            value.bind( function( to ) {
                activate_section( '#accordion-section-bpq_cz_section_alarm', to );
            });
        });

        activate_section( '#accordion-section-bpq_cz_section_top', wp.customize._value.bpq_opt_format_display_top() );
        wp.customize( 'bpq_opt_format_display_top', function( value ) { 
            value.bind( function( to ) {
                activate_section( '#accordion-section-bpq_cz_section_top', to );
            });
        });

        activate_section( '#accordion-section-bpq_cz_section_masthead', wp.customize._value.bpq_opt_format_display_masthead() );
        wp.customize( 'bpq_opt_format_display_masthead', function( value ) { 
            value.bind( function( to ) {
                activate_section( '#accordion-section-bpq_cz_section_masthead', to );
            });
        });

        activate_section( '#accordion-section-bpq_cz_section_navigation', wp.customize._value.bpq_opt_format_display_navigation() );
        wp.customize( 'bpq_opt_format_display_navigation', function( value ) { 
            value.bind( function( to ) {
                activate_section( '#accordion-section-bpq_cz_section_navigation', to );
            });
        });

        activate_section( '#accordion-section-bpq_cz_section_sidebars', ( wp.customize._value.bpq_opt_format_sidebar_layout() != '0' ) );
        wp.customize( 'bpq_opt_format_sidebar_layout', function( value ) { 
            value.bind( function( to ) {
                activate_section( '#accordion-section-bpq_cz_section_sidebars', ( to != '0' ) );
            });
        });

        activate_section( '#accordion-section-bpq_cz_section_pedestal', wp.customize._value.bpq_opt_format_display_pedestal() );
        wp.customize( 'bpq_opt_format_display_pedestal', function( value ) { 
            value.bind( function( to ) {
                activate_section( '#accordion-section-bpq_cz_section_pedestal', to );
            });
        });

        activate_section( '#accordion-section-bpq_cz_section_bottom', wp.customize._value.bpq_opt_format_display_bottom() );
        wp.customize( 'bpq_opt_format_display_bottom', function( value ) { 
            value.bind( function( to ) {
                activate_section( '#accordion-section-bpq_cz_section_bottom', to );
            });
        });

        //
        //  SECTION: Masthead
        //

        display_control( '#customize-control-bpq_opt_masthead_image', wp.customize._value.bpq_opt_masthead_purpose() === 'image' );
        display_control( '#customize-control-blogname', wp.customize._value.bpq_opt_masthead_purpose() === 'text' );
        display_control( '#customize-control-blogdescription', wp.customize._value.bpq_opt_masthead_purpose() === 'text' );
        display_control( '#customize-control-bpq_opt_masthead_single_line', wp.customize._value.bpq_opt_masthead_single_line() === 'text' );
        wp.customize( 'bpq_opt_masthead_purpose', function( value ) { 
            value.bind( function( to ) {
                display_control( '#customize-control-bpq_opt_masthead_image', to === 'image' );
                display_control( '#customize-control-blogname', to === 'text' );
                display_control( '#customize-control-blogdescription', to === 'text' );
                display_control( '#customize-control-bpq_opt_masthead_single_line', to === 'text' );
            });
        });

        //
        //  SECTION: Navigation
        //

        display_control( '#customize-control-bpq_opt_navigation_logo', wp.customize._value.bpq_opt_navigation_purpose() === 'logo' );
        display_control( '#customize-control-bpq_opt_navigation_logo_offset', wp.customize._value.bpq_opt_navigation_purpose() === 'logo' );
        display_control( '#customize-control-bpq_opt_navigation_brand_text', wp.customize._value.bpq_opt_navigation_purpose() === 'text' );
        wp.customize( 'bpq_opt_navigation_purpose', function( value ) { 
            value.bind( function( to ) {
                display_control( '#customize-control-bpq_opt_navigation_logo', to === 'logo' );
                display_control( '#customize-control-bpq_opt_navigation_logo_offset', to === 'logo' );
                display_control( '#customize-control-bpq_opt_navigation_brand_text', to === 'text' );
            });
        });

        display_control( '#customize-control-bpq_opt_navigation_animate', wp.customize._value.bpq_opt_navigation_affix() );
        wp.customize( 'bpq_opt_navigation_affix', function( value ) { 
            value.bind( function( to ) {
                display_control( '#customize-control-bpq_opt_navigation_animate', to );
            });
        });

        //
        //  SECTION: Articles
        //

        display_control( '#customize-control-bpq_opt_content_read_more_text', wp.customize._value.bpq_opt_content_read_more() );
        wp.customize( 'bpq_opt_content_read_more', function( value ) { 
            value.bind( function( to ) {
                display_control( '#customize-control-bpq_opt_content_read_more_text', to );
            });
        });

        display_control( '#customize-control-bpq_opt_content_date_archive_type', wp.customize._value.bpq_opt_content_display_date() );
        wp.customize( 'bpq_opt_content_display_date', function( value ) { 
            value.bind( function( to ) {
                display_control( '#customize-control-bpq_opt_content_date_archive_type', to );
            });
        });

        //
        //  SECTION: Pagination
        //

        display_control( '#customize-control-bpq_opt_content_paging_train_size', wp.customize._value.bpq_opt_content_paging_train() );
        wp.customize( 'bpq_opt_content_paging_train', function( value ) { 
            value.bind( function( to ) {
                display_control( '#customize-control-bpq_opt_content_paging_train_size', to );
            });
        });
    });

    //  Let's open the first (title) section that contains the BluePrint-Q description, by default.
    $( '#customize-info' ).addClass( 'open' );
});