
<link rel="stylesheet" href="<?php echo dir_root; ?>_global/tools/popWindow.css" />

<?php
	/*
		<?php include_once(dir_rootPHP.'_global/tools/popWindow.php'); ?>

		popWindow_show($pWTitle,$pWMsg,$pWConfirm,$pWCancel,$pWIcon);
		
		popWindow_btnSingle();
	*/
?>

<!-- ==========  <- Pop-up ->  ========== -->
	<div class="popWindow_bg">
		<div class="animated fadeIn popWindow_overlay"></div>
		<div class="animated slideInDown popWindow_content">
			<!-- Message -->
			<div class="popWindow_title">
				<pWinIcon></pWinIcon>
				<pWinTitle></pWinTitle>
			</div>
			<!-- Message -->
			<div class="popWindow_msg ctm-toCenter">
				<div class="popWindow_msgInner" style="text-align: center;">
					<h2><pWinHeader style="display: block; width: 100%; text-align: left; padding-top: 5%; font-weight: bold;"></pWinHeader></h2>
					<pWinMsg style="display: block; width: 100%; text-align: left; overflow-wrap: anywhere;"></pWinMsg>
					<iframe id="popWin_iFrame" src="" width="100%" style="padding: 2% 0;"></iframe>
				</div>
			</div>
			<!-- Buttons -->
			<div class="popWinBtn_row">
				<div class="popWinBtn ctm-toCenter" id="popWinBtn_confirm"></div>
				<div class="popWinBtn ctm-toCenter" id="popWinBtn_cancel"></div>
			</div>
		</div>
	</div>


<script type="text/javascript">
	
	var pWin_animTime = 600;
	popWindow_default();

	function popWindow_default(){
		
		// default-text
		if ( $('pWinTitle, pWinMsg, #popWinBtn_confirm, #popWinBtn_cancel').text() == '' ){
			set_pWinText('Are you sure?','confirm to agree','Confirm','Cancel',0);
		}
		// default-style (btn)
		if ( $('#popWinBtn_confirm').hasClass('popWinBtn_bgGreen') == false ){
			$('#popWinBtn_confirm').addClass('popWinBtn_bgGreen');
		}
		if ( $('#popWinBtn_cancel').hasClass('popWinBtn_bgRed_hov') == false ){
			$('#popWinBtn_cancel').addClass('popWinBtn_bgRed_hov');
		}

		// return-default (clicked)
		$('#popWinBtn_cancel').click(function(){
			popWindow_hide();
		});
	}

	function popWindow_show($pWUrl,$pWTitle,$pWHeader,$pWMsg,$pWConfirm,$pWCancel,$pWIcon){
		
		// set-text
		set_pWinText($pWUrl,$pWTitle,$pWHeader,$pWMsg,$pWConfirm,$pWCancel,$pWIcon);

		// animation
		$('.popWindow_bg>.popWindow_content').removeClass('slideOutUp').addClass('slideInDown');
		$('.popWindow_bg>.popWindow_overlay').removeClass('fadeOut').addClass('fadeIn');

		$('.popWindow_bg').css({'display': 'flex'});

			// set-popWindow-size
			$('#popWin_iFrame').on('load',function (){
				set_pWinSize($pWUrl);
			});

			$(window).on('resize',function (){
				set_pWinSize($pWUrl);
			});
	}
	function popWindow_hide(){
		
		// return-default (clicked)
		$('.popWindow_bg>.popWindow_content').removeClass('slideInDown').addClass('slideOutUp');
		$('.popWindow_bg>.popWindow_overlay').removeClass('fadeIn').addClass('fadeOut');

		setTimeout(function() {
			$('.popWindow_bg').hide();

			// reset buttons to 'default'
			$('#popWinBtn_confirm, #popWinBtn_cancel').unbind();				//unset all event listener
			$('#popWinBtn_confirm, #popWinBtn_cancel, .popWindow_content').removeAttr('style');	//unset all style
			$('#popWinBtn_confirm').removeClass('popWinBtn_single');			//reset to single button
			$('#popWinBtn_cancel').show();

			// return-default settings
			popWindow_default();
		}, pWin_animTime);
	}

		function set_pWinText($pWUrl,$pWTitle,$pWHeader,$pWMsg,$pWConfirm,$pWCancel,$pWIcon){
			$('#popWin_iFrame').attr('src',$pWUrl);
			$('pWinTitle').html($pWTitle);
			$('pWinHeader').html($pWHeader);
			$('pWinMsg').html($pWMsg);
			$('#popWinBtn_confirm').html($pWConfirm);
			$('#popWinBtn_cancel').html($pWCancel);

			switch($pWIcon){
				case 0:
					$('pWinIcon').html('');
					break;
				case 1:  //tick
					$('pWinIcon').html('<i class="fa fa-check-circle-o" style="font-size: 18px; color: green;"></i><br>');
					break;
				case 2:  //cross
					$('pWinIcon').html('<i class="fa fa-times-circle-o" style="font-size: 18px; color: red;"></i><br>');
					break;
				case 3:  //exclamation
					$('pWinIcon').html('<i class="fa fa-exclamation-circle" style="font-size: 18px; color: red;"></i><br>');
					break;
				case 4:  //warning
					$('pWinIcon').html('<i class="fa fa-exclamation-triangle" style="font-size: 18px; color: orange;"></i><br>');
					break;
				case 5:  //plus
					$('pWinIcon').html('<i class="fa fa-plus" style="font-size: 18px; color: green;"></i><br>');
					break;
			}
		}
		function set_pWinSize($pWUrl){
			var iFrameContent = $('#popWin_iFrame').contents().find("body");
			var iframeHeight = iFrameContent.height();
			var iframeWidth = iFrameContent.width();
			
			// $('#popWin_iFrame').on('load',function (){});
			// Height
			if ($pWUrl != ''){
				$('#popWin_iFrame').height(iframeHeight *1.2);
			}
			$('.popWindow_msgInner').height($('#popWin_iFrame').height() + $('pWinMsg').height() + $('pWinHeader').height() +130);

			$('.popWindow_content').height($('.popWindow_msgInner').height() +130);

			// Width
			if ($pWUrl != ''){
				$('#popWin_iFrame').width('100%');
			}
			$('.popWindow_msgInner').width('100%');
			$('.popWindow_content').width(($('.popWindow_content').height() /9) *16);

			// console.log('Inner: ' + $('.popWindow_msgInner').height());
			// console.log('Content: ' + $('.popWindow_content').height());

			// Mobile
			if ($('.popWindow_msgInner').height() >= ($('.popWindow_content').height() *.8)){

				$('.popWindow_msgInner').height($('.popWindow_msg').height());
				if ($pWUrl != ''){
					$('#popWin_iFrame').height($('.popWindow_msgInner').height() *.75);
				}
				
				// console.log('Inner(update): ' + $('.popWindow_msgInner').height());
				// $('#popWin_iFrame').contents().find('body').addClass('is-active');
			}
		}

	function popWindow_btnSingle(){
		$('.popWinBtn_row div:first-child').addClass('popWinBtn_single');
		$('.popWinBtn_row div:nth-child(2)').hide();
	}

	function popWindow_btnConfirm_red(){
		$('#popWinBtn_confirm').css({'color': 'red'});

			$('#popWinBtn_confirm').hover(function(){
				$(this).css({'background-color': 'red','color': 'white'});
			},function(){
				$(this).css({'background-color': '','color': 'red'});
			});

		$('#popWinBtn_cancel').hover(function(){
			$(this).css({'background-color': 'white','color': 'unset','font-weight': 'bold'});
		},function(){
			$(this).css({'background-color': '','color': '','font-weight': ''});
		});
	}
</script>


<?php
	/*
		--------------------------------------------------
		Just paste the follow inside <body> but below the 'Scripts' from hrefing the 'jquery' library and above the 'custom script'.
			
			<?php include_once(dir_rootPHP.'_global/tools/popWindow.php'); ?>


		--------------------------------------------------
		Use the following code inside 'Scripts (custom)' | to show pWin
			
			// show pop-pWin
				$pWTitle = '';
				$pWMsg = '';
				$pWConfirm = '';
				$pWCancel = '';
				$pWIcon = 0;
			
			popWindow_show($pWTitle,$pWMsg,$pWConfirm,$pWCancel,$pWIcon);


		--------------------------------------------------
		Must use the following code inside 'Scripts (custom)' | to make the 'Confirm' to function
			
			$('#popWinBtn_confirm').click(function(e){
				
				var iFrame_func = $('#popWin_iFrame')[0].contentWindow;

				// call a function/variable inside iframe to check if condition == true for pop-Window to close | 'error_inUsername()' is the function
				if (!iFrame_func.error_inUsername()){
					popWindow_hide();
				}
			});


		--------------------------------------------------
		Use the following code inside 'Scripts (custom)' before 'popWindow_show($pWTitle,$pWMsg,$pWConfirm,$pWCancel,$pWIcon);' | to show "only 1 button"
			
			popWindow_btnSingle();


		--------------------------------------------------
		Use the following code inside 'Scripts (custom)' | to re-design button "style"
			
			$('#popWinBtn_confirm').css({'color': 'red'});
				
			$('#popWinBtn_confirm').hover(function(){
				$(this).css({'background-color': 'red','color': 'white'});
			},function(){
				$(this).css({'background-color': '','color': 'red'});
			});


		--------------------------------------------------
		Example:
			<body>

				<!-- Footer -->
					<?php include_once(dir_rootPHP.'_global/footer/footer.php'); ?>

				<!-- Scripts -->
					<script src="<?php echo dir_root; ?>js/template-hielo/jquery.min.js"></script>
					<script src="<?php echo dir_root; ?>js/template-hielo/jquery.scrollex.min.js"></script>
					<script src="<?php echo dir_root; ?>js/template-hielo/skel.min.js"></script>
					<script src="<?php echo dir_root; ?>js/template-hielo/util.js"></script>
					<script src="<?php echo dir_root; ?>js/template-hielo/main.js"></script>

				
				<!-- ==========  <- Pop-up ->  ========== -->
				<?php include_once(dir_rootPHP.'_global/tools/popWindow.php'); ?>

				
				<!-- Scripts (custom) -->
					<script type="text/javascript">
						popWindow_show();
					</script>
			
			</body>
	*/
?>




<?php
	// empty($pWin_title) ? $pWin_title='Confirmation' : intval($pWin_title);
	// empty($pWin_msg) ? $pWin_msg='Are you sure?' : intval($pWin_msg);
	// isset($pWin_title) ? $pWin_title : $pWin_title='';
	// isset($pWin_msg) ? $pWin_msg : $pWin_msg='';

	// isset($pWin_confirm) ? $pWin_confirm : $pWin_confirm='';
	// isset($pWin_cancel) ? $pWin_cancel : $pWin_cancel='';
?>