/* global jQuery, wp.customize */
/**
 * Customizer preview.
 */

( function( $, api ) {

	// Add listener for the 'blogname' control.
	api( 'blogname', function( value ) {

		value.bind( function( to ) {
			$( '#site-header .uk-logo' ).text( to );
		} );

	} );

    // Add listener for the 'basho_site_background_color' control.
	api( 'basho_site_background_color', function( value ) {

		value.bind( function( to ) {

			// Change body background color.
			$( 'body' ).css( 'background-color', to );

			// Change offcanvas navigation background color.
			$( '#offcanvas-navigation .uk-offcanvas-bar' ).css( 'background-color', to );

			// Change sticky header background color.
			$( '#site-header' ).css( 'background-color', to );

			// Change navigation dropdown background color.
			$( '.uk-navbar-dropdown' ).css( 'background-color', to );

			// Change modals background color.
			$( '.uk-modal .uk-modal-dialog').css( 'background-color', to );

		} );

	} );

    // Add listener for the 'basho_site_footer_background_color' control.
	api( 'basho_site_footer_background_color', function( value ) {

		value.bind( function( to ) {

			// Change footer widgets area background color.
			$( '.footer-widgets-area' ).css( 'background-color', to );

			// Change site footer background color.
			$( '#site-footer' ).css( 'background-color', to );

		} );

	} );

    // Add listener for the 'basho_site_footer_text_color' control.
	api( 'basho_site_footer_text_color', function( value ) {

		value.bind( function( to ) {

			// Change footer widgets links color.
			$( '.footer-widgets-area' ).css( 'color', to );
			$( '.footer-widgets-area .widget-title' ).css( 'color', to );

			// Change site footer links color.
			$( '#site-footer' ).css( 'color', to );

		} );

	} );

    // Add listener for the 'basho_site_footer_links_color' control.
	api( 'basho_site_footer_links_color', function( value ) {

		value.bind( function( to ) {

			// Change footer widgets links color.
			$( '.footer-widgets-area a' ).css( 'color', to );

			// Change site footer links color.
			$( '#site-footer a' ).css( 'color', to );

		} );

	} );

} )( jQuery, wp.customize );