!(function ($) {
  "use strict";
  wp.customize.controlConstructor["bloglo-design-options"] =
    wp.customize.Control.extend({
      ready: function () {
        var control = this,
          setting = control.setting.get(),
          popup_content = control.container.find(".popup-content");
        control.container.find(".bloglo-range-wrapper").each(function () {
          var $this = $(this);
          $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();
            },
          });
        }),
          control.container
            .find("input.bloglo-range-input")
            .on("change keyup", function () {
              control.autocorrect_range_input_number($(this), 1e3, undefined);
            })
            .on("focusout", function () {
              control.autocorrect_range_input_number($(this), 0, undefined);
            }),
          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"),
          control.container.on(
            "color-updated",
            ".bloglo-color-control",
            function () {
              control.update_value();
            }
          ),
          control.container.on("change", ".bloglo-select-wrapper", function () {
            control.update_value();
          }),
          control.container.find(".popup-link").on("click", function () {
            popup_content.toggleClass("hidden"),
              $(this).toggleClass("active"),
              $(this).siblings(".reset-defaults").toggleClass("active"),
              $("body").on("click", outside_click_close);
          });
        var outside_click_close = function (e) {
          $(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));
        };
        control.container.find(".background-image-advanced").hide(),
          control.container.on(
            "change",
            ".background-repeat select",
            function () {
              control.update_value();
            }
          ),
          control.container.on(
            "change click",
            ".background-size input",
            function () {
              control.update_value();
            }
          ),
          control.container.on(
            "change click",
            ".background-attachment input",
            function () {
              control.update_value();
            }
          ),
          control.container.on(
            "click",
            ".background-image-upload-button",
            function (e) {
              $("body").off("click", outside_click_close);
              var image = wp
                .media({
                  multiple: !1,
                  title: control.params.l10n.image.select_image,
                  button: { text: control.params.l10n.image.use_image },
                })
                .open()
                .on("select", function () {
                  var previewImage,
                    imageUrl,
                    imageID,
                    preview,
                    removeButton,
                    uploadedImageJSON = image
                      .state()
                      .get("selection")
                      .first()
                      .toJSON();
                  (previewImage = _.isUndefined(uploadedImageJSON.sizes)
                    ? uploadedImageJSON.url
                    : _.isUndefined(uploadedImageJSON.sizes.medium)
                    ? _.isUndefined(uploadedImageJSON.sizes.thumbnail)
                      ? _.isUndefined(uploadedImageJSON.sizes.full)
                        ? uploadedImageJSON.url
                        : uploadedImageJSON.sizes.full.url
                      : uploadedImageJSON.sizes.thumbnail.url
                    : uploadedImageJSON.sizes.medium.url),
                    (imageUrl = uploadedImageJSON.url),
                    (imageID = uploadedImageJSON.id),
                    uploadedImageJSON.width,
                    uploadedImageJSON.height,
                    "" !== 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"
                    )),
                    preview.length &&
                      preview
                        .removeClass()
                        .addClass("thumbnail thumbnail-image")
                        .html('<img src="' + previewImage + '" alt="" />'),
                    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"
                )),
                control.container.find(".background-image-advanced").hide(),
                control.container
                  .find(".advanced-settings")
                  .addClass("hidden")
                  .removeClass("up"),
                preview.length &&
                  preview
                    .removeClass()
                    .addClass("placeholder")
                    .html(control.params.l10n.image.placeholder),
                removeButton.length && removeButton.hide();
            }
          ),
          control.container.on("click", ".advanced-settings", function (e) {
            $(this).toggleClass("up"),
              control.container.find(".background-image-advanced").toggle();
          }),
          control.container.on("click", ".bloglo-spacing-linked", function () {
            var $this = $(this);
            $this.closest("ul").find(".spacing-input").removeClass("linked"),
              $this.parent(".spacing-link-values").removeClass("unlinked");
          }),
          control.container.on(
            "click",
            ".bloglo-spacing-unlinked",
            function () {
              var $this = $(this);
              $this.closest("ul").find(".spacing-input").addClass("linked"),
                $this.parent(".spacing-link-values").addClass("unlinked");
            }
          ),
          control.container.on("input", ".linked input", function () {
            var $val = $(this).val();
            $(this)
              .closest(".spacing-input")
              .siblings(".linked")
              .find("input")
              .val($val)
              .change();
          }),
          control.container.on(
            "change input",
            ".spacing-input input",
            function () {
              control.update_value();
            }
          ),
          control.container.find(".reset-defaults").on("click", function () {
            var item, option_id;
            control.container.find("[data-option]").each(function () {
              (item = $(this)),
                "background-size" === (option_id = item.data("option")) ||
                "background-attachment" === option_id
                  ? (item.prop("checked", !1),
                    option_id in control.params.default &&
                      control.params.default[option_id] === item.val() &&
                      item.prop("checked", !0))
                  : item
                      .val(control.params.default[item.data("option")])
                      .trigger("change");
            }),
              control.container
                .find(".background-image-upload-remove-button")
                .click(),
              control.update_value();
          });
      },
      update_value: function () {
        var option,
          value = {};
        this.container.find("[data-option]").each(function () {
          (option = $(this).data("option")),
            (value[option] =
              "background-size" === option || "background-attachment" === option
                ? $(this).is(":checked")
                  ? $(this).val()
                  : value[option]
                : $(this).val());
        }),
          this.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(".bloglo-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))
              return (
                range_input.val(reset), void range.val(reset).trigger("change")
              );
            step >= 1 &&
              value % 1 != 0 &&
              ((value = Math.round(value)),
              range_input.val(value),
              range.val(value).trigger("change")),
              value > max &&
                (range_input.val(max), range.val(max).trigger("change")),
              value < min &&
                (range_input.val(min), range.val(min).trigger("change"));
          }, timeout)),
          range.val(value).trigger("change"),
          this.update_value();
      },
    });
})(jQuery);