console.log('LOADED: earlychildhoodny.org/javascript/popup.js v:1.0');

//EXAMPLE PAGE-SPECIFIC JAVASCRIPT

//EXAMPLE HTML
//the following will work with no additional page-specific javascript
//php variable in style tag allows for popup on load
//can use /includes/popup.php for a function to auto-setup the overlay.
/*
<div class="popup-content-switch" data-targetID="[popup-content-a]">Popup Switch for Content-A</div>
<div class="popup-content-switch" data-targetID="[popup-form-b]">Popup Switch for Form B</div>

<div id="[specific-overlay]" class="popup-overlay" style="'.$popup_display.'">
	<a href="" class="popup-close-btn"> x close </a>
	<div id="popup-content-box">
		<!--CONTENT HERE-->
		<div class="popup-content" id="[popup-content-a]">
			Content A
		</div>
		<form action="" method="POST" id="[popup-form-b]" class="popup-content">
			<input type="reset" value="Cancel" class="popup-cancel-btn">
		</form>
	</div>
</div>
*/

if (typeof popup_open_position === 'undefined') {
   var popup_open_position = 0;//store body scrollposition for returning after closing
}
var popup_last_target = '';//store most recently opened popup content
$(document).ready(function(){
	popup_content(); //by default, set class '.popup-content-switch' to close box (will popup overly too)
	popup_close(); //by default, set class .popup-close-btn to close box
	var autopop = $('.popup-overlay').attr('data-autopop');
	console.log('autopop:'+autopop);
	if(autopop != '' && autopop){
		console.log('autopop activated: ', autopop);
	   	open_content(autopop);
	}
	$('#popup-result_message-close').click(function(){
		popup_clear_result_message_box();
	});
});
//OPEN THE POPUP OVERLAY 
//freeze scrolling on background (store frozen position)
//showing content is separate function
function popup_open(element = '.popup-overlay'){
	console.log('popup opened: ',element);
	$(element).css('display','block');
	if($(document).scrollTop() != 0){
		popup_open_position = $(document).scrollTop();
	}
	console.log('setting scroll position: '+popup_open_position);
	$('body').not('iframe body').css('position','fixed');
}
//DISPLAY CONTENT IN POPUP BOX
function popup_content(element = '.popup-content-switch'){
	$(element).click(function(e){
		e.preventDefault();
		var targetID = $(this).attr('data-targetID');
		console.log('popup_content - targetID: ',targetID);
		if(targetID){
			open_content(targetID);
		}
		else{
			alert('This content could not be found, please contact the dev team.');
		}
	});
}
function open_content(targetID){
	//ID of the popup-content box inside the popup
	//add the hastag if it's not there. 
	if(targetID.indexOf('#') === -1){
		targetID = '#'+targetID;
	}
	var targetBox = $(targetID);
	console.log('open_content ID: '+targetID, ' opening target box: ', targetBox);
	
	//clear any result_messages from other content
	popup_clear_result_message_box();
	
	if($(targetID).hasClass('popup-content-noclose')){
	 	$(targetID).closest('.popup-overlay').find('.popup-close-btn').css('display','none');  
	}
	else{
		$(targetID).closest('.popup-overlay').find('.popup-close-btn').css('display','block'); 
	}
	
	//automatically open popup overlay (with default .popup-overlay class)
	popup_open();
	
	//open up the target
	//check if is has a display attribute other that block
	var displayType = $(targetBox).attr('data-display');
	console.log('displayType: ',displayType);
	if(typeof displayType !== 'undefined'){
		console.log('display type wasn\'t undefined');
		$(targetBox).css('display',displayType);
	}
	else{
		console.log('display type was undefined');
		$(targetBox).css('display','block');
	}
	console.log('not target: ', $('.popup-content').not(targetBox));
	$('.popup-content').not(targetBox).css('display','none');

	//reset scroll position of content
	//if content is different
	console.log('popup_last_target: '+popup_last_target);
	if(targetID != popup_last_target){
		console.log('different target');
	   $('#popup-content-box').scrollTop(0);
	}
	else{
		console.log('same target');	
	}
	popup_last_target = targetID;
	console.log('content position: '+$('#popup-content-box').scrollTop());
}
//ADD popup-content CONTAINER
function add_popup_content_box(box_id){
	if(box_id.indexOf('#') == 0){
	   box_id = box_id.substring(1);
	}
	let newbox = '';
	newbox += '<div class="popup-content" id="'+box_id+'" data-display="flex">';
	newbox += '<!-- DYNAMICALLY LOADED CONTENTS GO HERE -->';
	newbox += '</div>';
	$('#popup-content-box').append(newbox);
}
//CLOSE POPUP
//resume scrolling background in position you froze it in
function popup_close(button = '.popup-close-btn, .popup-cancel-btn', overlay = '.popup-overlay'){
	//console.log('close buttons (on() style): ', button, overlay, $(button));
	$(button).on('click', function(e){
		e.preventDefault();
		popup_close_overlay();
	});
}
function popup_close_overlay(overlay = '.popup-overlay'){
	$(overlay).css('display','none');
	$('body').not('iframe body').css('position','relative');
	console.log('getting scroll position: '+popup_open_position);
	$(document).scrollTop(popup_open_position);
	
	//close and clear the result_message box
	popup_clear_result_message_box();
	
	//close any running videos in IFRAMES
	//https://stackoverflow.com/questions/6145990/how-to-stop-a-vimeo-video-with-jquery
	$(overlay).find('iframe').each(function(){
		console.log($(this).attr('src'));
		// saves the current iframe source
		var vidsrc = $(this).attr('src');
		if(vidsrc.indexOf('player.vimeo.com') !== -1){
			// sets the source to nothing, stopping the video
			$(this).attr('src',''); 
			// sets it back to the correct link so that it reloads immediately on the next window open
			$(this).attr('src', vidsrc);
		}
	});	
}
function popup_clear_result_message_box(){
	$('#popup-result_message-box').css('display', 'none').find('#popup-result_message-content').html('');
}
function popup_result_message_box(content){
	$('#popup-result_message-box').css('display', 'block').find('#popup-result_message-content').html(content);
}