"use strict";

/* Customizer Back Button */
jQuery(document).ready(function ($) {

	// Store the previous section in a global variable to use later
	let previous_section = '';
	$( '.sydney-to-widget-area-link' ).on( 'click', function(){
		
		// Sections
		if( $( this ).closest( '.control-section' ).length ) {
			previous_section = $( this ).closest( '.control-section' ).attr( 'id' ).replace( 'sub-accordion-section-', '' );
		}

	} );

	// Flag when hidden section content is active
	let is_any_header_footer_section = false,
		is_hidden_section_content = false,
		is_header_builder_section = false,
		is_header_builder_component_section = false,
		is_footer_builder_section = false,
		is_footer_builder_component_section = false;

	$( document ).on( 'mouseover focus', '.customize-section-back', function(e){
		if( ! $( '.control-section.open' ).length ) {
			return false;
		}

		is_any_header_footer_section        = $( '.control-section.open' ).attr( 'id' ).indexOf( '_hb_' ) || $( '.control-section.open' ).attr( 'id' ).indexOf( '_fb_' ) ? true : false;
		is_hidden_section_content 			= $( '.control-section.open' ).hasClass( 'control-section-sydney-section-hidden' ) ? true : false;
		is_header_builder_section 			= $( '.control-section.open' ).attr( 'id' ) === 'sub-accordion-section-sydney_section_hb_wrapper' ? true : false;
		is_header_builder_component_section = $( '.control-section.open' ).attr( 'id' ).indexOf( 'sydney_section_hb_component_' ) !== -1 ? true : false;
		is_footer_builder_section 			= $( '.control-section.open' ).attr( 'id' ) === 'sub-accordion-section-sydney_section_fb_wrapper' ? true : false;
		is_footer_builder_component_section = $( '.control-section.open' ).attr( 'id' ).indexOf( 'sydney_section_fb_component_' ) !== -1 ? true : false;

		// Pre-tag the builder's panel pane so core exits to the main interface
		// in ONE animation: when the section collapses, core sees the panel's
		// skip-transition class, collapses the panel itself in the same cycle,
		// and transitions the section pane directly against the root pane
		// (see Section.onChangeExpanded / _animateChangeExpanded in core).
		// This must happen before the click, hence mouseover/focus.
		if ( is_header_builder_section ) {
			sydneyTagBuilderPanelForExit( 'sydney_panel_header', true );
		}
		if ( is_footer_builder_section ) {
			sydneyTagBuilderPanelForExit( 'sydney_panel_footer', true );
		}
	} );

	// Hover/focus without a click: undo the exit pre-tagging. A lingering
	// skip-transition class is dangerous — any section collapse inside a
	// skip-tagged panel makes core collapse the whole panel.
	$( document ).on( 'mouseleave focusout', '.customize-section-back', function() {
		sydneyTagBuilderPanelForExit( 'sydney_panel_header', false );
		sydneyTagBuilderPanelForExit( 'sydney_panel_footer', false );
	} );

	function sydneyTagBuilderPanelForExit( panelId, tag ) {
		var panel = wp.customize.panel( panelId );

		if ( typeof panel === 'undefined' ) {
			return;
		}

		panel.contentContainer.toggleClass( 'skip-transition', tag && panel.expanded() );
	}

	// Collapse a panel only after the section pane's slide-out transition has
	// finished. Core collapses the section itself when the back button is
	// clicked; starting the panel collapse while that animation is still
	// running is a race that can leave the customizer pane blank. The section
	// state is already false by the time we run, so a collapse completeCallback
	// would fire immediately — we have to wait for the transition itself.
	function sydneyCollapsePanelAfterSection( sectionId, panelId ) {
		var section = wp.customize.section( sectionId );
		var panel   = wp.customize.panel( panelId );

		if ( typeof section === 'undefined' || typeof panel === 'undefined' ) {
			return;
		}

		var container = section.contentContainer;
		var done = false;

		function finish() {
			if ( done ) {
				return;
			}
			done = true;
			container.off( 'transitionend', onTransitionEnd );
			panel.collapse();
		}

		function onTransitionEnd( e ) {
			// Ignore transitions bubbling up from children of the pane.
			if ( e.target === container[ 0 ] ) {
				finish();
			}
		}

		container.on( 'transitionend', onTransitionEnd );

		// Fallback: core's pane transition is 180ms; if transitionend never
		// fires (e.g. reduced motion), still return to the main interface.
		setTimeout( finish, 400 );
	}

	// Enter the builders straight from the main interface in ONE animation:
	// replicate core's autoExpandSoleSection choreography (panel pane
	// pre-tagged with current-panel + skip-transition) so the wrapper section
	// expands directly against the root pane instead of sliding through the
	// panel pane first.
	var sydney_builder_wrappers = {
		'sydney_section_hb_wrapper': 'sydney_panel_header',
		'sydney_section_fb_wrapper': 'sydney_panel_footer'
	};

	$.each( sydney_builder_wrappers, function( sectionId, panelId ) {
		wp.customize.section( sectionId, function( section ) {
			var originalExpand = section.expand;

			section.expand = function( params ) {
				var panel = wp.customize.panel( panelId );

				if ( typeof panel !== 'undefined' && ! panel.expanded() ) {
					// Mirror the sibling collapse core performs on the normal
					// panel-expand path we are skipping.
					wp.customize.section.each( function( other ) {
						if ( other.panel() !== panelId ) {
							other.collapse( { duration: 0 } );
						}
					} );
					wp.customize.panel.each( function( otherPanel ) {
						if ( otherPanel.id !== panelId ) {
							otherPanel.collapse( { duration: 0 } );
						}
					} );

					// With current-panel pre-added, the panel expands without its
					// own pane animation; the section then animates against the
					// root pane (skip-transition, see _animateChangeExpanded).
					panel.contentContainer.addClass( 'current-panel skip-transition' );
					panel.contentContainer.closest( '.wp-full-overlay' ).addClass( 'in-sub-panel' );
					panel.expand();
					wp.customize.state( 'expandedPanel' ).set( panel );

					// The tag must not outlive the expand animation: any section
					// collapse inside a skip-tagged panel makes core collapse the
					// whole panel. Exiting re-tags on back-button hover instead.
					params = params || {};
					var userCompleteCallback = params.completeCallback;
					params.completeCallback = function() {
						panel.contentContainer.removeClass( 'skip-transition' );
						if ( userCompleteCallback ) {
							userCompleteCallback();
						}
					};
				}

				return originalExpand.call( section, params );
			};
		} );
	} );

	// If hidden section content is active, focus on the previous section (from global variable)
	$( document ).on( 'click keydown', '.customize-section-back', function(e){
		if( e.keyCode && e.keyCode !== 13 && e.keyCode !== 27 ) {
			return false;
		}

		// Enhanced logic for header panel navigation
		// back button should return to main customizer instead of header panel sections
		var current_panel = wp.customize.state('expandedPanel').get();
		var current_section = wp.customize.state('expandedSection').get();
		var $publishSettings = $('#sub-accordion-section-publish_settings');
		var isPublishSettingsOpen = $publishSettings.hasClass('open');
		
		// If publish settings is open and we're in header panel, close publish settings and collapse header panel
		if(
			isPublishSettingsOpen && 
			current_panel && 
			(
				current_panel.id === 'sydney_panel_header' ||
				current_panel.id === 'sydney_panel_footer'
			)
		) {
			// Prevent the default behavior
			e.preventDefault();
			e.stopPropagation();
			
			// Close the publish settings section first
			wp.customize.section('publish_settings').collapse();
			
			// Then collapse the header panel to return to main customizer
			wp.customize.panel( 'sydney_panel_header' ).collapse();
			
			// Reset flags and return early
			is_any_header_footer_section = false;
			is_header_builder_section = false;
			is_header_builder_component_section = false;
			is_footer_builder_section = false;
			is_footer_builder_component_section = false;
			is_hidden_section_content = false;
			return false;
		}

		if( is_header_builder_section ) {
			wp.customize.section( 'sydney_section_hb_wrapper' ).collapse();
			sydneyCollapsePanelAfterSection( 'sydney_section_hb_wrapper', 'sydney_panel_header' );
		}

		if( is_footer_builder_section ) {
			wp.customize.section( 'sydney_section_fb_wrapper' ).collapse();
			sydneyCollapsePanelAfterSection( 'sydney_section_fb_wrapper', 'sydney_panel_footer' );
		}

		if( ! is_any_header_footer_section && ! is_footer_builder_component_section && ! is_header_builder_component_section && is_hidden_section_content && previous_section !== '' ) {
			if ( typeof wp.customize.section( previous_section ) !== 'undefined' ) {
				wp.customize.section( previous_section ).focus();
			}
		}

		is_any_header_footer_section = false;
		is_header_builder_section = false;
		is_header_builder_component_section = false;
		is_footer_builder_section = false;
		is_footer_builder_component_section = false;
		is_hidden_section_content = false;
	} );

});

//Add spacing for CPT panels
jQuery( document ).ready(function($) {
	var panels = $('li[id^="accordion-panel-sydney_panel_cpt_"]');
	panels.first().css( 'margin-top', '10px' );
	panels.last().css( 'margin-bottom', '10px' );
} );

jQuery( document ).ready( function() {

    /* === Checkbox Multiple Control === */

    jQuery( '.customize-control-checkbox-multiple input[type="checkbox"]' ).on(
        'change',
        function() {

            checkbox_values = jQuery( this ).parents( '.customize-control' ).find( 'input[type="checkbox"]:checked' ).map(
                function() {
                    return this.value;
                }
            ).get().join( ',' );

            jQuery( this ).parents( '.customize-control' ).find( 'input[type="hidden"]' ).val( checkbox_values ).trigger( 'change' );
        }
    );
    

} ); // jQuery( document ).ready

/* Typography */
jQuery(document).ready(function ($) {
  "use strict";

  var sydneyFontsCatalog = null;
  var sydneyFontsRequest = null;

  // One catalog request per customizer session, shared by all typography controls.
  function sydneyFetchFontsCatalog() {
    if (!sydneyFontsRequest) {
      sydneyFontsRequest = $.ajax({
        url: syd_data.fonts_rest_url,
        method: 'GET',
        beforeSend: function (xhr) {
          xhr.setRequestHeader('X-WP-Nonce', syd_data.rest_nonce);
        }
      }).then(function (list) {
        sydneyFontsCatalog = list;
        return list;
      });
    }
    return sydneyFontsRequest;
  }

  // Build the family select2 from the fetched catalog: saved font pre-selected,
  // "(default)" entry prepended when the saved font is not in the catalog.
  function sydneyPopulateFamilySelect($select, catalog) {
    if ($select.data('sydney-populated')) {
      return;
    }
    $select.data('sydney-populated', true);

    var saved = $select.val();
    var savedInCatalog = false;
    var data = [];

    $.each(catalog, function (i, font) {
      if (font.family === saved) {
        savedInCatalog = true;
      }
      data.push({ id: font.family, text: font.family });
    });

    if (saved && !savedInCatalog) {
      data.unshift({ id: saved, text: saved + ' (default)' });
    }

    if ($select.hasClass('select2-hidden-accessible')) {
      $select.select2('destroy');
    }
    $select.empty();
    $select.select2({ data: data });
    // Restore the selection in the UI without firing our change handlers.
    $select.val(saved).trigger('change.select2');
  }

  function normalisePrimary(value) {
    return 'regular' === value ? '400' : value;
  }

  function getFontVariants(fontFamily) {
    if (!sydneyFontsCatalog) {
      return null;
    }
    for (var i = 0; i < sydneyFontsCatalog.length; i++) {
      if (sydneyFontsCatalog[i].family === fontFamily) {
        return sydneyFontsCatalog[i];
      }
    }
    return null;
  }

  function rebuildExtras($extras, variants, primaryValue, previouslyPicked) {
    var primaryNormalised = normalisePrimary(primaryValue);
    $extras.empty();
    $.each(variants, function (i, variant) {
      var variantNormalised = normalisePrimary(variant);
      if (variantNormalised === primaryNormalised) {
        return;
      }
      var isSelected = $.inArray(variant, previouslyPicked) !== -1 ||
        $.inArray(variantNormalised, previouslyPicked) !== -1;
      var $option = $('<option></option>').val(variant).html(variant);
      if (isSelected) {
        $option.attr('selected', 'selected');
      }
      $extras.append($option);
    });
    // Refresh select2 to reflect the new options.
    if ($extras.hasClass('select2-hidden-accessible')) {
      $extras.trigger('change.select2');
    }
  }

  // Init Select2 on the family selector (renders the saved font only until the
  // catalog arrives).
  $('.google-fonts-list').each(function () {
    if (!$(this).hasClass('select2-hidden-accessible')) {
      $(this).select2();
    }
  });

  // Init Select2 (multi) on the extras selector.
  $('.google-fonts-extraweights-style').each(function () {
    if (!$(this).hasClass('select2-hidden-accessible')) {
      $(this).select2({
        multiple: true,
        placeholder: '',
        width: '100%'
      });
    }
  });

  // Prefetch when a section containing a typography control is first expanded,
  // then populate that control's family dropdowns.
  wp.customize.bind('ready', function () {
    wp.customize.control.each(function (control) {
      if ('sydney-google_fonts' !== control.params.type) {
        return;
      }
      var sectionId = control.section();
      if (!sectionId) {
        return;
      }
      wp.customize.section(sectionId, function (section) {
        var prefetch = function (expanded) {
          if (!expanded) {
            return;
          }
          sydneyFetchFontsCatalog().then(function (catalog) {
            control.container.find('.google-fonts-list').each(function () {
              sydneyPopulateFamilySelect($(this), catalog);
            });
          });
        };
        prefetch(section.expanded());
        section.expanded.bind(prefetch);
      });
    });
  });

  // Fallback trigger + loading state: opening the dropdown before the catalog
  // arrived starts/awaits the fetch and reopens once populated.
  $(document).on('select2:opening', '.google-fonts-list', function () {
    var $select = $(this);
    if ($select.data('sydney-populated') || $select.data('sydney-loading')) {
      return;
    }
    $select.data('sydney-loading', true);
    $select.append($('<option></option>').prop('disabled', true).text(syd_data.loading_fonts_text));
    sydneyFetchFontsCatalog().then(function (catalog) {
      var select2Instance = $select.data('select2');
      var wasOpen = select2Instance && select2Instance.isOpen();
      sydneyPopulateFamilySelect($select, catalog);
      if (wasOpen) {
        $select.select2('open');
      }
    });
  });

  // Family change: rebuild primary + extras, update category. (Delegated: works
  // for controls rendered at any time.)
  $(document).on('change', '.google-fonts-list', function () {
    var $container = $(this).closest('.google_fonts_select_control');
    var $primary = $container.find('.google-fonts-regularweight-style');
    var $extras = $container.find('.google-fonts-extraweights-style');
    var selectedFont = $(this).val();

    var font = getFontVariants(selectedFont);
    if (!font) {
      return;
    }

    // Remember previously picked extras so we can preserve them when possible.
    var previousExtras = $extras.val() || [];

    // Rebuild primary dropdown (all variants — italics belong here too).
    $primary.empty();
    $.each(font.variants, function (i, variant) {
      $primary.append($('<option></option>').val(variant).html(variant));
    });
    // Pick a sensible default for the primary.
    if ($primary.find('option[value="regular"]').length > 0) {
      $primary.val('regular');
    } else if ($primary.find('option[value="400"]').length > 0) {
      $primary.val('400');
    } else if ($primary.find('option[value="300"]').length > 0) {
      $primary.val('300');
    }

    // Rebuild extras dropdown, preserving previously-picked variants that still exist.
    rebuildExtras($extras, font.variants, $primary.val(), previousExtras);

    // Update category.
    $container.find('.google-fonts-category').val(font.category);

    sydneyGetAllSelects($container);
  });

  // Primary change: rebuild extras so the new primary is excluded and the
  // previous primary becomes selectable again. Awaits the catalog so a weight
  // change made before any dropdown was opened still rebuilds correctly.
  $(document).on('change', '.google-fonts-regularweight-style', function () {
    var $this = $(this);
    var $container = $this.closest('.google_fonts_select_control');
    var $extras = $container.find('.google-fonts-extraweights-style');
    var $family = $container.find('.google-fonts-list');

    sydneyFetchFontsCatalog().then(function () {
      var font = getFontVariants($family.val());
      if (!font) {
        return;
      }

      var previousExtras = $extras.val() || [];
      rebuildExtras($extras, font.variants, $this.val(), previousExtras);

      sydneyGetAllSelects($container);
    });
  });

  // Catch-all sync: any change inside the control writes the JSON payload.
  $(document).on('change', '.google_fonts_select_control select', function () {
    sydneyGetAllSelects($(this).closest('.google_fonts_select_control'));
  });

  function sydneyGetAllSelects($element) {
    var extras = $element.find('.google-fonts-extraweights-style').val();
    if (!extras) {
      extras = [];
    }
    var selectedFont = {
      font: $element.find('.google-fonts-list').val(),
      regularweight: $element.find('.google-fonts-regularweight-style').val(),
      extraweights: extras,
      category: $element.find('.google-fonts-category').val()
    };
    // Important! Make sure to trigger change event so Customizer knows it has to save the field.
    $element.find('.customize-control-google-font-selection').val(JSON.stringify(selectedFont)).trigger('change');
  }
});
jQuery(document).ready(function ($) {
  "use strict";

  let clickFlag = false;

$(document).on('click', '.sydney-devices-preview button', function () {
	if (clickFlag) {
		clickFlag = false;
		return false;
	}
	
	clickFlag = true;
	
	// Determine the selected device based on class name
	let device = $(this).hasClass('preview-desktop')
		? 'desktop'
		: $(this).hasClass('preview-tablet')
			? 'tablet'
			: 'mobile';
	
	// Update preview classes
	$('.sydney-devices-preview')
		.find('.preview-desktop, .preview-tablet, .preview-mobile')
		.removeClass('active')
		.end()
		.find('.preview-' + device)
		.addClass('active');
	
	// Update font-size classes
	$('.font-size-desktop, .font-size-tablet, .font-size-mobile')
		.removeClass('active')
		.filter('.font-size-' + device)
		.addClass('active');
	
	// Update responsive control classes
	$('.responsive-control-desktop, .responsive-control-tablet, .responsive-control-mobile')
		.removeClass('active')
		.filter('.responsive-control-' + device)
		.addClass('active');
	
	// Trigger the corresponding device button in the footer overlay
	$('.wp-full-overlay-footer .devices button[data-device="' + device + '"]').trigger('click');
});
$(' .wp-full-overlay-footer .devices button ').on('click', function () {
    if (clickFlag) {
      clickFlag = false;
      return false;
    }
    var device = $(this).attr('data-device');
    $('.control-section.open .sydney-devices-preview').find('.preview-' + device).trigger('click');
  });
});
/**
 * Repeater
 */

jQuery(document).ready(function ($) {
  "use strict"; // Update the values for all our input fields and initialise the sortable repeater

  $('.sydney-sortable_repeater_control').each(function () {
    // If there is an existing customizer value, populate our rows
    var defaultValuesArray = $(this).find('.customize-control-sortable-repeater').val().split(',');
    var numRepeaterItems = defaultValuesArray.length;

    if (numRepeaterItems > 0) {
      // Add the first item to our existing input field
      $(this).find('.repeater-input').val(defaultValuesArray[0]); // Create a new row for each new value

      if (numRepeaterItems > 1) {
        var i;

        for (i = 1; i < numRepeaterItems; ++i) {
          sydneyAppendRow($(this), defaultValuesArray[i]);
        }
      }
    }
  }); // Make our Repeater fields sortable

  $(this).find('.sydney-sortable_repeater.sortable').sortable({
    update: function update(event, ui) {
      sydneyGetAllInputs($(this).parent());
    }
  }); // Remove item starting from it's parent element

  $('.sydney-sortable_repeater.sortable').on('click', '.customize-control-sortable-repeater-delete', function (event) {
    event.preventDefault();
    var numItems = $(this).parent().parent().find('.repeater').length;

    if (numItems > 1) {
      $(this).parent().slideUp('fast', function () {
        var parentContainer = $(this).parent().parent();
        $(this).remove();
        sydneyGetAllInputs(parentContainer);
      });
    } else {
      $(this).parent().find('.repeater-input').val('');
      sydneyGetAllInputs($(this).parent().parent().parent());
    }
  }); // Add new item

  $('.customize-control-sortable-repeater-add').click(function (event) {
    event.preventDefault();
    sydneyAppendRow($(this).parent());
    sydneyGetAllInputs($(this).parent());
  }); // Refresh our hidden field if any fields change

  $('.sydney-sortable_repeater.sortable').change(function () {
    sydneyGetAllInputs($(this).parent());
  }); // Add https:// to the start of the URL if it doesn't have it

  $('.sydney-sortable_repeater.sortable').on('blur', '.repeater-input', function () {
    var url = $(this);
    var val = url.val();

    if (val && !val.match(/^.+:\/\/.*/)) {
      // Important! Make sure to trigger change event so Customizer knows it has to save the field
      url.val('https://' + val).trigger('change');
    }
  }); // Append a new row to our list of elements

  function sydneyAppendRow($element) {
    var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
    var newRow = '<div class="repeater" style="display:none"><input type="text" value="' + defaultValue + '" class="repeater-input" placeholder="https://" /><span class="dashicons dashicons-menu"></span><a class="customize-control-sortable-repeater-delete" href="#"><span class="dashicons dashicons-no-alt"></span></a></div>';
    $element.find('.sortable').append(newRow);
    $element.find('.sortable').find('.repeater:last').slideDown('slow', function () {
      $(this).find('input').focus();
    });
  } // Get the values from the repeater input fields and add to our hidden field


  function sydneyGetAllInputs($element) {
    var inputValues = $element.find('.repeater-input').map(function () {
      return $(this).val();
    }).toArray(); // Add all the values from our repeater fields to the hidden field (which is the one that actually gets saved)

    $element.find('.customize-control-sortable-repeater').val(inputValues); // Important! Make sure to trigger change event so Customizer knows it has to save the field

    $element.find('.customize-control-sortable-repeater').trigger('change');
  }
});
/**
 * Alpha color picker
 */
/* Color Control */
jQuery(document).ready(function ($) {

	if ('undefined' === typeof Pickr) {
		return;
	}

	// Populate dropdowns already in the DOM at boot (PHP-rendered controls).
	// Converted controls populate in their ready() when they render.
	$('.global-colors-dropdown').each(function () {
		wp.customize.sydneyPopulateGlobalDropdown($(this));
	});

	// Select a global color from the dropdown (delegated: dropdowns render on section expand)
	$(document).on('click', '.global-colors-dropdown .global-color', function () {
		var $this = $(this);
		var element = $this.parent().data('element');
		var $globalInput = $this.parent().next('.sydney-connected-global');

		//add active class to dashicon
		$this.parent().prev('.dashicons').addClass('active');

		//add active class
		$this.toggleClass('active').siblings().removeClass('active');

		if ( $this.hasClass('active') ) {
			$globalInput.val($this.data('global-setting'));
			sydneyChangeElementColors(element, $this.data('color'));
		} else {
			$globalInput.val('');
			$this.parent().prev('.dashicons').removeClass('active');
		}

		$globalInput.trigger('change');
	});

	//toggle the swatches
	$(document).on('click', '.sydney-global-control .dashicons-admin-site-alt3', function () {

		$(this).next('.global-colors-dropdown').toggleClass('show');

		//close other swatches
		$('.global-colors-dropdown').not($(this).next('.global-colors-dropdown')).removeClass('show');
	});

	//close the swatches when clicking outside
	$(document).on('click', function (e) {
		if ( !$(e.target).closest('.sydney-global-control').length ) {
			$('.global-colors-dropdown').removeClass('show');
		}
	});

	// Lazy Pickr init (delegated: swatches render on section expand)
	$(document).on('click', '.sydney-color-control .sydney-color-picker', function () {

		var $colorPicker = $(this);

		if ($colorPicker.data('pickr')) {
			return;
		}

		var $colorControl = $colorPicker.closest('.sydney-color-control');
		var $colorInput = $colorControl.find('.sydney-color-input');
		var customizeControl = wp.customize($colorInput.data('customize-setting-link'));

		var pickrSeedColor = $colorPicker.data('display-color') || $colorInput.val() || '';

		var pickr = new Pickr({
			el: $colorPicker.get(0),
			container: 'body',
			theme: 'sydney',
			default: pickrSeedColor,
			//swatches: [],
			position: 'bottom-end',
			appClass: 'sydney-pcr-app',
			sliders: 'h',
			useAsButton: true,
			components: {
				hue: true,
				preview: true,
				opacity: true,
				interaction: {
					input: true,
					clear: true,
				},
			},
			i18n: {
				'btn:clear': 'Default',
			},
		});

		pickr.on('change', function (color) {

			var colorCode;

			if (color.a === 1) {
				pickr.setColorRepresentation('HEX');
				colorCode = color.toHEXA().toString(0);
			} else {
				pickr.setColorRepresentation('RGBA');
				colorCode = color.toRGBA().toString(0);
			}

			$colorPicker.css({ 'background-color': colorCode });
			$colorInput.val(colorCode);
			customizeControl.set(colorCode);

		});

		// Disconnect global if manually changed
		pickr.on('change', function (color, source) {
			if ( 'slider' === source ) {
				$colorPicker.parent().prev('.sydney-global-control').find('.dashicons').removeClass('active');
				$colorPicker.parent().prev('.sydney-global-control').find('.sydney-connected-global').val('').trigger('change');
				$colorPicker.parent().prev('.sydney-global-control').find('.global-color').removeClass('active');
			}
		});

		pickr.on('clear', function () {

			var defaultColor = $colorPicker.data('default-color');

			if (defaultColor) {
				pickr.setColor(defaultColor);
			} else {
				$colorPicker.css({ 'background-color': 'white' });
				$colorInput.val('');
				customizeControl.set('');
			}

		});

		$colorPicker.data('pickr', pickr);

		setTimeout(function () {
			pickr.show();
		});
	});

});


/**
 * Tab control
 */

jQuery(document).ready(function ($) {
  "use strict";

  $('.customize-control-sydney-tab-control').each(function () {
    $(this).parent().find('li').not('.section-meta').not('.customize-control-sydney-tab-control').addClass('sydney-hide-control');
    var generals = $(this).find('.control-tab-general').data('connected');
    $.each(generals, function (i, v) {
      $(v).removeClass('sydney-hide-control'); //show
    });
    $(this).find('.control-tab').on('click', function () {
      var visibles = $(this).data('connected');
      $(this).addClass('active');
      $(this).siblings().removeClass('active');
      $(this).parent().parent().parent().find('li').not('.section-meta').not('.customize-control-sydney-tab-control').addClass('sydney-hide-control');
      $.each(visibles, function (i, v) {
        $(v).removeClass('sydney-hide-control'); //show
      });
    });
  });
});
/**
 * TinyMCE control
 */

jQuery(document).ready(function ($) {
  "use strict";

  $('.customize-control-tinymce-editor').each(function () {
    // Get the toolbar strings that were passed from the PHP Class
    var tinyMCEToolbar1String = _wpCustomizeSettings.controls[$(this).attr('id')].sydneytb1;

    var tinyMCEToolbar2String = _wpCustomizeSettings.controls[$(this).attr('id')].sydneytb2;

    var tinyMCEMediaButtons = _wpCustomizeSettings.controls[$(this).attr('id')].sydneytmb;

    wp.editor.initialize($(this).attr('id'), {
      tinymce: {
        wpautop: true,
        toolbar1: tinyMCEToolbar1String,
        toolbar2: tinyMCEToolbar2String
      },
      quicktags: true,
      mediaButtons: true
    });
  });
  $(document).on('tinymce-editor-init', function (event, editor) {
    editor.on('change', function (e) {
      tinyMCE.triggerSave();
      $('#' + editor.id).trigger('change');
    });
  });
});
/**
 * Footer widget areas links
 */

jQuery(document).ready(function ($) {
  // Value-driven (was a DOM read of the footer_widget_areas control, which
  // no longer has DOM at boot now that radio-images render on section expand).
  function toggleLinks(val) {
    if ('3' === val || 'col3-bigleft' === val || 'col3-bigright' === val) {
      $('.footer-widget-area-link-1, .footer-widget-area-link-2, .footer-widget-area-link-3').show();
      $('.footer-widget-area-link-4').hide();
    } else if ('4' === val || 'col4-bigleft' === val || 'col4-bigright' === val) {
      $('.footer-widget-area-link-1, .footer-widget-area-link-2, .footer-widget-area-link-3, .footer-widget-area-link-4').show();
    } else if ('2' === val || 'col2-bigleft' === val || 'col2-bigright' === val) {
      $('.footer-widget-area-link-1, .footer-widget-area-link-2').show();
      $('.footer-widget-area-link-4, .footer-widget-area-link-3').hide();
    } else if ('1' === val) {
      $('.footer-widget-area-link-1').show();
      $('.footer-widget-area-link-4, .footer-widget-area-link-2, .footer-widget-area-link-3').hide();
    } else {
      $('.footer-widget-area-link-1, .footer-widget-area-link-2, .footer-widget-area-link-3, .footer-widget-area-link-4').hide();
    }
  }

  wp.customize('footer_widget_areas', function (setting) {
    toggleLinks(setting.get());
    setting.bind(toggleLinks);
  });
});
/**
 * Palettes
 */

wp.customize('color_palettes', function (control) {
  var palettes = jQuery('#customize-control-color_palettes').find('.radio-buttons').data('palettes');
  control.bind(function () {
    var palette = control.get(); //Color 1 Button color, Link color

    var elements1 = ['custom_color1', 'scrolltop_bg_color', 'button_background_color', 'button_border_color', 'color_link_default'];

    for (var _i = 0, _elements = elements1; _i < _elements.length; _i++) {
      var element = _elements[_i];
      wp.customize(element).set(palettes[palette][0]);
      jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', palettes[palette][0]);
    } //Color 2 Hover color for - Button, Headings, Titles, Text links, Nav links


    var elements2 = ['custom_color2', 'footer_widgets_links_hover_color', 'scrolltop_bg_color_hover', 'button_background_color_hover', 'button_border_color_hover', 'color_link_hover'];

    for (var _i2 = 0, _elements2 = elements2; _i2 < _elements2.length; _i2++) {
      var _element = _elements2[_i2];
      wp.customize(_element).set(palettes[palette][1]);
      jQuery('#customize-control-' + _element).find('.wp-color-result').css('background-color', palettes[palette][1]);
    } //Color 3 Heading (1-6), Small text, Nav links, Site title, 


    var elements3 = ['single_post_title_color', 'custom_color3', 'main_header_submenu_color', 'offcanvas_menu_color', 'mobile_header_color', 'footer_widgets_title_color', 'single_product_title_color', 'color_forms_text', 'shop_product_product_title', 'loop_post_meta_color', 'loop_post_title_color', 'main_header_color', 'site_title_color', 'site_description_color', 'color_heading_1', 'color_heading_2', 'color_heading_3', 'color_heading_4', 'color_heading_5', 'color_heading_6'];

    for (var _i3 = 0, _elements3 = elements3; _i3 < _elements3.length; _i3++) {
      var _element2 = _elements3[_i3];
      wp.customize(_element2).set(palettes[palette][2]);
      jQuery('#customize-control-' + _element2).find('.wp-color-result').css('background-color', palettes[palette][2]);
    } //Color 4 Paragraph, Paragraph small, Breadcrums, Icons


    var elements4 = ['custom_color4', 'footer_widgets_links_color', 'footer_widgets_text_color', 'color_body_text', 'footer_credits_text_color', 'color_forms_placeholder'];

    for (var _i4 = 0, _elements4 = elements4; _i4 < _elements4.length; _i4++) {
      var _element3 = _elements4[_i4];
      wp.customize(_element3).set(palettes[palette][3]);
      jQuery('#customize-control-' + _element3).find('.wp-color-result').css('background-color', palettes[palette][3]);
    } //Color 5 Input, tag borders


    var elements5 = ['custom_color5', 'color_forms_borders'];

    for (var _i5 = 0, _elements5 = elements5; _i5 < _elements5.length; _i5++) {
      var _element4 = _elements5[_i5];
      wp.customize(_element4).set(palettes[palette][4]);
      jQuery('#customize-control-' + _element4).find('.wp-color-result').css('background-color', palettes[palette][4]);
    } //Color 6 Footer background, Subtle backgrounds


    var elements6 = ['custom_color6', 'footer_widgets_background', 'footer_credits_background', 'content_cards_background'];

    for (var _i6 = 0, _elements6 = elements6; _i6 < _elements6.length; _i6++) {
      var _element5 = _elements6[_i6];
      wp.customize(_element5).set(palettes[palette][5]);
      jQuery('#customize-control-' + _element5).find('.wp-color-result').css('background-color', palettes[palette][5]);
    } //Color 7 Default background, Text on dark BG


    var elements7 = ['custom_color7', 'background_color', 'button_color', 'button_color_hover', 'scrolltop_color', 'scrolltop_color_hover', 'color_forms_background'];

    for (var _i7 = 0, _elements7 = elements7; _i7 < _elements7.length; _i7++) {
      var _element6 = _elements7[_i7];
      wp.customize(_element6).set(palettes[palette][6]);
      jQuery('#customize-control-' + _element6).find('.wp-color-result').css('background-color', palettes[palette][6]);
    } //Color 8 header background


    var elements8 = ['custom_color8', 'main_header_submenu_background', 'main_header_background', 'main_header_bottom_background', 'mobile_header_background', 'offcanvas_menu_background'];

    for (var _i8 = 0, _elements8 = elements8; _i8 < _elements8.length; _i8++) {
      var _element7 = _elements8[_i8];
      wp.customize(_element7).set(palettes[palette][7]);
      jQuery('#customize-control-' + _element7).find('.wp-color-result').css('background-color', palettes[palette][7]);
    }
  });
});
/**
 * Custom palette
 */

wp.customize.bind('ready', function () {
  wp.customize('custom_color1', function (control) {
    control.bind(function (value) {
      var elements1 = ['scrolltop_bg_color', 'button_background_color', 'button_border_color', 'color_link_default'];

      for (var _i9 = 0, _elements9 = elements1; _i9 < _elements9.length; _i9++) {
        var element = _elements9[_i9];
        wp.customize(element).set(value);
        jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
      }
    });
  });
  wp.customize('custom_color2', function (control) {
    control.bind(function (value) {
      var elements2 = ['footer_widgets_links_hover_color', 'scrolltop_bg_color_hover', 'button_background_color_hover', 'button_border_color_hover', 'color_link_hover'];

      for (var _i10 = 0, _elements10 = elements2; _i10 < _elements10.length; _i10++) {
        var element = _elements10[_i10];
        wp.customize(element).set(value);
        jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
      }
    });
  });
  wp.customize('custom_color3', function (control) {
    control.bind(function (value) {
      var elements3 = ['main_header_submenu_color', 'offcanvas_menu_color', 'mobile_header_color', 'footer_widgets_title_color', 'single_product_title_color', 'color_forms_text', 'shop_product_product_title', 'loop_post_meta_color', 'loop_post_title_color', 'main_header_color', 'site_title_color', 'site_description_color', 'color_heading_1', 'color_heading_2', 'color_heading_3', 'color_heading_4', 'color_heading_5', 'color_heading_6'];

      for (var _i11 = 0, _elements11 = elements3; _i11 < _elements11.length; _i11++) {
        var element = _elements11[_i11];
        wp.customize(element).set(value);
        jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
      }
    });
  });
  wp.customize('custom_color4', function (control) {
    control.bind(function (value) {
      var elements4 = ['footer_widgets_links_color', 'footer_widgets_text_color', 'color_body_text', 'footer_credits_text_color', 'color_forms_placeholder'];

      for (var _i12 = 0, _elements12 = elements4; _i12 < _elements12.length; _i12++) {
        var element = _elements12[_i12];
        wp.customize(element).set(value);
        jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
      }
    });
  });
  wp.customize('custom_color5', function (control) {
    control.bind(function (value) {
      var elements5 = ['color_forms_borders'];

      for (var _i13 = 0, _elements13 = elements5; _i13 < _elements13.length; _i13++) {
        var element = _elements13[_i13];
        wp.customize(element).set(value);
        jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
      }
    });
  });
  wp.customize('custom_color6', function (control) {
    control.bind(function (value) {
      var elements6 = ['footer_widgets_background', 'footer_credits_background', 'content_cards_background'];

      for (var _i14 = 0, _elements14 = elements6; _i14 < _elements14.length; _i14++) {
        var element = _elements14[_i14];
        wp.customize(element).set(value);
        jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
      }
    });
  });
  wp.customize('custom_color7', function (control) {
    control.bind(function (value) {
      var elements7 = ['background_color', 'button_color', 'button_color_hover', 'scrolltop_color', 'scrolltop_color_hover', 'color_forms_background'];

      for (var _i15 = 0, _elements15 = elements7; _i15 < _elements15.length; _i15++) {
        var element = _elements15[_i15];
        wp.customize(element).set(value);
        jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
      }
    });
  });
  wp.customize('custom_color8', function (control) {
    control.bind(function (value) {
      var elements8 = ['main_header_submenu_background', 'main_header_background', 'main_header_bottom_background', 'mobile_header_background', 'offcanvas_menu_background'];

      for (var _i16 = 0, _elements16 = elements8; _i16 < _elements16.length; _i16++) {
        var element = _elements16[_i16];
        wp.customize(element).set(value);
        jQuery('#customize-control-' + element).find('.wp-color-result').css('background-color', value);
      }
    });
  });
});

/**
 * Move color picker text field in popup
 */

jQuery(document).ready(function ($) {
  $('.wp-picker-input-wrap').each(function () {
    $(this).prependTo($(this).next('.wp-picker-holder'));
  });
});
/**
 * Transform palettes radio into dropdown
 */

jQuery(document).ready(function ($) {
  var saved = $('.saved-palette');
  $('.saved-palette').on('click', function () {
    $('.palette-radio-buttons').toggleClass('open');
  });
  $('.palette-radio-buttons').find('.palette').on('click', function () {
    saved.empty();
    $('.palette-radio-buttons').removeClass('open');
    var clone = $(this).parent().clone();
    clone.unwrap().appendTo(saved).find('input').remove();
  });
});
/**
 * Accordion control
 */

jQuery(document).ready(function ($) {
  var Sydney_Accordion = {
    init: function init() {
      this.firstTime = true;

      if (!this.initialized) {
        this.events();
      }

      this.initialized = true;
    },
    events: function events() {
      var self = this; // Toggle accordion

      $(document).on('click', '.sydney-accordion-title', function () {
        var $this = $(this);

        if ($(this).hasClass('expanded')) {
          self.showOrHide($(this), 'hide');
          $(this).removeClass('expanded').addClass('collapse');
          setTimeout(function () {
            $this.removeClass('collapse');
          }, 300);
        }

        if (!$(this).hasClass('collapse')) {
          // Open one accordion item per time 
          $('.sydney-accordion-item').addClass('sydney-accordion-hide');
          $('.sydney-accordion-title').removeClass('expanded'); // Show accordion content

          self.showOrHide($(this), 'show');
          $this.addClass('expanded');
        }
      }); // Mount the accordion when enter in the section (with accordions inside)
      // Also used to collapse all accordions when navigating between others tabs

      $(document).on('click', '.control-section', function (e) {
        var $section = $('.control-section.open');

        if (self.firstTime && $section.find('.sydney-accordion-title').length) {
          $section.find('.sydney-accordion-title').each(function () {
            self.showOrHide($(this), 'hide');
            $(this).removeClass('expanded');
            self.firstTime = false;
          });
        }
      }); // Reset the first time

      $(document).on('click', '.customize-section-back', function () {
        self.firstTime = true;
      });
      return this;
    },
    showOrHide: function showOrHide($this, status) {
      var current = '';
      current = $this.closest('.customize-control').next();
      var elements = [];

      if (current.attr('id') == 'customize-control-' + $this.data('until')) {
        elements.push(current[0].id);
      } else {
        while (current.attr('id') != 'customize-control-' + $this.data('until')) {
          elements.push(current[0].id);
          current = current.next();
        }
      }

      if (elements.length >= 1) {
        elements.push(current[0].id);
      }

      for (var i = 0; i < elements.length; i++) {
        // Identify accordion items
        $('#' + elements[i]).addClass('sydney-accordion-item active'); // Hide or show the accordion content

        if (status == 'hide') {
          $('#' + elements[i]).addClass('sydney-accordion-hide');
        } else {
          $('#' + elements[i]).removeClass('sydney-accordion-hide');
        } // Identify first accordion item


        if (i == 0) {
          $('#' + elements[i]).addClass('sydney-accordion-first-item');
        } // Identify last accordion item


        if (i == elements.length - 1 && elements.length > 1 || elements.length == 1) {
          $('#' + elements[i]).addClass('sydney-accordion-last-item');
        }
      }

      return this;
    }
  };
  $(document).ready(function () {
    Sydney_Accordion.init();
  });
});


/**
 * Controls a11y
 */

 jQuery(document).ready(function ($) {
  "use strict";

  // Delegated: toggle control DOM is rendered on section expand
  $(document).on('keydown', '.customize-control-sydney-toggle-control label', function (event) {
    var enterPressed = (event.key === 'Enter' || event.keyCode === 13);

    if (!enterPressed) {
      return;
    }

    $( this ).click();
  });

  // Delegated: radio-buttons control DOM is rendered on section expand
  $(document).on('keydown', '.customize-control-sydney-radio-buttons label', function (event) {
    var enterPressed = (event.key === 'Enter' || event.keyCode === 13);

    if (!enterPressed) {
      return;
    }

    $( this ).click();
  });

});

/**
 * Display Conditions Control
 */

 jQuery(document).ready(function ($) {
	$(document).on('sydney-display-conditions-select2-initalize', function (event, item) {
	  var $item = $(item);
	  var $control = $item.closest('.sydney-display-conditions-control');
	  var $typeSelectWrap = $item.find('.sydney-display-conditions-select2-type');
	  var $typeSelect = $typeSelectWrap.find('select');
	  var $conditionSelectWrap = $item.find('.sydney-display-conditions-select2-condition');
	  var $conditionSelect = $conditionSelectWrap.find('select');
	  var $idSelectWrap = $item.find('.sydney-display-conditions-select2-id');
	  var $idSelect = $idSelectWrap.find('select');
	  $typeSelect.select2({
		width: '100%',
		minimumResultsForSearch: -1
	  });
	  $typeSelect.on('select2:select', function (event) {
		$typeSelectWrap.attr('data-type', event.params.data.id);
	  });
	  $conditionSelect.select2({
		width: '100%'
	  });
	  $conditionSelect.on('select2:select', function (event) {
		var $element = $(event.params.data.element);

		if ($element.data('ajax')) {
		  $idSelectWrap.removeClass('hidden');
		} else {
		  $idSelectWrap.addClass('hidden');
		}

		$idSelect.val(null).trigger('change');
	  });
	  var isAjaxSelected = $conditionSelect.find(':selected').data('ajax');

	  if (isAjaxSelected) {
		$idSelectWrap.removeClass('hidden');
	  }

	  $idSelect.select2({
		width: '100%',
		placeholder: '',
		allowClear: true,
		minimumInputLength: 1,
		ajax: {
		  url: ajaxurl,
		  dataType: 'json',
		  delay: 250,
		  cache: true,
		  data: function data(params) {
			return {
			  action: 'sydney_display_conditions_select_ajax',
			  term: params.term,
			  nonce: syd_data.ajax_nonce,
			  source: $conditionSelect.val()
			};
		  },
		  processResults: function processResults(response, params) {
			if (response.success) {
			  return {
				results: response.data
			  };
			}

			return {};
		  }
		}
	  });
	});
	$(document).on('click', '.sydney-display-conditions-modal-toggle', function (event) {
	  event.preventDefault();
	  var $button = $(this);
	  var template = wp.template('sydney-display-conditions-template');
	  var $control = $button.closest('.sydney-display-conditions-control');
	  var $modal = $control.find('.sydney-display-conditions-modal');

	  if (!$modal.data('initialized')) {
		$control.append(template($control.data('condition-settings')));
		var $items = $control.find('.sydney-display-conditions-modal-content-list-item').not('.hidden');

		if ($items.length) {
		  $items.each(function () {
			$(document).trigger('sydney-display-conditions-select2-initalize', this);
		  });
		}

		$modal = $control.find('.sydney-display-conditions-modal');
		$modal.data('initialized', true);
		$modal.addClass('open');
	  } else {
		$modal.toggleClass('open');
	  }
	});
	$(document).on('click', '.sydney-display-conditions-modal', function (event) {
	  event.preventDefault();
	  var $modal = $(this);

	  if ($(event.target).is($modal)) {
		$modal.removeClass('open');
	  }
	});
	$(document).on('click', '.sydney-display-conditions-modal-add', function (event) {
	  event.preventDefault();
	  var $button = $(this);
	  var $control = $button.closest('.sydney-display-conditions-control');
	  var $modal = $control.find('.sydney-display-conditions-modal');
	  var $list = $modal.find('.sydney-display-conditions-modal-content-list');
	  var $item = $modal.find('.sydney-display-conditions-modal-content-list-item').first().clone();
	  var conditionGroup = $button.data('condition-group');
	  $item.removeClass('hidden');
	  $item.find('.sydney-display-conditions-select2-condition').not('[data-condition-group="' + conditionGroup + '"]').remove();
	  $list.append($item);
	  $(document).trigger('sydney-display-conditions-select2-initalize', $item);
	});
	$(document).on('click', '.sydney-display-conditions-modal-remove', function (event) {
	  event.preventDefault();
	  var $item = $(this).closest('.sydney-display-conditions-modal-content-list-item');
	  $item.remove();
	});
	$(document).on('click', '.sydney-display-conditions-modal-save', function (event) {
	  event.preventDefault();
	  var data = [];
	  var $button = $(this);
	  var $control = $button.closest('.sydney-display-conditions-control');
	  var $modal = $control.find('.sydney-display-conditions-modal');
	  var $textarea = $control.find('.sydney-display-conditions-textarea');
	  var $items = $modal.find('.sydney-display-conditions-modal-content-list-item').not('.hidden');
	  $items.each(function () {
		var $item = $(this);
		data.push({
		  type: $item.find('select[name="type"]').val(),
		  condition: $item.find('select[name="condition"]').val(),
		  id: $item.find('select[name="id"]').val()
		});
	  });
	  $textarea.val(JSON.stringify(data)).trigger('change');
	});
  });


//activate/deactivate header settings
jQuery(document).ready(function ($) {

	var sticky_controls = [ 'header_divider_1', 'main_header_settings_title', 'header_container', 'enable_sticky_header', 'sticky_header_type', 'transparent_header' ];
	var menu_pos 		= [ 'main_header_menu_position' ];

	wp.customize('header_layout_desktop', function (value) {

		value.bind(function (newval) {
			$.each(sticky_controls, function (index, setting) {
				var control = wp.customize.control(setting);
				if (control) {
					if (newval === 'header_layout_6' || newval === 'header_layout_7') {
						control.deactivate();
					} else {
						control.activate();
					}
				}
			});
		});

		value.bind(function (newval) {
			$.each(menu_pos, function (index, setting) {
				if (newval === 'header_layout_2' ) {
					wp.customize.control(setting).activate();
				} else {
					wp.customize.control(setting).deactivate();
				}
			});
		});

		value.bind(function (newval) {
			if (newval === 'header_layout_1' || newval === 'header_layout_2' ) {
				wp.customize.control('header_components_l1').activate();
			} else {
				wp.customize.control('header_components_l1').deactivate();
			}
		});

		value.bind(function (newval) {
			if (newval === 'header_layout_3' ) {
				wp.customize.control('header_components_l3left').activate();
				wp.customize.control('header_components_l3right').activate();
			} else {
				wp.customize.control('header_components_l3left').deactivate();
				wp.customize.control('header_components_l3right').deactivate();
			}
		} );

		value.bind(function (newval) {
			if (newval === 'header_layout_4' ) {
				wp.customize.control('header_components_l4top').activate();
				wp.customize.control('header_components_l4bottom').activate();
			} else {
				wp.customize.control('header_components_l4top').deactivate();
				wp.customize.control('header_components_l4bottom').deactivate();
			}
		} );

		value.bind(function (newval) {
			if (newval === 'header_layout_5' ) {
				wp.customize.control('header_components_l5topleft').activate();
				wp.customize.control('header_components_l5topright').activate();
				wp.customize.control('header_components_l5bottom').activate();
			} else {
				wp.customize.control('header_components_l5topleft').deactivate();
				wp.customize.control('header_components_l5topright').deactivate();
				wp.customize.control('header_components_l5bottom').deactivate();
			}
		} );
	});
} );

wp.customize('enable_sticky_header', function (value) {
	value.bind(function (newval) {
		if (newval === true) {
			wp.customize.control('sticky_header_type').activate();
			wp.customize.control('sydney_section_hb_wrapper__header_builder_sticky_row').activate();
			wp.customize.control('enable_sticky_mobile_header_hb').activate();
		} else {
			wp.customize.control('sticky_header_type').deactivate();
			wp.customize.control('sydney_section_hb_wrapper__header_builder_sticky_row').deactivate();
			wp.customize.control('enable_sticky_mobile_header_hb').deactivate();
		}
	});
} );

//Activate menu typography options without refresh
jQuery(document).ready(function ($) {
	wp.customize('enable_top_menu_typography', function (value) {
		var controls = ['sydney_menu_font', 'menu_items_text_transform', 'sydney_menu_font_size', 'sydney_header_menu_adobe_font'];
		value.bind(function (newval) {
			if (newval === true) {
				$.each(controls, function (index, setting) {
					wp.customize.control(setting).activate();
				});
			} else {
				$.each(controls, function (index, setting) {
					wp.customize.control(setting).deactivate();
				});
			}
		});
	} );
});

//Activate blog columns without refresh
jQuery(document).ready(function ($) {
	wp.customize('blog_layout', function (value) {
		value.bind(function (newval) {
			if (newval === 'layout3' || newval === 'layout5' || newval === 'layout7' ) {
				wp.customize.control('archives_grid_columns').activate();
			} else {
				wp.customize.control('archives_grid_columns').deactivate();
			}
		} );

		value.bind(function (newval) {
			if (newval === 'layout4' ) {
				wp.customize.control('archive_list_image_placement').activate();
			} else {
				wp.customize.control('archive_list_image_placement').deactivate();
			}
		} );

		value.bind(function (newval) {
			if (newval === 'layout4' || newval === 'layout6' ) {
				wp.customize.control('archives_list_vertical_alignment').activate();
				wp.customize.control('archive_featured_image_size').activate();
			} else {
				wp.customize.control('archives_list_vertical_alignment').deactivate();
				wp.customize.control('archive_featured_image_size').deactivate();
			}
		} );		
	} );
} );

//Upsell in the general panel
jQuery(document).ready(function ($) {

  var hasLocalized = (typeof window.syd_data !== 'undefined' && typeof window.syd_data.customizer_upgrade_link_with_utm_content_markup === 'string');
  var baseUpgrade = hasLocalized ? decodeURIComponent(window.syd_data.customizer_upgrade_link_with_utm_content_markup) : '';
  var generalFeaturesUrl = hasLocalized ? baseUpgrade.replace('{{utm_content}}', 'general_panel_features') + '#features' : 'https://athemes.com/sydney-upgrade/#features?utm_source=theme_customizer_general_panel&utm_medium=sydney_customizer&utm_campaign=Sydney';
  var generalButtonUrl   = hasLocalized ? baseUpgrade.replace('{{utm_content}}', 'general_panel_button') : 'https://athemes.com/sydney-upgrade/?utm_source=theme_customizer_general_panel&utm_medium=sydney_customizer&utm_campaign=Sydney';

  var upsell = $('<div class="sydney-upsell-feature-wrapper" style="margin:5px 15px 15px;">' +
              '<h3 style="max-width:100%;"><em>Take your site to the next level with Sydney Pro!</em></h3><p>You’ll get access to:</p>' +
              '<ul class="sydney-upsell-features">' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Templates Builder</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Breadcrumbs</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Unlimited Sidebars</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Modal Popup</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Live Chat module</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Offcanvas Content</li>' +
                 '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Mailchimp support</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span><a target="_blank" href="' + generalFeaturesUrl + '">&hellip;and many more premium features</a></li>' +
              '</ul><p><a href="' + generalButtonUrl + '" role="button" class="button-secondary deep-upsell-button button" target="_blank">Upgrade to Sydney Pro</a></p></div>')

  upsell.appendTo('#sub-accordion-panel-sydney_panel_general');


  var wooFeaturesUrl = hasLocalized ? baseUpgrade.replace('{{utm_content}}', 'woocommerce_features') + '#features' : 'https://athemes.com/sydney-upgrade/#features?utm_source=theme_customizer_woocommerce&utm_medium=sydney_customizer&utm_campaign=Sydney';
  var wooButtonUrl   = hasLocalized ? baseUpgrade.replace('{{utm_content}}', 'woocommerce_button') : 'https://athemes.com/sydney-upgrade/?utm_source=theme_customizer_woocommerce&utm_medium=sydney_customizer&utm_campaign=Sydney';

  var upsellWoo = $('<div class="sydney-upsell-feature-wrapper" style="margin:5px 15px 15px;">' +
              '<h3><em>Take your store to the next level with Sydney Pro!</em></h3>' +
              '<p>You’ll get access to:</p>' +
              '<ul class="sydney-upsell-features">' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Wishlist</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Product Swatch</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Product Gallery Layouts</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Multistep checkout</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Single sticky add to cart</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Shop header styles</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Product tab styles</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>More Shop pagination types</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Advanced reviews</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Extra single product elements</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>Extra shop sidebar layouts</li>' +
                  '<li class="sydney-hide-control"><span class="dashicons dashicons-yes"></span>AJAX product search</li>' +
                  '<a target="_blank" href="' + wooFeaturesUrl + '">&hellip;and many more premium features</a>' +
              '</ul><p><a href="' + wooButtonUrl + '" role="button" class="button-secondary deep-upsell-button button" target="_blank">Upgrade Now</a></p></div>')

  upsellWoo.appendTo('#sub-accordion-panel-woocommerce');

} );

/**
 * Custom palette
 */
var sydneyChangeElementColors = function (element, color, palette) {

	var $setting = jQuery('[data-control-id="' + element + '"]');

	if ($setting.length) {

		if (palette) {
			var index = palette.indexOf(color);
			if (palette[index]) {
				color = palette[index];
			}
		}

		var $picker = $setting.find('.sydney-color-picker');

		if ($picker.data('pickr')) {
			$picker.data('pickr').setColor(color);
		} else {
			$picker.css('background-color', color);
			wp.customize(element).set(color);
		}

	} else {

		// Control not rendered yet (deferred embed): update the setting directly;
		// the swatch renders from live values when its section opens.
		if (typeof wp.customize(element) !== 'undefined') {
			wp.customize(element).set(color);
		}

	}

};

/**
 * Global colors
 */
wp.customize.bind('ready', function () {
	for (let i = 1; i <= 9; i++) {
		wp.customize('global_color_' + i, function (control) {
			control.bind(function (value) {
				// Connected elements: derived from the global_* settings themselves,
				// not from rendered inputs (controls may not be embedded yet).
				wp.customize.each(function (setting) {
					if (0 !== setting.id.indexOf('global_') || /^global_color_\d+$/.test(setting.id)) {
						return;
					}
					if (setting.get() !== 'global_color_' + i) {
						return;
					}
					var element = setting.id.replace('global_', '');
					if (typeof wp.customize(element) !== 'undefined') {
						sydneyChangeElementColors(element, value);
					}
				});

				// Update global color dropdown (rendered ones only; unrendered
				// dropdowns populate fresh from settings when their control embeds)
				jQuery('.global-colors-dropdown').each(function () {
					var $dropdown = jQuery(this);
					$dropdown.find('.global-color').each(function () {
						
						var $item = jQuery(this);

						if ($item.data('global-setting') === 'global_color_' + i) {

							$item.data('color', value);
							$item.find('.color-circle').css('background-color', value);
							$item.find('.color-value').text(value);
						}
					} );
				} );
			});
	  	});
	}

	/**
	 * Reconcile color swatches with their connected global color on load.
	 *
	 * The PHP control renders the resolved global color, but core linkElements
	 * re-syncs the text input to the literal setting value once the control is
	 * embedded (sections embed controls lazily, on expand). Update the display
	 * only (swatch background + data-display-color attribute, which seeds the
	 * Pickr default on first open) — never touch the input value or call .set(),
	 * which would dirty the changeset on plain load or re-save the resolved hex
	 * as the literal mod if Pickr is opened afterwards.
	 */
	wp.customize.control.each(function (control) {
		control.deferred.embedded.done(function () {
			control.container.find('.sydney-connected-global').each(function () {
				var slot = jQuery(this).val();

				if (!slot || 0 !== slot.indexOf('global_color_')) {
					return;
				}

				var element = jQuery(this).data('customize-setting-link').replace('global_', '');

				if (typeof wp.customize(slot) === 'undefined' || typeof wp.customize(element) === 'undefined') {
					return;
				}

				var resolved = wp.customize(slot)();

				if (!resolved || String(resolved).toLowerCase() === String(wp.customize(element)()).toLowerCase()) {
					return;
				}

				var $colorControl = jQuery(this).closest('.color-options').find('.sydney-color-control[data-control-id="' + element + '"]');
				var $picker = $colorControl.find('.sydney-color-picker');

				$picker.css('background-color', resolved);
				// Update the data attribute so Pickr seeds from the correct resolved
				// colour on first open, without writing into the input (which holds the
				// literal mod and must not be overwritten here).
				$picker.data('display-color', resolved);
			});
		});
	});
});

/**
 * Child controls for sortables
 */
jQuery(document).ready(function($) {
	
	var config = syd_data.sortable_config;

    // Show arrow icon, Hide all controls
    $.each(config, function(key, subConfig) {

		if ( !$('#customize-control-' + key).length ) {
			return;
		}

        $.each(subConfig, function(subKey, value) {
            $.each(value.controls, function(index, control) {
				$('#customize-control-' + key + ' .kirki-sortable-item[data-value="' + subKey + '"]').find('.toggle-options').show();

                var $control = $('#customize-control-' + control);
                if ($control.length) {
                    $control.addClass('sortable-child-hidden');
                    $control.css('position', 'absolute');
                }
            });
        });
    });

    // Toggle controls on click
    $('.kirki-sortable-item .toggle-options').click(function() {
        var $sortableItem = $(this).parent();
        var dataValue = $sortableItem.data('value');

		$sortableItem.toggleClass('sortable-opened');

        if ($sortableItem.hasClass('invisible')) {
            return;
        }

		//Get the distance from the top of the container
		var container 			= $sortableItem.closest('.customize-pane-child');
		var sortableItemHeight 	= $sortableItem.outerHeight();
		var sortableItemOffset 	= $sortableItem.get(0).offsetTop;
		var containerOffset 	= container.get(0).offsetTop;
		var distanceTop 		= sortableItemOffset - containerOffset + sortableItemHeight + 1;

        $(this).toggleClass('dashicons-arrow-down-alt2 dashicons-arrow-up-alt2');

        $.each(config, function(key, subConfig) {

			if ( !$sortableItem.parents( '.customize-control' ).attr('id').includes(key) ) {
				return;
			}

            $.each(subConfig, function(subKey, value) {

				if (dataValue !== subKey) {
					return;
				}

				var $firstControl = $('#customize-control-' + value.controls[0]);
				var isToggled = $firstControl.hasClass('sortable-child-toggled');
	
				$('.customize-control.sortable-child-toggled').each(function() {
					$(this).removeClass('sortable-child-toggled');
					$(this).addClass('sortable-child-hidden');
				});

				var prevTotalHeight = 0; // Total height of previous controls

                $.each(value.controls, function(index, control) {
                    var $control = $('#customize-control-' + control);

                    var $prevControl 		= $control.prev();
					
                    if (!isToggled) {
                        $control.addClass('sortable-child-toggled');
                        $control.removeClass('sortable-child-hidden');

                        if (index === 0) {
                            $control.addClass('first-control');
							$control.css( {
								'top': distanceTop + 'px',
								'right': '25px',
							} );
                        } else {
							prevTotalHeight += $prevControl.outerHeight();

							$control.css( {
								'top': distanceTop + prevTotalHeight + 'px',
								'right': '25px',
							} );

							//exceptions
							if ( control === 'header_search_field_style' ) {
								$control.css( {
									'top': distanceTop + prevTotalHeight - $prevControl.outerHeight() + 'px',
								} );
							}
                        }

                        if (index === value.controls.length - 1) {
                            $control.addClass('last-control');
                        }
                    }
                });
            });
        });
    });

	$(document).on('click mousedown', function(e) {
		if ( $(e.target).hasClass('sortable-opened') ) {

			if ( $(e.target).hasClass('invisible') ) {
				return;
			}

			$(e.target).removeClass('sortable-opened');

			$(e.target).find('.toggle-options').toggleClass('dashicons-arrow-down-alt2 dashicons-arrow-up-alt2');

			$('.customize-control.sortable-child-toggled').each(function() {
				$(this).removeClass('sortable-child-toggled');
				$(this).addClass('sortable-child-hidden');
			});
		}
	});

});

/* Dimensions Control */
(function ($) {

	/**
	 * Base class for JS-templated controls: empty container at boot, rendered
	 * from their Underscore template when the containing section is first expanded.
	 */
	wp.customize.SydneyDeferredControl = wp.customize.Control.extend({
		embed: function () {
			var control = this,
				sectionId = control.section();

			if (!sectionId) {
				return;
			}

			wp.customize.section(sectionId, function (section) {
				if (section.expanded() || wp.customize.settings.autofocus.control === control.id) {
					control.actuallyEmbed();
				} else {
					section.expanded.bind(function (expanded) {
						if (expanded) {
							control.actuallyEmbed();
						}
					});
				}
			});
		},

		actuallyEmbed: function () {
			var control = this;
			if ('resolved' === control.deferred.embedded.state()) {
				return;
			}
			control.renderContent();
			control.deferred.embedded.resolve();
		},

		focus: function (args) {
			this.actuallyEmbed();
			wp.customize.Control.prototype.focus.call(this, args);
		}
	});

	wp.customize.controlConstructor['sydney-toggle-control'] = wp.customize.SydneyDeferredControl;
	wp.customize.controlConstructor['sydney-dimensions-control'] = wp.customize.SydneyDeferredControl;
	wp.customize.controlConstructor['sydney-radio-buttons'] = wp.customize.SydneyDeferredControl;
	wp.customize.controlConstructor['sydney-responsive-slider'] = wp.customize.SydneyDeferredControl;

	wp.customize.controlConstructor['sydney-radio-image'] = wp.customize.SydneyDeferredControl.extend({
		// jQuery UI buttonset must re-run per control once its DOM exists
		// (was inline <script> per instance in the PHP-rendered markup).
		ready: function () {
			this.container.find('.sydney-radio-images-wrapper').each(function () {
				jQuery(this).buttonset();
				jQuery(this).find('label').removeClass('ui-button');
			});
		}
	});

	/**
	 * Render a section's deferred controls BEFORE core starts the expand
	 * animation. Core's pane handler is bound first on section.expanded, so
	 * without this it measures and slides in a still-empty pane and the
	 * controls visibly pop in mid-transition. Rendering here happens in the
	 * same click task, just ahead of the state change — the boot-time
	 * deferral win is untouched.
	 */
	var sydneyOriginalSectionExpand = wp.customize.Section.prototype.expand;
	wp.customize.Section.prototype.expand = function ( params ) {
		var section = this;

		if ( ! section.expanded() ) {
			_.each( section.controls(), function ( control ) {
				if ( 'function' === typeof control.actuallyEmbed ) {
					control.actuallyEmbed();
				}
			} );
		}

		return sydneyOriginalSectionExpand.call( section, params );
	};

	/**
	 * Global color swatches for the connected-global dropdowns.
	 * Settings-based (the palette control's DOM is not available at boot
	 * once controls render lazily).
	 */
	wp.customize.sydneyGetGlobalSwatches = function () {
		var colors = [];
		for (var i = 1; i <= 9; i++) {
			var setting = wp.customize('global_color_' + i);
			if (setting) {
				colors.push(String(setting.get()).toLowerCase());
			}
		}
		return colors;
	};

	wp.customize.sydneyPopulateGlobalDropdown = function ($dropdown) {
		if ($dropdown.data('populated')) {
			return;
		}
		$dropdown.data('populated', true);

		var colors = wp.customize.sydneyGetGlobalSwatches();
		var connected = $dropdown.next('.sydney-connected-global').val();

		jQuery.each(colors, function (index, value) {
			$dropdown.append('<div class="global-color" data-global-setting="global_color_' + (index + 1) + '" data-color="' + value + '"><span style="display:flex;align-items:center;"><span class="color-circle" style="background-color:' + value + '"></span>Global color ' + (index + 1) + '</span><span class="color-value">' + value + '</span></div>');

			if (connected == 'global_color_' + (index + 1)) {
				$dropdown.find('.global-color').eq(index).addClass('active');
				$dropdown.prev('.dashicons').addClass('active');
			}
		});
	};

	wp.customize.controlConstructor['sydney-color-group-control'] = wp.customize.SydneyDeferredControl;

	wp.customize.controlConstructor['sydney-multicolor-control'] = wp.customize.SydneyDeferredControl;

	wp.customize.controlConstructor['sydney-alpha-color'] = wp.customize.SydneyDeferredControl.extend({
		ready: function () {
			this.container.find('.global-colors-dropdown').each(function () {
				wp.customize.sydneyPopulateGlobalDropdown(jQuery(this));
			});
		}
	});

	const Sydney_Dimensions_Control = {
		init: function () {
			this.events();
		},

		// Events (delegated: control DOM is rendered on section expand)
		events: function () {
			$(document).on('input', '.sydney-dimensions-control .sydney-dimensions-input', this.setDimensionValue.bind(this));
			$(document).on('change', '.sydney-dimensions-control .sydney-dimensions-unit', this.unitSelectHandler.bind(this));
			$(document).on('click', '.sydney-dimensions-control .sydney-dimensions-link-btn', this.toggleLinkValues.bind(this));
		},

		// Change dimension
		setDimensionValue: function (e) {
			const
				$inputToSave = $(e.target).closest('.sydney-dimensions-inputs').find('.sydney-dimensions-value'),
				value = this.getDimensionValue(e.target);

			$inputToSave.val(value).trigger('change');
		},

		// Mount value
		getDimensionValue: function (input) {
			const
				deviceType = $(input).closest('.sydney-dimensions-inputs').data('device-type'),
				inputs = $(input).closest('.sydney-dimensions-inputs').find('.sydney-dimensions-input');

			let value = {
				unit: 'px',
				linked: false,
				top: '',
				right: '',
				bottom: '',
				left: '',
			};

			// Unit value
			value['unit'] = $(input).closest('.sydney-dimensions-control').find('.sydney-dimensions-units[data-device-type="' + deviceType + '"] .sydney-dimensions-unit').val();

			// Linked toggle
			value['linked'] = $(input).closest('.sydney-dimensions-control').find('.sydney-dimensions-link-values[data-device-type="' + deviceType + '"]').hasClass('linked');

			// Values
			if (!value['linked']) {
				inputs.each(function () {
					const side = $(this).data('side'),
						val = $(this).val();

					value[side] = val;
				});
			} else {
				const val = $(input).val();
				value['top'] = val;
				value['right'] = val;
				value['bottom'] = val;
				value['left'] = val;

				inputs.each(function () {
					$(this).val(val);
				});
			}

			return JSON.stringify(value);
		},

		unitSelectHandler: function (e) {
			const
				$this = $(e.target),
				deviceType = $(e.target).closest('.sydney-dimensions-units').data('device-type');

			// Trigger change in the first input to update the value
			$this.closest('.sydney-dimensions-control').find('.sydney-dimensions-inputs[data-device-type="' + deviceType + '"] .sydney-dimensions-input-wrapper:first-child .sydney-dimensions-input').trigger('change');
		},

		toggleLinkValues: function (e) {
			e.preventDefault();

			const
				$this = $(e.target),
				deviceType = $(e.target).closest('.sydney-dimensions-link-values').data('device-type');

			$this.closest('.sydney-dimensions-link-values').toggleClass('linked');

			// Trigger change in the first input to update the value
			$this.closest('.sydney-dimensions-control').find('.sydney-dimensions-inputs[data-device-type="' + deviceType + '"] .sydney-dimensions-input-wrapper:first-child .sydney-dimensions-input').trigger('change');
		}

	}

	$(document).ready(function () {
		Sydney_Dimensions_Control.init();
	});
})(jQuery);