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

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

		popAlert_show($title,$msg,$confirm,$cancel,$icon);
		
		popAlert_btnSingle();
	*/
?>

<!-- ==========  <- Pop-up ->  ========== -->
	<div class="popAlert_bg">
		<div class="animated fadeIn popAlert_overlay"></div>
		<div class="animated bounceIn popAlert_content">
			<!-- Message -->
			<div class="pop_msg ctm-toCenter">
				<div class="pop_msgInner">
					<alertIcon></alertIcon>
					<alertTitle></alertTitle><br>
					<alertMsg></alertMsg>
				</div>
			</div>
			<!-- Buttons -->
			<div class="popBtn_row">
				<div class="popBtn ctm-col_50 ctm-toCenter" id="popBtn_confirm"></div>
				<div class="popBtn ctm-col_50 ctm-toCenter" id="popBtn_cancel"></div>
			</div>
		</div>
	</div>


<script type="text/javascript">
	
	var animTime = 600;
	popAlert_default();

	function popAlert_default(){
		
		// default-text
		if ( $('alertTitle, alertMsg, #popBtn_confirm, #popBtn_cancel').html() == '' ){
			set_alertText('Are you sure?','confirm to agree','Confirm','Cancel',0);
		}

		// default-style (msg)
		$('alertIcon, alertTitle, alertMsg').addClass('popMsgEl_toCenter');
		$('alertIcon, alertTitle, alertMsg').removeAttr('style');

		// default-style (btn)
		if ( $('#popBtn_confirm').hasClass('popBtn_bgGreen_hov') == false ){
			$('#popBtn_confirm').addClass('popBtn_bgGreen_hov');
		}
		if ( $('#popBtn_cancel').hasClass('popBtn_bgRed_hov') == false ){
			$('#popBtn_cancel').addClass('popBtn_bgRed_hov');
		}

		// return-default (clicked)
		$('#popBtn_confirm, #popBtn_cancel').click(function(){
			$('.popAlert_bg>.popAlert_content').removeClass('bounceIn').addClass('fadeOutUp');
			$('.popAlert_bg>.popAlert_overlay').removeClass('fadeIn').addClass('fadeOut');

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

				// reset buttons to 'default'
				$('#popBtn_confirm, #popBtn_cancel').unbind();				//unset all event listener
				$('#popBtn_confirm, #popBtn_cancel, .popAlert_content').removeAttr('style');	//unset all style
				$('#popBtn_confirm').removeClass('popBtn_single');			//reset to single button
				$('#popBtn_cancel').show();

				// return-default settings
				popAlert_default();
			}, animTime);
		});
	}

	function popAlert_show($title,$msg,$confirm,$cancel,$icon){
		
		// reset-text to default
		set_alertText($title,$msg,$confirm,$cancel,$icon);

		// animation
		$('.popAlert_bg>.popAlert_content').removeClass('fadeOutUp').addClass('bounceIn');
		$('.popAlert_bg>.popAlert_overlay').removeClass('fadeOut').addClass('fadeIn');

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


			// 'Enlarge' when text is many

			// // Height
			// $('.pop_msgInner').height($('alertMsg').height() + $('alertTitle').height() + $('alertIcon').height());

			// $('.popAlert_content').height($('.pop_msgInner').height() +120);

			// // Mobile
			// if ($('.pop_msgInner').height() >= ($('.popAlert_content').height() *.8)){

			// 	$('.pop_msgInner').height($('alertMsg').height());
			// 	$('alertMsg').height($('.pop_msgInner').height() *.75);

			// 	$('.pop_msgInner').css({ 'height': $('.popAlert_content').height() -150, 'overflow-y': 'auto' });
			// }

			// // Width
			// $('.popAlert_content').width(($('.popAlert_content').height() /9) *16);
			// $('.pop_msgInner').width('80%');
			// $('.pop_msgInner').height($('alertMsg').height() + $('alertTitle').height() + $('alertIcon').height() -60);

			var msgInner = $('.pop_msgInner');
			var content = $('.popAlert_content');

			if (msgInner.height() > 240){
				content.css({ 'width': msgInner.height() *1.5 });
				msgInner.css({ 'width': content.width() *.9 });

				content.css({ 'height': msgInner.height() *1.5 });
			}
			else if (msgInner.height() > 110){
				content.css({ 'width': msgInner.width() *1.5 });
				msgInner.css({ 'width': content.width() *.9 });

				content.css({ 'height': msgInner.height() +150 });
			}

			if (msgInner.height() > $('.pop_msg').height()){
				msgInner.css({ 'height': content.height() -150, 'overflow-y': 'auto' });
			}

			if (msgInner.height() < 120){
				content.css({ 'width': '400px', 'height': '200px' });
			}
	}

		function set_alertText($title,$msg,$confirm,$cancel,$icon){
			$('alertTitle').html('<span>'+$title+'</span>');
			$('alertMsg').html($msg);
			$('#popBtn_confirm').html($confirm);
			$('#popBtn_cancel').html($cancel);

			switch($icon){
				case 0:
					$('alertIcon').html('');
					$('alertIcon').hide();
					break;
				case 1:  //tick
					$('alertIcon').html('<i class="fa fa-check-circle-o" style="font-size: 36px; color: green;"></i><br>');
					// $('alertIcon').show();
					break;
				case 2:  //cross
					$('alertIcon').html('<i class="fa fa-times-circle-o" style="font-size: 36px; color: red;"></i><br>');
					// $('alertIcon').show();
					break;
				case 3:  //exclamation
					$('alertIcon').html('<i class="fa fa-exclamation-circle" style="font-size: 36px; color: red;"></i><br>');
					// $('alertIcon').show();
					break;
				case 4:  //warning
					$('alertIcon').html('<i class="fa fa-exclamation-triangle" style="font-size: 36px; color: orange;"></i><br>');
					// $('alertIcon').show();
					break;
			}
		}

		function popAlert_btnSingle(){
			$('.popBtn_row div:first-child').addClass('popBtn_single');
			$('.popBtn_row div:nth-child(2)').hide();
		}

		function popAlert_btnConfirm_red(){
			$('#popBtn_confirm').css({'color': 'red'});

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

			$('#popBtn_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/popAlert.php'); ?>


		--------------------------------------------------
		Use the following code inside 'Scripts (custom)' | to show alert
			
			// show pop-alert
				$title = '';
				$msg = '';
				$confirm = '';
				$cancel = '';
				$icon = 0;
			
			popAlert_show($title,$msg,$confirm,$cancel,$icon);


		--------------------------------------------------
		Use the following code inside 'Scripts (custom)' before 'popAlert_show($title,$msg,$confirm,$cancel,$icon);' | to alight to "Left"
			
			$('alertTitle').removeClass('popMsgEl_toCenter'); // make 'Title' to left
			$('alertmsg').removeClass('popMsgEl_toCenter'); // make 'Message' to left


		--------------------------------------------------
		Use the following code inside 'Scripts (custom)' before 'popAlert_show($title,$msg,$confirm,$cancel,$icon);' | to show "only 1 button"
			
			popAlert_btnSingle();


		--------------------------------------------------
		Use the following code inside 'Scripts (custom)' | to re-design button "style"
			
			$('#popBtn_confirm').css({'color': 'red'});
				
			$('#popBtn_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/popAlert.php'); ?>

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




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

	// isset($alert_confirm) ? $alert_confirm : $alert_confirm='';
	// isset($alert_cancel) ? $alert_cancel : $alert_cancel='';
?>