<style>
		#bgi{
			display:table;
			top:0px;
			left:0px;
			width:100%;
			height:100vh;
			background-color:#c7b299;
			background-repeat:no-repeat;
			background-position:center center;
			background-image: url('$blank.getData()');
			-webkit-transition: background-image 2s ease-in-out;
			transition: background-image 2s ease-in-out;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			justify-content:center;
			align-items:center;
			vertical-align: middle;
			min-height: 570px;
		}
		.bgi-wrapper{
			display: table-cell;
			vertical-align: middle;
			text-align: center;
		}
		#s1-2{
			display: inline-block;
			vertical-align: middle;
			position: relative;
			top:-20px;
		}
		#s1,#s2{
			opacity:0;
			font-size:60px;
			color:white;
			text-shadow: 2px 2px 2px rgba(150,150,150,0.3);
			-webkit-transition: opacity 1s;
			transition: opacity 1s;
		}
		#s3{
			margin:auto;
			text-align: center;
			vertical-align: middle;
			display: none;
		}
		.nav{
			opacity:0;
			-webkit-transition: opacity 1s;
			transition: opacity 1s;
			text-align: left;
			padding-left: 20px;
		}
		.nav a{
			color:black;
			line-height:55px;
			font-size:20px;
			font-weight:900;
		}
		.title{
			color:white;
			font-size:70px;
			text-shadow: 2px 2px 2px rgba(150,150,150,0.3);
			letter-spacing:7px;
			line-height: 1;
			font-weight: 900;
			position: relative;
			top:180px;
			transition: top 1s;
			font-feature-settings: "liga" 0;
			padding: 10px 0 20px;
		}
		.navbar{
			display: none;
			position: absolute;
			top:0px;
			left:0px;
			background-color: transparent;
			border:none;
		}
		.navbar-default .navbar-link,
		.navbar-default .navbar-text{
			margin-top:20px;
		    color: #000;
		}
		#logo-img{
			height:51px;
			width:auto;
			margin-top:-8px;
		}
		#menu-text{
			display:inline-block;
			padding:19px 30px;
			background-color:#FAAF40;
			margin-right:15px;
			float:right;
		}

		.font-change{
			font-size:0;
		}

		.font-small{
			font-size:13px;
		}

		.font-middle{
			font-size:18px;
		}

		.font-large{
			font-size:23px;
		}

		.font-change + .font-change{
			margin-left:0px;
		}

		.font-change:hover{
			cursor:pointer;
		}

		.navbar-default .font-wrapper{
			margin-top:0px;
			position:relative;
			top:10px;
		}

		.lang:hover{
			cursor:pointer;
		}

		.lang+.lang{
			display:inline;
			padding-left:4px;
			margin-left:0px;
			border-left:1px solid #000;
		}
	</style>
	<nav class="navbar navbar-default">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div>
	      <a class="navbar-brand" href="home">
			<img src="$logo.getData()" id="logo-img" alt="logo">
		  </a>
		  </button>
		      <span id="menu-text">HOME</span>
	      <span class="navbar-text hidden-xs font-wrapper">
	        <span class="font-change font-small" onclick="changeFontSize('small')">A</span>
	        <span class="font-change font-middle" onclick="changeFontSize('medium')">A</span>
	        <span class="font-change font-large" onclick="changeFontSize('large')">A</span>
	      </span>
	      <span class="navbar-text">
	      	<!--<span id="nav-en" class="lang" onclick="changeLang('en_US')">ENG</span>-->
	      	<span id="nav-tw" class="lang" onclick="changeLang('zh_TW')">䌓</span>
	      	<span id="nav-cn" class="lang" onclick="changeLang('zh_CN')">簡</span>
	      </span>
	    </div>
	</nav>
	<div id="bgi">
		<div class="bgi-wrapper">
			<div id="s1-2">
				<div id="s1">Perserving our legacy</div>
				<div id="s2">and keeping history alive</div>
			</div>
			<div id="s3">
				<div>
					<div class="title">Conservation Office</div>
					<div class="nav"><a href="about_us">About us</a></div>
					<div class="nav"><a href="airport_display">Airport Display</a></div>
					<div class="nav"><a href="#">Education and Extension</a></div>
					<div class="nav"><a href="#">Publications</a></div>
					<div class="nav"><a href="#">Link</a></div>
					<div class="nav"><a href="#">Resources Centre</a></div>
					<div class="nav"><a href="#">Back to LCSD</a></div>
				</div>
			</div>
		</div>
	</div>

	#foreach($n in $bgi.getSiblings())
	<img src="$n.getData()" class="bgi" style="position:absolute;top:0;visibility:hidden;width:0px;height:0px;"/>
	#end

	<script>
	var k = 1;
	var i = 1;
	var l = 0;
	var bgi = [];
	function animation(){
		//if(k==0) $('#s1').css('opacity',1);
		if(k==1){
$('#s2').css('opacity',1);
 $('#s1').css('opacity',1);
			setTimeout(function(){
$('.navbar').fadeIn(1000);

			},0);
}
		if(k==2){
			$('#s1').css('opacity','0');
			$('#s2').css('opacity','0');
			setTimeout(function(){
				$('#s1-2').css('display','none');
				$("#s3").fadeIn(1000).css("display","inline-block");
			},1000);
		}
		if(k==3){
			$('.title').css('top','0px');
setTimeout(function(){
				$('.nav').css('opacity',1);
			},1000);
		}
		if(k==4){
			$('#bgi').css('background-image','url($firstpic.getData())');

		}
		k++;
	}

	function loopImage(){
		setTimeout(function(){animation()},1000);
		if(k>5) $('#bgi').css('background-image','url('+bgi[i++]+')');
		if(i>=l)i=0;
                if(k>=4)setTimeout(function(){loopImage()},5000);
		if(k<4&&k>0)setTimeout(function(){loopImage()},2000);
	}

	$(function(){
		$('.bgi').each(function(){
			bgi.push($(this).attr('src'));
		});
		l = bgi.length;
		loopImage();
	});
	</script>