/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 */
( function() {
	var container, button, menu;

	container = document.getElementById( 'site-navigation' );
	if ( ! container ) {
		return;
	}

	//button = container.getElementsByTagName( 'button' )[0];
	button = container.getElementsByTagName( 'div' )[0];
	if ( 'undefined' === typeof button ) {
		return;
	}

	menu = container.getElementsByTagName( 'ul' )[0];

	// Hide menu toggle button if menu is empty and return early.
	if ( 'undefined' === typeof menu ) {
		button.style.display = 'none';
		return;
	}

	menu.setAttribute( 'aria-expanded', 'false' );

	if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
		menu.className += ' nav-menu';
	}

	button.onclick = function( e ) {
		if ( -1 !== container.className.indexOf( 'toggled' ) ) {
			container.className = container.className.replace( ' toggled', '' );
			button.setAttribute( 'aria-expanded', 'false' );
			menu.setAttribute( 'aria-expanded', 'false' );
		} else {
			container.className += ' toggled';
			button.setAttribute( 'aria-expanded', 'true' );
			menu.setAttribute( 'aria-expanded', 'true' );
		}
	};

	// Trick to make tap on a main menu item that has a submenu working.
	// Without this trick, when you tap the main menu, the browser will navigate to the url,
	// so the submenu is not shown (or very shortly).
	// With this trick, on the first tap on the main menu item the submenu opens
	// and on the second tap on the main menu item (when the submenu is already open)
	// the browser will navigate to the url.
	// Tested on iPad Safari and Windows 10 Chrome (touch) and S6 Edge+ Chrome.
	var timer;
	var dragging = 0;
	var elements = container.getElementsByTagName( 'a' );
	for( var i = 0, len = elements.length; i < len; i++ ) {
		( 'touchend click'.split( ' ' ) ).forEach( function( ev ) {
			elements[ i ].addEventListener( ev, function( e ) {
				if( dragging == 0 ) { // Do nothing if we are dragging/swiping
					var element = e.target.parentElement;
					if( ( ' ' + element.className + ' ' ).replace( /[\n\t]/g, ' ' ).indexOf( ' page_item_has_children ' ) > -1 ) {
						var ul = element.getElementsByTagName( 'ul' )[ 0 ];
						if( ul && getComputedStyle && getComputedStyle( ul ).opacity < 1 ) {
							e.preventDefault();
							e.stopPropagation(); // Needed for Customizer preview pane
							var elements2 = element.parentElement.getElementsByTagName( 'li' );
							for( var j = 0, len2 = elements2.length; j < len2; j++ ) {
								elements2[ j ].className = elements2[ j ].className.replace( ' hovertrick', '' );
								var aTag = elements2[ j ].getElementsByTagName( 'a' )[ 0 ];
								if( aTag.length > 0 ) {
									aTag.className = aTag.className.replace( ' hovertrick', '' );
								}
							}
							element.className += ' hovertrick';
							var aTag = element.getElementsByTagName( 'a' )[ 0 ];
							if( aTag.length > 0 ) {
								aTag.className += ' hovertrick';
							}
						}
					}
				}
			}, false );
		} );

		// Detect if the touch resulted in a drag/swipe
		elements[ i ].addEventListener( 'touchstart', function( e ) {
			dragging = 0;
		} );
		elements[ i ].addEventListener( 'touchmove', function( e ) {
			dragging = 1;
		} );

		// Close the dropdownmenu when the mouse has left the main or submenu (and a delay has passed)
		elements[ i ].addEventListener( 'mouseleave', function( e ) {
			var element = e.target.parentElement;

			timer = setTimeout(function(){
				element.className = element.className.replace( ' hovertrick', '' );
		   }, 650);
		} );
		var ul = elements[ i ].parentElement.getElementsByTagName( 'ul' );
		if( ul.length > 0 ) {
			ul[ 0 ].addEventListener( 'mouseleave', function( e ) {
				var element = e.target.parentElement;

				timer = setTimeout(function(){
					element.className = element.className.replace( ' hovertrick', '' );
			   }, 650);
			} );
			ul[ 0 ].addEventListener( 'mouseenter', function( e ) {
				clearTimeout( timer );
			} );
		}
	}
} )();
