;(function ( $ ) {
  'use strict';

  if( typeof Color.fn.toString !== undefined ) {

    Color.fn.toString = function () {

      // check for alpha
      if ( this._alpha < 1 ) {
        return this.toCSS('rgba', this._alpha).replace(/\s+/g, '');
      }

      var hex = parseInt( this._color, 10 ).toString( 16 );

      if ( this.error ) { return ''; }

      // maybe left pad it
      if ( hex.length < 6 ) {
        for (var i = 6 - hex.length - 1; i >= 0; i--) {
          hex = '0' + hex;
        }
      }

      return '#' + hex;

    };

  }

  $.om_ParseColorValue = function( val ) {

    var value = val.replace(/\s+/g, ''),
        alpha = ( value.indexOf('rgba') !== -1 ) ? parseFloat( value.replace(/^.*,(.+)\)/, '$1') * 100 ) : 100,
        rgba  = ( alpha < 100 ) ? true : false;

    return { value: value, alpha: alpha, rgba: rgba };

  };

  $.fn.om_wpColorPickerAlpha = function() {

    return this.each(function() {

      var $this = $(this);

      // parse value
      var picker = $.om_ParseColorValue( $this.val() );

      // wpColorPicker core
      $this.wpColorPicker({

        // wpColorPicker: clear
        clear: function() {
          $this.trigger('keyup');
        },

        // wpColorPicker: change
        change: function( event, ui ) {

          var ui_color_value = ui.color.toString();

          $this.closest('.wp-picker-container').find('.om-alpha-slider-offset').css('background-color', ui_color_value);
          $this.val(ui_color_value).trigger('change');

        },

        // wpColorPicker: create
        create: function() {

          // set variables for alpha slider
          var a8cIris       = $this.data('a8cIris'),
              $container    = $this.closest('.wp-picker-container'),

              // appending alpha wrapper
              $alpha_wrap   = $('<div class="om-alpha-wrap">' +
                                '<div class="om-alpha-slider"></div>' +
                                '<div class="om-alpha-slider-offset"></div>' +
                                '<div class="om-alpha-text"></div>' +
                                '</div>').appendTo( $container.find('.wp-picker-holder') ),

              $alpha_slider = $alpha_wrap.find('.om-alpha-slider'),
              $alpha_text   = $alpha_wrap.find('.om-alpha-text'),
              $alpha_offset = $alpha_wrap.find('.om-alpha-slider-offset');

          // alpha slider
          $alpha_slider.slider({

            // slider: slide
            slide: function( event, ui ) {

              var slide_value = parseFloat( ui.value / 100 );

              // update iris data alpha && wpColorPicker color option && alpha text
              a8cIris._color._alpha = slide_value;
              $this.wpColorPicker( 'color', a8cIris._color.toString() );
              $alpha_text.text( Math.round( slide_value * 100 ) + '%' );

            },

            // slider: create
            create: function() {

              var slide_value = parseFloat( picker.alpha / 100 );

              // update alpha text && checkerboard background color
              $alpha_text.text(Math.round( slide_value * 100 ) + '%');
              $alpha_offset.css('background-color', picker.value);

              // wpColorPicker clear for update iris data alpha && alpha text && slider color option
              $container.on('click', '.wp-picker-clear', function() {

                a8cIris._color._alpha = 1;
                $alpha_text.text('100%');
                $alpha_slider.slider('option', 'value', 100).trigger('slide');

              });

              // wpColorPicker default button for update iris data alpha && alpha text && slider color option
              $container.on('click', '.wp-picker-default', function() {

                var default_picker = $.om_ParseColorValue( $this.data('default-color') ),
                    default_value  = parseFloat( default_picker.alpha / 100 );

                a8cIris._color._alpha = default_value;
                $alpha_text.text(Math.round( default_value * 100 ) + '%');
                $alpha_slider.slider('option', 'value', default_picker.alpha).trigger('slide');

              });

              // show alpha wrapper on click color picker button
              $container.on('click', '.wp-color-result', function() {
                $alpha_wrap.toggle();
              });

              // hide alpha wrapper on click body
              $('body').on( 'click.wpcolorpicker', function() {
                $alpha_wrap.hide();
              });

            },

            // slider: options
            value: picker.alpha,
            step: 1,
            min: 1,
            max: 100

          });
        }

      });


    });

  };

})( jQuery );