(function ($) {
  wp.customize.controlConstructor["bloglo-color"] = wp.customize.Control.extend(
    {
      ready: function () {
        "use strict";

        var control = this,
          color = control.setting.get();

        // Changes.
        control.container.on(
          "color-updated",
          ".bloglo-color-control",
          function () {
            value = $(this).val();

            if (value !== color) {
              control.setting.set(value);
              color = value;
            }
          }
        );
      },
    }
  );

  /**
   * 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 bloglo_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 bloglo_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) {
      blogloupdate_alpha_value_on_alpha_slider(alpha, $alphaSlider);
    }

    // Trigger change.
    $control.trigger("color-updated");
  }

  /**
   * Update the slider handle position and label.
   */
  function bloglo_update_alpha_value_on_alpha_slider(alpha, $alphaSlider) {
    $alphaSlider.slider("value", alpha);
    $alphaSlider.find(".ui-slider-handle").text(alpha.toString());
  }

  /**
   * Initialization trigger.
   */

  $(document).ready(function ($) {
    // Loop over each control and transform it into our color picker.
    $(".bloglo-color-control").each(function () {
      // Scope the vars.
      var $control,
        startingColor,
        showOpacity,
        defaultColor,
        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.
      showOpacity = $control.attr("data-show-opacity");
      defaultColor = $control.attr("data-default-color");

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

          value = ui.color.toString();
          $control.val(value);

          // Set the opacity value on the slider handle when the default color button is clicked.
          if (defaultColor == value) {
            alpha = bloglo_get_alpha_value_from_color(value);
            $alphaSlider.find(".ui-slider-handle").text(alpha);
          }

          // Always show the background color of the opacity slider at 100% opacity.
          $transparency = $container.find(".transparency");
          $transparency.css("background-color", ui.color.toString("no-alpha"));

          $control.trigger("color-updated");
        },
        palettes: bloglo_customizer_localized.color_palette, // Use the passed in palette.
      };

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

      $container = $control.parents(".wp-picker-container:first");

      // Insert our opacity slider.
      if ("true" == showOpacity) {
        $(
          '<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 = bloglo_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 () {
        bloglo_update_alpha_value_on_color_control(
          0,
          $control,
          $alphaSlider,
          true
        );
      });

      $container.find(".max-click-zone").on("click", function () {
        bloglo_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 (e) {
        e.preventDefault();

        var color, alpha;

        color = $(this).css("background-color");
        alpha = bloglo_get_alpha_value_from_color(color);

        bloglo_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.val(color);
        $control.wpColorPicker("color", color);
      });

      // Bind event handler for clicking on the 'Clear' button.
      $container.find(".button.wp-picker-clear").on("click", function (e) {
        e.preventDefault();

        $control.val("");

        bloglo_update_alpha_value_on_alpha_slider(100, $alphaSlider);

        $control.trigger("color-updated");
      });

      // Bind event handler for clicking on the 'Default' button.
      $container.find(".button.wp-picker-default").on("click", function (e) {
        e.preventDefault();

        var alpha = bloglo_get_alpha_value_from_color(defaultColor);

        bloglo_update_alpha_value_on_alpha_slider(alpha, $alphaSlider);
      });

      // Bind event handler for typing or pasting into the input.
      $control.on("input", function (e) {
        e.preventDefault();

        var value = $(this).val();
        var alpha = bloglo_get_alpha_value_from_color(value);

        bloglo_update_alpha_value_on_alpha_slider(alpha, $alphaSlider);

        $control.trigger("color-updated");
      });

      // Update all the things when the slider is interacted with.
      $alphaSlider.slider().on("slide", function (event, ui) {
        var alpha = parseFloat(ui.value) / 100.0;

        bloglo_update_alpha_value_on_color_control(
          alpha,
          $control,
          $alphaSlider,
          false
        );

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

      // Fix Safari issue on input click
      $(".iris-picker, .bloglo-color-control").on("click", function (e) {
        e.preventDefault();
      });
    });
  });
})(jQuery);