<%@page contentType="text/html; charset=UTF-8"%>
<%@page import="com.csc.library.entry.HelpEntry,com.csc.library.system.*,com.csc.library.utilities.*"%>
<%@ page import="com.csc.library.entry.*,com.csc.library.database.*,com.csc.library.session.*"  %>
<%@ include file="../CHECKPROFILE.jsp" %>
<jsp:useBean id="logout" class="com.csc.library.system.Task" scope="page"/>
<%
	logout.setChannel(request,response);
	logout.checkProfile();
	UProfile uf=(UProfile)session.getAttribute("userprofile");
	if( uf != null ){
		String userID=uf.getUserId();
		//logout.saveLogoutLog(uf);
	}
	session.invalidate();
%>
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>Logout.jsp</title>
<link href="CSS/Bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="CSS/Bootstrap/css/bootstrap-theme.css" rel="stylesheet">
<script src="JS/jquery-2.1.3.min.js"></script>
<script src="JS/bootstrap.js"></script>
<style>
	.main{
		/*background:url("IMAGES/F8.jpg") no-repeat center;*/
		background-color:#0072C6;
		/*background-color: gray;*/
		background-size: 100% 300%;
	}

	@media screen and (max-width: 1680px){
		.text-logout{
			margin-top: 25% !important;
			margin-left: 28% !important;
			font-size: 40px !important;
		}
		.spinner{
			margin-left: 59% !important;
		}
	}

	@media screen and (max-width: 1600px){
		.text-logout{
			margin-top: 22% !important;
			margin-left: 27% !important;
			font-size: 40px !important;
		}
		.spinner{
			margin-left: 61% !important;
		}
	}

	@media screen and (max-width: 1440px){
		.text-logout{
			margin-top: 25% !important;
			margin-left: 26% !important;
			font-size: 37px !important;
		}
		.spinner{
			margin-left: 62% !important;
		}
	}
	@media screen and (device-aspect-ratio: 1400/1050){
		.text-logout{
			margin-top: 31% !important;
			margin-left: 27% !important;
			font-size: 37px !important;
		}
		.spinner{
			margin-left: 64% !important;
		}
	}

	@media screen and (max-width: 1366px){
		.text-logout{
			margin-top: 21% !important;
			margin-left: 27% !important;
			font-size: 34px !important;
		}
		.spinner{
			margin-left: 60% !important;
		}
	}

	/*@media screen and (device-aspect-ratio: 1280/1024){*/
	@media screen and (max-width: 1280px) and (max-height: 1024px){
		.text-logout{
			margin-top: 31% !important;
			margin-left: 25% !important;
			font-size: 35px !important;
		}
		.spinner{
			margin-left: 64% !important;
		}
	}

	/*@media screen and (device-aspect-ratio: 1280/960){*/
	@media screen and (max-width: 1280px) and (max-device-height: 960px){
		.text-logout{
			margin-top: 29% !important;
			margin-left: 25% !important;
			font-size: 33px !important;
		}
		.spinner{
			margin-left: 60% !important;
		}
	}

	@media screen and (max-width: 1280px) and (max-device-height: 800px){
		.text-logout{
			margin-top: 22% !important;
			margin-left: 25% !important;
			font-size: 33px !important;
		}
		.spinner{
			margin-left: 60% !important;
		}
	}

	@media screen and (max-width: 1152px){
		.text-logout{
			margin-top: 29% !important;
			margin-left: 25% !important;
			font-size: 32px !important;
		}
		.spinner{
			margin-left: 66% !important;
		}
	}

	@media screen and (max-width: 1024px){
		.text-logout{
			margin-top: 27% !important;
			margin-left: 25% !important;
			font-size: 30px !important;
		}
		.spinner{
			margin-left: 69% !important;
		}

	}

	.text-logout
	{
		margin-top: 22%;
		margin-left: 30%;
		position: relative;
		/*font-weight : bold;*/
		font-family: "Segoe UI","Open Sans",serif;
		font-size: 40px;
		/*color : #FF1919;*/
		color: #ffffff;
	}

	.spinner{
		margin-top: -47px;
		margin-left: 53%;
		height: 50px;
		width: 50px;
		animation: rotate 0.8s infinite linear;
		border: 10px solid #FFFFFF;
		border-right-color: transparent;
		border-radius:50%;
		z-index: 2;
	}

	@keyframes rotate{
		0% {transform:rotate(0deg);}
		100% {transform:rotate(360deg);}
	}
</style>

<script language="javascript">
	/*var r=Math.round(Math.random()*255);
	var g=Math.round(Math.random()*255);
	var b=Math.round(Math.random()*255);*/

	var num_dot=0;
	var str_dot="";
	var r=0;
	var g=114;
	var b=148;


	function ShadeColor(){

		/*if ((r+2)<=255){
			r=r+2;
		}*/

		/*if ((g+1)<=255){
			g=g+1;
		}*/

		if ((b+1)<=255){
			b=b+1;
		}

		return "rgb("+r+","+g+","+b+")";

		/*var color_new=color_bg.split(",");

		r=color_new[0].split("(");
		r=CheckColorCode(eval("parseInt(r[1])+tone_color"));
		g=CheckColorCode(eval("parseInt(color_new[1])+tone_color"));
		b=color_new[2].split(")");
		b=CheckColorCode(eval("parseInt(b[0])+tone_color"));

		return "rgb("+r+","+g+","+b+")";*/
	}

	function logout()
	{
		location="INDEX.jsp";
	}

	function setTimer()
	{
		setTimeout("logout()",1000);
	}

	/*function show_dot()
	{
		$("#show_dot").html(str_dot);
		str_dot=str_dot+".";
		num_dot+=1;

		if ((num_dot%5)==0)
		{
			str_dot="";
		}

		if (num_dot==300)
		{
			return;
		}

		setTimeout("show_dot()",200);
	}*/

	function changecolor(){

		$("body").css("background",ShadeColor());
		setTimeout("changecolor()",70);
	}

	$("document").ready(function()
	{
		//$("body").css('background',ShadeColor());
		//changecolor();
		//show_dot();
		setTimer();
	});
</script>

</head>

<body class="main">
	<div class="text-logout">
		Logging Out.  Please wait for a moment <div class="spinner"></div><!--<span id="show_dot"></span>-->
	</div>
</body>

<!--
<body class="bg-mob" onload="setTimer();">
	<div class="box-one box-one-change box-one-change-mob">
		<img src="IMAGES/Logo_hrlogin.jpg" class="logo-pic logo-pic-change">

		<form name="cscform" method="post" target="_top">
			 <!----------BEGIN CSC INITIAL ZONE ------------------------>
			 <%//=screen.InitialVariable()%>
			 <!----------END CSC INITIAL ZONE -------------------------->

			<!--<div class="text-logout text-logout-change">

				<div id="show_dot">
				</div>
			</div>

		</form>
	</div>
</body>-->
</html>