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.r