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_alert', 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_alert', 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/';
     */

    /**
     * Instead of placing conditionals in every 'bind' call, this function is
     * responsible for taking that info and acting on it to show or hide elements.
     * 
     * @param {string} selector The CSS selector of the elements to show/hide
     * @param {boolean} show Indicates whether the element should be shown or hidden
     */
    function display_element( selector, show )
    {
        if ( show ) $( selector ).removeClass( 'hidden' );
        else        $( selector ).addClass( 'hidden' );
    }

    /**
     * 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: Format
        //
        
        display_element( '#accordion-section-bpq_cz_section_alert', wp.customize._value.bpq_opt_format_display_alert() );
        wp.customize( 'bpq_opt_format_display_alert', function( value ) { 
            value.bind( function( to ) {
                display_element( '#accordion-section-bpq_cz_section_alert', to );
            });
        });
        
        display_element( '#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 ) {
                display_element( '#accordion-section-bpq_cz_section_top', to );
            });
        });
        
        display_element( '#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 ) {
                display_element( '#accordion-section-bpq_cz_section_masthead', to );
            });
        });
        
        display_element( '#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 ) {
                display_element( '#accordion-section-bpq_cz_section_navigation', to );
            });
        });

        display_element( '#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 ) {
                display_element( '#accordion-section-bpq_cz_section_sidebars', ( to != '0' ) );
            });
        });

        display_element( '#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 ) {
                display_element( '#accordion-section-bpq_cz_section_pedestal', to );
            });
        });

        display_element( '#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 ) {
                display_element( '#accordion-section-bpq_cz_section_bottom', to );
            });
        });

        //
        //  SECTION: Masthead
        //
        
        display_element( '#customize-control-bpq_opt_masthead_image', wp.customize._value.bpq_opt_masthead_purpose() === 'image' );
        display_element( '#customize-control-blogname', wp.customize._value.bpq_opt_masthead_purpose() === 'text' );
        display_element( '#customize-control-blogdescription', wp.customize._value.bpq_opt_masthead_purpose() === 'text' );
        wp.customize( 'bpq_opt_masthead_purpose', function( value ) { 
            value.bind( function( to ) {
                display_element( '#customize-control-bpq_opt_masthead_image', to === 'image' );
                display_element( '#customize-control-blogname', to === 'text' );
                display_element( '#customize-control-blogdescription', to === 'text' );
            });
        });

        //
        //  SECTION: Navigation
        //
        
        display_element( '#customize-control-bpq_opt_navigation_logo', wp.customize._value.bpq_opt_navigation_purpose() === 'logo' );
        display_element( '#customize-control-bpq_opt_navigation_logo_offset', wp.customize._value.bpq_opt_navigation_purpose() === 'logo' );
        display_element( '#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_element( '#customize-control-bpq_opt_navigation_logo', to === 'logo' );
                display_element( '#customize-control-bpq_opt_navigation_logo_offset', to === 'logo' );
                display_element( '#customize-control-bpq_opt_navigation_brand_text', to === 'text' );
            });
        });

        display_element( '#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_element( '#customize-control-bpq_opt_navigation_animate', to );
            });
        });

        //
        //  SECTION: Content
        //
        
        display_element( '#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_element( '#customize-control-bpq_opt_content_read_more_text', to );
            });
        });

        display_element( '#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_element( '#customize-control-bpq_opt_content_date_archive_type', to );
            });
        });
        
        display_element( '#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_element( '#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' );
});