<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ page import="com.csc.library.menu.*" %>
<%@ include file="../CHECKPROFILE.jsp" %>
<%@page import="com.csc.library.entry.*,com.csc.library.system.*,com.csc.library.utilities.*,com.csc.library.database.*,com.csc.library.session.*"%>
<% request.setCharacterEncoding("UTF-8"); %>

<jsp:useBean id="MENUORDER" class="com.csc.library.system.Task" scope="page" />
<%
	MENUORDER.setChannel(request,response);
	EmvHelpEntry screen = (EmvHelpEntry)MENUORDER.process("EmvHelpEntry","MGLOORDERHELP");
	UProfile up = (UProfile)session.getAttribute("userprofile");
	String myfilter=" companyid ='"+up.get("companyid")+"'";
	String[] arrglobal=null;
	String listmenu="";
	screen.getInquiry().setFilter(myfilter);
	screen.getInquiry().refresh();
	Menu main_menu = new GlobalMenu_STD(uprofile);
	String mainMenu = main_menu.getMenu();
	if (screen.getInquiry().recCount()>0){
		screen.nextRec();
		arrglobal=screen.getString("globalorder").split(",");
	}else{
		listmenu=main_menu.getListMenu();
		arrglobal=listmenu.split(",");
	}



%>
<script type='text/javascript' src='../JS/EMPVIEW_FUNC.js'></script>
<meta name="viewport" content="width=device-width" content="text/html; charset=UTF-8"/>
<style>
		@font-face {
			font-family: 'oswald';
			src: url("<%=request.getContextPath()%>/fonts/oswald/Oswald-Bold.ttf");
		}
		.bg-test{
			background: url('../IMAGES/EMPVIEW_INDEX/bg/mybg.jpg');
			position:fixed;
			width:100%;
			height:100%;
			top:0px;
			filter:brightness(70%);
			z-index:-1;
		}
		#module_menu{
			/*background:black;*/
			top:0px;
			bottom:0px;
			/*opacity:0.93;*/
			position:absolute;
			width:100%;
			height:100%;
			z-index:1000;
			display: none;
			/*padding-top:6%;*/
			left:0px;

		}
		.mywidth{
		width:80% !important;
		}

		.module_img{
			height: 80%;
			width: 100%;
		}
		.module_footer{
			line-height:40px;
			text-align:center;
			font-size:16px;
			color:white;
		}

		.module_parent{
			padding-top:3% !important;
		}
		.module_child{
			display:block;
			float:left;
			width:300px;
			height:200px;
			background-color:rgba(84, 84, 84, 0.36);
			margin:20px;
			border-radius:10px;
			overflow:hidden;
			cursor:pointer;
			z-index:1001;

		}
		.module_child:hover{
			border:1px solid rgb(74, 74, 74);
			-webkit-box-shadow: 1px 1px 20px 0px rgba(168,166,168,0.78);
			-moz-box-shadow: 1px 1px 20px 0px rgba(168,166,168,0.78);
			box-shadow: 1px 1px 20px 0px rgba(168,166,168,0.78);
		}
		.module_child_double{
			display:block;
			float:left;
			width:640px;
			height:200px;
			/*background-color:rgba(84, 84, 84, 0.36);*/
			background-color:inherit;
			margin:20px;
			border-radius:10px;
			overflow:hidden;
			cursor:pointer;
		}
		#count_date{
			/*font-family: "oswald";*/
			font-size: 40px;
			padding-left:30px;
			color: rgba(255,255,255,0.8);
			cursor:default !important;
		}
		#count_time{
			font-family: "oswald";
			font-size: 50px;
			font-weight:bold;
			padding-left: 30px;
			color : rgba(255,255,255,0.8);
			cursor:default !important;
		}
		.exit_icon{
			color:white;
			background:red;
		}
		.module_top{
			position:fixed;
			top:20px;
			right:20px;
		}

		#before_go{
			position:fixed;
			top:0px;
			width:100%;
			height:100%;
			background-color:red;
			display:none;
			z-index:1002;
		}
		#before_go span{
			display:table-cell;
			vertical-align:middle;
			font-size:40px;
			color:white;
			text-align:center;
		}
		.home_button {
			color: #fff;
			background-color: #337ab7 !important;
			/*background-color: inherit !important;*/
			border-color: #2e6da4;
			/*border-color: inherit;*/
			width:inherit !important;
			border-radius:4px !important;
		}

		@media screen and (max-width:1920px) {
			.module_child{
				width:300px;
				height:200px;
			}
		}

		@media screen and (max-width: 1440px) {
			.module_child{
				width:210px;
				height:140px;
			}
			.module_child_double{
				height:150px !important;
				width:460px !important;
			}
			.module_footer{
				font-size: 15px;
				line-height:30px;
			}
			#count_time{
				font-size: 42px !important;
			}
			#count_date{
				font-size: 28px !important;
			}
			.module_parent{
				padding-top:1% !important;
			}
		}

		@media screen and (max-width: 1366px){
			.module_child{
				height:150px !important;
				width:200px !important;
			}
			.module_child_double{
				height:150px !important;
				width:440px !important;
			}
			.module_footer{
				font-size: 15px;
			}
			#count_time{
				font-size: 40px !important;
			}
			#count_date{
				font-size: 26px !important;
			}
			.module_parent{
				padding-top:1% !important;
			}
		}

		@media screen and (max-width: 1100px) {
			.module_child{
				width:180px;
				height:140px;
			}
			.module_footer{
				line-height:30px;
				font-size: 14px;
			}
			.module_parent{
				padding-top:1% !important;
			}
		}

</style>
<script type="text/javascript">
	lang="<%=up.get("lang")%>";
	setCalendarLang(lang);
	function startTime() {
		var fullstringdate="";
		var today = new Date();
		var ddnum=today.getDate();
		var dd=today.getDay();
		var mm=today.getMonth();
		var yy=today.getFullYear();

		var h = today.getHours();
		var m = today.getMinutes();
		var s = today.getSeconds();
		m = checkTime(m);
		s = checkTime(s);

		mm = getMonthFullName(mm+1);
		dd = getDayFullName(dd);


		if (lang == "tha"){
			yy=yy+543;
			fullstringdate="วัน"+dd+"ที่ "+ddnum+" "+mm+" "+yy;
		}else {
			fullstringdate=dd+" "+ddnum+"<sup>"+checkDayFullname(ddnum)+"</sup>"+" "+mm+" "+yy;
		}

		$("#count_time").html(h + ":" + m + ":" + s);
		$("#count_date").html(fullstringdate);
		var t = setTimeout(startTime, 500);

	}

	function checkTime(i) {
		if (i < 10){
			i = "0" + i
		};
		return i;
	}

	function showStyle(){
		console.log($(".module_footer").attr("id"));
	}
</script>
<div ng-app="myHR" id='module_menu' ng-init='menu =<%=mainMenu%>'>
	<div class="bg-test"></div>
	<div class="module_top"><a class="btn btn-primary home_button" href="../EMPVIEW/INDEX.jsp"><i class="fa fa-home"></i></a>&nbsp;&nbsp;<button type="button" class="btn btn-danger exit_button">X</button></div>
	<div class="container mywidth">
		<ul class="module_parent" >
			<span id="count_time"></span><span id="count_date"></span>
			<div class="myscrollmenu">
				<%
					for (int i=0;i<arrglobal.length;i++){
				%>
					<li class="module_child" ng-if="menu.<%=arrglobal[i]%>.codeid!=null">
						<img class="module_img" ng-src="{{menu.<%=arrglobal[i]%>.pic}}" />
						<div class="module_footer" ng-style="myStyle={'background':'{{menu.<%=arrglobal[i]%>.style}}'}" id="{{menu.<%=arrglobal[i]%>.name}}" link="{{menu.<%=arrglobal[i]%>.link}}" data-st="{{menu.<%=arrglobal[i]%>.style}}">{{menu.<%=arrglobal[i]%>.name}}</div>
					</li>
				<%
					}
				%>
				<script>
					startTime();
				</script>
			</div>
		</ul>
	</div>
</div>
<div id="before_go"><span>Go to .</span></div>
<script>
	$(function(){
		$(".exit_icon").click(function(){
			$("#module_menu").css("display","none");
		});

		$(".exit_button").click(function(){
			$("#module_menu").css("display","none");
			$('body').css('overflow-y', 'scroll');
			var pathname = window.location.pathname.split('/');
		});

		/*$(".home_button").click(function(){
			window.location.href = "../EMPVIEW/INDEX.jsp";
		});*/

		$(".module_child").click(function(){
			if ($(this).find(".module_footer").attr("link")!=''){
				goTo($(this).find(".module_footer").attr("link"));
			}
		});
	});

	function goTo(route){
		window.location.href = route;
	}
</script>