/**

 * The functions necessary for editing images.

 *

 * @since 2.9.0

 * @output wp-admin/js/image-edit.js

 */

 /* global ajaxurl, confirm */

(function($) {

	var __ = wp.i18n.__;

	/**

	 * Contains all the methods to initialize and control the image editor.

	 *

	 * @namespace imageEdit

	 */

	var imageEdit = window.imageEdit = {

	iasapi : {},

	hold : {},

	postid : '',

	_view : false,

	/**

	 * Enable crop tool.

	 */

	toggleCropTool: function( postid, nonce, cropButton ) {

		var img = $( '#image-preview-' + postid ),

			selection = this.iasapi.getSelection();

		imageEdit.toggleControls( cropButton );

		var $el = $( cropButton );

		var state = ( $el.attr( 'aria-expanded' ) === 'true' ) ? 'true' : 'false';

		// Crop tools have been closed.

		if ( 'false' === state ) {

			// Cancel selection, but do not unset inputs.

			this.iasapi.cancelSelection();

			imageEdit.setDisabled($('.imgedit-crop-clear'), 0);

		} else {

			imageEdit.setDisabled($('.imgedit-crop-clear'), 1);

			// Get values from inputs to restore previous selection.

			var startX = ( $( '#imgedit-start-x-' + postid ).val() ) ? $('#imgedit-start-x-' + postid).val() : 0;

			var startY = ( $( '#imgedit-start-y-' + postid ).val() ) ? $('#imgedit-start-y-' + postid).val() : 0;

			var width = ( $( '#imgedit-sel-width-' + postid ).val() ) ? $('#imgedit-sel-width-' + postid).val() : img.innerWidth();

			var height = ( $( '#imgedit-sel-height-' + postid ).val() ) ? $('#imgedit-sel-height-' + postid).val() : img.innerHeight();

			// Ensure selection is available, otherwise reset to full image.

			if ( isNaN( selection.x1 ) ) {

				this.setCropSelection( postid, { 'x1': startX, 'y1': startY, 'x2': width, 'y2': height, 'width': width, 'height': height } );

				selection = this.iasapi.getSelection();

			}

			// If we don't already have a selection, select the entire image.

			if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {

				this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );

				this.iasapi.setOptions( { show: true } );

				this.iasapi.update();

			} else {

				this.iasapi.setSelection( startX, startY, width, height, true );

				this.iasapi.setOptions( { show: true } );

				this.iasapi.update();

			}

		}

	},

	/**

	 * Handle crop tool clicks.

	 */

	handleCropToolClick: function( postid, nonce, cropButton ) {

		if ( cropButton.classList.contains( 'imgedit-crop-clear' ) ) {

			this.iasapi.cancelSelection();

			imageEdit.setDisabled($('.imgedit-crop-apply'), 0);

			$('#imgedit-sel-width-' + postid).val('');

			$('#imgedit-sel-height-' + postid).val('');

			$('#imgedit-start-x-' + postid).val('0');

			$('#imgedit-start-y-' + postid).val('0');

			$('#imgedit-selection-' + postid).val('');

		} else {

			// Otherwise, perform the crop.

			imageEdit.crop( postid, nonce , cropButton );

		}

	},

	/**

	 * Converts a value to an integer.

	 *

	 * @since 2.9.0

	 *

	 * @memberof imageEdit

	 *

	 * @param {number} f The float value that should be converted.

	 *

	 * @return {number} The integer representation from the float value.

	 */

	intval : function(f) {

		/*

		 * Bitwise OR operator: one of the obscure ways to truncate floating point figures,

		 * worth reminding JavaScript doesn't have a distinct "integer" type.

		 */

		return f | 0;

	},

	/**

	 * Adds the disabled attribute and class to a single form element or a field set.

	 *

	 * @since 2.9.0

	 *

	 * @memberof imageEdit

	 *

	 * @param {jQuery}         el The element that should be modified.

	 * @param {boolean|number} s  The state for the element. If set to true

	 *                            the element is disabled,

	 *                            otherwise the element is enabled.

	 *                            The function is sometimes called with a 0 or 1

	 *                            instead of true or false.

	 *

	 * @return {void}

	 */

	setDisabled : function( el, s ) {

		/*

		 * `el` can be a single form element or a fieldset. Before #28864, the disabled state on

		 * some text fields  was handled targeting $('input', el). Now we need to handle the

		 * disabled state on buttons too so we can just target `el` regardless if it's a single

		 * element or a fieldset because when a fieldset is disabled, its descendants are disabled too.

		 */

		if ( s ) {

			el.removeClass( 'disabled' ).prop( 'disabled', false );

		} else {

			el.addClass( 'disabled' ).prop( 'disabled', true );

		}

	},

	/**

	 * Initializes the image editor.

	 *

	 * @since 2.9.0

	 *

	 * @memberof imageEdit

	 *

	 * @param {number} postid The post ID.

	 *

	 * @return {void}

	 */

	init : function(postid) {

		if ( t.postid !== postid && old.length ) {

			t.close(t.postid);

		}

		t.hold.sizer = parseFloat( $('#imgedit-sizer-' + postid).val() );

		t.postid = postid;

		$('#imgedit-response-' + postid).empty();

		$('#imgedit-panel-' + postid).on( 'keypress', function(e) {

			var nonce = $( '#imgedit-nonce-' + postid ).val();

			if ( e.which === 26 && e.ctrlKey ) {

				imageEdit.undo( postid, nonce );

			}

			if ( e.which === 25 && e.ctrlKey ) {

				imageEdit.redo( postid, nonce );

			}

		});

		$('#imgedit-panel-' + postid).on( 'keypress', 'input[type="text"]', function(e) {

			var k = e.keyCode;

			// Key codes 37 through 40 are the arrow keys.

			if ( 36 < k && k < 41 ) {

				$(this).trigger( 'blur' );

			}

			// The key code 13 is the Enter key.

			if ( 13 === k ) {

				e.preventDefault();

				e.stopPropagation();

				return false;

			}

		});

		$( document ).on( 'image-editor-ui-ready', this.focusManager );

	},

	/**

	 * Toggles the wait/load icon in the editor.

	 *

	 * @since 2.9.0

	 * @since 5.5.0 Added the triggerUIReady parameter.

	 *

	 * @memberof imageEdit

	 *

	 * @param {number}  postid         The post ID.

	 * @param {number}  toggle         Is 0 or 1, fades the icon in when 1 and out when 0.

	 * @param {boolean} triggerUIReady Whether to trigger a custom event when the UI is ready. Default false.

	 *

	 * @return {void}

	 */

	toggleEditor: function( postid, toggle, triggerUIReady ) {

		var wait = $('#imgedit-wait-' + postid);

		if ( toggle ) {

			wait.fadeIn( 'fast' );

		} else {

			wait.fadeOut( 'fast', function() {

				if ( triggerUIReady ) {

					$( document ).trigger( 'image-editor-ui-ready' );

				}

			} );

		}

	},

	/**

	 * Shows or hides image menu popup.

	 *

	 * @since 6.3.0

	 *

	 * @memberof imageEdit

	 *

	 * @param {HTMLElement} el The activated control element.

	 *

	 * @return {boolean} Always returns false.

	 */

	togglePopup : function(el) {

		var $el = $( el );

		var $targetEl = $( el ).attr( 'aria-controls' );

		var $target = $( '#' + $targetEl );

		$el

			.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );

		// Open menu and set z-index to appear above image crop area if it is enabled.

		$target

			.toggleClass( 'imgedit-popup-menu-open' ).slideToggle( 'fast' ).css( { 'z-index' : 200000 } );

		// Move focus to first item in menu when opening menu.

		if ( 'true' === $el.attr( 'aria-expanded' ) ) {

			$target.find( 'button' ).first().trigger( 'focus' );

		}

		return false;

	},

	/**

	 * Observes whether the popup should remain open based on focus position.

	 *

	 * @since 6.4.0

	 *

	 * @memberof imageEdit

	 *

	 * @param {HTMLElement} el The activated control element.

	 *

	 * @return {boolean} Always returns false.

	 */

	monitorPopup : function() {

		var $parent = document.querySelector( '.imgedit-rotate-menu-container' );

		var $toggle = document.querySelector( '.imgedit-rotate-menu-container .imgedit-rotate' );

		setTimeout( function() {

			var $focused = document.activeElement;

			var $contains = $parent.contains( $focused );

			// If $focused is defined and not inside the menu container, close the popup.

			if ( $focused && ! $contains ) {

				if ( 'true' === $toggle.getAttribute( 'aria-expanded' ) ) {

					imageEdit.togglePopup( $toggle );

				}

			}

		}, 100 );

		return false;

	},

	/**

	 * Navigate popup menu by arrow keys.

	 *

	 * @since 6.3.0

	 *

	 * @memberof imageEdit

	 *

	 * @param {HTMLElement} el The current element.

	 *

	 * @return {boolean} Always returns false.

	 */

		var $el = $( el );

		var $collection = $( el ).parent( '.imgedit-popup-menu' ).find( 'button' );

		var $index = $collection.index( $el );

		var $prev = $index - 1;

		var $next = $index + 1;

		var $last = $collection.length;

		if ( $prev < 0 ) {

			$prev = $last - 1;

		}

		if ( $next === $last ) {

			$next = 0;

		}

		if ( event.keyCode === 40 ) {

		} else if ( event.keyCode === 38 ) {

		}

			event.preventDefault();

		}

		return false;

	},

	/**

	 * Close popup menu and reset focus on feature activation.

	 *

	 * @since 6.3.0

	 *

	 * @memberof imageEdit

	 *

	 * @param {HTMLElement} el The current element.

	 *

	 * @return {boolean} Always returns false.

	 */

	closePopup : function(el) {

		var $parent = $(el).parent( '.imgedit-popup-menu' );

		var $controlledID = $parent.attr( 'id' );

		var $target = $( 'button[aria-controls="' + $controlledID + '"]' );