var pagelayer_fontHtmlArray = {};

(function($) {
	var api = wp.customize;
	
	api.bind( 'ready', function() {

		var controls = api.settings.controls;
		
		for(var control in controls){
			if( !('show_filter' in controls[control]) ){
				continue;
			}			
			
			var filter = controls[control]['show_filter'];
			for(var showParam in filter){
				var except = showParam.substr(0, 1) == '!' ? true : false;
				showParam = except ? showParam.substr(1) : showParam;
				
				// Show and Hide Controls 
				api( showParam, function( setting ){
					api.control( control, function( _control ) {
						var visibility = function() {
							var _filter = _control.params['show_filter'];
							for(var _showParam in _filter){
								var reqval = _filter[_showParam];
								var val = setting.get();
								
								var toShow = false;
								
								if(typeof reqval == 'string' && reqval == val){
									toShow = true;
								}
								
								// Its an array and a value is found, then dont show
								if(typeof reqval != 'string' && reqval.indexOf(val) > -1){
									toShow = true;
								}
								
								if(except && !toShow || !except && toShow  ){
									_control.container.show();
									return
								}
								
								_control.container.hide();
							}
							
						};

						visibility();
						setting.bind( visibility );
					});
				});
			}
		}
		
		// Expand pagelayer setting handler
		api.section('pagelayer_global_fonts_sec', function( section ){
			section.expanded.bind(function( isExpanding ){
				
				// Set default value
				section.container.find('select[data-font-key]').each(function(){
					var ref = jQuery(this),
						name = ref.attr('data-font-key'),
						value = ref.attr('data-default-value');
					
					ref.html(pagelayer_fontHtmlArray[name]).val(value);
					ref.removeAttr('data-font-key');
				});
			});
		});
		
		
	});
	
})(jQuery);

/**
 * Initialization trigger.
 */
jQuery(document).ready( function(){
	
	// Create color setting 
	pagelayer_alpha_color_control_init();
	
	var option = function(val, lang){
		var lang = lang || 'Default';
		return '<option value="'+val+'">'+lang+'</option>';
	}
	
	// Create font setting list
	for(var sk in pagelayer_global_font_settings){
		var sval = pagelayer_global_font_settings[sk];			
		if('choices' in sval){
			var fontHtml = '';
			for(  var value in sval['choices'] ) {
				
				if(typeof sval['choices'][value] !== 'object'){
					fontHtml += option(value, sval['choices'][value]);
					continue;
				}
				
				if(value != 'default'){
					fontHtml += '<optgroup label="'+value+'">';
				}
				
				for (x in sval['choices'][value]){
					fontHtml += option((jQuery.isNumeric(x) ? sval['choices'][value][x] : x), sval['choices'][value][x]);
				}
			}
			
			pagelayer_fontHtmlArray[sk] = fontHtml;
		}
	}
	
	// Show hide typography
	jQuery(document).on('click.pagelayer-typo-icon', function (e){
		var target = jQuery(e.target);
		var isTypo = target.closest('.pagelayer-control-typo');
		var isIcon = target.closest('.pagelayer-control-typo-icon');
		var typoHolder = isIcon.closest('.pagelayer-control-typo-holder');

		if(isTypo.length > 0){
			return;
		}
		
		if(isIcon.length > 0){
			
			// Set default value
			typoHolder.find('select[data-font-key]').each(function(){
				var ref = jQuery(this),
					name = ref.attr('data-font-key'),
					value = ref.attr('data-default-value');
				
				ref.html(pagelayer_fontHtmlArray[name]).val(value);
				ref.removeAttr('data-font-key');
			});
			
			var globalInput = typoHolder.find('.pagelayer-global-font-input');
			
			if(!pagelayer_empty(globalInput)){
				// Show the global values if is not customize
				typoHolder.find('.pagelayer-control-typo-fields').attr('pagelayer-set-global', 1);
				typoHolder.find('select, input').each(function(){
					var sEle = jQuery(this);
					var val = sEle.val();
					
					if(pagelayer_empty(val)){
						return true;
					}
					
					sEle.closest('.pagelayer-control-typo-fields').removeAttr('pagelayer-set-global');
				});
				
				typoHolder.find('[pagelayer-set-global="1"] .pagelayer-typo-global-default').trigger('click');
			}
			
			typoHolder.find('.pagelayer-control-typo').slideToggle(100);
			return;
		}
		
		jQuery('.pagelayer-control-typo').slideUp(100);
	});
	
	// Show hide global color option
	jQuery(document).on('click.pagelayer-global-color-icon', function (e){
		var target = jQuery(e.target);
		var isGcolor = target.closest('.pagelayer-global-color-list');
		var isGIcon = target.closest('.pagelayer-control-global-color-icon');
		
		if(isGcolor.length > 0){
			return;
		}
		
		if(isGIcon.length > 0){
			var listEle = isGIcon.closest('li').find('.pagelayer-global-color-list');
			jQuery('.pagelayer-global-color-list').not(listEle).slideUp(100);
			listEle.slideToggle(100);
			return;
		}
		
		jQuery('.pagelayer-global-color-list').slideUp(100);
	});
	
	// Hide global color option
	jQuery(document).on('focus', '.wp-color-result', function(e){
		jQuery('.pagelayer-global-color-list').slideUp(100);
	});
	
	// Show hide global fonts option
	jQuery('#customize-theme-controls').on('click.pagelayer-global-typo-icon', function (e){
		var target = jQuery(e.target);
		var isGcolor = target.closest('.pagelayer-global-font-list');
		var isGIcon = target.closest('.pagelayer-control-global-typo-icon');
		var typoHolder = isGIcon.closest('.pagelayer-control-typo-holder');
			
		if(isGcolor.length > 0){
			return;
		}
		
		if(isGIcon.length > 0){
			typoHolder.find('.pagelayer-global-font-list').slideToggle(100);
			return;
		}
		
		jQuery('.pagelayer-global-font-list').slideUp(100);
	});
	
	// Device handler
	jQuery('#customize-theme-controls').on('click', '.pagelayer-devices button', function(e){
		
		e.stopPropagation();
		
		var device = jQuery(this).data('device');
		var devices = {'desktop' : 'tablet', 'tablet' : 'mobile', 'mobile' : 'desktop'};
		jQuery('.devices-wrapper .devices [data-device="'+devices[device]+'"]').click();
	});
	
	// Add attr to detect device
	jQuery('#customize-theme-controls').attr('data-device-detector', 'desktop');
	
	// Device handler
	jQuery('.devices-wrapper .devices button[data-device]').on('click', function(e){
		
		e.stopPropagation();
		
		var device = jQuery(this).data('device');
		
		jQuery('.pagelayer-devices .active-device').removeClass('active-device');
		jQuery('.pagelayer-devices [data-device="'+device+'"]').addClass('active-device');
		
		jQuery('[data-device-detector]').attr('data-device-detector', device);
		
	});
	
	// Units handler
	jQuery('.pagelayer-units').each(function(){
		var units = jQuery(this);
		var uList = units.find('[data-unit]');
		var input = units.find('.pagelayer-unit-input');
		var uActive = units.find('[data-unit="'+input.val()+'"]');
		
		units.find('[data-unit]').on('click', function(){
			var uEle = jQuery(this);
			uList.removeClass('active');
			uEle.addClass('active');
			input.val(uEle.data('unit')).trigger('input');
		});
		
		if(uActive.length > 0){
			uActive.click();
			return;
		}
		
		//uList.first().click();
		
	});
	
	// Accordion Tab handlers
	jQuery('.pagelayer-accordion-tab').on('click', function(){
		var toggle = jQuery(this);
		var allToggle = toggle.closest('ul').find('.pagelayer-accordion-tab').not(toggle);
		
		allToggle.nextUntil('.pagelayer-accordion-tab').slideUp();
		allToggle.removeClass('pagelayer-active-accordion-tab')
		toggle.nextUntil('.pagelayer-accordion-tab').slideToggle();
		
		toggle.toggleClass('pagelayer-active-accordion-tab');
		
		var dash = toggle.find('.pagelayer-customize-heading .dashicons');
		var allDash = toggle.closest('ul').find('.pagelayer-accordion-tab .pagelayer-customize-heading .dashicons');
		
		allDash.addClass('dashicons-arrow-right-alt2');
		allDash.removeClass('dashicons-arrow-down-alt2');
		
		if(toggle.hasClass('pagelayer-active-accordion-tab')){
			dash.addClass('dashicons-arrow-down-alt2');
			dash.removeClass('dashicons-arrow-right-alt2');
		}
    
	});
	
	// Close all accordion tabs
	jQuery('.pagelayer-accordion-tab').nextUntil('.pagelayer-accordion-tab').hide();
	
	// Link padding control field handler
	jQuery('.pagelayer-control-padding').each(function(){
		pagelayer_control_padding_handler(jQuery(this));
	});

	// Link Global Color Palette
	jQuery('.pagelayer-global-setting-color .dashicons').click(function(){
		jQuery('#accordion-section-pagelayer_global_colors_sec .accordion-section-title').click();
	});

	// Link Global Font Palette
	jQuery('.pagelayer-global-setting-font .dashicons-admin-generic').click(function(){
		jQuery('#accordion-section-pagelayer_global_fonts_sec .accordion-section-title').click();
	});
	
	// Color Palette Custom Control
	pagelayer_color_palette_control_handler();
	
	// Color Palette Custom Control
	pagelayer_font_palette_control_handler();
	
	// Global color list handler
	pagelayer_global_color_list_handler();
	
	// Global font list handler
	pagelayer_global_font_list_handler();
	
	// Slider handler
	pagelayer_control_slider_handler();
	
});

// Global font list handler
function pagelayer_global_font_list_handler(){
	
	var font_list = '';
	
	// Create global font list
	for(var font in pagelayer_global_fonts){
		font_list += '<div class="pagelayer-global-font-list-item" data-global-id="'+font+'">'+
				'<span class="pagelayer-global-font-title">'+ pagelayer_global_fonts[font]['title'] +'</span>'+
			'</div>';
	}
	
	jQuery('.customize-control-pagelayer-typo-control .pagelayer-control-typo-holder').each(function(){
		var fHolder = jQuery(this);
		var fList = fHolder.find('.pagelayer-global-font-list');
		
		if(fList.length < 1){
			return;
		}
		
		// Add list of font list
		fList.append(font_list);
		
		var globalInput = fHolder.find('.pagelayer-global-font-input');
		var selectfont = globalInput.data('key');
		
		// Restore global value
		fHolder.find('.pagelayer-typo-global-default').on('click', function(e){
			e.preventDefault();
			e.stopPropagation();
			
			var sEle = jQuery(this);
			var fieldHolder = sEle.closest('.pagelayer-control-typo-fields');
			var globalID = globalInput.val();
			
			if(pagelayer_empty(globalID) || pagelayer_empty(pagelayer_global_fonts[globalID])){
				return;
			}
			
			var allInput = fieldHolder.find('select, input');
			var name = allInput.first().attr('name');
			var setFonts = pagelayer_global_fonts[globalID]['value'];
			
			// Set default
			var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'};
			var val = '';
			
			fieldHolder.attr('pagelayer-set-global', 1);
			allInput.val(val).trigger('change');
			
			if(name in setFonts){
				val = setFonts[name];
			}
					
			if(typeof val == 'object'){
				
				for(var mode in modes){
					var _val = '';
					if(mode in val){
						_val = val[mode];
					}
					
					fieldHolder.find('[name="'+name+modes[mode]+'"]').val(_val);
				}
				
				return;
			}
			
			allInput.val(val);
		});
		
		if(fList.find('[data-global-id="'+selectfont+'"]').length > 0){
			fList.find('[data-global-id="'+selectfont+'"]').addClass('pagelayer-global-selected');
			
			// Set active
			fHolder.find('.pagelayer-control-global-typo-icon').addClass('pagelayer-active-global');
		}
		
		// On change any field we need to handle for the global
		fHolder.find('select, input').on('input', function(){
			var sEle = jQuery(this);
			var fieldHolder = sEle.closest('.pagelayer-control-typo-fields');
			
			if(fieldHolder.attr('pagelayer-set-global') == '1'){
				fieldHolder.removeAttr('pagelayer-set-global');
				fieldHolder.find('select, input').trigger('change');
			}
		});
		
	});
	
	jQuery('#customize-theme-controls').on('click', '.pagelayer-global-font-list-item', function(){
		var listItem = jQuery(this);
		var globalID = listItem.data('global-id');
		var listHolder = listItem.closest('.pagelayer-global-font-list');
		var holder = listItem.closest('.pagelayer-control-typo-holder');
		var allInputs = holder.find('select, input');
		
		// Remove global font
		if(listItem.hasClass('pagelayer-global-selected')){
			listItem.removeClass('pagelayer-global-selected');
			holder.find('.pagelayer-control-global-typo-icon').removeClass('pagelayer-active-global');
			holder.find('.pagelayer-global-font-input').val('');
			holder.removeClass('pagelayer-global-on');
			allInputs.trigger('input');
			allInputs.closest('.pagelayer-control-typo-fields').removeAttr('pagelayer-set-global');
			listHolder.hide();
			return;
		}
		
		// Remove previous selecttion
		listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected')
		listHolder.hide();
		
		listItem.addClass('pagelayer-global-selected');
		
		var key = holder.find( '.pagelayer-global-font-input' ).attr( 'data-customize-setting-link' );
		
		// Empty all the typo
		allInputs.val('').trigger('input');
		allInputs.closest('.pagelayer-control-typo-fields').attr('pagelayer-set-global', 1);
		holder.addClass('pagelayer-global-on');
		
		// Set the actual option value to empty string.
		wp.customize( key, function( obj ) {
			obj.set(globalID);
		});
		
		// Apply all global values
		holder.find('.pagelayer-typo-global-default').click();
		holder.find('.pagelayer-control-global-typo-icon').addClass('pagelayer-active-global');
	});
}

// Global color list handler
function pagelayer_global_color_list_handler(){	
	
	jQuery(document).on('click', '.pagelayer-global-color-list-item', function(e, skip_update){
		
		skip_update = skip_update || false;
		
		var listItem = jQuery(this);
		var globalID = listItem.data('global-id');
		var listHolder = listItem.closest('.pagelayer-global-color-list');
		
		// Remove previous selecttion
		listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
		listItem.addClass('pagelayer-global-selected');
		listHolder.hide();
		
		var input = listItem.closest('li').find( '.pagelayer-alpha-color-control' )
		var code = '$'+globalID;
		var color = pagelayer_global_colors[globalID]['value'];
		
		input.unbind('change.pagelayer_global input.pagelayer_global color_change.pagelayer_global');
		
		if(!skip_update){
			var key = input.attr( 'data-customize-setting-link' );

			// Set the actual option value to empty string.
			wp.customize( key, function( obj ) {
				obj.set(code);
			});
		}
			
		// Set the actual option value to empty string.
		input.val( color );
		input.closest('.wp-picker-container').find('.wp-color-result').css({'background-color': color});
		
		input.on('change.pagelayer_global input.pagelayer_global color_change.pagelayer_global', function(){
			var colorCode = jQuery(this).val();
			if(jQuery.trim(colorCode) == color){
				return;
			}
			listItem.closest('li').find('.pagelayer-control-global-color-icon').removeClass('pagelayer-active-global');
			listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
		});

		listItem.closest('li').find('.pagelayer-control-global-color-icon').addClass('pagelayer-active-global');
	});
	
	jQuery('.pagelayer-global-color-list-item.pagelayer-global-selected').trigger('click', [true]);
}

var pagelayer_global_colors_timmer = {};
// Color palette Custom Control
function pagelayer_color_palette_control_handler(){
	
	var global_palette = jQuery('#customize-control-pagelayer_global_colors');
		
	// Get the values from the repeater input fields and add to our hidden field
	var pagelayerGetAllInputs = function() {
		
		var pagelayer_colors_palette = {};
		
		global_palette.find('.pagelayer-alpha-color-control').each(function(){
			var cEle = jQuery(this);
			var id = cEle.data('id');

			pagelayer_colors_palette[id] = {
				'title' : cEle.closest('.pagelayer-color-holder').find('.pagelayer-color-title').text(),
				'value' : cEle.val(),
			}
		});
		
		var inputValues = JSON.stringify(pagelayer_colors_palette);
		
		// Add all the values from our repeater fields to the hidden field (which is the one th