/**
 * This file adds some LIVE to the Theme Customizer live preview. To leverage
 * this, set your custom settings to 'postMessage' and then add your handling
 * here. Your javascript should grab settings from customizer controls, and 
 * then make any necessary changes to the page using jQuery.
 */
( function( $ ) {
	
	//Update the site background color in real time...
	wp.customize( 'custom_site_background', function( value ) {
		value.bind( function( newval ) {
			$( '.home #top-bar' ).css({
                'background-color' : newval
            });
			$( '#fixed-search' ).css({
                'background-color' : newval
            });
			$( '#content' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the slider arrows color in real time...
	wp.customize( 'custom_arrow_color', function( value ) {
		value.bind( function( newval ) {
			$( '.path-arrow-box' ).css({
                'fill' : newval
            });
			$( '.path-arrow' ).css({
                'fill' : newval
            });
		} );
	} );
	
	//Update the slider caption background color in real time...
	wp.customize( 'custom_box_caption_background', function( value ) {
		value.bind( function( newval ) {
			$( '.slide-caption' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the slide1 vertical position in real time...
	wp.customize( 'adjust_slide1', function( value ) {
		value.bind( function( newval ) {
			$( '#slide1' ).css({
                'top' : '-' + newval + 'px'
            });
		} );
	} );
	
	//Update the slide1 vertical position in real time...
	wp.customize( 'adjust_slide2', function( value ) {
		value.bind( function( newval ) {
			$( '#slide2' ).css({
                'top' : '-' + newval + 'px'
            });
		} );
	} );
	
	//Update the slide1 vertical position in real time...
	wp.customize( 'adjust_slide3', function( value ) {
		value.bind( function( newval ) {
			$( '#slide3' ).css({
                'top' : '-' + newval + 'px'
            });
		} );
	} );
	
	//Update the title box background color in real time...
	wp.customize( 'custom_title_box_background', function( value ) {
		value.bind( function( newval ) {
			$( '.theme-name' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the description color in real time...
	wp.customize( 'custom_title_text_color', function( value ) {
		value.bind( function( newval ) {
			$( '.custom_description_color' ).css({
                'color' : newval
            });
		} );
	} );
	
	//Update the navigation menu background in real time...
	wp.customize( 'custom_nav_background', function( value ) {
		value.bind( function( newval ) {
			$( '#header-nav' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the sidebar background in real time...
	wp.customize( 'custom_sidebar_background', function( value ) {
		value.bind( function( newval ) {
			$( '.custom_sidebar_box_color' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the social icons color in real time...
	wp.customize( 'custom_social_color', function( value ) {
		value.bind( function( newval ) {
			$( '.social-icons' ).css({
                'fill' : newval
            });
		} );
	} );
	
	//Update the widgets background in real time...
	wp.customize( 'custom_widget_background_color', function( value ) {
		value.bind( function( newval ) {
			$( '.widget' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the widgets title background in real time...
	wp.customize( 'custom_widgettitle_background_color', function( value ) {
		value.bind( function( newval ) {
			$( '.widgettitle' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the widgets title color in real time...
	wp.customize( 'custom_widgettitle_text_color', function( value ) {
		value.bind( function( newval ) {
			$( '.widgettitle' ).css({
                'color' : newval
            });
		} );
	} );
	
	//Update the widgets texts color in real time...
	wp.customize( 'custom_widget_text_color', function( value ) {
		value.bind( function( newval ) {
			$( '.widget p:not(.h2)' ).css({
                'color' : newval
            });
			$( '.widget label' ).css({
                'color' : newval
            });
		} );
	} );
	
	//Update the main section background in real time...
	wp.customize( 'custom_section_background', function( value ) {
		value.bind( function( newval ) {
			$( '.custom_widget_section_box_color' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the post-format background in real time...
	wp.customize( 'custom_postformat_background', function( value ) {
		value.bind( function( newval ) {
			$( '.post-format' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the post-format icon color in real time...
	wp.customize( 'custom_postformat_color', function( value ) {
		value.bind( function( newval ) {
			$( '.post-format span' ).css({
                'color' : newval
            });
		} );
	} );
	
	//Update the post title background color in real time...
	wp.customize( 'custom_posttitle_background', function( value ) {
		value.bind( function( newval ) {
			$( '.post-title-box' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the post sidebar background color in real time...
	wp.customize( 'custom_postside_background', function( value ) {
		value.bind( function( newval ) {
			$( '.post-side' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the post sidebar background color in real time...
	wp.customize( 'custom_postside_text', function( value ) {
		value.bind( function( newval ) {
			$( '.post-side p' ).css({
                'color' : newval
            });
		} );
	} );
	
	//Update the post sidebar texts color in real time...
	wp.customize( 'custom_postside_text', function( value ) {
		value.bind( function( newval ) {
			$( '.post-side p' ).css({
                'color' : newval
            });
		} );
	} );
	
	//Update the post content background color in real time...
	wp.customize( 'custom_postcontent_background', function( value ) {
		value.bind( function( newval ) {
			$( '.post-content-box' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the post content texts color in real time...
	wp.customize( 'custom_postcontent_text', function( value ) {
		value.bind( function( newval ) {
			$( '.post-content-box p' ).css({
                'color' : newval
            });
			$( '.post-content-box label' ).css({
                'color' : newval
            });
		} );
	} );
	
	//Update the post content titles color in real time...
	wp.customize( 'custom_postcontent_titles', function( value ) {
		value.bind( function( newval ) {
			$( '.post-content-box h1' ).css({
                'color' : newval
            });
			$( '.post-content-box h2' ).css({
                'color' : newval
            });
			$( '.post-content-box h3' ).css({
                'color' : newval
            });
			$( '.post-content-box h4' ).css({
                'color' : newval
            });
			$( '.post-content-box h5' ).css({
                'color' : newval
            });
			$( '.post-content-box h6' ).css({
                'color' : newval
            });
		} );
	} );
	
	//Update the footer sidebar background in real time...
	wp.customize( 'custom_footer_aside_background', function( value ) {
		value.bind( function( newval ) {
			$( '.footer-sidebar' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the footer section background in real time...
	wp.customize( 'custom_footer_section_background', function( value ) {
		value.bind( function( newval ) {
			$( '.footer-section' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update the footer section background in real time...
	wp.customize( 'custom_footer_text', function( value ) {
		value.bind( function( newval ) {
			$( '.footer-section p' ).css({
                'color' : newval
            });
		} );
	} );
	
	//Update first level comment background in real time...
	wp.customize( 'custom_firstcomment_background', function( value ) {
		value.bind( function( newval ) {
			$( '.depth-1' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update second level comment background in real time...
	wp.customize( 'custom_secondcomment_background', function( value ) {
		value.bind( function( newval ) {
			$( '.depth-2' ).css({
                'background-color' : newval
            });
		} );
	} );
	
	//Update first level comment text color in real time...
	wp.customize( 'custom_firstcomments_text_color', function( value ) {
		value.bind( function( newval ) {
			$( '.depth-1 .comment-content p' ).css({
                'color' : newval
            });
		} );
	} );
	
} )( jQuery );