/**

 * @output wp-admin/js/widgets.js

 */

/* global ajaxurl, isRtl, wpWidgets */

(function($) {

	var $document = $( document );

window.wpWidgets = {

	/**

	 * A closed Sidebar that gets a Widget dragged over it.

	 *

	 * @var {element|null}

	 */

	hoveredSidebar: null,

	/**

	 * Lookup of which widgets have had change events triggered.

	 *

	 * @var {object}

	 */

	dirtyWidgets: {},

	init : function() {

		var rem, the_id,

			self = this,

			chooser = $('.widgets-chooser'),

			selectSidebar = chooser.find('.widgets-chooser-sidebars'),

			sidebars = $('div.widgets-sortables'),

			isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );

		// Handle the widgets containers in the right column.

		$( '#widgets-right .sidebar-name' )

			/*

			 * Toggle the widgets containers when clicked and update the toggle

			 * button `aria-expanded` attribute value.

			 */

			.on( 'click', function() {

				var $this = $( this ),

					$wrap = $this.closest( '.widgets-holder-wrap '),

					$toggle = $this.find( '.handlediv' );

				if ( $wrap.hasClass( 'closed' ) ) {

					$wrap.removeClass( 'closed' );

					$toggle.attr( 'aria-expanded', 'true' );

					// Refresh the jQuery UI sortable items.

					$this.parent().sortable( 'refresh' );

				} else {

					$wrap.addClass( 'closed' );

					$toggle.attr( 'aria-expanded', 'false' );

				}

				// Update the admin menu "sticky" state.

				$document.triggerHandler( 'wp-pin-menu' );

			})

			/*

			 * Set the initial `aria-expanded` attribute value on the widgets

			 * containers toggle button. The first one is expanded by default.

			 */

			.find( '.handlediv' ).each( function( index ) {

				if ( 0 === index ) {

					// jQuery equivalent of `continue` within an `each()` loop.

					return;

				}

				$( this ).attr( 'aria-expanded', 'false' );

			});

		// Show AYS dialog when there are unsaved widget changes.

		$( window ).on( 'beforeunload.widgets', function( event ) {

			var dirtyWidgetIds = [], unsavedWidgetsElements;

			$.each( self.dirtyWidgets, function( widgetId, dirty ) {

				if ( dirty ) {

					dirtyWidgetIds.push( widgetId );

				}

			});

			if ( 0 !== dirtyWidgetIds.length ) {

				unsavedWidgetsElements = $( '#widgets-right' ).find( '.widget' ).filter( function() {

					return -1 !== dirtyWidgetIds.indexOf( $( this ).prop( 'id' ).replace( /^widget-\d+_/, '' ) );

				});

				unsavedWidgetsElements.each( function() {

					if ( ! $( this ).hasClass( 'open' ) ) {

						$( this ).find( '.widget-title-action:first' ).trigger( 'click' );

					}

				});

				// Bring the first unsaved widget into view and focus on the first tabbable field.

				unsavedWidgetsElements.first().each( function() {

					if ( this.scrollIntoViewIfNeeded ) {

						this.scrollIntoViewIfNeeded();

					} else {

						this.scrollIntoView();

					}

					$( this ).find( '.widget-inside :tabbable:first' ).trigger( 'focus' );

				} );

				event.returnValue = wp.i18n.__( 'The changes you made will be lost if you navigate away from this page.' );

				return event.returnValue;

			}

		});

		// Handle the widgets containers in the left column.

		$( '#widgets-left .sidebar-name' ).on( 'click', function() {

			var $wrap = $( this ).closest( '.widgets-holder-wrap' );

			$wrap

				.toggleClass( 'closed' )

				.find( '.handlediv' ).attr( 'aria-expanded', ! $wrap.hasClass( 'closed' ) );

			// Update the admin menu "sticky" state.

			$document.triggerHandler( 'wp-pin-menu' );

		});

		$(document.body).on('click.widgets-toggle', function(e) {

			var target = $(e.target), css = {},

				widget, inside, targetWidth, widgetWidth, margin, saveButton, widgetId,

				toggleBtn = target.closest( '.widget' ).find( '.widget-top button.widget-action' );

			if ( target.parents('.widget-top').length && ! target.parents('#available-widgets').length ) {

				widget = target.closest('div.widget');

				inside = widget.children('.widget-inside');

				targetWidth = parseInt( widget.find('input.widget-width').val(), 10 );

				widgetWidth = widget.parent().width();

				widgetId = inside.find( '.widget-id' ).val();

				// Save button is initially disabled, but is enabled when a field is changed.

				if ( ! widget.data( 'dirty-state-initialized' ) ) {

					saveButton = inside.find( '.widget-control-save' );

					saveButton.prop( 'disabled', true ).val( wp.i18n.__( 'Saved' ) );

					inside.on( 'input change', function() {

						self.dirtyWidgets[ widgetId ] = true;

						widget.addClass( 'widget-dirty' );

						saveButton.prop( 'disabled', false ).val( wp.i18n.__( 'Save' ) );

					});

					widget.data( 'dirty-state-initialized', true );

				}

				if ( inside.is(':hidden') ) {

					if ( targetWidth > 250 && ( targetWidth + 30 > widgetWidth ) && widget.closest('div.widgets-sortables').length ) {

						if ( widget.closest('div.widget-liquid-right').length ) {

							margin = isRTL ? 'margin-right' : 'margin-left';

						} else {

							margin = isRTL ? 'margin-left' : 'margin-right';

						}

						css[ margin ] = widgetWidth - ( targetWidth + 30 ) + 'px';

						widget.css( css );

					}

					/*

					 * Don't change the order of attributes changes and animation:

					 * it's important for screen readers, see ticket #31476.

					 */

					toggleBtn.attr( 'aria-expanded', 'true' );

					inside.slideDown( 'fast', function() {

						widget.addClass( 'open' );

					});

				} else {

					/*

					 * Don't change the order of attributes changes and animation:

					 * it's important for screen readers, see ticket #31476.

					 */

					toggleBtn.attr( 'aria-expanded', 'false' );

					inside.slideUp( 'fast', function() {

						widget.attr( 'style', '' );

						widget.removeClass( 'open' );

					});

				}

			} else if ( target.hasClass('widget-control-save') ) {

				wpWidgets.save( target.closest('div.widget'), 0, 1, 0 );

				e.preventDefault();

			} else if ( target.hasClass('widget-control-remove') ) {

				wpWidgets.save( target.closest('div.widget'), 1, 1, 0 );

			} else if ( target.hasClass('widget-control-close') ) {

				widget = target.closest('div.widget');

				widget.removeClass( 'open' );

				toggleBtn.attr( 'aria-expanded', 'false' );

				wpWidgets.close( widget );

			} else if ( target.attr( 'id' ) === 'inactive-widgets-control-remove' ) {

				wpWidgets.removeInactiveWidgets();

				e.preventDefault();

			}

		});

		sidebars.children('.widget').each( function() {

			var $this = $(this);

			wpWidgets.appendTitle( this );

			if ( $this.find( 'p.widget-error' ).length ) {

				$this.find( '.widget-action' ).trigger( 'click' ).attr( 'aria-expanded', 'true' );

			}

		});

		$('#widget-list').children('.widget').draggable({

			connectToSortable: 'div.widgets-sortables',

			handle: '> .widget-top > .widget-title',

			distance: 2,

			helper: 'clone',

			zIndex: 101,

			containment: '#wpwrap',

			refreshPositions: true,

			start: function( event, ui ) {

				var chooser = $(this).find('.widgets-chooser');

				ui.helper.find('div.widget-description').hide();

				the_id = this.id;

				if ( chooser.length ) {

					// Hide the chooser and move it out of the widget.

					$( '#wpbody-content' ).append( chooser.hide() );

					// Delete the cloned chooser from the drag helper.

					ui.helper.find('.widgets-chooser').remove();

					self.clearWidgetSelection();

				}

			},

			stop: function() {

				if ( rem ) {

					$(rem).hide();

				}

				rem = '';

			}

		});

		/**

		 * Opens and closes previously closed Sidebars when Widgets are dragged over/out of them.

		 */

		sidebars.droppable( {

			tolerance: 'intersect',

			/**

			 * Open Sidebar when a Widget gets dragged over it.

			 *

			 * @ignore

			 *

			 * @param {Object} event jQuery event object.

			 */

			over: function( event ) {

				var $wrap = $( event.target ).parent();

				if ( wpWidgets.hoveredSidebar && ! $wrap.is( wpWidgets.hoveredSidebar ) ) {

					// Close the previous Sidebar as the Widget has been dragged onto another Sidebar.

					wpWidgets.closeSidebar( event );

				}

				if ( $wrap.hasClass( 'closed' ) ) {

					wpWidgets.hoveredSidebar = $wrap;

					$wrap

						.removeClass( 'closed' )

						.find( '.handlediv' ).attr( 'aria-expanded', 'true' );

				}

				$( this ).sortable( 'refresh' );

			},

			/**

			 * Close Sidebar when the Widget gets dragged out of it.

			 *

			 * @ignore

			 *

			 * @param {Object} event jQuery event object.

			 */

			out: function( event ) {

				if ( wpWidgets.hoveredSidebar ) {

					wpWidgets.closeSidebar( event );

				}

			}

		} );

		sidebars.sortable({

			placeholder: 'widget-placeholder',

			items: '> .widget',

			handle: '> .widget-top > .widget-title',

			cursor: 'move',

			distance: 2,

			containment: '#wpwrap',

			tolerance: 'pointer',

			refreshPositions: true,

			start: function( event, ui ) {

				var height, $this = $(this),

					$wrap = $this.parent(),

					inside = ui.item.children('.widget-inside');

				if ( inside.css('display') === 'block' ) {

					ui.item.removeClass('open');

					ui.item.find( '.widget-top button.widget-action' ).attr( 'aria-expanded', 'false' );

					inside.hide();

					$(this).sortable('refreshPositions');

				}

				if ( ! $wrap.hasClass('closed') ) {

					// Lock all open sidebars min-height when starting to drag.

					// Prevents jumping when dragging a widget from an open sidebar to a closed sidebar below.

					height = ui.item.hasClass('ui-draggable') ? $this.height() : 1 + $this.height();

					$this.css( 'min-height', height + 'px' );

				}

			},

			stop: function( event, ui ) {

				var addNew, widgetNumber, $sidebar, $children, child, item,

					$widget = ui.item,

					id = the_id;

				// Reset the var to hold a previously closed sidebar.

				wpWidgets.hoveredSidebar = null;

				if ( $widget.hasClass('deleting') ) {

					wpWidgets.save( $widget, 1, 0, 1 ); // Delete widget.

					$widget.remove();

					return;

				}

				addNew = $widget.find('input.add_new').val();

				widgetNumber = $widget.find('input.multi_number').val();

				$widget.attr( 'style', '' ).removeClass('ui-draggable');

				the_id = '';

				if ( addNew ) {

					if ( 'multi' === addNew ) {

						$widget.html(

							$widget.html().replace( /<[^<>]+>/g, function( tag ) {

								return tag.replace( /__i__|%i%/g, widgetNumber );

							})

						);

						$widget.attr( 'id', id.replace( '__i__', widgetNumber ) );

						widgetNumber++;

						$( 'div#' + id ).find( 'input.multi_number' ).val( widgetNumber );

					} else if ( 'single' === addNew ) {

						$widget.attr( 'id', 'new-' + id );

						rem = 'div#' + id;

					}