
<style type="text/css">
	
	.notif_wrapper{
		display: none;
		position: fixed;
		width: max-content; max-width: 80vw;
		top: 2.5%;

		z-index: 10002;
	}
		.notif_left{
			left: 5%;
		}
		.notif_center{
			left: 50%;
			transform: translate(-50%,0);
		}
		.notif_right{
			right: 5%;
		}

	#notif{
		padding: 15px;

		background-color: white;
		border: 1px solid #eaeaea;
		border-radius: 10px;
		box-shadow: 0 0 10px #cccccc;

		word-wrap: break-word;
	}
		#notif>i{
			margin-right: 10px;
		}
</style>

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

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

<!-- ==========  <- Pop-Notification ->  ========== -->
	<div class="notif_wrapper notif_center">
		<div id="notif" class="animated fadeInDown ctm-toCenter"></div>
	</div>
	<!-- <div id="notif" class="animated fadeInDown"><div id="notif_msg" class="ctm-toCenter"></div></div> -->


<script type="text/javascript">
	
	function popNotif_show($icon,$msg) {
		
		// icon
			switch($icon){
				case 0:
					$ic = '';
					break;
				case 1:  //tick
					$ic = '<i class="fa fa-check-circle-o" style="font-size: 24px; color: green;"></i>';
					break;
				case 2:  //cross
					$ic = '<i class="fa fa-times-circle-o" style="font-size: 24px; color: red;"></i>';
					break;
				case 3:  //exclamation
					$ic = '<i class="fa fa-exclamation-circle" style="font-size: 24px; color: red;"></i>';
					break;
			}
		// align
			// switch($align){
			// 	case 'l':  //align-to 'left'
			// 		$('.notif_wrapper').removeClass('notif_center notif_right').addClass('notif_left');
			// 		break;
			// 	case 'c':  //align-to 'center'
			// 		$('.notif_wrapper').removeClass('notif_left notif_right').addClass('notif_center');
			// 		break;
			// 	case 'r':  //align-to 'right'
			// 		$('.notif_wrapper').removeClass('notif_left notif_center').addClass('notif_right');
			// 		break;
			// }

		// set 'message'
			$('#notif').html($ic+$msg);

		// show 'notification' & add animation
			$('#notif').removeClass('fadeOutUp').addClass('fadeInDown');
			$('.notif_wrapper, #notif').show();

				setTimeout(function() {
					$('#notif').removeClass('fadeInDown').addClass('fadeOutUp');
					setTimeout(function() {
						$('.notif_wrapper').hide();
					}, 600);
				}, 2000);
	}
</script>