document.addEventListener('DOMContentLoaded', function() {
	var scroll_position = window.scrollY;
	var footer = document.querySelector('footer.gutenberg');
	if(!footer) return;

	var is_reduced = window.matchMedia(`(prefers-reduced-motion: reduce)`) === true || window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true;
	var footer_email_signup = footer.querySelector('.email-signup-container');
	var email_signup_floating = false;
	var footer_email_signup_height = footer_email_signup.getBoundingClientRect().height;
	var email_signup_floatable =  footer_email_signup.classList.contains('floatable');
	var email_signup_closed = (getCookie('footer-email-signup') == '1') ? true : false;
	var email_signup_submitted = false;
	var scroll_down = false;
	var depth_indicator = document.querySelector('.depth-indicator');
	var body = document.querySelector('body');
	var footer_desktop_video_loaded = (footer.querySelector('video.oc-video-lazyload.desktop')) ? false : true;
	var footer_mobile_video_loaded = (footer.querySelector('video.oc-video-lazyload.mobile'))  ? false : true;

	// check if the tippy.js library is available
	const tippy_available = (typeof tippy !== 'undefined');

	function updateLazyLoadVideos() {
		if(is_reduced) return;
		if(!footer_desktop_video_loaded || !footer_mobile_video_loaded) {
			if(inViewport(footer)) {
				var video = null;
				if(window.innerWidth < 1024 && !footer_mobile_video_loaded) {
					video = footer.querySelector('.oc-video-lazyload.mobile');
					footer_mobile_video_loaded = true;
					if(video) {
						video.classList.remove('oc-video-lazyload');
						loadVideo(video);
					} 
				} else if(!footer_desktop_video_loaded) {
					video = footer.querySelector('.oc-video-lazyload.desktop');
					footer_desktop_video_loaded = true;
					if(video) {
						video.classList.remove('oc-video-lazyload');
						loadVideo(video);
					}
				}
			}
		}
	}
	function getPageMaxScroll() {
		return document.body.offsetHeight - window.innerHeight;
	}

	function handleScrollUpdates() {
		scroll_down = (window.scrollY > scroll_position);
		scroll_position = window.scrollY;

		if(window.innerWidth >= 1024) {
			updateDepthIndicator();
		}
		updateEmailSignupFloatingStatus();
		updateLazyLoadVideos();
		updateContextWidgets();
	}

	function updateEmailSignupFloatingStatus() {
		if(email_signup_floatable) {
			if(!email_signup_closed && scroll_position > 0) {			
				var footer_in_view = ((footer.getBoundingClientRect().top+10) <= window.innerHeight);
				if(footer_in_view && scroll_down) {
					footer_email_signup.classList.remove('floating');
					email_signup_floating = false;
				} else if(!footer_in_view && !email_signup_floating) {
					footer_email_signup.classList.add('floating');
					email_signup_floating = true;
				}
			}
		}
	}

	function updateDepthIndicator() {
		var menu = document.querySelector('.floating-page-menu');
		var max_scroll = getPageMaxScroll();
		if(scroll_position >= Math.floor(max_scroll * .20)) {
			menu.classList.add('active');
		} else {
			menu.classList.remove('active');
		}
	}

	
	document.addEventListener('scroll', handleScrollUpdates);
	document.querySelector('.email-signup-container .close-icon').addEventListener('click', function(e) {
		e.preventDefault();
		document.querySelector('.email-signup-container').classList.add('closed');
		if(!email_signup_submitted) {
			setCookie('footer-email-signup', 1, 1);
		}		
		email_signup_closed = true;
	});

	document.addEventListener('.back-to-top', function(e) {
		e.preventDefault();
		document.getElementById('container').scrollIntoView({ behavior: 'smooth' });
	});

	var depth_links = document.querySelectorAll('.depth-link');
	for(var i = 0; i < depth_links.length; i++) {
		depth_links[i].addEventListener('click', function(e) {
			e.preventDefault();
			var max_scroll = getPageMaxScroll();

			var target_depth = this.getAttribute('data-depth');
			if(target_depth == 100) {
				window.scrollTo({ top: max_scroll * .20, behavior: 'smooth' });
			} else if(target_depth == 1000) {
				window.scrollTo({ top: max_scroll * .50, behavior: 'smooth' });
			} else if(target_depth == 10000) {
				window.scrollTo({ top: max_scroll + 100, behavior: 'smooth' });
				//document.getElementById('bottom-anchor').scrollIntoView({ behavior: 'smooth' });
			}
		});
	}

	if(window.innerWidth >= 1024) {
		updateDepthIndicator();
	}
	updateEmailSignupFloatingStatus();
	updateLazyLoadVideos();

	var footer_signup = footer_email_signup.querySelector('.revmsg-form');
	footer_signup.addEventListener('submit', function(e) {
		setCookie('footer-email-signup', 1, 180);
		email_signup_submitted = true;
	});

	// Borrowed from https://stackoverflow.com/questions/14573223/set-cookie-and-get-cookie-with-javascript
	function setCookie(name,value,days) {
		var expires = "";
		if (days) {
			var date = new Date();
			date.setTime(date.getTime() + (days*24*60*60*1000));
			expires = "; expires=" + date.toUTCString();
		}
		document.cookie = name + "=" + (value || "")  + expires + "; path=/";
	}
	function getCookie(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
		}
		return null;
	}
	function eraseCookie(name) {   
		document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
	}



	/** This isn't specific to the footer, but rather posts & WFSs that have a context-sidebar **/
	var reveal_tolerance = window.innerHeight/2;//250;
	var cs = document.querySelector('.context-sidebar');
	var ra_widget = (cs) ? cs.querySelector('.related-articles.widget') : null;
	var h_widget = (cs) ? cs.querySelector('.highlights.widget') : null;

	if(ra_widget) {
		ra_widget.style.opacity = 0;
		ra_widget.style.zIndex = -1;
	}
	if(h_widget) {
		h_widget.style.opacity = 0;
		h_widget.style.zIndex = -1;
	}

	var ra_anchor = document.querySelector('.js-context-sidebar-anchor[data-type="related_articles"]');
	var h_anchor = document.querySelector('.js-context-sidebar-anchor[data-type="highlights"]');
	var content_element = document.getElementById('content');
	var top_of_content = (cs) ? cs.offsetTop : 0;//(content_element) ? content_element.offsetTop : 0;

	if(ra_widget) {
		if(ra_anchor) {
			cs.style.position = 'relative';
			ra_widget.style.position = 'absolute';
			ra_widget.style.top = (ra_anchor.offsetTop - top_of_content) + 'px';
		} else {
			ra_widget.parentNode.style.rowGap = '300px';
		}
	}

	if(h_widget) {
		if(h_anchor) {
			cs.style.position = 'relative';
			h_widget.style.position = 'absolute';
			h_widget.style.top = (h_anchor.offsetTop - top_of_content) + 'px';
		} else {
			h_widget.parentNode.style.rowGap = '300px';
		}		
	}

	var ra_widget_shown = false;
	var h_widget_shown = false;

	function updateContextWidgets() {
		if(!ra_widget_shown && ra_widget && ra_widget.style.opacity == 0) {
			var t = ra_widget.getBoundingClientRect().top;
			if(t >= -reveal_tolerance && t <= reveal_tolerance) {
				ra_widget.style.opacity = 1;
				ra_widget.style.zIndex = 1;
				ra_widget_shown = true;
			}
		}

		if(!h_widget_shown && h_widget && h_widget.style.opacity == 0) {
			var t = h_widget.getBoundingClientRect().top;
			if(t >= -reveal_tolerance && t <= reveal_tolerance) {
				h_widget.style.opacity = 1;
				h_widget.style.zIndex = 1;
				h_widget_shown = true;
			}
		}
	}



	/** Post authors slideshow **/
	var author_slideshow = document.querySelector('.single-post .authors.has-multiple .single-post-author-slideshow');
	if(author_slideshow) {
		new Splide(author_slideshow, { 
			type: 'slide',
			pagination: false,
			arrows: true,
			perPage: 1,
			padding: '25px',
			mediaQuery: 'max',
			breakpoints: {
				900: {
					destroy: true
				}
			}
		}).mount();
	}

	/** Some other slideshows that could appear in multiple pages and multiple times per page.  Relies on markup set in functions.php:oc_format_splide_slideshow **/
	function oc_get_width(el) {
		var width = el.offsetWidth;
		var style = getComputedStyle(el);
		width += parseInt(style.marginLeft) + parseInt(style.marginRight);
		return width;
	}

	function oc_init_other_slideshows() {
		var loop_slideshows = document.querySelectorAll('.oc-splide-format.splide');
		window.loop_slideshow_list = {};
		for(var i = 0; i < loop_slideshows.length; i++) {
			loop_slideshows[i].setAttribute('data-id', i);	
			var ses = loop_slideshows[i].querySelectorAll('.slide-element');		
			window.loop_slideshow_list[i] = new Splide(loop_slideshows[i], {
				pagination: false,
				arrows: true,
				perPage: 1,
				snap: true,
				autoWidth: true
			})
			.on('move', function() {
				if(window.loop_slideshow_list[this].index == 0) {
					loop_slideshows[this].classList.add('at-start');
					loop_slideshows[this].style.maxWidth = loop_slideshows[this].getAttribute('data-first-width');
					loop_slideshows[this].classList.remove('at-end');
				} else {
					loop_slideshows[this].classList.remove('at-start');					
					loop_slideshows[this].style.maxWidth = loop_slideshows[this].getAttribute('data-max-width');

					if(window.loop_slideshow_list[this].index == window.loop_slideshow_list[this].length - 1) {
						loop_slideshows[this].classList.add('at-end');
					} else {
						loop_slideshows[this].classList.remove('at-end');
					}
				}
			}.bind(i))
			.on('mounted', () => {
				var widest = 0;
				for(var j = 0; j < ses.length; j++) {
					var w = oc_get_width(ses[j]);
					if(j == 0) {
						loop_slideshows[i].setAttribute('data-first-width', w + 20 + 'px');
						loop_slideshows[i].style.maxWidth = w + 20 +'px';
					}
					if(ses[j].offsetWidth > widest) widest = w;
				}
				loop_slideshows[i].classList.add('at-start');
				loop_slideshows[i].setAttribute('data-max-width', widest + 30 +'px');
			})
			.mount();
		}
	}

	// Enable the media credits for the rwd_media_credit shortcode content
	if(tippy_available) {
		tippy('figure figcaption.media-credit', {
			placement: 'left',
			theme: 'gutenberg'
		});		
	}


	oc_init_other_slideshows();
	document.addEventListener('facetwp-refresh', function() {
		// only scroll to top if this is the result of paging
		if(FWP.soft_refresh && window.innerWidth > 900) {
			FWP.enable_scroll = true;
		} else {
			FWP.enable_scroll = false;
		}
	});
	document.addEventListener('facetwp-loaded', function() {
		oc_init_other_slideshows();
		const listing_container = document.querySelector('.facetwp-template');

		// Init all the media credits bundled with the loaded posts
		if(tippy_available) {
			var posts = listing_container.querySelectorAll('.post-container');
			for(let i = 0; i < posts.length; i++) {
				const mc = posts[i].querySelector('.media-credit');
				if(mc) {
					tippy(mc, {
						content: mc.getAttribute('data-credit'),
						placement: 'left',
						theme: 'gutenberg'
					});
				}
			}
		}

		if(FWP.enable_scroll == true) {
			// scroll to top when facets are paged			
			if(listing_container) {
				// don't scroll if the top of the listing container is already in view
				const cr = listing_container.getBoundingClientRect();
				if(cr.top < 0) {				
					listing_container.parentNode.scrollIntoView();				
				}
			}
		}
	});
});