jQuery( document ).ready( function() {

  var $ = jQuery;

  var url = wp.customize.settings.url.allowed[0];

  // Color palette (inside 'Theme Options' panel).
  wp.customize( 'athlonx_color_palette', function( setting ) {

    setting.bind( function( value ) {

      $( 'link#athlonx-style-css' ).attr( 'href', url + '/wp-content/themes/athlonx/assets/css/style-' + value + '.css?ver=5.5' );
    } );
  } );

  // Font family (inside 'Theme Options' panel).
  wp.customize( 'athlonx_font_family', function( setting ) {

    setting.bind( function( value ) {

      value = ucwords( value );
      
      $( 'link#google-font-style-css' ).attr( 'href', 'https://fonts.googleapis.com/css?family=' + value + ':300,400,700,900&display=swap&ver=5.5' );

      $( 'html' ).css( { 'font-family' : value + ', sans-seirf' } );
    } );
  } );

  // Body container width (inside 'Theme Options' panel).
  wp.customize( 'athlonx_container_width', function( setting ) {

    setting.bind( function( value ) {

      $( '.container' ).css( { 'max-width' : value + 'px' } );

      $( 'div.post .post-meta, div.post .post-related, .alignfull, .post-comments' ).css( { 
        'margin-left' : 'calc((' + value + 'px - 4rem - 100vw) / 2)' 
      } );
      
      $( '.alignwide' ).css( { 
        'margin-left' : 'calc((' + value + 'px - 4rem - 1440px) / 2)' 
      } );
      
      $( '.footer-gallery .container .widgets' ).css( { 
        'width' : '' + ( value - 64 ) + 'px' 
      } );
    } );
  } );

  // Blog sidebar (inside 'Theme Options' panel).
  wp.customize( 'athlonx_blog_sidebar', function( setting ) {

    setting.bind( function( value ) {

      if ( 'show' === value ) {

        $( '.sidebar' ).css( { 'display' : 'block' } );
      
      } else {

        $( '.sidebar' ).css( { 'display' : 'none' } );
      }
    } );
  } );
} );

// Helper function used to capitalize Google Fonts words first letters.
function ucwords ( str ) {

    return ( str + '' ).replace( /^([a-z])|\s+([a-z])/g, function ( $1 ) {
  
        return $1.toUpperCase();
    } );
}