function oc_format_credit(credit) {
	return "<div class='media-credit' data-tippy-content='" + credit + "'><svg width='5' height='14' viewBox='0 0 5 14' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M2 6h2v8H2V6zM5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z' fill='currentColor'></path><path d='M0 6h4v1H0V6z' fill='currentColor'></path></svg></div>";
}
window.addEventListener('fs_promo_launch', (event) => {
	if(event.detail.promo.promotion_type == 'pushdown' && event.detail.promo.pushdown_type == 'full') {
		// fetch credit info from server by image id
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if(this.readyState == 4 && this.status == 200) {
				var r = JSON.parse(this.responseText);
				if(r.media_credit) {
					function update_media_credit_position() {
						const mc = document.querySelector('#pushdown .pushdown-wrapper div.media-credit');
						if(mc) {
							if(window.outerWidth <= 600) {
								const pmi = document.querySelector('#pushdown .pushdown-wrapper .pushdown-mobile-image');
								mc.style.top = (pmi.offsetHeight - 40) + 'px';
								mc.style.bottom = 'unset';
							} else {
								mc.style.top = 'unset';
								mc.style.bottom = null;
							}							
						}
					}

					let counter = 0;
					let pushdown_test = setInterval(() => {
						// insert the media credit into the pushdown container
						const pushdown = document.querySelector('#pushdown .pushdown-wrapper');
						if(pushdown) {
							clearInterval(pushdown_test);

							pushdown.innerHTML += oc_format_credit(r.media_credit);
							tippy('#pushdown .pushdown-wrapper div.media-credit', {
								placement: 'left',
								theme: 'gutenberg'
							});

							// for unknown reasons, adding a click event listener to the pushdown media credit ensures
							// that tippy will correctly respond to clicks in iOS.  Weird.
							const pmc = document.querySelector('#pushdown .pushdown-wrapper div.media-credit');
							pmc.addEventListener('click', function(e) {
							});

							const pmi = document.querySelector('#pushdown .pushdown-wrapper .pushdown-mobile-image');
							pmi.addEventListener('load', update_media_credit_position);
							window.addEventListener('resize', update_media_credit_position);

							update_media_credit_position();
							if(window.scrollY) {
								setTimeout(() => { window.scrollTo(0, 0); }, 250);
							}
						} else {
							counter++;
							if(counter > 20) {
								clearInterval(pushdown_test);
							}
						}
					}, 500);
				}
			}
		};
		xhttp.open('POST', wp_mc.ajax_url + '?action=oc_fetch_media_credit', true);
		xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
		xhttp.send('media_id=' + event.detail.promo.image_id);
	}
});

window.addEventListener('DOMContentLoaded', function() {
	// Update galleries
	if(!window.oc_media_credits) {
		return;
	}

	let image_containers = document.querySelectorAll('.wp-block-gallery .wp-block-image');
	for(let i = 0; i < image_containers.length; i++) {
		let image_id = image_containers[i].querySelector('img').getAttribute('data-id');
		if(window.oc_media_credits.hasOwnProperty(image_id)) {
			image_containers[i].innerHTML += oc_format_credit(window.oc_media_credits[image_id])
		}		
	}
	tippy('.wp-block-gallery .wp-block-image div.media-credit', {
		placement: 'left',
		theme: 'gutenberg'
	});

	image_containers = document.querySelectorAll('figure.wp-block-image[data-has-credit]');
	for(let i = 0; i < image_containers.length; i++) {
		let image_id = image_containers[i].getAttribute('data-id');
		if(window.oc_media_credits.hasOwnProperty(image_id)) {
			image_containers[i].innerHTML += oc_format_credit(window.oc_media_credits[image_id]);
		}
	}
	tippy('.wp-block-image[data-has-credit] div.media-credit', {
		placement: 'left',
		theme: 'gutenberg'
	});

	image_containers = document.querySelectorAll('.wp-block-cover[data-has-credit]');
	for(let i = 0; i < image_containers.length; i++) {
		let image_id = image_containers[i].getAttribute('data-id');
		if(window.oc_media_credits.hasOwnProperty(image_id)) {
			image_containers[i].innerHTML += oc_format_credit(window.oc_media_credits[image_id]);
		}
	}
	tippy('.wp-block-cover[data-has-credit] div.media-credit', {
		placement: 'left',
		theme: 'gutenberg'
	});
});