( function( $ ) {
    /*Drag and drop to change order*/
    $(document).ready(function () {
        var customize_theme_controls = $(document);
        function refresh_repeater_values(){
            $(".tm-repeater-field-control-wrap").each(function(){
                var values = [];
                var $this = $(this);
                $this.find(".repeater-field-control").each(function(){
                    var valueToPush = {};
                    $(this).find('[data-name]').each(function(){
                        if( $(this).attr('type') === 'checkbox'){
                            if($(this).is(':checked')){
                                var dataValue = 1;
                            }
                            else {
                                var dataValue = '';
                            }
                        }
                        else{
                            var dataValue = $(this).val();
                        }
                        var dataName = $(this).attr('data-name');
                        valueToPush[dataName] = dataValue;
                    });
                    values.push(valueToPush);
                });
                $this.next('.tm-repeater-collection').val(JSON.stringify(values)).trigger('change');
            });
        }

        customize_theme_controls.on('click','.repeater-field-title',function(){
            $(this).next().slideToggle();
            $(this).closest('.repeater-field-control').toggleClass('expanded');
        });
        customize_theme_controls.on('click', '.repeater-field-close', function(){
            $(this).closest('.repeater-fields').slideUp();
            $(this).closest('.repeater-field-control').toggleClass('expanded');
        });
        customize_theme_controls.on("click",'.tm-repeater-add-control-field', function(){
            var $this = $(this).parent();

            if(typeof $this !== 'undefined') {
                var field = $this.find(".tm-repeater-field-control-generator").html();
                var field = $($.parseHTML(field));
                if(typeof field !== 'undefined'){
                    field.find("input[type='text'][data-name]").each(function(){
                        var defaultValue = $(this).attr('data-default');
                        $(this).val(defaultValue);
                    });
                    field.find("textarea[data-name]").each(function(){
                        var defaultValue = $(this).attr('data-default');
                        $(this).val(defaultValue);
                    });
                    field.find("select[data-name]").each(function(){
                        var defaultValue = $(this).attr('data-default');
                        $(this).val(defaultValue);
                    });

                    field.find('.single-field').show();

                    $this.find('.tm-repeater-field-control-wrap').append(field);

                    field.addClass('expanded').find('.repeater-fields').show();
                    $('.accordion-section-content').animate({ scrollTop: $this.height() }, 1000);
                    refresh_repeater_values();
                }

            }
            return false;
        });

        customize_theme_controls.on("click", ".repeater-field-remove",function(){
            if( typeof	$(this).parent() != 'undefined'){
                $(this).closest('.repeater-field-control').slideUp('normal', function(){
                    $(this).remove();
                    refresh_repeater_values();
                });
            }
            return false;
        });

        customize_theme_controls.on('keyup change', '[data-name]',function(){
            refresh_repeater_values();
            return false;
        });
        $(".tm-repeater-field-control-wrap").sortable({
            orientation: "vertical",
            update: function( event, ui ) {
                refresh_repeater_values();
            }
        });

        /**
         * Script for Customizer icons
         */
        customize_theme_controls.on('click', '.tm-customize-icons .single-icon', function() {
            var single_icon = $(this),
                at_customize_icons = single_icon.closest( '.tm-customize-icons' ),
                icon_display_value = single_icon.children('i').attr('class'),
                icon_split_value = icon_display_value.split(' '),
                icon_value = icon_split_value[1];

            single_icon.siblings().removeClass('selected');
            single_icon.addClass('selected');
            at_customize_icons.find('.tm-icon-value').val( icon_value );
            at_customize_icons.find('.icon-preview').html('<i class="' + icon_display_value + '"></i>');
            at_customize_icons.find('.tm-icon-value').trigger('change');
        });

        customize_theme_controls.on('click', '.tm-customize-icons .icon-toggle ,.pt-customize-icons .icon-preview', function() {
            var icon_toggle = $(this),
                at_customize_icons = icon_toggle.closest( '.tm-customize-icons' ),
                icons_list_wrapper = at_customize_icons.find( '.icons-list-wrapper' ),
                dashicons = at_customize_icons.find( '.dashicons' );

            if ( icons_list_wrapper.is(':hidden') ) {
                icons_list_wrapper.slideDown();
                dashicons.removeClass('dashicons-arrow-down');
                dashicons.addClass('dashicons-arrow-up');
            } else {
                icons_list_wrapper.slideUp();
                dashicons.addClass('dashicons-arrow-down');
                dashicons.removeClass('dashicons-arrow-up');
            }

        });
        customize_theme_controls.on('keyup', '.tm-customize-icons .icon-search', function() {
            var text = $(this),
                value = this.value,
                at_customize_icons = text.closest( '.tm-customize-icons' ),
                icons_list_wrapper = at_customize_icons.find( '.icons-list-wrapper' );

            icons_list_wrapper.find('i').each(function () {
                if ($(this).attr('class').search(value) > -1) {
                    $(this).parent('.single-icon').show();
                } else {
                    $(this).parent('.single-icon').hide();

                }
            });
        });
    })

} )( jQuery );


/**
 * Alpha Color Picker JS
 *
 * This file includes several helper functions and the core control JS.
 */

/**
 * 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_control( alpha, $control, $alphaSlider, update_slider ) {
    var iris, colorPicker, color;

    iris = $control.data( 'a8cIris' );
    colorPicker = $control.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.
    $control.val( color );

    // 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.
    $control.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() );
}

/**
 * Initialization trigger.
 */
jQuery( document ).ready( function( $ ) {

    // Loop over each control and transform it into our color picker.
    $( '.alpha-color-control' ).each( function() {

        // Scope the vars.
        var $control, startingColor, paletteInput, showOpacity, defaultColor, palette,
            colorPickerOptions, $container, $alphaSlider, alphaVal, sliderOptions;

        // Store the control instance.
        $control = $( this );

        // Get a clean starting value for the option.
        startingColor = $control.val().replace( /\s+/g, '' );

        // Get some data off the control.
        paletteInput = $control.attr( 'data-palette' );
        showOpacity  = $control.attr( 'data-show-opacity' );
        defaultColor = $control.attr( 'data-default-color' );

        // Process the palette.
        if ( paletteInput.indexOf( '|' ) !== -1 ) {
            palette = paletteInput.split( '|' );
        } else if ( 'false' == paletteInput ) {
            palette = false;
        } else {
            palette = true;
        }

        // Set up the options that we'll pass to wpColorPicker().
        colorPickerOptions = {
            change: function( event, ui ) {
                var key, value, alpha, $transparency;

                key = $control.attr( 'data-customize-setting-link' );
                value = $control.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 );
                }

                // Send ajax request to wp.customize to trigger the Save action.
                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' ) );
            },
            palettes: palette // Use the passed in palette.
        };

        // Create the colorpicker.
        $control.wpColorPicker( colorPickerOptions );

        $container = $control.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_control( 0, $control, $alphaSlider, true );
        });
        $container.find( '.max-click-zone' ).on( 'click', function() {
            acp_update_alpha_value_on_color_control( 100, $control, $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 ) );
            }

            $control.wpColorPicker( 'color', color );
        });

        // Bind event handler for clicking on the 'Clear' button.
        $container.find( '.button.wp-picker-clear' ).on( 'click', function() {
            var key = $control.attr( 'data-customize-setting-link' );

            // The #fff color is delibrate here. This sets the color picker to white instead of the
            // defult black, which puts the color picker in a better place to visually represent empty.
            $control.wpColorPicker( 'color', '#ffffff' );

            // Set the actual option value to empty string.
            wp.customize( key, function( obj ) {
                obj.set( '' );
            });

            acp_update_alpha_value_on_alpha_slider( 100, $alphaSlider );
        });

        // 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.
        $control.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_control( alpha, $control, $alphaSlider, false );

            // Change value shown on slider handle.
            $( this ).find( '.ui-slider-handle' ).text( ui.value );
        });

    });
});