// custom menu
(function(window, document) {
	// extra readyState check required for Safari!
	if (document.readyState !== 'loading') {
		headMenuToggle();
	} else {
		document.addEventListener('DOMContentLoaded', function() {
			headMenuToggle()
		});
	}

	function headMenuToggle() {

		const overlayId = 'menuoverlay';

		const menuToggleId = 'menu_toggle_link';
		const ctrlToggleId = 'ctrl_toggle_link';

		const menuPopupId = 'head_menu_popup';
		const ctrlPopupId = 'headline_ctrl_popup';

		// get menu element
		const headerId = 'cssconstantsresponsive2_pageheader';
		var header = document.getElementById(headerId), rollback, WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange'
				: 'resize';

		// check menu toggle existence 
		var menuExists = document.getElementById(menuToggleId) != null;
		
		function toggleMenu(isMenu) {
			var overlayClassList = document.getElementById(overlayId).classList;

			var menuPopupClassList = menuExists ? document.getElementById(menuPopupId).classList : null;
			var ctrlPopupClassList =  document.getElementById(ctrlPopupId).classList;

			if (isMenu) {
				// toggle menu icon status
				document.getElementById(menuToggleId).classList.toggle('headToggleOpen');

				// open/close menu popup
				if (menuPopupClassList.contains('open')) {
					menuPopupClassList.remove('open');
					menuPopupClassList.add('closed');

					overlayClassList.remove('enabled');
				} else if (menuPopupClassList.contains('closed')) {
					menuPopupClassList.remove('closed');
					menuPopupClassList.add('open');

					overlayClassList.add('enabled');
				}
				
				// close controls popup, if open
				if (ctrlPopupClassList.contains('open')) {
					ctrlPopupClassList.remove('open');
					ctrlPopupClassList.add('closed');

					document.getElementById(ctrlToggleId).classList.toggle('headToggleOpen');
				}
			} else {
				// toggle ctrl icon status
				document.getElementById(ctrlToggleId).classList.toggle('headToggleOpen');

				// open/close menu popup, if open
				if (menuExists&& menuPopupClassList.contains('open')) {
					menuPopupClassList.remove('open');
					menuPopupClassList.add('closed');

					document.getElementById(menuToggleId).classList.toggle('headToggleOpen');
				}

				// toggle controls popup
				if (ctrlPopupClassList.contains('open')) {
					ctrlPopupClassList.remove('open');
					ctrlPopupClassList.add('closed');

					overlayClassList.remove('enabled');
				} else {
					ctrlPopupClassList.remove('closed');
					ctrlPopupClassList.add('open');

					overlayClassList.add('enabled');
				}
			}
		}

		// Click on menu toogle item -> Toggle Menu
		if (document.getElementById(menuToggleId) != null) {
			document.getElementById(menuToggleId).addEventListener('click',
					function(e) {
						toggleMenu(true);
						e.preventDefault();
					});
		}

		// Click on controls toogle item -> Toggle Menu
		if (document.getElementById(ctrlToggleId) != null) {
			document.getElementById(ctrlToggleId).addEventListener('click',
					function(e) {
						toggleMenu(false);
						e.preventDefault();
					});
		}

		// calling toggleMenu() depending on the current menu/controls toggle
		// status
		function triggerToggle() {
			if (document.getElementById(menuToggleId) != null) {
				if (document.getElementById(menuPopupId).classList
						.contains('open')) {
					toggleMenu(true);
				}
			}
			if (document.getElementById(ctrlToggleId) != null) {
				if (document.getElementById(ctrlPopupId).classList
						.contains('open')) {
					toggleMenu(false);
				}
			}
		}

		// Auto toggle on window change event / viewport size change
		window.addEventListener(WINDOW_CHANGE_EVENT, triggerToggle);
	}
})(this, this.document);