/**
 * File customizer.js.
 *
 * Theme Customizer enhancements for a better user experience.
 *
 * Contains handlers to make Theme Customizer preview reload changes asynchronously.
 */

( function( $ ) {

	// Site title and description.
	wp.customize( 'blogname', function( value ) {
		value.bind( function( to ) {
			$( '.ts-site-title a' ).text( to );
		} );
	} );
	wp.customize( 'blogdescription', function( value ) {
		value.bind( function( to ) {
			$( '.site-description' ).text( to );
		} );
	} );

	// Header text color.
	wp.customize( 'header_textcolor', function( value ) {
		value.bind( function( to ) {
			if ( 'blank' === to ) {
				$( '.ts-site-title, .site-description' ).css( {
					'clip': 'rect(1px, 1px, 1px, 1px)',
					'position': 'absolute'
				} );
			} else {
				$( '.ts-site-title, .site-description' ).css( {
					'clip': 'auto',
					'position': 'relative'
				} );
				$( '.ts-site-title a, .site-description' ).css( {
					'color': to
				} );
			}
		} );
	} );

	//Font size
	wp.customize('font_size',function ( value ) {
		value.bind(function ( to ) {
		        $( 'body,html' ).css( 'font-size', to + 'px' );
		    }
		);
	} );

	//Font weight
	wp.customize('font_weight',function ( value ) {
		value.bind(function ( to ) {
		        document.body.style.setProperty('--font-weight', to);
		    }
		);
	} );

	//Line height
	wp.customize('line_height',function ( value ) {
		value.bind(function ( to ) {
		        document.body.style.setProperty('--line-height', to);
		    }
		);
	} );

	//Logo size
	wp.customize('logo_size',function ( value ) {
		value.bind(function ( to ) {
		        document.body.style.setProperty('--logo-size', to + 'px');
		    }
		);
	} );

	// Site identity font size
	wp.customize('site_identity_font_size',function ( value ) {
		value.bind(function ( to ) {
		        document.body.style.setProperty('--site-identity-font-size', to + 'px');
		    }
		);
	} );

	//Main font Family
	wp.customize('main_font_family',function ( value ) {
		value.bind(function ( to ) {
			$("head").append("<link href='https://fonts.googleapis.com/css?family=" + to + ":200,300,400,500,600,700,800,900|' rel='stylesheet' type='text/css'>");
				document.body.style.setProperty('--primary-font', to);
			}
		);
	} );

	//Secondary font family
	wp.customize('secondary_font_family',function ( value ) {
		value.bind(function ( to ) {
			$("head").append("<link href='https://fonts.googleapis.com/css?family=" + to + ":200,300,400,500,600,700,800,900|' rel='stylesheet' type='text/css'>");
				document.body.style.setProperty('--secondary-font', to);
			}
		);
	} );

	//Site identity font family
	wp.customize('site_identity_font_family',function ( value ) {
		value.bind(function ( to ) {
			$("head").append("<link href='https://fonts.googleapis.com/css?family=" + to + ":200,300,400,500,600,700,800,900|' rel='stylesheet' type='text/css'>");
				document.body.style.setProperty('--site-identity-font', to);
			}
		);
	} );

	//Content layout
    wp.customize('content_layout_size',function ( value ) {
        value.bind(function ( to ) {
                document.body.style.setProperty('--site-content-size', to + 'px');
            }
        );
    } );

    //Grid / Slider layout 
    wp.customize('grid_layout_size',function ( value ) {
        value.bind(function ( to ) {
                document.body.style.setProperty('--site-grid-size', to + 'px');
            }
        );
    } );

    //Header Layout
    wp.customize('header_layout_size',function ( value ) {
        value.bind(function ( to ) {
                document.body.style.setProperty('--site-header-size', to + 'px');
            }
        );
    } );

	//Background color
	wp.customize('bansta_background_color',function ( value ) {
		value.bind(function ( newval ) {
		        document.body.style.setProperty('--background-color', newval );
		    }
		);
	} );

	//Primary color
	wp.customize('bansta_primary_color',function ( value ) {
		value.bind(function ( newval ) {
		        $( '.off-canvas-menu, .header-2, .navigation-menu li.current-menu-item > a, .wp-block-search__button, .copyright, .cancelbtn, form input[type=submit], .ts-category a, .ts-category-2 a' ).css( 'background-color', newval );
		    }
		);
	} );

	//Secondary color
	wp.customize('bansta_secondary_color',function ( value ) {
		value.bind(function ( newval ) {
		        $( '.navigation li a, .entry-post-title a, .read-more a, .widget ul li a' ).css( 'color', newval );
		    }
		);
	} );

	//Link color
	wp.customize('bansta_link_color',function ( value ) {
		value.bind(function ( newval ) {
		        $( '.active, .top-bar-2, #go-to-top' ).css( 'background-color', newval );
				$( '.copyright a, span.psw, .psw a, .logged-in-as a, .header-4 .navigation-menu li.current-menu-item > a, .main-nav-3 .navigation-menu li.current-menu-item > a, .navigation-menu li.current-menu-item > a' ).css( 'color', newval );
				$( ' .header-4 .navigation-menu li.current-menu-item > a' ).css( 'border-color', newval );
		    }
		);
	} );

	//Content color
	wp.customize('bansta_content_color',function ( value ) {
		value.bind(function ( newval ) {
		        $( 'p' ).css( 'color', newval );
		    }
		);
	} );

	//Background image
	wp.customize( 'bansta-background-image', function (value) {
		value.bind( function( newval ) {
			$( 'body' ).css('background-image', 'url( ' + newval + ')' );
		} );
	});

	//Header background image
	wp.customize( 'header-background-image', function (value) {
		value.bind( function( newval ) {
			$( '.header-wrapper' ).css('background-image', 'url( ' + newval + ')' );
		} );
	});

	//Header background image size
	wp.customize('header-background-image-size', function ( value ) {
		value.bind(function ( newval ) {
				$( '.header-wrapper' ).css( 'background-size', newval );
		    }
		);
	} );

	//Header background image position
	wp.customize('header-background-image-position', function ( value ) {
		value.bind(function ( newval ) {
				$( '.header-wrapper' ).css( 'background-position', newval );
		    }
		);
	} );

	//Header color
	wp.customize('header_background_color', function ( value ) {
		value.bind(function ( to ) {
				document.body.style.setProperty('--header-back-color', to );
		    }
		);
	} );

	//Footer color
	wp.customize('bansta_footer_color', function ( value ) {
		value.bind(function ( newval ) {
			document.body.style.setProperty('--footer-back-color', newval);
		}
		);
	} );

	//Copyright color
	wp.customize('bansta_copyright_color', function ( value ) {
		value.bind(function ( newval ) {
			document.body.style.setProperty('--copy-content-color', newval);
		}
		);
	} );

	//Topnav color
	wp.customize('topnav_background_color', function ( value ) {
		value.bind(function ( newval ) {
			document.body.style.setProperty('--top-bar-back-color', newval);
		}
		);
	} );

	//Mainnav color
	wp.customize('mainnav_background_color', function ( value ) {
		value.bind(function ( newval ) {
				document.body.style.setProperty('--mainnav-back-color', newval);
		    }
		);
	} );

	//Top nav color
	wp.customize( 'top_nav_icon_color', function ( value ) {
		value.bind( function ( newval ) {
				document.body.style.setProperty('--top-bar-icon-color', newval);
		    }
		);
	} );

	//Mainnav links color
	wp.customize( 'main_nav_link_color', function ( value ) {
		value.bind(function ( newval ) {
			document.body.style.setProperty('--menu-link-color', newval);
		}
		);
	} );

	//Site identity color
	wp.customize( 'site_identity_color', function ( value ) {
		value.bind(function ( newval ) {
				document.body.style.setProperty('--site-title-color', newval);
		    }
		);
	} );

	//Menu icon color
	wp.customize( 'bansta_menu_icon', function ( value ) {
		value.bind(function ( newval ) {
			document.body.style.setProperty('--menu-icon-color', newval);
		}
		);
	} );

	//Header background image
	wp.customize( 'footer_background_image', function (value) {
		value.bind( function( newval ) {
			$( '#site-footer' ).css('background-image', 'url( ' + newval + ')' );
		} );
	});

	
	//Content layout
    wp.customize('post_front_image_aspect_ratio',function ( value ) {
        value.bind(function ( to ) {
                document.body.style.setProperty('--ts-aspect-ratio', to + 'px');
            }
        );
    } );

} )( jQuery );