/**
 * Live-update changed settings in real time in the Customizer preview.
 */

(function ($) {

	'use strict';

	var api = wp.customize;
	
	api('kktfwp_menu_style', function (setting) {
		
		setting.bind(function (value) {		
			if ( $.inArray( value, [ 'kk-menu-left-boxed', 'kk-menu-fullscreen' ] ) !== -1 ) {
				api.control( 'kktfwp_menu_opacity' ).container.show();						
			} else {				
				api.control( 'kktfwp_menu_opacity' ).container.hide();		
			}
			
			if ( $.inArray( value, [ 'kk-menu-left-boxed', 'kk-menu-slide-right', 'kk-menu-classic' ] ) !== -1 ) {
				api.control( 'kktfwp_content_width' ).container.hide();					
			} else {
				api.control( 'kktfwp_content_width' ).container.show();				
			}
			
			if ( $.inArray( value, [ 'kk-menu-slide-right', 'kk-menu-classic', 'kk-menu-fullscreen' ] ) !== -1 ) {
				api( 'kktfwp_content_width' ).set( 'kk-full' );
			} else if ( value === 'kk-menu-left-boxed' ) {
				api( 'kktfwp_content_width' ).set( 'kk-boxed' );
			}
			
			if ( $.inArray( value, [ 'kk-menu-default', 'kk-menu-default-hidden', 'kk-menu-left-boxed', 'kk-menu-classic', 'kk-menu-fullscreen' ] ) !== -1 ) {
				api.control( 'kktfwp_borders' ).container.hide();	
			} else {
				api.control( 'kktfwp_borders' ).container.show();	
			}
			
			if ( $.inArray( value, [ 'kk-menu-slide-right', 'kk-menu-fullscreen', 'kk-menu-classic' ] ) !== -1 ) {
				api.control( 'kktfwp_logo_dark' ).container.show();	
				api.control( 'kktfwp_logo_dark2x' ).container.show();	
			} else {
				api.control( 'kktfwp_logo_dark' ).container.hide();	
				api.control( 'kktfwp_logo_dark2x' ).container.hide();	
			}
		});
	});
	
	api('kktfwp_blog_sidebar', function (setting) {		
		setting.bind(function (value) {					
			if ( value === 'full' ) {				
				api.control( 'kktfwp_blog_single' ).container.hide();	
			} else {
				api.control( 'kktfwp_blog_single' ).container.show();	
			}
		});
	});
	
	api('kktfwp_slider_type', function (setting) {
		
		var $default = [ 'kktfwp_slider_effect', 'kktfwp_slider_transition', 'kktfwp_slider_lenght', 'kktfwp_slider_random' ],
			$kenB = [ 'kktfwp_kenb_transition', 'kktfwp_kenb_lenght', 'kktfwp_kenb_fps', 'kktfwp_kenb_zoom' ];
		
		setting.bind(function (value) {		
			
			if ( value === 'kk_royal' ) {				
				$.each($default, function (index, value) {
					api.control( value ).container.show();
				});				
				$.each($kenB, function (index, value) {
					api.control( value ).container.hide();
				});				
			} else {
				$.each($default, function (index, value) {
					api.control( value ).container.hide();
				});				
				$.each($kenB, function (index, value) {
					api.control( value ).container.show();
				});	
			}
		});
	});

	_.each(kktfwp_controlVars, function (controlVars, checkMe) {

		api(checkMe, function (setting) {

			var activeState;

			activeState = function (control) {
				var visibility = function () {
					if ( controlVars.state == setting.get() ) {
						control.container.slideDown(100);
					} else {
						control.container.slideUp(100);
					}
				};

				// Set initial active state.
				visibility();
				//Update activate state whenever the setting is changed.
				setting.bind(visibility);
			};

			// Call activeState on the border controls when they exist.
			
			if ($.isArray(controlVars.elements)) {
				_.each(controlVars.elements, function (v, k) {					
					api.control(v, activeState);
				})
			} else {
				api.control(controlVars.elements, activeState);
			}

		});
	});

	$().ready(function () {

		_.each(kktfwp_fonts, function (value) {

			api(value + '[font]', function (setting) {

				setting.bind(function (val) {

					if (undefined !== val && 0 < val.length && undefined !== api.control.instance(value)) {

						var elem = api.control.instance(value),
							oldVariant = elem.settings.variant.get(),
							variants = $('option:selected', elem.container.find('select')).data('variants');

						$('option', elem.container.find('.font-variants')).remove();

						if (variants.length && 1 < variants.split(',').length) {

							$.each(variants.split(','), function (key, value) {
								$('#font-variants_' + elem['id']).append('<option value="' + value + '"' + (value == oldVariant ? ' selected="selected"' : '') + '>' + value + '</option>');

							});
							
							elem.container.find('.font-variants').trigger('change');

						} else {
							$('#font-variants_' + elem['id']).append('<option value="' + variants + '">' + variants + '</option>');
							elem.container.find('.font-variants').trigger('change');
						}
					}
				})
			})
		})

	});

})(jQuery);
