text: // COLOR ALPHA -----------------------------
  
  /**
   * Alpha Color Picker JS
   */
  
  ( function( $ ) {
  
      /**
       * Override the stock color.js toString() method to add support for
       * outputting RGBa or Hex.
       */
      Color.prototype.toString = function( flag ) {
  
          // If our no-alpha flag has been passed in, output RGBa value with 100% opacity.
          // This is used to set the background color on the opacity slider during color changes.
          if ( 'no-alpha' == flag ) {
              return this.toCSS( 'rgba', '1' ).replace( /\s+/g, '' );
          }
  
          // If we have a proper opacity value, output RGBa.
          if ( 1 > this._alpha ) {
              return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' );
          }
  
          // Proceed with stock color.js hex output.
          var hex = parseInt( this._color, 10 ).toString( 16 );
          if ( this.error ) { return ''; }
          if ( hex.length < 6 ) {
              for ( var i = 6 - hex.length - 1; i >= 0; i-- ) {
                  hex = '0' + hex;
              }
          }
  
          return '#' + hex;
      };
  
      /**
       * Given an RGBa, RGB, or hex color value, return the alpha channel value.
       */
      function acp_get_alpha_value_from_color( value ) {
          var alphaVal;
  
          // Remove all spaces from the passed in value to help our RGBa regex.
          value = value.replace( / /g, '' );
  
          if ( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ ) ) {
              alphaVal = parseFloat( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ )[1] ).toFixed(2) * 100;
              alphaVal = parseInt( alphaVal );
          } else {
              alphaVal = 100;
          }
  
          return alphaVal;
      }
  
      /**
       * Force update the alpha value of the color picker object and maybe the alpha slider.
       */
      function acp_update_alpha_value_on_color_input( alpha, $input, $alphaSlider, update_slider ) {
          var iris, colorPicker, color;
  
          iris = $input.data( 'a8cIris' );
          colorPicker = $input.data( 'wpWpColorPicker' );
  
          // Set the alpha value on the Iris object.
          iris._color._alpha = alpha;
  
          // Store the new color value.
          color = iris._color.toString();
  
          // Set the value of the input.
          $input.val( color );
          $input.trigger( 'color_change' );
  
          // Update the background color of the color picker.
          colorPicker.toggler.css({
              'background-color': color
          });
  
          // Maybe update the alpha slider itself.
          if ( update_slider ) {
              acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
          }
  
          // Update the color value of the color picker object.
          $input.wpColorPicker( 'color', color );
      }
  
      /**
       * Update the slider handle position and label.
       */
      function acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ) {
          $alphaSlider.slider( 'value', alpha );
          $alphaSlider.find( '.ui-slider-handle' ).text( alpha.toString() );
      }
  
      $.fn.alphaColorPicker = function() {
  
          return this.each( function() {
  
              // Scope the vars.
              var $input, startingColor, paletteInput, showOpacity, defaultColor, palette,
                  colorPickerOptions, $container, $alphaSlider, alphaVal, sliderOptions;
  
              // Store the input.
              $input = $( this );
  
              // We must wrap the input now in order to get our a top level class
              // around the HTML added by wpColorPicker().
              $input.wrap( '<div class="alpha-color-picker-wrap"></div>' );
  
              // Get some data off the input.
              paletteInput = $input.attr( 'data-palette' ) || 'true';
              showOpacity  = $input.attr( 'data-show-opacity' ) || 'true';
              defaultColor = $input.attr( 'data-default-color' ) || '';
  
              // Process the palette.
              if ( paletteInput.indexOf( '|' ) !== -1 ) {
                  palette = paletteInput.split( '|' );
              } else if ( 'false' == paletteInput ) {
                  palette = false;
              } else {
                  palette = true;
              }
  
              // Get a clean starting value for the option.
              startingColor = $input.val().replace( /\s+/g, '' );
              //startingColor = $input.val().replace( '#', '' );
              //console.log( startingColor );
  
              // If we don't yet have a value, use the default color.
              if ( '' == startingColor ) {
                  startingColor = defaultColor;
              }
  
              // Set up the options that we'll pass to wpColorPicker().
              colorPickerOptions = {
                  change: function( event, ui ) {
                      var key, value, alpha, $transparency;
  
                      key   = $input.attr( 'data-customize-setting-link' );
                      value = $input.wpColorPicker( 'color' );
  
                      // Set the opacity value on the slider handle when the default color button is clicked.
                      if ( defaultColor == value ) {
                          alpha = acp_get_alpha_value_from_color( value );
                          $alphaSlider.find( '.ui-slider-handle' ).text( alpha );
                      }
  
                      // If we're in the Customizer, send an ajax request to wp.customize
                      // to trigger the Save action.
                      if ( typeof wp.customize != 'undefined' ) {
                          wp.customize( key, function( obj ) {
                              obj.set( value );
                          });
                      }
  
                      $transparency = $container.find( '.transparency' );
  
                      // Always show the background color of the opacity slider at 100% opacity.
                      $transparency.css( 'background-color', ui.color.toString( 'no-alpha' ) );
                      $input.trigger( 'color_change' );
                  },
                  palettes: palette // Use the passed in palette.
              };
  
              // Create the colorpicker.
              $input.wpColorPicker( colorPickerOptions );
  
              $container = $input.parents( '.wp-picker-container:first' );
  
              // Insert our opacity slider.
              $( '<div class="alpha-color-picker-container">' +
                  '<div class="min-click-zone click-zone"></div>' +
                  '<div class="max-click-zone click-zone"></div>' +
                  '<div class="alpha-slider"></div>' +
                  '<div class="transparency"></div>' +
                  '</div>' ).appendTo( $container.find( '.wp-picker-holder' ) );
  
              $alphaSlider = $container.find( '.alpha-slider' );
  
              // If starting value is in format RGBa, grab the alpha channel.
              alphaVal = acp_get_alpha_value_from_color( startingColor );
  
              // Set up jQuery UI slider() options.
              sliderOptions = {
                  create: function( event, ui ) {
                      var value = $( this ).slider( 'value' );
  
                      // Set up initial values.
                      $( this ).find( '.ui-slider-handle' ).text( value );
                      $( this ).siblings( '.transparency ').css( 'background-color', startingColor );
                  },
                  value: alphaVal,
                  range: 'max',
                  step: 1,
                  min: 0,
                  max: 100,
                  animate: 300
              };
  
              // Initialize jQuery UI slider with our options.
              $alphaSlider.slider( sliderOptions );
  
              // Maybe show the opacity on the handle.
              if ( 'true' == showOpacity ) {
                  $alphaSlider.find( '.ui-slider-handle' ).addClass( 'show-opacity' );
              }
  
              // Bind event handlers for the click zones.
              $container.find( '.min-click-zone' ).on( 'click', function() {
                  acp_update_alpha_value_on_color_input( 0, $input, $alphaSlider, true );
              });
              $container.find( '.max-click-zone' ).on( 'click', function() {
                  acp_update_alpha_value_on_color_input( 100, $input, $alphaSlider, true );
              });
  
              // Bind event handler for clicking on a palette color.
              $container.find( '.iris-palette' ).on( 'click', function() {
                  var color, alpha;
  
                  color = $( this ).css( 'background-color' );
                  alpha = acp_get_alpha_value_from_color( color );
  
                  acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
  
                  // Sometimes Iris doesn't set a perfect background-color on the palette,
                  // for example rgba(20, 80, 100, 0.3) becomes rgba(20, 80, 100, 0.298039).
                  // To compensante for this we round the opacity value on RGBa colors here
                  // and save it a second time to the color picker object.
                  if ( alpha != 100 ) {
                      color = color.replace( /[^,]+(?=\))/, ( alpha / 100 ).toFixed( 2 ) );
                  }
  
                  $input.wpColorPicker( 'color', color );
              });
  
              // Bind event handler for clicking on the 'Default' button.
              $container.find( '.button.wp-picker-default' ).on( 'click', function() {
                  var alpha = acp_get_alpha_value_from_color( defaultColor );
  
                  acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
              });
  
              // Bind event handler for typing or pasting into the input.
              $input.on( 'input', function() {
                  var value = $( this ).val();
                  var alpha = acp_get_alpha_value_from_color( value );
  
                  acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
              });
  
              // Update all the things when the slider is interacted with.
              $alphaSlider.slider().on( 'slide', function( event, ui ) {
                  var alpha = parseFloat( ui.value ) / 100.0;
  
                  acp_update_alpha_value_on_color_input( alpha, $input, $alphaSlider, false );
  
                  // Change value shown on slider handle.
                  $( this ).find( '.ui-slider-handle' ).text( ui.value );
              });
          });
      }
  
  }( jQuery ));
  
  
  // WP COLOR ALPHA customizer -----------------------------
  ( function( api , $ ) {
      api.controlConstructor['alpha-color'] = api.Control.extend({
          ready: function() {
              var control = this;
              $( '.alpha-color-control', control.container  ).alphaColorPicker( {
                  clear: function(event, ui){
  
                  },
              });
  
          }
  
      });
  
  } )(  wp.customize, jQuery );
  
  
  // WP REPEATERABLE Customizer -----------------------------
  
  ( function( api , $ ) {
  
      api.controlConstructor['repeatable'] = api.Control.extend( {
          ready: function() {
              var control = this;
              control._init();
          },
  
          eval: function(valueIs, valueShould, operator) {
  
              switch( operator ) {
                  case 'not_in':
                      valueShould = valueShould.split(',');
                      if ( $.inArray( valueIs , valueShould ) < 0 ){
                          return true;
                      } else {
                          return false;
                      }
                      break;
                  case 'in':
                      valueShould = valueShould.split(',');
                      if ( $.inArray( valueIs , valueShould ) > -1 ){
                          return true;
                      } else {
                          return false;
                      }
                      break;
                  case '!=':
                      return valueIs != valueShould;
                  case '<=':
                      return valueIs <= valueShould;
                  case '<':
                      return valueIs < valueShould;
                  case '>=':
                      return valueIs >= valueShould;
                  case '>':
                      return valueIs > valueShould;
                  case '==':case '=':
                  return valueIs == valueShould;
                  break;
              }
          },
  
          conditionize: function( $context ){
              var control = this;
  
              if ( $context.hasClass( 'conditionized' ) ) {
                  return  ;
              }
              $context.addClass( 'conditionized' );
  
              $context.on( 'change condition_check', 'input, select, textarea', function( e ) {
                  var id =  $( this ).attr( 'data-live-id' ) || '';
  
                  if ( id !== '' && $( '.conditionize[data-cond-option="'+id+'"]', $context ) .length > 0 ) {
                      var v = '';
                      if ( $( this ).is( 'input[type="checkbox"]' ) ) {
                          if ( $( this ).is( ':checked' ) ){
                              v =  $( this ).val();
                          } else {
                              v = 0;
                          }
                      } else if ( $( this ).is( 'input[type="radio"]' ) ) {
                          if ( $( this ).is( ':checked' ) ){
                              v =  $( this).val();
                          }
                      } else {
                          v = $( this).val();
                      }
  
                      $( '.conditionize[data-cond-option="'+id+'"]', $context ).each( function(){
  
                          var $section = $(this);
                          var listenFor = $(this).attr('data-cond-value');
                          var operator = $(this).attr('data-cond-operator') ? $(this).attr('data-cond-operator') : '==';
  
                          if ( control.eval( v, listenFor, operator ) ) {
                              $section.slideDown().addClass( 'cond-show').removeClass( 'cond-hide' );
                              $section.trigger( 'condition_show' );
                          } else {
                              $section.slideUp().removeClass( 'cond-show').addClass( 'cond-hide' );
                              $section.trigger( 'condition_hide' );
                          }
                      } );
                  }
              } );
  
              /**
               * Current support one level only
               */
              $('input, select, textarea', $context ).trigger( 'condition_check' );
  
  
          },
  
          remove_editor: function( $context ){
  
          },
  
          editor: function( $textarea ){
  
          },
  
          _init: function(){
              var control = this;
  
              //var container =  control.container;
              var default_data =  control.params.fields;
  
              var values;
              if (  typeof control.params.value === 'string' ) {
                  try {
                      values = JSON.parse( control.params.value ) ;
                  }catch ( e ) {
                      values = {};
                  }
              } else {
                  values = control.params.value;
              }
  
  
              var max_item  = 0; // unlimited
              var limited_mg = control.params.limited_msg || '';
  
              if ( ! isNaN( parseInt( control.params.max_item ) ) ) {
                  max_item = parseInt( control.params.max_item );
              }
  
              /**
               * Toggle show/hide item
               */
              control.container.on( 'click', '.widget .widget-action, .widget .repeat-control-close, .widget-title', function( e ){
                  e.preventDefault();
                  var p =  $( this ).closest( '.widget' );
  
                  if ( p.hasClass( 'explained' ) ) {
                      //console.log( 'has: explained' );
                      $( '.widget-inside', p ).slideUp( 200, 'linear', function(){
                          $( '.widget-inside', p ).removeClass( 'show').addClass('hide');
                          p.removeClass( 'explained' );
                      } );
                  } else {
                      // console.log( 'No: explained' );
                      $( '.widget-inside', p ).slideDown( 200, 'linear', function(){
                          $( '.widget-inside', p ).removeClass( 'hide').addClass('show');
                          p.addClass( 'explained' );
                      } );
                  }
  
              } );
  
              /**
               * Remove repeater item
               */
              control.container.on( 'click', '.repeat-control-remove' , function( e ){
                  e.preventDefault();
                  var $context =  $( this ).closest( '.repeatable-customize-control' );
  
                  $( "body").trigger( "repeat-control-remove-item", [$context ] );
  
                  control.remove_editor( $context );
  
                  $context.remove();
                  control.rename();
                  control.updateValue();
                  control._check_max_item();
              } );
  
              /**
               * Get customizer control data
               *
               * @returns {*}
               */
              control.getData = function ( ){
                  var f = $( '.form-data', control.container );
                  var data =  $( 'input, textarea, select', f ).serialize();
                  return  JSON.stringify( data ) ;
              };
  
              /**
               * Update repeater value
               */
              control.updateValue = function(){
                  var data = control.getData();
                  $( "[data-hidden-value]", control.container ).val( data );
                  $( "[data-hidden-value]", control.container ).trigger( 'change' );
              };
  
              /**
               * Rename repeater item
               */
              control.rename = function(){
                  $( '.list-repeatable li', control.container ).each( function( index ) {
                      var li =  $( this );
                      $( 'input, textarea, select', li ).each( function(){
                          var input = $( this );
                          var name = input.attr( 'data-repeat-name' ) || undefined;
                          if(  typeof name !== "undefined" ) {
                              name = name.replace(/__i__/g, index );
                              input.attr( 'name',  name );
                          }
                      } );
  
                  } );
              };
  
              var frame = wp.media({
                  title: wp.media.view.l10n.addMedia,
                  multiple: false,
                  //library: {type: 'all' },
                  //button : { text : 'Insert' }
              });
  
              frame.on('close', function () {
                  // get selections and save to hidden input plus other AJAX stuff etc.
                  var selection = frame.state().get('selection');
                  // console.log(selection);
              });
  
              control.media_current = {};
              control.media_btn = {};
              frame.on( 'select', function () {
                  // Grab our attachment selection and construct a JSON representation of the model.
                  var media_attachment = frame.state().get('selection').first().toJSON();
                  var preview, img_url;
                  img_url = media_attachment.url;
  
                  $( '.image_id', control.media_current  ).val( media_attachment.id );
                  $( '.current', control.media_current  ).removeClass( 'hide').addClass( 'show' );
                  $( '.image_url', control.media_current  ).val( img_url );
  
                  if ( media_attachment.type == 'video' ) {
                      preview = '<video width="400" controls>'+
                          '<source src="'+img_url+'" type="'+media_attachment.mime+'">'+
                          'Your browser does not support HTML5 video.'+
                      '</video>';
                      $('.thumbnail-image', control.media_current  ).html(preview);
  
                  } else if ( media_attachment.type == 'image' ) {
                      preview = '<img src="' + img_url + '" alt="">';
                      $('.thumbnail-image', control.media_current  ).html(preview);
                  }
  
                  $('.remove-button', control.media_current  ).show();
                  $( '.image_id', control.media_current  ).trigger( 'change' );
                  control.media_btn.text( control.media_btn.attr( 'data-change-txt' ) );
              });
  
  
              control.handleMedia = function( $context ) {
                  $('.item-media', $context ).each( function(){
                      var _item = $( this );
                      // when remove item
                      $( '.remove-button', _item ).on( 'click', function( e ){
                          e.preventDefault();
                          $( '.image_id, .image_url', _item ).val( '' );
                          $( '.thumbnail-image', _item ).html( '' );
                          $( '.current', _item ).removeClass( 'show' ).addClass( 'hide' );
                          $( this).hide();
                          $('.upload-button', _item ).text( $('.upload-button', _item ).attr( 'data-add-txt' ) );
                          $( '.image_id', _item ).trigger( 'change' );
                      } );
  
                      // when upload item
                      $('.upload-button', _item ).on('click', function ( e ) {
                          e.preventDefault();
                          control.media_current = _item;
                          control.media_btn = $( this );
                          frame.open();
                      });
                  } );
              };
  
              /**
               * Init color picker
               *
               * @param $context
               */
              control.colorPicker =  function( $context ){
                  // Add Color Picker to all inputs that have 'color-field' class
  
                  if ( $('.c-color', $context).length > 0 ) {
                      $('.c-color', $context).wpColorPicker({
                          change: function (event, ui) {
                              control.updateValue();
                          },
                          clear: function (event, ui) {
                              control.updateValue();
                          },
                      });
                  }
  
                  if ( $('.c-coloralpha', $context).length > 0 ) {
  
                      $('.c-coloralpha', $context).each(function () {
                          var input = $(this);
                          var c = input.val();
                          c = c.replace('#', '');
                          input.removeAttr('value');
                          input.prop('value', c);
                          input.alphaColorPicker({
                              change: function (event, ui) {
                                  control.updateValue();
                              },
                              clear: function (event, ui) {
                                  control.updateValue();
                              },
                          });
                      });
                  }
  
  
              };
  
              /**
               * Live title events
               *
               * @param $context
               */
              control.actions = function( $context ){
                  if ( control.params.live_title_id ) {
  
                      if( ! $context.attr( 'data-title-format' ) ) {
                          $context.attr( 'data-title-format', control.params.title_format );
                      }
  
                      var format = $context.attr( 'data-title-format' ) || '';
                      // Custom for special ID
                      if ( control.id === 'sections_order_styling' ) {
                          if ( $context.find( 'input.add_by').val() !== 'click' ) {
                              format = '[live_title]';
                          }
                      }
  
                      // Live title
                      if ( control.params.live_title_id && $( "[data-live-id='"+ control.params.live_title_id+"']", $context ).length > 0 ) {
                          var v = '';
  
                          if (  $("[data-live-id='" + control.params.live_title_id + "']", $context).is( '.select-one' )  ){
                              v = $("[data-live-id='" + control.params.live_title_id + "']", $context ).find('option:selected').eq(0).text();
                          } else {
                              v = $("[data-live-id='" + control.params.live_title_id + "']", $context).eq(0).val();
                          }
  
                          if ( v == '' ) {
                              v = control.params.default_empty_title;
                          }
  
                          if ( format !== '') {
                              v = format.replace('[live_title]', v);
                          }
  
                          $('.widget-title .live-title', $context).text( v );
  
                          $context.on('keyup change', "[data-live-id='" + control.params.live_title_id + "']", function () {
                              var v = '';
  
                              var format = $context.attr( 'data-title-format' ) || '';
                              // custom for special ID
                              if ( control.id === 'sections_order_styling' ) {
                                  if ( $context.find( 'input.add_by').val() !== 'click' ) {
                                      format = '[live_title]';
                                  }
                              }
  
                              if ( $(this).is( '.select-one' )  ){
                                  v = $(this).find('option:selected').eq( 0 ).text();
                              } else {
                                  v = $(this).val();
                              }
  
                              if (v == '') {
                                  v = control.params.default_empty_title;
                              }
  
                              if ( format !== '' ) {
                                  v = format.replace('[live_title]', v);
                              }
  
                              $('.widget-title .live-title', $context).text(v);
                          });
  
                      } else {
  
                      }
  
                  } else {
                      //console.log(  control.params.title_format );
                      //$('.widget-title .live-title', $context).text( control.params.title_format );
                  }
  
              };
  
  
              /**
               * Check max item
               *
               * @private
               */
              control._check_max_item = function(){
                  var n = $( '.list-repeatable > li.repeatable-customize-control', control.container).length;
                  //console.log( n );
                  if ( n>= max_item ) {
                      $( '.repeatable-actions', control.container ).hide();
                      if ( $( '.limited-msg', control.container).length <= 0 ) {
                          if ( limited_mg !== '' ) {
                              var msg = $( '<p class="limited-msg"/>' );
                              msg.html( limited_mg );
                              msg.insertAfter( $( '.repeatable-actions', control.container ) );
                              msg.show();
                          }
                      } else {
                          $( '.limited-msg', control.container ).show();
                      }
  
                  } else {
                      $( '.repeatable-actions', control.container ).show();
                      $( '.limited-msg', control.container ).hide();
                  }
                  //console.log( max_item );
              };
  
  
              /**
               * Function that loads the Mustache template
               */
              control.repeaterTemplate = _.memoize(function () {
                  var compiled,
                  /*
                   * Underscore's default ERB-style templates are incompatible with PHP
                   * when asp_tags is enabled, so WordPress uses Mustache-inspired templating syntax.
                   *
                   * @see trac ticket #22344.
                   */
                      options = {
                          evaluate: /<#([\s\S]+?)#>/g,
                          interpolate: /\{\{\{([\s\S]+?)\}\}\}/g,
                          escape: /\{\{([^\}]+?)\}\}(?!\})/g,
                          variable: 'data'
                      };
  
                  return function ( data ) {
                      compiled = _.template( control.container.find('.repeatable-js-template').first().html(), null, options);
                      return compiled( data );
                  };
              });
  
              control.template = control.repeaterTemplate();
  
  
              /**
               * Init item events
               *
               * @param $context
               */
              control.intItem = function( $context ){
                  control.rename();
                  control.conditionize( $context );
                  control.colorPicker( $context );
                  control.handleMedia( $context );
                  //Special check element
                  $( '[data-live-id="section_id"]', $context ).each( function(){
                      // $context.addClass( 'section-'+$( this ).val() );
                      $( this).closest( '.repeatable-customize-control').addClass( 'section-'+$( this ).val() );
                      if ( $( this ).val() === 'map' ) {
                          // console.log(  $( this).val() );
                          $context.addClass( 'show-display-field-only' );
                      }
                  } );
  
  
                  // Custom for special ID
                  if ( control.id === 'sections_order_styling' ) {
                      if ( $context.find( 'input.add_by').val() !== 'click' ) {
                          $context.addClass( 'no-changeable' );
                          $( '.item-editor textarea', $context).addClass( 'editor-added' );
  
                      } else {
                          $context.find( '.item-title').removeClass( 'item-hidden ' );
                          $context.find( '.item-title input[type="hidden"]').attr( 'type', 'text' );
  
                          $context.find( '.item-section_id').removeClass( 'item-hidden ' );
                          $context.find( '.item-section_id input[type="hidden"]').attr( 'type', 'text' );
                      }
                  }
  
                  // Setup editor
                  $( 'body' ).trigger( 'repeater-control-init-item', [ $context ] );
  
              };
  
              /**
               * Drag to sort items
               */
              $( ".list-repeatable", control.container ).sortable({
                  handle: ".widget-title",
                  //containment: ".customize-control-repeatable",
                  containment: control.container,
                  /// placeholder: "sortable-placeholder",
                  update: function( event, ui ) {
                      control.rename();
                      control.updateValue();
                  }
              });
  
              /**
               * Create existing items
               */
              if ( values.length ) {
                  var _templateData, _values;
  
                  for (var i = 0; i < values.length; i++) {
  
                      _templateData = $.extend( true, {}, control.params.fields );
  
                      _values = values[i];
                      if ( values[i] ) {
                          for ( var j in _values ) {
                              if ( _templateData.hasOwnProperty( j ) && _values.hasOwnProperty( j ) ) {
                                  _templateData[ j ].value = _values[j];
                              }
                          }
                      }
  
                      var $html = $( control.template( _templateData ) );
                      $( '.list-repeatable', control.container ).append( $html );
                      control.intItem( $html );
                      control.actions( $html );
                  }
              }
  
  
              /**
               * Add new item
               */
              control.container.on( 'click', '.add-new-repeat-item', function(){
                  var $html = $( control.template( default_data ) );
                  $( '.list-repeatable', control.container ).append( $html );
  
                  // add unique ID for section if id_key is set
                  if ( control.params.id_key !== '' ){
                      $html.find( '.item-'+control.params.id_key).find( 'input').val( 'sid'+( new Date().getTime() ) );
                  }
                  $html.find( 'input.add_by').val( 'click' );
  
                  control.intItem( $html );
                  control.actions( $html );
                  control.updateValue();
                  control._check_max_item();
              } );
  
              /**
               * Update repeater data when any events fire.
               */
              $( '.list-repeatable', control.container ).on( 'keyup change color_change', 'input, select, textarea', function( e ) {
                  control.updateValue();
              });
  
              control._check_max_item();
  
          }
  
      } );
  
  } )( wp.customize, jQuery );
  
  
  /**
   * Icon picker
   */
  jQuery( document ).ready( function( $ ) {
  
      window.editing_icon = false;
      var icon_picker = $( '<div class="c-icon-picker"><div class="c-icon-type-wrap"><select class="c-icon-type"></select></div><div class="c-icon-search"><input class="" type="text"></div><div class="c-icon-list"></div></div>' );
      var options_font_type  = '', icon_group = '';
  
      $.each( C_Icon_Picker.fonts, function( key, font ) {
  
          font = $.extend( {}, {
              url: '',
              name: '',
              prefix: '',
              icons: ''
          }, font );
  
          $('<link>')
              .appendTo('head')
              .attr({type : 'text/css', rel : 'stylesheet'})
              .attr('id', 'customizer-icon-' + key )
              .attr('href', font.url );
  
          options_font_type += '<option value="'+key+'">' +font.name+ '</option>';
  
          var icons_array = font.icons.split('|');
  
          icon_group += '<div class="ic-icons-group" style="display: none;" data-group-name="'+key+'">';
          $.each( icons_array, function( index, icon ){
              if ( font.prefix ) {
                  icon = font.prefix + ' ' + icon;
              }
              icon_group +=  '<span data-name="'+icon+'"><i class="'+ icon +'"></i></span>';
  
          } );
          icon_group += '</div>';
  
      } );
      icon_picker.find( '.c-icon-search input' ).attr( 'placeholder', C_Icon_Picker.search );
      icon_picker.find( '.c-icon-type' ).html( options_font_type );
      icon_picker.find( '.c-icon-list' ).append( icon_group );
      $( '.wp-full-overlay' ).append( icon_picker );
  
      // Change icon type
      $( 'body' ).on( 'change', 'select.c-icon-type', function(){
          var t =  $( this ).val();
          icon_picker.find( '.ic-icons-group' ).hide();
          icon_picker.find( '.ic-icons-group[data-group-name="'+t+'"]' ).show();
  
      } );
      icon_picker.find( 'select.c-icon-type' ).trigger( 'change' );
  
      // When type to search
      $( 'body' ).on( 'keyup', '.c-icon-search input', function(){
          var v = $( this ).val();
          if ( v == '' ) {
              $( '.c-icon-list span' ).show();
          } else {
              $( '.c-icon-list span' ).hide();
             try {
                 $( '.c-icon-list span[data-name*="'+v+'"]' ).show();
             } catch ( e ){
  
             }
          }
      } );
  
      // Edit icon
      $( 'body' ).on( 'click', '.icon-wrapper', function( e ){
          e.preventDefault();
          var icon =  $( this );
          window.editing_icon = icon;
          icon_picker.addClass( 'ic-active' );
          $( 'body' ).find( '.icon-wrapper' ).removeClass('icon-editing');
          icon.addClass( 'icon-editing' );
      } );
      // Remove icon
      $( 'body' ).on( 'click', '.item-icon .remove-icon', function( e ){
          e.preventDefault();
          var item =  $( this ).closest( '.item-icon' );
          item.find( '.icon-wrapper input' ).val( '' );
          item.find( '.icon-wrapper input' ).trigger( 'change' );
          item.find( '.icon-wrapper i' ).attr( 'class', '' );
          $( 'body' ).find( '.icon-wrapper' ).removeClass('icon-editing');
      } );
  
      // Selected icon
      $( 'body' ).on( 'click', '.c-icon-list span', function( e ){
          e.preventDefault();
          var icon_name =  $( this ).attr( 'data-name' ) || '';
          if ( window.editing_icon ) {
              window.editing_icon.find( 'i' ).attr( 'class', '' ).addClass( $( this ).find( 'i' ).attr( 'class' ) );
              window.editing_icon.find( 'input' ).val( icon_name ).trigger( 'change' );
          }
          icon_picker.removeClass( 'ic-active' );
          window.editing_icon = false;
          $( 'body' ).find( '.icon-wrapper' ).removeClass('icon-editing');
      } );
  
      $( document ).mouseup( function ( e ) {
          if ( window.editing_icon ) {
              if ( ! window.editing_icon.is( e.target ) // if the target of the click isn't the container...
                  && window.editing_icon.has( e.target ).length === 0 // ... nor a descendant of the container
                  && (
                      !icon_picker.is( e.target )
                      && icon_picker.has( e.target ).length === 0
                  )
              ) {
                  icon_picker.removeClass('ic-active');
                 // window.editing_icon = false;
              }
          }
      });
  
  } );
  
  
  
  /* Customizer settings conditionals */
  jQuery( document ).ready( function( $ ){
  
      var display_footer_layout = function( l ){
          $( 'li[id^="customize-control-footer_custom_"]' ).hide();
          $( 'li[id^="customize-control-footer_custom_'+l+'_columns"]' ).show();
      };
  
      display_footer_layout( $( '#customize-control-footer_layout select' ).val() );
      $( '#customize-control-footer_layout select' ).on( 'change', function ()  {
          display_footer_layout( $( this ).val() );
      } );
  
      // Header menu layout
  
      var  header_layout_change = function ( layout ) {
          if ( layout == 'transparent' ) {
              $( '#customize-control-header_bg_color, ' +
                  '#customize-control-menu_color,' +
                  ' #customize-control-menu_hover_color,' +
                  ' #customize-control-menu_hover_bg_color' ).hide();
  
              $( '#customize-control-header_t_bg_color, ' +
                  '#customize-control-menu_t_color,' +
                  ' #customize-control-menu_t_hover_color,' +
                  ' #customize-control-menu_t_hover_bg_color' ).show();
          } else {
  
              $( '#customize-control-header_bg_color, ' +
                  '#customize-control-menu_color,' +
                  ' #customize-control-menu_hover_color,' +
                  ' #customize-control-menu_hover_bg_color' ).show();
  
              $( '#customize-control-header_t_bg_color, ' +
                  '#customize-control-menu_t_color,' +
                  ' #customize-control-menu_t_hover_color,' +
                  ' #customize-control-menu_t_hover_bg_color' ).hide();
  
          }
      };
  
      header_layout_change( $( '#customize-control-header_layout select' ).val() );
      $( '#customize-control-header_layout select' ).on( 'change', function ()  {
          header_layout_change( $( this ).val() );
      } );
  
      // News load more posts
      var new_load_more_settings = function( t ){
          if ( t == 'hide' ) {
              $( '#customize-control-news_more_text, #customize-control-news_more_link' ).hide();
          } else if ( t == 'ajax' ) {
              $( '#customize-control-news_more_text' ).show();
              $( '#customize-control-news_more_link' ).hide();
          } else if ( t == 'link' ) {
              $( '#customize-control-news_more_text' ).show();
              $( '#customize-control-news_more_link' ).show();
          }
  
      };
      new_load_more_settings( $( '#customize-control-news_loadmore select' ).val() );
      $( '#customize-control-news_loadmore select' ).on( 'change', function ()  {
          new_load_more_settings( $( this ).val() );
      } );
  
  
      var gallery_fields = '#customize-control-gallery_layout, #customize-control-gallery_display, #customize-control-gallery_spacing, #customize-control-gallery_row_height, #customize-control-gallery_col, #customize-control-gallery_number, #customize-control-gallery_lightbox';
  
      /**
       * For Gallery content settings
       */
      $( 'select[data-customize-setting-link="gallery_source"]').on( 'change on_custom_load', function(){
          var v = $( this).val() || '';
  
          $( "li[id^='customize-control-gallery_source_']").hide();
          $( "li[id^='customize-control-gallery_api_']").hide();
          $( "li[id^='customize-control-gallery_settings_']").hide();
          $( "li[id^='customize-control-gallery_source_"+v+"']").show();
          $( "li[id^='customize-control-gallery_api_"+v+"']").show();
          $( "li[id^='customize-control-gallery_settings_"+v+"']").show();
  
          if ( v != 'page' && v ) {
              if ( ! screenr_customizer_settings.is_plus || screenr_customizer_settings.is_plus == '' ) {
                    $( gallery_fields ).hide();
              } else {
                  $( gallery_fields ).show();
              }
          } else {
              $( gallery_fields ).show();
          }
  
      } );
  
      $( 'select[data-customize-setting-link="gallery_source"]').trigger( 'on_custom_load' );
  
      /**
       * For Gallery display settings
       */
      $( 'select[data-customize-setting-link="gallery_display"]').on( 'change on_custom_load', function(){
          var v = $( this).val() || '';
          switch ( v ) {
              case 'slider':
                  $( "#customize-control-gallery_row_height, #customize-control-gallery_col, #customize-control-gallery_spacing").hide();
                  break;
              case 'justified':
                  $( "#customize-control-gallery_col, #customize-control-gallery_spacing").hide();
                  $( "#customize-control-gallery_row_height").show();
                  break;
              case 'carousel':
                  $( "#customize-control-gallery_row_height, #customize-control-gallery_col").hide();
                  $( "#customize-control-onepress_g_col, #customize-control-onepress_g_spacing").show();
                  break;
              case 'masonry':
                  $( "#customize-control-onepress_g_row_height").hide();
                  $( "#customize-control-gallery_col, #customize-control-gallery_spacing").show();
                  break;
              default:
                  $( "#customize-control-gallery_row_height").hide();
                  $( "#customize-control-gallery_col, #customize-control-gallery_spacing").show();
          }
  
      } );
      $( 'select[data-customize-setting-link="gallery_display"]').trigger( 'on_custom_load' );
  
  
  
  } );
  
  /*
   * Plus Upgrade
   */
  ( function( api ) {
  	api.sectionConstructor['upgrade-plus'] = api.Section.extend( {
  		attachEvents: function () {},
  		isContextuallyActive: function () {
  			return true;
  		}
  	} );
  } )( wp.customize );
  
  // Plus version
  jQuery( document ).ready( function( $ ){
      if ( typeof screenr_customizer_settings !== "undefined" ) {
          if (screenr_customizer_settings.number_action > 0) {
              $('.control-section-themes h3.accordion-section-title').append('<a class="theme-action-count" href="' + screenr_customizer_settings.action_url + '">' + screenr_customizer_settings.number_action + '</a>');
          }
      }
  } );
  