/* global Color */
/* global wp */
jQuery( document ).ready(
	function($) {
		'use strict';
		Color.prototype.toString = function(remove_alpha) {
			if (remove_alpha === 'no-alpha') {
				return this.toCSS( 'rgba', '1' ).replace( /\s+/g, '' );
			}
			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 '';
			}
			if (hex.length < 6) {
				for (var i = 6 - hex.length - 1; i >= 0; i--) {
					hex = '0' + hex;
				}
			}
			return '#' + hex;
		};

		$( '.azera-shop-color-control' ).each(
			function() {
				var $control = $( this ),
				value = $control.val().replace( /\s+/g, '' ),
				palette;
				// Manage Palettes
				var palette_input = Boolean( $control.attr( 'data-palette' ) );
				if ( palette_input === false) {
					palette = false;
				} else if ( palette_input === true) {
					palette = true;
				} else {
					palette = $control.attr( 'data-palette' ).split( ',' );
				}
				$control.wpColorPicker(
					{ // change some things with the color picker
						clear: function() {
						},
						change: function(event, ui) {
							// send ajax request to wp.customizer to enable Save & Publish button
							var _new_value = $control.val();
							var key = $control.attr( 'data-customize-setting-link' );
							wp.customize(
								key, function(obj) {
									obj.set( _new_value );
								}
							);
							// change the background color of our transparency container whenever a color is updated
							var $transparency = $control.parents( '.wp-picker-container:first' ).find( '.transparency' );
							// we only want to show the color at 100% alpha
							$transparency.css( 'backgroundColor', ui.color.toString( 'no-alpha' ) );
						},
						palettes: palette // remove the color palettes
					}
				);
				$( '<div class="azera-shop-alpha-container"><div class="slider-alpha"></div><div class="transparency"></div></div>' ).appendTo( $control.parents( '.wp-picker-container' ) );
				var $alpha_slider = $control.parents( '.wp-picker-container:first' ).find( '.slider-alpha' ), alpha_val;
				// if in format RGBA - grab A channel value
				if (value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ )) {
					alpha_val = parseFloat( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ )[1] ) * 100;
					alpha_val = parseInt( alpha_val );
				} else {
					alpha_val = 100;
				}
				$alpha_slider.slider(
					{
						slide: function(event, ui) {
							$( this ).find( '.ui-slider-handle' ).text( ui.value ); // show value on slider handle
							// send ajax request to wp.customizer to enable Save & Publish button
							var _new_value = $control.val();
							var key = $control.attr( 'data-customize-setting-link' );
							wp.customize(
								key, function(obj) {
									obj.set( _new_value );
								}
							);
						},
						create: function() {
							var v = $( this ).slider( 'value' );
							$( this ).find( '.ui-slider-handle' ).text( v );
						},
						value: alpha_val,
						range: 'max',
						step: 1,
						min: 1,
						max: 100
					}
				); // slider
				$alpha_slider.slider().on(
					'slidechange', function(event, ui) {
						var new_alpha_val = parseFloat( ui.value ),
						iris = $control.data( 'a8cIris' ),
						color_picker = $control.data( 'wpWpColorPicker' );
						iris._color._alpha = new_alpha_val / 100.0;
						$control.val( iris._color.toString() );
						color_picker.toggler.css(
							{
								backgroundColor: $control.val()
							}
						);
						// fix relationship between alpha slider and the 'side slider not updating.
						var get_val = $control.val();
						$( $control ).wpColorPicker( 'color', get_val );
					}
				);
			}
		); // each

	}
);