/* global plugininstallL10n, tb_click, tb_remove */

/**

 * Functionality for the plugin install screens.

 */

	var tbWindow,

		$iframeBody,

		$tabbables,

		$firstTabbable,

		$lastTabbable,

		$focusedBefore = $(),

		$uploadViewToggle = $( '.upload-view-toggle' ),

		$wrap = $ ( '.wrap' ),

		$body = $( document.body );

		var width = $( window ).width(),

		tbWindow = $( '#TB_window' );

		if ( tbWindow.length ) {

	/*

	 * Custom events: when a Thickbox iframe has loaded and when the Thickbox

	 * modal gets removed from the DOM.

	 */

	$body

		.on( 'thickbox:iframe:loaded', tbWindow, function() {

			/*

			 * Return if it's not the modal with the plugin details iframe. Other

			 * thickbox instances might want to load an iframe with content from

			 * an external domain. Avoid to access the iframe contents when we're

			 * not sure the iframe loads from the same domain.

			 */

			if ( ! tbWindow.hasClass( 'plugin-details-modal' ) ) {

				return;

			}

			iframeLoaded();

		})

		.on( 'thickbox:removed', function() {

			// Set focus back to the element that opened the modal dialog.

			// Note: IE 8 would need this wrapped in a fake setTimeout `0`.

			$focusedBefore.focus();

		});

	function iframeLoaded() {

		var $iframe = tbWindow.find( '#TB_iframeContent' );

		// Get the iframe body.

		$iframeBody = $iframe.contents().find( 'body' );

		// Get the tabbable elements and handle the keydown event on first load.

		handleTabbables();

		// Set initial focus on the "Close" button.

		$firstTabbable.focus();

		/*

		 * When the "Install" button is disabled (e.g. the Plugin is already installed)

		 * then we can't predict where the last focusable element is. We need to get

		 * the tabbable elements and handle the keydown event again and again,

		 * each time the active tab panel changes.

		 */

		$( '#plugin-information-tabs a', $iframeBody ).on( 'click', function() {

			handleTabbables();

		});

		// Close the modal when pressing Escape.

		$iframeBody.on( 'keydown', function( event ) {

			if ( 27 !== event.which ) {

				return;

			}

			tb_remove();

		});

	}

	/*

	 * Get the tabbable elements and detach/attach the keydown event.

	 * Called after the iframe has fully loaded so we have all the elements we need.

	 * Called again each time a Tab gets clicked.

	 * @todo Consider to implement a WordPress general utility for this and don't use jQuery UI.

	 */

	function handleTabbables() {

		var $firstAndLast;

		// Get all the tabbable elements.

		$tabbables = $( ':tabbable', $iframeBody );

		// Our first tabbable element is always the "Close" button.

		$firstTabbable = tbWindow.find( '#TB_closeWindowButton' );

		// Get the last tabbable element.

		$lastTabbable = $tabbables.last();

		// Make a jQuery collection.

		$firstAndLast = $firstTabbable.add( $lastTabbable );

		// Detach any previously attached keydown event.

		$firstAndLast.off( 'keydown.wp-plugin-details' );

		// Attach again the keydown event on the first and last focusable elements.

		$firstAndLast.on( 'keydown.wp-plugin-details', function( event ) {

			constrainTabbing( event );

		});

	}

	// Constrain tabbing within the plugin modal dialog.

	function constrainTabbing( event ) {

		if ( 9 !== event.which ) {

			return;

		}

		if ( $lastTabbable[0] === event.target && ! event.shiftKey ) {

			event.preventDefault();

			$firstTabbable.focus();

		} else if ( $firstTabbable[0] === event.target && event.shiftKey ) {

			event.preventDefault();

			$lastTabbable.focus();

		}

	}

	/*

	 * Open the Plugin details modal. The event is delegated to get also the links

	 * in the plugins search tab, after the AJAX search rebuilds the HTML. It's

	 * delegated on the closest ancestor and not on the body to avoid conflicts

	 * with other handlers, see Trac ticket #43082.

	 */

	$( '.wrap' ).on( 'click', '.thickbox.open-plugin-details-modal', function( e ) {

		// The `data-title` attribute is used only in the Plugin screens.

		var title = $( this ).data( 'title' ) ? plugininstallL10n.plugin_information + ' ' + $( this ).data( 'title' ) : plugininstallL10n.plugin_modal_label;

		e.preventDefault();

		e.stopPropagation();

		// Store the element that has focus before opening the modal dialog, i.e. the control which opens it.

		$focusedBefore = $( this );

		// Set ARIA role, ARIA label, and add a CSS class.

		tbWindow

			.attr({

				'role': 'dialog',

				'aria-label': plugininstallL10n.plugin_modal_label

			})

			.addClass( 'plugin-details-modal' );

		// Set title attribute on the iframe.

		tbWindow.find( '#TB_iframeContent' ).attr( 'title', title );

	/*

	 * When a user presses the "Upload Plugin" button, show the upload form in place

	 * rather than sending them to the devoted upload plugin page.

	 * The `?tab=upload` page still exists for no-js support and for plugins that

	 * might access it directly. When we're in this page, let the link behave

	 * like a link. Otherwise we're in the normal plugin installer pages and the

	 * link should behave like a toggle button.

	 */

	if ( ! $wrap.hasClass( 'plugin-install-tab-upload' ) ) {

		$uploadViewToggle

			.attr({

				role: 'button',

				'aria-expanded': 'false'

			})

			.on( 'click', function( event ) {

				event.preventDefault();

				$body.toggleClass( 'show-upload-view' );

				$uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );

			});

	}