<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />  
    <title></title>
	<style>
		#preloader-body{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #fff;
			z-index: 9999;

		}
		.cube-folding {
			width: 50px;
			height: 50px;
			display: inline-block;
			-moz-transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			font-size: 0;
		}
		.cube-folding span {
			position: relative;
			width: 25px;
			height: 25px;
			-moz-transform: scale(1.1);
			-ms-transform: scale(1.1);
			-webkit-transform: scale(1.1);
			transform: scale(1.1);
			display: inline-block;
		}
		.cube-folding span::before {
			content: '';
			background-color: #007ee5;
			position: absolute;
			left: 0;
			top: 0;
			display: block;
			width: 25px;
			height: 25px;
			-moz-transform-origin: 100% 100%;
			-ms-transform-origin: 100% 100%;
			-webkit-transform-origin: 100% 100%;
			transform-origin: 100% 100%;
			-moz-animation: folding 1.5s infinite linear both;
			-webkit-animation: folding 1.5s infinite linear both;
			animation: folding 1.5s infinite linear both;
		}
		.cube-folding .leaf2 {
			-moz-transform: rotateZ(90deg) scale(1.1);
			-ms-transform: rotateZ(90deg) scale(1.1);
			-webkit-transform: rotateZ(90deg) scale(1.1);
			transform: rotateZ(90deg) scale(1.1);
		}
		.cube-folding .leaf2::before {
			-moz-animation-delay: 0.3s;
			-webkit-animation-delay: 0.3s;
			animation-delay: 0.3s;
			background-color: #34a4ff;
		}
		.cube-folding .leaf3 {
			-moz-transform: rotateZ(270deg) scale(1.1);
			-ms-transform: rotateZ(270deg) scale(1.1);
			-webkit-transform: rotateZ(270deg) scale(1.1);
			transform: rotateZ(270deg) scale(1.1);
		}
		.cube-folding .leaf3::before {
			-moz-animation-delay: 0.9s;
			-webkit-animation-delay: 0.9s;
			animation-delay: 0.9s;
			background-color: #83c7ff;
		}
		.cube-folding .leaf4 {
			-moz-transform: rotateZ(180deg) scale(1.1);
			-ms-transform: rotateZ(180deg) scale(1.1);
			-webkit-transform: rotateZ(180deg) scale(1.1);
			transform: rotateZ(180deg) scale(1.1);
		}
		.cube-folding .leaf4::before {
			-moz-animation-delay: 0.6s;
			-webkit-animation-delay: 0.6s;
			animation-delay: 0.6s;
			background-color: #5cb6ff;
		}

		@-moz-keyframes folding {
			0%, 10% {
				-moz-transform: perspective(140px) rotateX(-180deg);
				transform: perspective(140px) rotateX(-180deg);
				opacity: 0;
			}
			25%, 75% {
				-moz-transform: perspective(140px) rotateX(0deg);
				transform: perspective(140px) rotateX(0deg);
				opacity: 1;
			}
			90%, 100% {
				-moz-transform: perspective(140px) rotateY(180deg);
				transform: perspective(140px) rotateY(180deg);
				opacity: 0;
			}
		}
		@-webkit-keyframes folding {
			0%, 10% {
				-webkit-transform: perspective(140px) rotateX(-180deg);
				transform: perspective(140px) rotateX(-180deg);
				opacity: 0;
			}
			25%, 75% {
				-webkit-transform: perspective(140px) rotateX(0deg);
				transform: perspective(140px) rotateX(0deg);
				opacity: 1;
			}
			90%, 100% {
				-webkit-transform: perspective(140px) rotateY(180deg);
				transform: perspective(140px) rotateY(180deg);
				opacity: 0;
			}
		}
		@keyframes folding {
			0%, 10% {
				-moz-transform: perspective(140px) rotateX(-180deg);
				-ms-transform: perspective(140px) rotateX(-180deg);
				-webkit-transform: perspective(140px) rotateX(-180deg);
				transform: perspective(140px) rotateX(-180deg);
				opacity: 0;
			}
			25%, 75% {
				-moz-transform: perspective(140px) rotateX(0deg);
				-ms-transform: perspective(140px) rotateX(0deg);
				-webkit-transform: perspective(140px) rotateX(0deg);
				transform: perspective(140px) rotateX(0deg);
				opacity: 1;
			}
			90%, 100% {
				-moz-transform: perspective(140px) rotateY(180deg);
				-ms-transform: perspective(140px) rotateY(180deg);
				-webkit-transform: perspective(140px) rotateY(180deg);
				transform: perspective(140px) rotateY(180deg);
				opacity: 0;
			}
		}
		#cube-wrapper1 {
			position: fixed;
			left: 36%;
			width: 540px;
			text-align: center;
		}
		#cube-wrapper {
			position: fixed;
			left: 50%;
			top: 50%;
			margin-top: -50px;
			margin-left: -50px;
			width: 100px;
			height: 100px;
			text-align: center;
		}
		#cube-wrapper:after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: -20px;
			margin: auto;
			width: 90px;
			height: 6px;
			background-color: rgba(0, 0, 0, 0.1);
			-webkit-filter: blur(2px);
			filter: blur(2px);
			-moz-border-radius: 100%;
			-webkit-border-radius: 100%;
			border-radius: 100%;
			z-index: 1;
			-moz-animation: shadow 0.5s ease infinite alternate;
			-webkit-animation: shadow 0.5s ease infinite alternate;
			animation: shadow 0.5s ease infinite alternate;
		}
		#cube-wrapper .loading {
			font-size: 12px;
			letter-spacing: 0.1em;
			display: block;
			color: #007ee5;
			position: relative;
			top: 25px;
			z-index: 2;
			-moz-animation: text 0.5s ease infinite alternate;
			-webkit-animation: text 0.5s ease infinite alternate;
			animation: text 0.5s ease infinite alternate;
		}
		#cube-wrapper1 .loading {
			font-size: 12px;
			letter-spacing: 0.1em;
			display: block;
			color: #007ee5;
			position: relative;
			top: 25px;
			z-index: 2;
			-moz-animation: text 0.5s ease infinite alternate;
			-webkit-animation: text 0.5s ease infinite alternate;
			animation: text 0.5s ease infinite alternate;
		}
	</style>
	<script src="/static/MultBrowser/jquery-1.11.2.min.js"></script>
	<script src="/static/MultBrowser/MultBrowser-1.0.2.js"></script>
	<script src="/static/MultBrowser/bootstrap.min.js" ></script>
	<script src="/static/MultBrowser/base64.js" ></script>
	<script src="/static/MultBrowser/json.js" ></script>
	<script src="/static/MultBrowser/jsonp.js"></script>

	<script language="javascript">
     
		
	    //功能说明：创建AZTBrowser浏览器并打开URL地址后的回调用函数
		//参数1：状态值
		//参数2：AZTBrowser浏览器的ID号，如果打开多个，此ID不同
		function callBackBrowserURL(error, id){
			if(error == 0){  //调用成功
				//功能说明：监听AZTBrowser浏览器返回状态和数据
				//参数1：AZTBrowser浏览器的ID号
				//参数2：监听间隔时间，以秒位单位
				//参数3：回调函数
				MultBrowser.waitStatus(id, "2", callBackWaitStatus);
			}
		}

         //功能说明：监听AZTBrowser浏览器返回状态和数据
		 //参数1：AZTBrowser浏览器的ID号，如果打开多个，此ID不同
		 //参数2：状态值
		 //参数3：AZTBrowser浏览器返回来的ID号
		 //参数4：AZTBrowser浏览器返回来的内容
		function callBackWaitStatus(id, error, status, msg){
			if(error == 0){
				if(status == "0"){
					//超时
					//alert("我啥也不做");
				}
				else{
					//成功
					// alert(status + "---" + msg);  //通过这里的数据进行刷新调用方页面等操作
					if(status == "3"){
						// alert(status + "---" + msg);
						window.location.href='about:blank';
						window.close();
					}
				}
                
				//继续循环监听
				MultBrowser.waitStatus(id, "2", callBackWaitStatus);
			}
		}
		//通过AZTBrowser来打开需要的地址
		function openURL(){
			var activexURL = document.getElementById('p_apihead').innerHTML;

			//功能说明：创建AZTBrowser浏览器并打开URL地址
			//参数1：URL地址
			//参数2：是否置顶 1表示置顶，0表示不置顶
			//参数3：回调函数
			MultBrowser.openBrowserURL(activexURL, "1", callBackBrowserURL);
		}
		$(document).ready(function(){
			openURL();
		});

	</script>
<body>
	<p id="p_apihead" th:text="${apiHead}" hidden="hidden"></p>
<!--    <button type="button" onclick="openURL()">通过MultBrowser来打开控件</button>-->
	<div id="preloader-body">
		<div id="cube-wrapper">
			<div class="cube-folding">
				<span class="leaf1"></span>
				<span class="leaf2"></span>
				<span class="leaf3"></span>
				<span class="leaf4"></span>
			</div>
			<span class="loading" data-name="Loading">
				Ongoing
			</span>
		</div>
		<div id="cube-wrapper1">
			<span class="loading" data-name="Loading">
				若未见【ESAPro电子印章系统】页面控件请点击【<a th:href="${exepath}">下载控件</a>】，完成安装后刷新页面重试
			</span>
		</div>
	</div>
</body>
</head>
</html>