;
(function ($) {

   "use strict";

   wp.customize.controlConstructor['blogsy-design-options'] = wp.customize.Control.extend({

      ready: function () {

         'use strict';

         var control = this,
            setting = control.setting.get(),
            range,
            range_input,
            value,
            blogsy_range_input_number_timeout,
            popup_content = control.container.find('.popup-content');

         // Range controls.
         control.container.find('.blogsy-range-wrapper').each(
            function () {
               var $this = $(this);
               if (!_.isUndefined($this.rangeControl)) {
                  $this.rangeControl({
                     id: control.params.id + '-' + $this.data('option-id'),
                     option: $this.data('option-id'),
                     value: setting[$this.data('options-id')],
                     responsive: control.params.responsive,
                     change: function () {
                        control.update_value();
                     }
                  });
               }
            }
         );

         // Change the text value
         control.container.find('input.blogsy-range-input').on(
            'change keyup',
            function () {
               control.autocorrect_range_input_number($(this), 1000, blogsy_range_input_number_timeout);
            }
         ).on(
            'focusout',
            function () {
               control.autocorrect_range_input_number($(this), 0, blogsy_range_input_number_timeout);
            }
         );

         // Visibility deps.
         control.container.on(
            'change',
            '[data-option="background-type"], [data-option="gradient-type"]',
            function () {
               var field = $(this).attr('data-option');
               control.container.find('[data-dep-field="' + field + '"]').hide();
               control.container.find('[data-dep-field="' + field + '"][data-dep-value="' + $(this).val() + '"]').show();
            }
         );

         control.container.find('[data-option="background-type"], [data-option="gradient-type"]').trigger('change');

         // Changes.
         control.container.on(
            'color-updated',
            '.blogsy-color-control',
            function () {
               control.update_value();
            }
         );

         control.container.on(
            'change',
            '.blogsy-select-wrapper',
            function () {
               control.update_value();
            }
         );

         // Box shadow type radio buttons
         control.container.on(
            'change',
            'input[data-option="box-shadow-type"]',
            function () {
               control.update_value();
            }
         ); // Advanced panel.
         control.container.find('.popup-link').on(
            'click',
            function () {
               popup_content.toggleClass('hidden');
               $(this).toggleClass('active');
               $(this).siblings('.reset-defaults').toggleClass('active');

               // Close the panel on outside click.
               $('body').on('click', outside_click_close);
            }
         );

         var outside_click_close = function (e) {

            if (!$(e.target).closest('.customize-save-button-wrapper').length &&
               !control.container.has($(e.target).closest('.popup-link')).length &&
               !control.container.has($(e.target).closest('.popup-content')).length &&
               !popup_content.hasClass('hidden') &&
               !$(e.target).closest('.reset-defaults').length) {
               popup_content.addClass('hidden');
               control.container.find('.popup-link').removeClass('active');
               control.container.find('.reset-defaults').removeClass('active');
               $('body').off('click', outside_click_close);
            }
         };

         // Hide unnecessary controls.
         control.container.find('.background-image-advanced').hide();

         // Background-Repeat.
         control.container.on(
            'change',
            '.background-repeat select',
            function () {
               control.update_value();
            }
         );

         // Background-Size.
         control.container.on(
            'change click',
            '.background-size input',
            function () {
               control.update_value();
            }
         );

         // Background-Attachment.
         control.container.on(
            'change click',
            '.background-attachment input',
            function () {
               control.update_value();
            }
         );

         // Background-Image.
         control.container.on(
            'click',
            '.background-image-upload-button',
            function (e) {

               $('body').off('click', outside_click_close);

               var image = wp.media({
                  multiple: false,
                  title: control.params.l10n.image.select_image,
                  button: {
                     text: control.params.l10n.image.use_image
                  },
               }).open().on(
                  'select',
                  function () {

                     // This will return the selected image from the Media Uploader, the result is an object.
                     var uploadedImage = image.state().get('selection').first(),
                        uploadedImageJSON = uploadedImage.toJSON(),
                        previewImage,
                        imageUrl,
                        imageID,
                        imageWidth,
                        imageHeight,
                        preview,
                        removeButton;

                     if (!_.isUndefined(uploadedImageJSON.sizes)) {
                        if (!_.isUndefined(uploadedImageJSON.sizes.medium)) {
                           previewImage = uploadedImageJSON.sizes.medium.url;
                        } else if (!_.isUndefined(uploadedImageJSON.sizes.thumbnail)) {
                           previewImage = uploadedImageJSON.sizes.thumbnail.url;
                        } else if (!_.isUndefined(uploadedImageJSON.sizes.full)) {
                           previewImage = uploadedImageJSON.sizes.full.url;
                        } else {
                           previewImage = uploadedImageJSON.url;
                        }
                     } else {
                        previewImage = uploadedImageJSON.url;
                     }

                     imageUrl = uploadedImageJSON.url;
                     imageID = uploadedImageJSON.id;
                     imageWidth = uploadedImageJSON.width;
                     imageHeight = uploadedImageJSON.height;

                     // Show extra controls if the value has an image.
                     if ('' !== imageUrl) {
                        control.container.find('.background-image-advanced').show();
                        control.container.find('.advanced-settings').removeClass('hidden').addClass('up');
                     }

                     control.container.find('[data-option="background-image"]').val(imageUrl);
                     control.container.find('[data-option="background-image-id"]').val(imageID);

                     control.update_value();

                     preview = control.container.find('.placeholder, .thumbnail');
                     removeButton = control.container.find('.background-image-upload-remove-button');

                     if (preview.length) {
                        preview.removeClass().addClass('thumbnail thumbnail-image').html('<img src="' + previewImage + '" alt="" />');
                     }
                     if (removeButton.length) {
                        removeButton.show();
                     }

                     setTimeout(
                        function () {
                           $('body').on('click', outside_click_close);
                        },
                        100
                     );
                  }
               );

               e.preventDefault();
            }
         );

         control.container.on(
            'click',
            '.background-image-upload-remove-button',
            function (e) {

               var preview,
                  removeButton;

               e.preventDefault();

               control.container.find('[data-option="background-image"]').val('');
               control.container.find('[data-option="background-image-id"]').val('');

               control.update_value();

               preview = control.container.find('.placeholder, .thumbnail');
               removeButton = control.container.find('.background-image-upload-remove-button');

               // Hide unnecessary controls.
               control.container.find('.background-image-advanced').hide();
               control.container.find('.advanced-settings').addClass('hidden').removeClass('up');

               if (preview.length) {
                  preview.removeClass().addClass('placeholder').html(control.params.l10n.image.placeholder);
               }

               if (removeButton.length) {
                  removeButton.hide();
               }
            }
         );

         control.container.on(
            'click',
            '.advanced-settings',
            function (e) {
               $(this).toggleClass('up');
               control.container.find('.background-image-advanced').toggle();
            }
         );

         // Spacing field.

         // Linked button
         control.container.on(
            'click',
            '.blogsy-spacing-linked',
            function () {

               // Set up variables
               var $this = $(this);

               // Remove linked class
               $this.closest('ul').find('.spacing-input').removeClass('linked');

               // Remove class
               $this.parent('.spacing-link-values').removeClass('unlinked');
            }
         );

         // Unlinked button
         control.container.on(
            'click',
            '.blogsy-spacing-unlinked',
            function () {

               // Set up variables
               var $this = $(this);

               // Remove linked class
               $this.closest('ul').find('.spacing-input').addClass('linked');

               // Remove class
               $this.parent('.spacing-link-values').addClass('unlinked');
            }
         );

         // Values linked inputs
         control.container.on(
            'input',
            '.linked input',
            function () {
               var $val = $(this).val();
               $(this).closest('.spacing-input').siblings('.linked').find('input').val($val).change();
            }
         );

         // Store new inputs
         control.container.on(
            'change input',
            '.spacing-input input',
            function () {
               control.update_value();
            }
         );

         // Reset default.
         control.container.find('.reset-defaults').on(
            'click',
            function () {

               var item, option_id;

               control.container.find('[data-option]').each(
                  function () {
                     item = $(this);
                     option_id = item.data('option');

                     if ('background-size' === option_id || 'background-attachment' === option_id || 'type' === option_id) {

                        item.prop('checked', false);

                        if ((option_id in control.params.default) && control.params.default[option_id] === item.val()) {
                           item.prop('checked', true);
                        }

                     } else {
                        item.val(control.params.default[item.data('option')]).trigger('change');
                     }
                  }
               );

               control.container.find('.background-image-upload-remove-button').click();

               control.update_value();
            }
         );
      },

      // Update value.
      update_value: function () {

         var self = this,
            value = {},
            option;

         self.container.find('[data-option]').each(
            function () {
               option = $(this).data('option');

               if ('background-size' === option || 'background-attachment' === option || 'type' === option) {
                  value[option] = $(this).is(':checked') ? $(this).val() : value[option];
               } else {
                  value[option] = $(this).val();
               }
            }
         );

         self.setting.set(value);
      },

      autocorrect_range_input_number: function (input_number, timeout) {

         var range_input = input_number,
            range = range_input.parent().find('input[type="range"]'),
            value = parseFloat(range_input.val()),
            reset = parseFloat(range.find('.blogsy-reset-range').attr('data-reset_value')),
            step = parseFloat(range_input.attr('step')),
            min = parseFloat(range_input.attr('min')),
            max = parseFloat(range_input.attr('max'));

         clearTimeout(timeout);

         timeout = setTimeout(
            function () {

               if (isNaN(value)) {
                  range_input.val(reset);
                  range.val(reset).trigger('change');
                  return;
               }

               if (step >= 1 && value % 1 !== 0) {
                  value = Math.round(value);
                  range_input.val(value);
                  range.val(value).trigger('change');
               }

               if (value > max) {
                  range_input.val(max);
                  range.val(max).trigger('change');
               }

               if (value < min) {
                  range_input.val(min);
                  range.val(min).trigger('change');
               }

            },
            timeout
         );

         range.val(value).trigger('change');
         this.update_value();
      }
   });

})(jQuery);