/**
 * Header enhancements for more intelligent dynamic headers.
 *
 * This sets the masthead to the height of an uploaded image and applies sticky navigation.
 */

( function( $ ) {

  if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) {
    $('body').on("mousewheel", function () {
      event.preventDefault();
      var wd = event.wheelDelta;
      var csp = window.pageYOffset;
      window.scrollTo(0, csp - wd);
    });
  }
	// Fit header into the available space
	function fitHeader() {
		var windowWidth = $( window ).width();
		var headerHeight = $( '#pique-header-image' ).height();
		var navHeight = $( '#primary-menu' ).height();
		var brandingHeight = $( '.site-branding' ).height();

		// Make sure we're not on the homepage, since that handles stuff differently
		if ( ! $( 'body' ).hasClass( 'pique-frontpage' )) {
			if ( 0 < $( '#pique-header-image' ).length ) {
				// Add the height of our header image and the height of our nav
				console.log('header');
				$( '#masthead' ).css( 'height', headerHeight + navHeight );
			} else {
				// Give enough room for our branding
				console.log('no header');
				$( '#masthead' ).css( 'height', brandingHeight + navHeight + 40 );
			}
		}
	};

	// Priority+ navigation, whee!
	function priorityNav() {
		// Make sure we have a menu and that the more-more item is present
		if ( 0 < $( '#site-navigation' ).length && 0 < $( '#more-menu' ).length ) {
			var navWidth = 0;
			var firstMoreElement = $( '#more-menu li' ).first();

			// Calculate the width of our "more" containing element
			var moreWidth = $( '#more-menu' ).outerWidth( true );

			// Calculate the current width of our navigation
			$( '#site-navigation .menu > li' ).each( function() {
				navWidth += $( this ).outerWidth( true );
			});

			// Calculate our available space
			var availableSpace = $( '#site-navigation' ).outerWidth( true ) - moreWidth;

			// If our nav is wider than our available space, we're going to move items
			if (navWidth > availableSpace) {
				var lastItem = $( '#site-navigation .menu > li:not(#more-menu)' ).last();
				lastItem.attr( 'data-width', lastItem.outerWidth( true ) );
				lastItem.prependTo( $( '#more-menu .sub-menu' ).eq( 0 ) );
				priorityNav(); // Rerun this function!

				// But if we have the extra space, we should add the items back to our menu
			} else if (navWidth + firstMoreElement.data( 'width' ) < availableSpace) {
				// Check to be sure there's enough space for our extra element
				firstMoreElement.insertBefore( $( '#site-navigation .menu > li' ).last() );
				priorityNav();
			}

			// Hide our more-menu entirely if there's nothing in it
			if ($( '#more-menu li' ).length > 0) {
				$( '#more-menu' ).addClass( 'visible' );
			} else {
				$( '#more-menu' ).removeClass( 'visible' );
			}
		} // check for body class
	}; // function priorityNav

	// Okay, now we want to stick-ify our menu when we reach it
	function stickyNav() {
		var nav_container = $( '#site-navigation-wrapper' );
		var nav = $( '#site-navigation' );
        nav.addClass( 'sticky' );
        nav_container.css( { 'height':nav.outerHeight() } );
	};

	function secondaryMenu() {
        var hash = window.location.hash;
        var menu_list = $( '#secondary-menu');
        if (header_vars.earthSystemPage == hash || !header_vars.isFrontPage) {
            menu_list.show();
        } else {
            menu_list.hide();
        }
	}

	var highlightLinks = function() {
	   var links = $('a.menuitem').click(function() {
       		links.removeClass('active');
       		$(this).addClass('active');
	});
	}
	// Run our functions once the window has loaded fully
	$( window ).on( 'load', function() {
		priorityNav();
		fitHeader();
		stickyNav();
        secondaryMenu();
});
	if (!window.location.hash) {
		$('#menuitem-home').addClass('active');
	} else {
		$('#menuitem-' + window.location.hash.substr(1)).addClass('active');
	}

	// Annnnnd also every time the window resizes
	var isResizing = false;
	$( window ).on('resize', function() {
		if (isResizing) {
			return;
		}

		isResizing = true;
		setTimeout(function() {
			priorityNav();
			fitHeader();
			isResizing = false;
		}, 150);
	});

} )( jQuery );