/*
** Instantly live-update customizer settings in the preview for improved user experience.
*/

(function( $ ) {

/*
** Colors
*/
	// Top Bar
	asheLivePreview( 'colors_top_bar_bg', function( val ) {
		$('#top-bar, #top-bar .sub-menu a').css( 'background-color', val );

		// Sub Menu
		var css = '\
			#top-menu .sub-menu a:hover {\
			  background-color: '+ asheHex2Rgba( val, 0.9 ) +' !important;\
			}\
		';
		asheStyle( 'colors_top_bar_bg', css );
	});

	asheLivePreview( 'colors_top_bar_link', function( val ) {
		$('#top-bar a').css( 'color', val );
	});

	asheLivePreview( 'colors_top_bar_link_hover', function( val ) {
		// Link Hover
		var css = '\
			#top-bar a:hover {\
			  color: '+ val +' !important;\
			}\
		';
		asheStyle( 'colors_top_bar_bg', css );
	});

	// Main Navigation
	asheLivePreview( 'colors_main_nav_bg', function( val ) {
		$('#main-nav, #main-nav .sub-menu a, #main-nav #s,#featured-links h4').css( 'background-color', val );
	});

	asheLivePreview( 'colors_main_nav_link', function( val ) {
		$('#main-nav a, #main-nav i, #main-nav #s,#featured-links h4').css( 'color', val );
		$('.main-nav-sidebar span').css( 'background-color', val );
		$('#main-nav').css( 'box-shadow', '0px 1px 5px '+ asheHex2Rgba( val, 0.1 ) );
		$('#main-nav .sub-menu a,#main-nav .sub-menu a').css( 'border-color', asheHex2Rgba( val, 0.5 ) );

		// Placeholder
		var css = '\
			#main-nav #s::-webkit-input-placeholder {\
			  color: '+ asheHex2Rgba( val, 0.7 ) +';\
			}\
			#main-nav #s::-moz-placeholder {\
			  color: '+ asheHex2Rgba( val, 0.7 ) +';\
			}\
			#main-nav #s:-ms-input-placeholder {\
			  color: '+ asheHex2Rgba( val, 0.7 ) +';\
			}\
			#main-nav #s:-moz-placeholder {\
			  color: '+ asheHex2Rgba( val, 0.7 ) +';\
			}\
		';
		asheStyle( 'colors_main_nav_link', css );
	});

	asheLivePreview( 'colors_main_nav_link_hover', function( val ) {
		// Links, Icons
		var css = '\
			#main-nav a:hover,\
			#main-nav i:hover {\
				color: '+ val +' !important;\
			}\
			.main-nav-sidebar:hover span {\
				background-color: '+ val +' !important;\
			}\
		';
		asheStyle( 'colors_main_nav_link_hover', css );
	});

	// Content
	asheLivePreview( 'colors_content_bg', function( val ) {
		var selectors = '\
			body,\
			.sidebar-alt,\
			#page-content,\
			#featured-slider,\
			#page-content select,\
			#page-content input,\
			#page-content textarea\
		';

		$( selectors ).css( 'background-color', val );
	});

	asheLivePreview( 'colors_content_text', function( val ) {
		// Text
		var css = '\
			#page-content,\
			#page-content select,\
			#page-content input:not(.submit),\
			#page-content textarea,\
			#page-content .post-comments,\
			#page-content .post-author a,\
			#page-content .related-posts h4 a,\
			#page-content .author-description h4 a,\
			#page-content .ashe-widget a {\
				color: '+ val +';\
			}\
			#page-content #s::-webkit-input-placeholder {\
			  color: '+ val +';\
			}\
			#page-content #s::-moz-placeholder {\
			  color: '+ val +';\
			}\
			#page-content #s:-ms-input-placeholder {\
			  color: '+ val +';\
			}\
			#page-content #s:-moz-placeholder {\
			  color: '+ val +';\
			}\
		';
		asheStyle( 'colors_content_text', css );
	});

	asheLivePreview( 'colors_content_title', function( val ) {
		var selectors = '\
			#page-content h1 a,\
			#page-content h1,\
			#page-content h2,\
			#page-content h3,\
			#page-content h4,\
			#page-content h5,\
			#page-content h6\
		';

		$( selectors ).css( 'color', val );

		var css = '\
			#page-content .post-content > p:first-child:first-letter {\
				color: '+ val +';\
			}\
		';
		asheStyle( 'colors_content_title', css );
	});

	asheLivePreview( 'colors_content_meta', function( val ) {
		var selectors = '\
			#page-content .post-date,\
			#page-content .post-author,\
			#page-content .related-post-date,\
			#page-content .comment-meta a,\
			#page-content .author-share a,\
			#page-content .post-tags a,\
			.widget_categories li,\
			.widget_archive li\
		';

		$( selectors ).css( 'color', val );
	});

	asheLivePreview( 'colors_content_accent', function( val ) {
		var selectors = '\
			#page-content h1 a,\
			#page-content .post-comments,\
			#page-content .post-author a,\
			#page-content .related-posts h4 a,\
			#page-content .author-description h4 a,\
			#page-content .blog-pagination a,\
			#page-content .post-date,\
			#page-content .post-author,\
			#page-content .related-post-date,\
			#page-content .comment-meta a,\
			#page-content .author-share a,\
			#page-content .tagcloud a\
		';

		$( '#page-content a' ).not( selectors ).css( 'color', val );

		var css = '\
			#page-content a:hover {\
				color: '+ asheHex2Rgba( val, 0.8 ) +';\
			}\
			#page-content h1 a:hover {\
				color: '+ val +';\
			}\
		';
		asheStyle( 'colors_content_accent', css );
	});

	asheLivePreview( 'colors_text_selection', function( val ) {
		var css = '\
			::-moz-selection {\
				color: #ffffff;\
				background: '+ val +';\
			}\
			::selection {\
				color: #ffffff;\
				background: '+ val +';\
			}\
		';
		asheStyle( 'colors_text_selection', css );
	});

	asheLivePreview( 'colors_content_border', function( val ) {
		var selectors = '\
			#page-content .post-footer,\
			#page-content .author-description,\
			#page-content .related-posts,\
			#page-content .entry-comments,\
			#page-content .ashe-widget li,\
			#page-content .ashe-widget li a,\
			#page-content #wp-calendar,\
			#page-content #wp-calendar caption,\
			#page-content #wp-calendar tbody td,\
			#page-content .widget_nav_menu li a,\
			#page-content select,\
			#page-content input,\
			#page-content textarea,\
			.post-tags a,\
			.gallery-caption,\
			.wp-caption-text \
		';

		$( selectors ).css( 'border-color', val );
	});

	// Buttons
	asheLivePreview( 'colors_button', function( val ) {
		var css = '\
			.widget_search i,\
			.widget_search #searchsubmit,\
			.single-navigation i,\
			#page-content .submit,\
			#page-content .tagcloud a,\
			#page-footer .tagcloud a,\
			#page-content .blog-pagination a {\
				background-color: '+ val +';\
			}\
		';
		asheStyle( 'colors_button', css );
	});

	asheLivePreview( 'colors_button_text', function( val ) {
		var css = '\
			.widget_search i,\
			.widget_search #searchsubmit,\
			.single-navigation i,\
			#page-content .submit,\
			#page-content .tagcloud a,\
			#page-footer .tagcloud a,\
			#page-content .blog-pagination a {\
				color: '+ val +';\
			}\
		';
		asheStyle( 'colors_button_text', css );
	});

	asheLivePreview( 'colors_button_hover', function( val ) {
		var css = '\
			.single-navigation i:hover,\
			#page-content .submit:hover,\
			#page-content .tagcloud a:hover,\
			#page-footer .tagcloud a:hover,\
			#page-content .blog-pagination .current,\
			#page-content .blog-pagination a:hover {\
				background-color: '+ val +';\
			}\
		';
		asheStyle( 'colors_button_hover', css );
	});

	asheLivePreview( 'colors_button_hover_text', function( val ) {
		var css = '\
			.single-navigation i:hover,\
			#page-content .submit:hover,\
			#page-content .tagcloud a:hover,\
			#page-footer .tagcloud a:hover,\
			#page-content .blog-pagination .current,\
			#page-content .blog-pagination a:hover {\
				color: '+ val +';\
			}\
		';
		asheStyle( 'colors_button_hover_text', css );
	});

	asheLivePreview( 'colors_overlay_text', function( val ) {
		var selectors = '\
			.image-overlay,\
			.image-overlay a,\
			#page-content .image-overlay a,\
			#page-content h4.image-overlay,\
			#featured-slider .slick-arrow,\
			#featured-slider .slider-dots\
		';

		$( selectors ).css( 'color', val );
		$( '#featured-slider .slick-active' ).css( 'background-color', val );
	});

	asheLivePreview( 'colors_overlay', function( val ) {
		var selectors = '\
			.image-overlay,\
			#page-content h4.image-overlay\
		';

		$( selectors ).css( 'background-color', asheHex2Rgba( val, 0.3 ) );
	});

	// Page Footer
	asheLivePreview( 'colors_footer_bg', function( val ) {
		var selectors = '\
			#page-footer,\
			#page-footer select,\
			#page-footer input,\
			#page-footer textarea\
		';

		$( selectors ).css( 'background-color', val );
	});

	asheLivePreview( 'colors_footer_text', function( val ) {
		var selectors = '\
			#page-footer,\
			#page-footer a,\
			#page-footer select,\
			#page-footer input,\
			#page-footer textarea\
		';

		$( selectors ).not('.tagcloud a').css( 'color', val );

		var css = '\
			#page-footer #s::-webkit-input-placeholder {\
			  color: '+ val +';\
			}\
			#page-footer #s::-moz-placeholder {\
			  color: '+ val +';\
			}\
			#page-footer #s:-ms-input-placeholder {\
			  color: '+ val +';\
			}\
			#page-footer #s:-moz-placeholder {\
			  color: '+ val +';\
			}\
		';
		asheStyle( 'colors_footer_text', css );
	});

	asheLivePreview( 'colors_footer_title', function( val ) {
		var selectors = '\
			#page-footer h1,\
			#page-footer h2,\
			#page-footer h3,\
			#page-footer h4,\
			#page-footer h5,\
			#page-footer h6\
		';

		$( selectors ).css( 'color', val );
	});

	asheLivePreview( 'colors_footer_accent', function( val ) {
		var css = '\
			#page-footer a:hover {\
				color: '+ val +';\
			}\
		';
		asheStyle( 'colors_footer_accent', css );
	});

	asheLivePreview( 'colors_footer_border', function( val ) {
		var selectors = '\
			#page-footer a,\
			#page-footer .ashe-widget li,\
			#page-footer #wp-calendar,\
			#page-footer #wp-calendar caption,\
			#page-footer #wp-calendar tbody td,\
			#page-footer .widget_nav_menu li a,\
			#page-footer select,\
			#page-footer input,\
			#page-footer textareaa\
			.footer-widgets\
		';

		$( selectors ).css( 'border-color', val );
	});


/*
** General Layouts
*/
	// General
	asheLivePreview( 'general_site_width', function( val ) {
		$( '.boxed-wrapper' ).css( 'max-width', val +'px' );
	});

	asheLivePreview( 'general_sidebar_width', function( val ) {
		var selectors = '\
			.sidebar-left,\
			.sidebar-right,\
			.sidebar-alt\
		';

		$( selectors ).css( 'width', val +'px' );
	});

	asheLivePreview( 'general_bg_image', function( val ) {
		$( '#page-wrap' ).css( 'background-image', 'url("'+ val +'")' );
	});

	asheLivePreview( 'general_bg_image_size', function( val ) {
		$( '#page-wrap' ).css( 'background-size', val );
	});

	asheLivePreview( 'general_bg_image_type', function( val ) {
		$( '#page-wrap' ).css( 'background-attachment', val );
	});


/*
** Top Bar
*/
	asheLivePreview( 'top_bar_align', function( val ) {
		// reset
		$('#top-menu, .top-bar-socials').css( 'float', 'none' );

		if ( val === 'left-right' ) {
			$('#top-menu').css( 'float', 'left' );
			$('.top-bar-socials').css( 'float', 'right' );
		} if ( val === 'right-left' ) {
			$('#top-menu').css( 'float', 'right' );
			$('.top-bar-socials').css( 'float', 'left' );
		}
	});


/*
** Page Header
*/

	asheLivePreview( 'page_header_height', function( val ) {
		$( '.entry-header' ).css( 'height', val +'px' );
	});

	asheLivePreview( 'page_header_bg_image', function( val ) {
		$( '.entry-header' ).css( 'background-image', 'url("'+ val +'")' );
	});

	asheLivePreview( 'page_header_bg_image_size', function( val ) {
		$( '.entry-header' ).css( 'background-size', val );
	});

	asheLivePreview( 'page_header_bg_image_type', function( val ) {
		$( '.entry-header' ).css( 'background-attachment', val );
	});

	asheLivePreview( 'page_header_logo_width', function( val ) {
		$('.header-logo a').css( 'width', val +'px' );
	});

	asheLivePreview( 'page_header_logo_distance', function( val ) {
		$('.header-logo a').css( 'padding-top', val +'px' );
	});


/*
** Custom Functions
*/
	// Previewer
	function asheLivePreview( control, func ) {
		wp.customize( 'ashe_options['+ control +']', function( value ) {
			value.bind( function( val ) {
				func( val );
			} );
		} );
	}

	// convert hex color to rgba
	function asheHex2Rgba( hex, opacity ) {
		if ( typeof(hex) === 'undefined' ) {
		 return;
		}

		var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex ),
			rgba = 'rgba( '+ parseInt( result[1], 16 ) +', '+ parseInt( result[2], 16 ) +', '+ parseInt( result[3], 16 ) +', '+ opacity +')';

		// return converted RGB
		return rgba;
	}

	// Style Tag
	function asheStyle( id, css ) {
		if ( $( '#'+ id ).length === 0 ) {
			$('head').append('<style id="'+ id +'"></style>')
		}

		$( '#'+ id ).text( css );
	}


} )( jQuery );