jQuery(document).ready(function($){
//slider-custom-control
// Set our slider defaults and initialise the slider
    $('.slider-custom-control').each(function(){
        var sliderValue = $(this).find('.customize-control-slider-value').val();
        var newSlider = $(this).find('.slider');
        var sliderdefaultvalue= parseFloat(newSlider.attr(' slider-reset-value'));
        var sliderMinValue = parseFloat(newSlider.attr('slider-min-value'));
        var sliderMaxValue = parseFloat(newSlider.attr('slider-max-value'));
        var sliderStepValue = parseFloat(newSlider.attr('slider-step-value'));

        newSlider.slider({
            reset:sliderdefaultvalue,
            value: sliderValue,
            min: sliderMinValue,
            max: sliderMaxValue,
            step: sliderStepValue,
            change: function(e,ui){
                // Important! When slider stops moving make sure to trigger change event so Customizer knows it has to save the field
                $(this).parent().find('.customize-control-slider-value').trigger('change');
          }
        });
    });

    // Change the value of the input field as the slider is moved
    $('.slider').on('slide', function(event, ui) {
        $(this).parent().find('.customize-control-slider-value').val(ui.value);
    });

    // Reset slider and input field back to the default value
    $('.slider-reset').on('click', function() {
        var resetValue = $(this).attr('slider-reset-value');
        $(this).parent().find('.customize-control-slider-value').val(resetValue);
        $(this).parent().find('.slider').slider('value', resetValue);
    });

    // Update slider if the input field loses focus as it's most likely changed
    $('.customize-control-slider-value').blur(function() {
        var resetValue = $(this).val();
        var slider = $(this).parent().find('.slider');
        var sliderMinValue = parseInt(slider.attr('slider-min-value'));
        var sliderMaxValue = parseInt(slider.attr('slider-max-value'));

        // Make sure our manual input value doesn't exceed the minimum & maxmium values
        if(resetValue < sliderMinValue) {
            resetValue = sliderMinValue;
            $(this).val(resetValue);
        }
        if(resetValue > sliderMaxValue) {
            resetValue = sliderMaxValue;
            $(this).val(resetValue);
        }
        $(this).parent().find('.slider').slider('value', resetValue);
    });

});
// sortable control
wp.customize.controlConstructor['air-conditioning-services-sortable'] = wp.customize.Control.extend({
    ready: function () {
        'use strict';
        var control = this;

        // Set the sortable container.
        control.sortableContainer = control.container.find('ul.sortable').first();

        // Init sortable.
        control.sortableContainer.sortable({
            // Update value when we stop sorting.
            stop: function () {
                control.updateValue();
            }
        }).disableSelection().find('li').each(function () {
            // Enable/disable options when we click on the eye icon.
            jQuery(this).find('i.visibility').click(function () {
                jQuery(this).toggleClass('dashicons-hidden').toggleClass('dashicons-visibility').parents('li:eq(0)').toggleClass('invisible');
                control.updateValue();
            });
        }).click(function () {
            // Update value on click.
            control.updateValue();
        });
    },

    /**
     * Updates the sorting list
     */
    updateValue: function () {
        'use strict';
        var control = this,
            newValue = [];

        this.sortableContainer.find('li').each(function () {
            if (!jQuery(this).is('.invisible')) {
                newValue.push(jQuery(this).data('value'));
            }
        });

        control.setting.set(newValue);

        // Toggle classes for hidden items.
        this.sortableContainer.find('li').each(function () {
            if (jQuery(this).is('.invisible')) {
                jQuery(this).find('i.visibility').removeClass('dashicons-visibility').addClass('dashicons-hidden');
            } else {
                jQuery(this).find('i.visibility').removeClass('dashicons-hidden').addClass('dashicons-visibility');
            }
        });
    }
});