const mqNavbar = window.matchMedia('(min-width: 768px)')
const mqSearch = window.matchMedia('(max-width: 1199px)')

$(document).ready(function() {

	// Floating Navigation
	
	var nav = $('.navbar');
	var wrapped = false;
	var scrolled = false;
	
	function handleLargeChange(e) {
		if (e.matches) {
			if ( wrapped && $('.navbar #navigationUser li.dropdown').length ) {
				$(".navbar #navigationUser li.dropdown > a > span.username").contents().unwrap();
				wrapped = false;
			} else if ( wrapped && $('.navbar .loggedOut').length ) {
				$(".navbar .loggedOut .menu-item-9 > a > span.username").contents().unwrap();
				wrapped = false;
			}
			var bufferHeight = nav.outerHeight(true);
			var shrinkHeader = bufferHeight + 300;
			var newNav = nav.clone();
			
			$(window).on('scroll.scroll', function(){
				var scroll = getCurrentScroll();
				if ( scroll >= shrinkHeader && !scrolled ) {
					$(newNav).wrap('<div class="shrink"></div>').parent().prependTo('body');
					$('.shrink').css({'top' : '-50px'}).animate({'top' : 0}, 200);
					scrolled = true;
				} else if ( scroll <= shrinkHeader && scrolled ) {
					$('.shrink').animate({'top' : '-50px'}, 200, function() {
						$('.shrink').remove();
					});
					scrolled = false;
				}
			});
		} else {
			$(window).off('.scroll');
			if ( !wrapped && $('.navbar #navigationUser li.dropdown').length ) {
				$('.navbar #navigationUser li.dropdown > a').wrapInner('<span class="username"></span>');
				wrapped = true;
			} else if ( !wrapped && $('.navbar .loggedOut').length ) {
				$('.navbar .loggedOut .menu-item-9 > a').wrapInner('<span class="username"></span>');
				wrapped = true;
			}
		}

		function getCurrentScroll() {
			return window.pageYOffset || document.documentElement.scrollTop;
		}
		
	}
	mqNavbar.addEventListener('change', handleLargeChange)
	handleLargeChange(mqNavbar)
	

	// Search
	
	
	function handleSmallChange(e) {
		if (e.matches) {
			$('#main-navigation').append('<li class="search"><a href="https://goethe-lexicon.pitt.edu/GL/search/search"><i class="material-icons">search</i></a></li>');
		} else {
			$('#main-navigation li.search').remove();
		}
	}
	mqSearch.addEventListener('change', handleSmallChange)
	handleSmallChange(mqSearch)
	
	
	// Table of contents

	if($('.toc').length){

		var tocOpen = false;
		var newToc = $('.toc').clone();
		var openToc = function() {
			$(newToc).wrap('<div class="mini-toc"></div>').parent().prependTo('body');
			$('.toc-link').toggleClass('selected');
			tocOpen = true;
		}
		var closeToc = function() {
			$('.mini-toc').remove();
			$('.toc-link').removeClass('selected');
			tocOpen = false;
		}

		$('.reader-options').prepend('<a class="toc-link" title="Table of contents"><span>Table of contents</span></a>');

		$('.toc-link').click(function(e) {
			e.stopPropagation();
			var toggle = tocOpen ? closeToc : openToc;
    		toggle();
		});

		$(document).click(function(e) {
			if (!$(e.target).closest('.mini-toc').length) closeToc();
			else if ($(e.target).parents('.mini-toc')) closeToc();
		});

		$(document).keydown(function(e) {
			if (e.which === 27 && tocOpen) closeToc();
		});
	}
	
});