<style type="text/css">
		#control_container {
		padding: 6px 8px;
	}
	#thumb-item-container {
		/****** width: 1036px; need dynamic calculate ? ******/
		padding: 0px;
		margin: 0px;
		margin-left: 0px;
	}
	#thumb-item-container li {
		display: inline-block;
		height: 80px;
		margin-right: 10px;
		margin-bottom: 10px;
		float: left;
	}
	#thumb-item-container li a img {
		border: 2px solid #999999;
		height: 80px;
		opacity: 0.5;
		filter: alpha(opacity=50);
	}
	#thumb-item-container li.active a img, #thumb-item-container li a:hover img, #thumb-item-container li a:focus img {
		border: 2px solid #000000;
		opacity: 1;
		filter: alpha(opacity=100);
		/*border: 2px solid #000000;
		-webkit-box-shadow: 5px 5px 5px 0px rgba(204,204,204,1);
		-moz-box-shadow: 5px 5px 5px 0px rgba(204,204,204,1);
		box-shadow: 5px 5px 5px 0px rgba(204,204,204,1);*/
	}
	.img_desc, .img_id {
		display: none;
	}
	#main_content {
		/*padding: 0px 12px;*/
	}
	#main_content a:hover, #main_content a:focus {
		text-decoration: underline;
	}
	#main_img {
		/*position: absolute;*/
		/*left: -9999px;*/
		/* For Tablet version
		width: 95%;
		*/
		/* For Desktop version */
		/*max-width: 895px;
		max-height: 650px;*/
		/**/
	}
	#canvas {
		/*max-height: 650px;*/
		z-index: 999999;
	}
	.img_title {
		font-size: 100%;
	}
	.img_identifier, .img_desc_taken_by, .img_desc_loc, .img_desc_lat, .img_desc_lng, .img_desc_photo_date, .img_desc_dir, .img_cloudcode {
		font-size: 86%;
		font-style: italic;
	}
	.img_identifier {
		margin-top: 12px;
	}
	.main_img_desc {
		padding-top: 8px;
	}
	.main_img_desc p {
		padding: 2px 18px;
		margin: 0px;
	}
	.btn_left_arrow, .btn_right_arrow {
		display: none;
		position: fixed;
		z-index: 999;
		height: 80px;
		padding: 15px 10px;
		top: 45%;
		font-weight: bold;
		line-height: 50px;
		background-color: rgba(0, 0, 0, 0.4);
		color: #FFFFFF;
		text-decoration: none;
		font-size: 150%;
	}
	.btn_left_arrow {
		left: 8px;
		-webkit-border-top-right-radius: 6px;
		-webkit-border-bottom-right-radius: 6px;
		-moz-border-radius-topright: 6px;
		-moz-border-radius-bottomright: 6px;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}
	.btn_right_arrow {
		right: 8px;
		-webkit-border-top-left-radius: 6px;
		-webkit-border-bottom-left-radius: 6px;
		-moz-border-radius-topleft: 6px;
		-moz-border-radius-bottomleft: 6px;
		border-top-left-radius: 6px;
		border-bottom-left-radius: 6px;
	}
	#btn-screenfull-v1 {
		margin-left: 20px;
	}
	[class*="annotation-"] {
		position: absolute;
		z-index: 10;
		border: 3px solid #FF0000;
		border-top-left-radius: inherit;
		border-top-right-radius: inherit;
		background-color: rgba(255,255,255,0.01);
		display: none;
	}
	[class*="image-annotate-note"] {
		background: #333333 none repeat scroll 0 0;
		border: solid 2px #FFFF00;
		color: #FFF;
		font-size: 12px;
		max-width: 200px;
		padding: 3px 7px;
		position: absolute;
		font-family: 'OpenSans Regular';
		display: none;
	}
	#meta_container {
		padding-bottom: 0px;
		padding-top: 6px;
	}
	#meta_container p, #meta_container_left p, #meta_container_right p {
		margin: 3px 0px;
	}
	#desc_container {
		/*max-height: 400px;*/
		overflow-y: auto;
		overflow-x: hidden;
	}
	.imgviewer_remark {
		padding-bottom: 6px;
		font-size: small;
		color: #D70000;
	}
	#btn-screenfull-v1 {
		width: 134px;
		height: 32px;
		background: url('../images/english/enlarge.png') top left no-repeat;
		border: none;
		margin-left: 0px;
		margin-top: -10px;
	}
	.btn-img-type {
		font-size: 11px;
		height: 18px;
		line-height: 13px;
		display: block;
		margin-bottom: 7px;
		border: none;
		cursor: pointer;
	}
	.btn-img-type.active, .btn-img-type:hover, .btn-img-type:focus {
		background-color: #014E9E;
		color: #FFFFFF;
	}
	.thumb_show {
		display: inline-block!important;
	}
	.thumb_hidden {
		display: none!important;
	}
	</style>
	<script type="text/javascript" src="../components/watermark/jquery.watermark.js"></script>
	<script type="text/javascript">
	var btn_lock = false;
	var func_var = [];
	//func_var[1] = 'first';
	func_var[1] = 'hori=1';
func_var[2] = 'hori=0';
func_var[3] = 'hori=0';
func_var[4] = 'hori=0';
func_var[5] = 'hori=0';
func_var[6] = 'vert=0';
func_var[7] = 'hori=0';
	var prev_idx = 0;
	var next_idx = 2;
	function prev() {
		if(prev_idx != 0) {
			var item = func_var[prev_idx].split("=");
			showContent(prev_idx, item[0], item[1]);
		}
	}
	function next() {
		if(next_idx != func_var.length) {
			var item = func_var[next_idx].split("=");
			showContent(next_idx, item[0], item[1]);
		}
	}
	function goPrevItem() {
		if(btn_lock) return;
		btn_lock = true;
		
		var thumb_img = $('#thumb-item-container li a img');
		var n_img = null;
		for(var i = thumb_img.length - 1; i >= 0; i--) {
			if($(thumb_img[i]).position().left < 0) {
				n_img = $(thumb_img[i]);
				break;
			}
		}
		if(n_img != null) {
			var move = 0 - n_img.position().left + 2;
			$('#thumb-item-container').animate({'margin-left': "+="+move}, 240, function(){
				btn_lock = false;
			});
		} else {
			btn_lock = false;
		}
	}	
	function goNextItem() {
		if(btn_lock) return;
		btn_lock = true;
		
		var thumb_img = $('#thumb-item-container li a img');
		var n_img = null;
		for(var i = 0; i < thumb_img.length; i++) {
			if($(thumb_img[i]).position().left + $(thumb_img[i]).width() + 12 > $('.thumb-mask').width()) {
				n_img = $(thumb_img[i]);
				break;
			}
		}
		if(n_img != null) {
			var move = n_img.position().left + n_img.width() + 17 - $('.thumb-mask').width();
			$('#thumb-item-container').animate({'margin-left': "-="+move}, 240, function(){
				btn_lock = false;
			});
		} else {
			btn_lock = false;
		}
	}
	var current_content_id = 0;
	var current_type = 'pnri';
	function showContent(content_id, cat, is_1st) {
		if(is_1st != 1) $('li.active').removeClass('active');
		current_content_id = content_id;
		$('#canvas').remove();
		if(cat == 'hori') {
			$('#main_img').css({'position':'relative'});
			$('#img_container').removeClass('col-4').addClass('col-7');
			$('#meta_container').removeClass('col-8').addClass('col-5');
			$('#desc_container').removeClass('col-8').addClass('col-5');
			//$('#control_container').removeClass('col-8').addClass('col-12');
		}
		if(cat == 'vert') {
			$('#main_img').css({'position':'relative'});
			$('#img_container').removeClass('col-7').addClass('col-4');
			$('#meta_container').removeClass('col-5').addClass('col-8');
			$('#desc_container').removeClass('col-5').addClass('col-8');
			//$('#control_container').removeClass('col-12').addClass('col-8');
		}
		
		$('#main_img').attr('src', $('#img'+content_id).attr('src'));
		//$('#main_content').html($('#desc'+content_id).html());
				
		var content_desc = $('#desc'+content_id).html();
		/*
		// For text checking only (20170314) rollback before launch
		content_desc = content_desc.replace(/&&/g, '<mark>&&</mark>');
		content_desc = content_desc.replace(/&amp;/g, '<mark>&amp;</mark>');
		content_desc = content_desc.replace(/@/g, '<mark>@</mark>');
		content_desc = content_desc.replace(/&commat;/g, '<mark>&commat;</mark>');		
		content_desc = content_desc.replace(/%/g, '<mark>%</mark>');		
		content_desc = content_desc.replace(/&percnt;/g, '<mark>&percnt;</mark>');		
		content_desc = content_desc.replace(/#/g, '<mark>#</mark>');	
		content_desc = content_desc.replace(/&num;/g, '<mark>&num;</mark>');	
		*/
		
		$('#main_content').html(content_desc);
		
		$('#main_taken_by').html($('#takenby'+content_id).html());
		$('#main_loc').html($('#loc'+content_id).html());
		$('#main_lat').html($('#lat'+content_id).html());
		$('#main_lng').html($('#lng'+content_id).html());
		$('#main_photo_date').html($('#photodate'+content_id).html());
		$('#main_dir').html($('#dir'+content_id).html());
		$('#main_cloudcode').html($('#cloudcode'+content_id).html());
		$('#main_iden').html($('#imgiden'+content_id).html());
		$('#main_id').html($('#imgid'+content_id).html());
		/*if(is_1st == 1) {
			$('.img_identifier').css('display', 'block');
		} else {
			$('.img_identifier').css('display', 'none');
		}*/
		
		if(is_1st > 1) {
			$('#meta_container').css('display', 'none');
			$('#desc_container').css('display', 'none');
		} else {
			$('#meta_container').css('display', 'block');
			$('#desc_container').css('display', 'block');
		}
		
		prev_idx = content_id - 1;
		next_idx = content_id + 1;
		updateArrowStatus();
		$('.btn_left_arrow, .btn_right_arrow').css('display','none');
		/*if(func_var.length - 1 >= 6) {
			$('#btn-prev, #btn-next').css('display','block');
		}*/
		
		$('#div_loading').css('display','none');
		var desc_height = $('#img_container').height() - $('#meta_container').height();
		if(desc_height < 280) desc_height = 280;
		$('#desc_container').css({'max-height':desc_height+'px'});
		
		var clicked_type = "";
		if($('#img'+content_id).parents('li').hasClass('pnri')) clicked_type = "pnri";
		if($('#img'+content_id).parents('li').hasClass('seci')) clicked_type = "seci";
		if($('#img'+content_id).parents('li').hasClass('pri')) clicked_type = "pri";
		if(current_type != clicked_type) {
			current_type = clicked_type;
			$('.btn-'+current_type).click();
		}
		
				
		// Modified for showing video in "Other Images"
		if($('#main_img').parent().is("a")) {
			$('.btn-video').remove();
			$('#main_img').unwrap();
		}
		
		if(content_id && $('#img'+content_id).data('is_vid') == "1"){
			showPlayButtonOnImage(is_1st, $('#img'+content_id).data('vid_filename'));
		}
	}
	function updateArrowStatus() {
		$('.btn_left_arrow, .btn_right_arrow').css('display','block');
		if(prev_idx == 0) $('.btn_left_arrow').css('display','none');
		if(next_idx == func_var.length) $('.btn_right_arrow').css('display','none');
	}
	function closeFullScreenImg() {
		$('#full_screen_image').remove();
		$('body').css('overflow-y','auto');
	}
	$('#image_viewer_container').mouseover(function() {
		updateArrowStatus();
	});
	$('#image_viewer_container').mouseout(function() {
		$('.btn_left_arrow, .btn_right_arrow').css('display','none');
	});
	function createCanvasIfNotExist() {
		$('#img_container').append('<div id="canvas"></div>');
		$('#main_img').css({'position':'absolute'});
		$('#canvas').css({
			'width': $('#main_img').width(),
			'height': $('#main_img').height(),
			'display': 'block',
			'position': 'relative'
		});
	}
	function setEnlargeButton() {
		$('#cboxTitle').html('<button id="btn-screenfull-v1"></button>');
		
		$('#btn-screenfull-v1').click(function() {
			$('body').append('<div id="full_screen_image"><div style="display: block; float: right; padding: 12px;"><a style="display: block; color: #FFFFFF; text-align: right;" href="javascript:void(0);" onClick="closeFullScreenImg();">[Close]</a><a style="display: block; color: #FFFFFF; text-align: right; padding-top: 6px;" href="'+$('#main_img').attr('src').replace("compressed", "original")+'" download>[Download]</a></div><img id="full_screen_image_src" src="" alt="" /></div>');
			$('#full_screen_image').css({'position': 'absolute', 'z-index': 999999, 'background-color': 'rgba(0, 0, 0, 1)', 'top': $(document).scrollTop(), 'left': 0, 'width': '100%', 'height': '100%', 'text-align': 'center'});
			$('#full_screen_image_src').attr('src', $('#main_img').attr('src').replace("compressed", "original"));
			$('#full_screen_image_src').css({'height': $(window).height(), 'margin': '0px auto'});
		});
	}
	function showThumb(classname) {
		$('li.pnri, li.seci, li.pri').removeClass('thumb_show').addClass('thumb_hidden');
		$('.btn-pnri, .btn-seci, .btn-pri').removeClass('active');
		$('li.'+classname).removeClass('thumb_hidden').addClass('thumb_show');
		$('.btn-'+classname).addClass('active');
	}
		function showPlayButtonOnImage(is_1st, vid_filename) {
		if($('#main_img').parent().is("a")) {
			if(is_1st != 1) {
				$('.btn-video').remove();
				$('#main_img').unwrap();
			}
		} else {
			if(is_1st == 1) {
				$('#main_img').wrap('<a id="btn-video" href="../images/compressed/" target="_blank" rel=\"noopener noreferrer\"></a>');
				$('#btn-video').prepend('<img class="btn-video" src="../images/btn-play.png" alt="Play" style="opacity:0.8" />');
			}else if(vid_filename != ""){
				$('#main_img').wrap('<a id="btn-video" href="../images/compressed/' + vid_filename + '" target="_blank" rel=\"noopener noreferrer\"></a>');
				$('#btn-video').prepend('<img class="btn-video" src="../images/btn-play.png" alt="Play" style="opacity:0.8" />');
			}
		}
		
		
	}
		$(document).ready(function() {
		setTimeout(function(){showContent(1, 'hori', 1);setEnlargeButton();},1800);
		
		if($('li.pnri').length == 0) $('.btn-pnri').css('display', 'none');
		if($('li.seci').length == 0) $('.btn-seci').css('display', 'none');
		if($('li.pri').length == 0) $('.btn-pri').css('display', 'none');
		
				$('#main_img').watermark({text: $('#main_taken_by').html(), gravity: 'br', opacity:0.9, textSize: 56, textWidth: ($('#main_taken_by').html().length * 28), margin: 5, flip: true });
				if($('#imgiden1').html() != '' && $('#takenby1').html()){
			$('#img1').watermark({text: $('#takenby1').html(), gravity: 'br', opacity:0.9, textSize: 53, textWidth: ($('#takenby1').html().length * 0.7 * 53), margin: 5, flip: true }); 
		}
				if($('#imgiden2').html() != '' && $('#takenby2').html()){
			$('#img2').watermark({text: $('#takenby2').html(), gravity: 'br', opacity:0.9, textSize: 20, textWidth: ($('#takenby2').html().length * 0.7 * 20), margin: 5, flip: true }); 
		}
				if($('#imgiden3').html() != '' && $('#takenby3').html()){
			$('#img3').watermark({text: $('#takenby3').html(), gravity: 'br', opacity:0.9, textSize: 24, textWidth: ($('#takenby3').html().length * 0.7 * 24), margin: 5, flip: true }); 
		}
				if($('#imgiden4').html() != '' && $('#takenby4').html()){
			$('#img4').watermark({text: $('#takenby4').html(), gravity: 'br', opacity:0.9, textSize: 36, textWidth: ($('#takenby4').html().length * 0.7 * 36), margin: 5, flip: true }); 
		}
				if($('#imgiden5').html() != '' && $('#takenby5').html()){
			$('#img5').watermark({text: $('#takenby5').html(), gravity: 'br', opacity:0.9, textSize: 42, textWidth: ($('#takenby5').html().length * 0.7 * 42), margin: 5, flip: true }); 
		}
				if($('#imgiden6').html() != '' && $('#takenby6').html()){
			$('#img6').watermark({text: $('#takenby6').html(), gravity: 'br', opacity:0.9, textSize: 16, textWidth: ($('#takenby6').html().length * 0.7 * 16), margin: 5, flip: true }); 
		}
				if($('#imgiden7').html() != '' && $('#takenby7').html()){
			$('#img7').watermark({text: $('#takenby7').html(), gravity: 'br', opacity:0.9, textSize: 48, textWidth: ($('#takenby7').html().length * 0.7 * 48), margin: 5, flip: true }); 
		}
				
	});
	</script>
	<script type="text/javascript">
	var annotation_ary = [], curr_num = null;
	annotation_ary[1] = [];
annotation_ary[1][1] = [1920, 976, 663.999969, 491.000000, 218.00, 116.00, "Type I – veil: tenuous and lacking any well-defined structure"];
annotation_ary[1][2] = [1920, 976, 736.999969, 1102.999969, 148.00, 55.00, "Type IIa – bands: streaks with diffuse, blurred edges"];
annotation_ary[1][3] = [1920, 976, 694.999969, 1056.999969, 490.00, 37.00, "Type IIb – bands: streaks with sharply defined edges"];
annotation_ary[1][4] = [1920, 976, 647.999969, 1252.999969, 93.00, 44.00, "These are type IIIa (billows comprising short, straight and narrow streaks) and type P (billows crossing a band)."];
annotation_ary[1][5] = [1920, 976, 644.999969, 1047.999969, 153.00, 36.00, "Type IVb – whirl: a simple curve (3°–5°) of, in this case, a band"];
annotation_ary[1][6] = [1920, 976, 661.999969, 932.999969, 51.00, 41.00, "Type O – complex structure"];
annotation_ary[1][7] = [1920, 976, 814.999969, 57.999996, 401.00, 41.00, "Tropospheric cloud"];
annotation_ary[2] = [];
annotation_ary[2][1] = [1619, 1080, 269.999985, 368.000000, 111.00, 101.00, "Blue-white colour"];
annotation_ary[2][2] = [1619, 1080, 628.000000, 253.999992, 402.00, 33.00, "Tropospheric clouds"];
annotation_ary[2][3] = [1619, 1080, 625.000020, 839.982686, 657.78, 51.78, "Tropospheric clouds"];
annotation_ary[2][4] = [1619, 1080, 114.000000, 578.000000, 116.00, 184.00, "The noctilucent cloud is brighter than the twilight sky."];
annotation_ary[2][5] = [1619, 1080, 553.000000, 533.999985, 270.00, 57.00, "The noctilucent cloud has a reddish tint near the horizon."];
annotation_ary[2][6] = [1619, 1080, 378.999985, 396.000000, 449.00, 78.00, "Bands (type II)"];
annotation_ary[2][7] = [1619, 1080, 367.999985, 1079.999969, 438.00, 134.00, "Billows (type III)"];
annotation_ary[2][8] = [1619, 1080, 272.999992, 884.999969, 210.00, 69.00, "Billows (type III)"];
annotation_ary[3] = [];
annotation_ary[3][1] = [1626, 1080, 111.999996, 499.999966, 504.00, 287.00, "Type I – veils: tenuous and lacking in well-defined structure"];
annotation_ary[3][2] = [1626, 1080, 543.000000, 23.000004, 260.00, 79.00, "Type IIa – bands: streaks with diffuse, blurred edges"];
annotation_ary[3][3] = [1626, 1080, 485.000000, 177.999996, 148.00, 30.00, "Type IIb – band: streak with sharply defined edges"];
annotation_ary[3][4] = [1626, 1080, 59.999998, 1213.999969, 385.00, 217.00, "Complex structure"];
annotation_ary[4] = [];
annotation_ary[4][1] = [1620, 1080, 382.999992, 5.000000, 285.00, 16.00, "Type IIb – band with sharply defined edges"];
annotation_ary[4][2] = [1620, 1080, 461.999985, 206.999996, 465.00, 21.00, "Type IIb – band with sharply defined edges"];
annotation_ary[4][3] = [1620, 1080, 552.000000, 7.000000, 651.00, 77.00, "Type IIb – band with sharply defined edges"];
annotation_ary[4][4] = [1620, 1080, 519.000000, 532.000000, 1036.00, 66.00, "Type IIb – this band with sharply defined edges appears twisted or braided."];
annotation_ary[4][5] = [1620, 1080, 341.999985, 509.999985, 557.00, 99.00, "Type IIIa – billows: short, straight and narrow streaks"];
annotation_ary[5] = [];
annotation_ary[5][1] = [1920, 861, 353.000008, 72.999996, 1812.00, 244.00, "Type IIIb – billows: wave-like structure with undulations"];
annotation_ary[6] = [];
annotation_ary[6][1] = [716, 1080, 199.000008, 244.999996, 303.00, 407.00, "Type IVc – whirls: large-scale ring structure"];
annotation_ary[6][2] = [716, 1080, 129.000000, 8.000000, 226.00, 138.00, "Type IIIb – diffuse billows"];
annotation_ary[6][3] = [716, 1080, 25.000000, 437.999996, 241.00, 169.00, "Type O – complex structure: a form that does not fit into types I to IV"];
annotation_ary[6][4] = [716, 1080, 614.999969, 4.000000, 702.00, 174.00, "Tropospheric cloud"];
annotation_ary[7] = [];
annotation_ary[7][1] = [1620, 1080, 310.999985, 186.999996, 1141.00, 545.00, "A complex structure with several forms of noctilucent cloud overlapping or intersecting to give a billow-like appearance with a number of lacunosus holes "];
	function showAnnotation(num, imgid) {
		if($('#canvas').length == 0) createCanvasIfNotExist();
		$('#canvas').empty();
		if(curr_num != num) {
			var id_set = num.split(",");
			for(var i = 0; i < id_set.length; i++) {
				var sel_annotation = annotation_ary[current_content_id][id_set[i]];
				var delta = $('#canvas').width() / sel_annotation[0];
				var toppos = sel_annotation[2] * delta;
				var leftpos = sel_annotation[3] * delta;
				var w = sel_annotation[4] * delta;
				var h = sel_annotation[5] * delta;
				$('#canvas').append('<div class="annotation-'+(i+1)+'"></div>');
				$('#canvas').append('<div class="image-annotate-note">'+sel_annotation[6]+'</div>');
				$('.annotation-'+(i+1)).css({
					'display': 'block',
					'top': toppos,
					'left': leftpos,
					'width': w,
					'height': h
				});
				$('.image-annotate-note').css({
					'top': toppos + h + 5,
					'left': leftpos
				});
			}
			$('div[class*="annotation-"]').hover(function() {
				$('.image-annotate-note').css('display','block');
			}, function() {
				$('.image-annotate-note').css('display','none');
			});
			curr_num = num;
		} else {
			curr_num = 0;
		}
	}
	</script>

	<div class="row" id="image_viewer_container">
	
		<a class="btn_left_arrow" href="javascript:void(0);" onClick="prev();">&lt;</a>
		<a class="btn_right_arrow" href="javascript:void(0);" onClick="next();">&gt;</a>
	
		<div class="col-7" id="img_container" style="position: relative; padding: 0px;">
			<div id="div_loading">Loading...</div>
			<img id="main_img" src="" alt=""/>
		</div>
		<div class="col-5" id="meta_container">
						<p class="img_desc_taken_by" id="main_taken_by">&#169; Nicky Mack</p>
			<p class="img_desc_loc" id="main_loc">Lossiemouth, Scotland, United Kingdom of Great Britain and Northern Ireland</p>
			<p class="img_desc_lat" id="main_lat">Latitude: 57° 43' 12'' N</p>
			<p class="img_desc_lng" id="main_lng">Longitude: 3° 17' 52'' W</p>
			<p><span class="img_desc_photo_date" id="main_photo_date">18 October 2014 0315 (Local Time)</span><br><span class="img_desc_dir" id="main_dir">Camera direction: towards NE</span></p>
			<p class="img_identifier" id="main_iden">Image P/S code: S.10U.3</p>
			<p class="img_identifier" id="main_id">Image I.D.: 5578</p>
			<p class="img_cloudcode" id="main_cloudcode"></p>			
		</div>
		<div class="col-5" id="desc_container">
			<div id="main_content"></div>
		</div>
		<div class="col-12" id="control_container">
			<!-- a id="btn-prev" href="javascript:void(0);" onClick="goPrevItem();">&lt;</a -->
			<!-- div class="thumb-mask" -->
				<ul id="thumb-item-container">
					<li>
						<div style="margin-top: 6px;">
							<button class="btn-pnri btn-img-type active" onClick="showThumb('pnri');">Images & related info</button>
							<button class="btn-seci btn-img-type" onClick="showThumb('seci');">Other Images</button>
							<button class="btn-pri btn-img-type" onClick="showThumb('pri');">Images of 1987 edition</button>
						</div>
					</li>
					<li class="pnri thumb_show active"><a href="javascript:void(0);" onClick="showContent(1, 'hori', 1);"><img id="img1" src="../images/compressed/5578_main_noctilucent-cloud_special-clouds-and-other-features.jpg" alt="" /></a><div id="desc1" class="img_desc"><h1 class="img_title">Noctilucent cloud</h1><p>Noctilucent clouds (NLC) are high-altitude, “night-shining” clouds that are generally only visible to observers in mid to high latitudes (approximately 50°N to 65°N or 50°S to 65°S) for a few months in summer. They occur higher than all other clouds, near the altitude of the mesopause, and are seen against the background of a dark sky when the Sun is well below the horizon, but while the clouds themselves are still illuminated by the Sun. </p>
<p>Several types of NLC appear in this picture. There is a very tenuous background <a class='anno' href='javascript:void(0);' onClick='showAnnotation("1", 5578);'>veil (type I)</a>, which is faint and lacks any well-defined structure. There are also bands or streaks of cloud (type II), some of which have <a class='anno' href='javascript:void(0);' onClick='showAnnotation("2", 5578);'>diffuse, blurred edges (type IIa)</a> and some of which have <a class='anno' href='javascript:void(0);' onClick='showAnnotation("3", 5578);'>sharply defined edges (type IIb)</a>. <a class='anno' href='javascript:void(0);' onClick='showAnnotation("4", 5578);'>Short, straight and narrow billows (type IIIa) cross a band, which together is known as a complex structure of type P</a>. One <a class='anno' href='javascript:void(0);' onClick='showAnnotation("5", 5578);'>band is a curved whirl (type IV)</a> and there is a bright area with a <a class='anno' href='javascript:void(0);' onClick='showAnnotation("6", 5578);'>complex structure</a>.  </p>
<p><a class='anno' href='javascript:void(0);' onClick='showAnnotation("7", 5578);'>Tropospheric clouds</a> in the Earth's shadow appear as dark silhouettes against the background sky. Noctilucent clouds, in contrast, appear brighter than the twilight sky as they are still illuminated at high altitude. A clear identifying feature of noctilucent clouds is their distinctive bluish-white colour.  </p>
<p>Generally, noctilucent clouds will be seen close to the horizon. For this early morning view (in the northern hemisphere), the photographer is facing towards the north-east.</p><p class="imgviewer_remark">Links in the image description will highlight features on the image. Mouse over the features for more detail.</p></div><div id="takenby1" class="img_desc">&#169; Nicky Mack</div><div id="loc1" class="img_desc">Lossiemouth, Scotland, United Kingdom of Great Britain and Northern Ireland</div><div id="lat1" class="img_desc">Latitude: 57° 43' 12'' N</div><div id="lng1" class="img_desc">Longitude: 3° 17' 52'' W</div><div id="photodate1" class="img_desc">18 October 2014 0315 (Local Time)</div><br><div id="dir1" class="img_desc">Camera direction: towards NE</div><div id="cloudcode1" class="img_desc"></div><div id="imgiden1" class="img_id">Image P/S code: S.10U.3</div><div id="imgid1" class="img_id">Image I.D.: 5578</div></li><li class="seci thumb_hidden"><a href="javascript:void(0);" onClick="showContent(2, 'hori', 0);"><img id="img2" src="../images/compressed/5581_main_noctilucent-cloud_special-clouds-and-other-features.JPG" alt="" /></a><div id="desc2" class="img_desc"><h1 class="img_title">Noctilucent cloud </h1><p>Noctilucent clouds (NLC) are usually only visible to observers in mid to high latitudes (roughly 50°N to 65°N or 50°S to 65°S) and in the twilight or night sky for a few months in summertime, when temperatures in the mesosphere are the coldest. This photograph was taken in late June, during summer in the northern hemisphere, from a location 55.78°N.</p> <p>Noctilucent clouds are generally observed during the twilight periods when the Sun is between 6° and 16° below the observer's horizon. It is during this period that the background sky is dark enough for the cloud to be seen, yet the high-altitude clouds are still illuminated by sunlight.</p> <p>Typically what sets noctilucent clouds visually apart from tropospheric clouds is their visibility in the night and their obvious, and sometimes bright, <a class='anno' href='javascript:void(0);' onClick='showAnnotation("1", 5581);'>blue-white colour</a>. The low-level tropospheric clouds at <a class='anno' href='javascript:void(0);' onClick='showAnnotation("2", 5581);'>2</a> and <a class='anno' href='javascript:void(0);' onClick='showAnnotation("3", 5581);'>3</a> are within the Earth's shadow and they stand out as dark silhouettes against the relatively brighter background sky. In contrast, <a class='anno' href='javascript:void(0);' onClick='showAnnotation("4", 5581);'>noctilucent clouds are always brighter than the twilight sky</a>. Near the horizon, they may have a <a class='anno' href='javascript:void(0);' onClick='showAnnotation("5", 5581);'>reddish tint</a>. Two main types of NLC are shown here: <a class='anno' href='javascript:void(0);' onClick='showAnnotation("6", 5581);'>bands (type II)</a> – these are long streaks – and billows (type III), seen at <a class='anno' href='javascript:void(0);' onClick='showAnnotation("7", 5581);'>7</a> and <a class='anno' href='javascript:void(0);' onClick='showAnnotation("8", 5581);'>8</a> – these are closely spaced, roughly parallel streaks.</p><p class="imgviewer_remark">Links in the image description will highlight features on the image. Mouse over the features for more detail.</p></div><div id="takenby2" class="img_desc">&#169; Ewan Kane</div><div id="loc2" class="img_desc">East Kilbride, Scotland, United Kingdom of Great Britain and Northern Ireland</div><div id="lat2" class="img_desc">Latitude: 55° 46' 49'' N</div><div id="lng2" class="img_desc">Longitude: 4° 8' 48'' W</div><div id="photodate2" class="img_desc">23 June 2015 2247 (Local Time)</div><br><div id="dir2" class="img_desc">Camera direction: towards NW</div><div id="cloudcode2" class="img_desc"></div><div id="imgiden2" class="img_id">Image P/S code: P.10</div><div id="imgid2" class="img_id">Image I.D.: 5581</div></li><li class="seci thumb_hidden"><a href="javascript:void(0);" onClick="showContent(3, 'hori', 0);"><img id="img3" src="../images/compressed/5879_main_noctilucent-cloud-type-1-veils_special-clouds-and-other-features.jpg" alt="" /></a><div id="desc3" class="img_desc"><h1 class="img_title">Noctilucent cloud: type I – veils</h1><p>At the top centre of this picture, there is noctilucent cloud that is <a class='anno' href='javascript:void(0);' onClick='showAnnotation("1", 5879);'>tenuous and lacking in any well-defined structure. This is type I – veils</a>. On the left side, there are some <a class='anno' href='javascript:void(0);' onClick='showAnnotation("2", 5879);'>bands of type IIa with diffuse, blurred edges</a> and one <a class='anno' href='javascript:void(0);' onClick='showAnnotation("3", 5879);'>band of type IIb that has sharply defined edges</a>. At the top right of the picture, the structure is <a class='anno' href='javascript:void(0);' onClick='showAnnotation("4", 5879);'>complex</a>.</p><p class="imgviewer_remark">Links in the image description will highlight features on the image. Mouse over the features for more detail.</p></div><div id="takenby3" class="img_desc">&#169; Pekka Parviainen</div><div id="loc3" class="img_desc">Turku, Finland</div><div id="lat3" class="img_desc">Latitude: 60° 27' 6'' N</div><div id="lng3" class="img_desc">Longitude: 22° 15' 60'' E</div><div id="photodate3" class="img_desc">21 July 2005 2146 (Local Time)</div><br><div id="dir3" class="img_desc"></div><div id="cloudcode3" class="img_desc"></div><div id="imgiden3" class="img_id">Image P/S code: P.10</div><div id="imgid3" class="img_id">Image I.D.: 5879</div></li><li class="seci thumb_hidden"><a href="javascript:void(0);" onClick="showContent(4, 'hori', 0);"><img id="img4" src="../images/compressed/5691_main_noctilucent-cloud-type-iib-bands-with-sharply-defined-edges_clouds.JPG" alt="" /></a><div id="desc4" class="img_desc"><h1 class="img_title">Noctilucent cloud type IIb – bands with sharply defined edges</h1><p>The principal noctilucent type in this picture is type IIb – bands with sharply defined edges (seen at <a class='anno' href='javascript:void(0);' onClick='showAnnotation("1", 5691);'>1</a>, <a class='anno' href='javascript:void(0);' onClick='showAnnotation("2", 5691);'>2</a> and <a class='anno' href='javascript:void(0);' onClick='showAnnotation("3", 5691);'>3</a>). The brightest band across the centre of the picture appears <a class='anno' href='javascript:void(0);' onClick='showAnnotation("4", 5691);'>twisted or braided</a>.  </p>
<p>The short, straight and narrow streaks just above the centre of the image are <a class='anno' href='javascript:void(0);' onClick='showAnnotation("5", 5691);'>type IIIa – billows</a>.</p><p class="imgviewer_remark">Links in the image description will highlight features on the image. Mouse over the features for more detail.</p></div><div id="takenby4" class="img_desc">&#169; Mark Zalcik</div><div id="loc4" class="img_desc">Namao, Alberta, Canada</div><div id="lat4" class="img_desc">Latitude: 53° 42' 58'' N</div><div id="lng4" class="img_desc">Longitude: 113° 29' 32'' W</div><div id="photodate4" class="img_desc">28 June 2014 0243 (Local Time)</div><br><div id="dir4" class="img_desc">Camera direction: towards N</div><div id="cloudcode4" class="img_desc"></div><div id="imgiden4" class="img_id">Image P/S code: P.10</div><div id="imgid4" class="img_id">Image I.D.: 5691</div></li><li class="seci thumb_hidden"><a href="javascript:void(0);" onClick="showContent(5, 'hori', 0);"><img id="img5" src="../images/compressed/5690_main_noctilucent-cloud-type-iiib-billows-wave-like-structure-with-undulations_clouds.JPG" alt="" /></a><div id="desc5" class="img_desc"><h1 class="img_title">Noctilucent cloud type IIIb – billows: wave-like structure with undulations</h1><p>Type III – billows: these are arrangements of closely spaced, roughly parallel short streaks. There are two types:</p>
<p>– Type IIIa: comprised of short, straight and narrow streaks</p>
<p>– Type IIIb: exhibiting a wave-like structure with undulations</p>
<p>The billow type shown in this picture is type IIIb – a wave-like structure with undulations.</p><p class="imgviewer_remark">Links in the image description will highlight features on the image. Mouse over the features for more detail.</p></div><div id="takenby5" class="img_desc">&#169; Mark Zalcik</div><div id="loc5" class="img_desc">Namao, Alberta, Canada</div><div id="lat5" class="img_desc">Latitude: 53° 42' 58'' N</div><div id="lng5" class="img_desc">Longitude: 113° 29' 32'' W</div><div id="photodate5" class="img_desc">09 July 2014 0031 (Local Time)</div><br><div id="dir5" class="img_desc">Camera direction: towards NW</div><div id="cloudcode5" class="img_desc"></div><div id="imgiden5" class="img_id">Image P/S code: P.10</div><div id="imgid5" class="img_id">Image I.D.: 5690</div></li><li class="seci thumb_hidden"><a href="javascript:void(0);" onClick="showContent(6, 'vert', 0);"><img id="img6" src="../images/compressed/5795_main_noctilucent-cloud-type-ivc_special-clouds-and-other-features.jpg" alt="" /></a><div id="desc6" class="img_desc"><h1 class="img_title">Noctilucent cloud: type IVc</h1><p>The main type of noctilucent cloud in this picture is <a class='anno' href='javascript:void(0);' onClick='showAnnotation("1", 5795);'>type IVc – whirls: a large-scale ring structure</a>. In the upper left there are <a class='anno' href='javascript:void(0);' onClick='showAnnotation("2", 5795);'>diffuse billows of type IIIb</a>. In the upper right there is a <a class='anno' href='javascript:void(0);' onClick='showAnnotation("3", 5795);'>complex structure of type O</a>. There are also <a class='anno' href='javascript:void(0);' onClick='showAnnotation("4", 5795);'>tropospheric clouds in the foreground</a>.</p><p class="imgviewer_remark">Links in the image description will highlight features on the image. Mouse over the features for more detail.</p></div><div id="takenby6" class="img_desc">&#169; Pekka Parviainen</div><div id="loc6" class="img_desc">Kustavi, Finland</div><div id="lat6" class="img_desc">Latitude: 60° 32' 42'' N</div><div id="lng6" class="img_desc">Longitude: 21° 21' 19'' E</div><div id="photodate6" class="img_desc">10 August 1988 0043 (Local Time)</div><br><div id="dir6" class="img_desc"></div><div id="cloudcode6" class="img_desc"></div><div id="imgiden6" class="img_id">Image P/S code: P.10</div><div id="imgid6" class="img_id">Image I.D.: 5795</div></li><li class="seci thumb_hidden"><a href="javascript:void(0);" onClick="showContent(7, 'hori', 0);"><img id="img7" src="../images/compressed/5687_main_noctilucent-cloud-complex-structure_special-clouds-and-other-features.JPG" alt="" /></a><div id="desc7" class="img_desc"><h1 class="img_title">Noctilucent cloud: complex structure</h1><p>Often in displays of noctilucent cloud, several forms may be seen simultaneously. It is not unusual, therefore, for two or more intersecting or overlapping groups to give rise to complex structures such as bright knots or net-like structures, or types that do not fit the standard classifications. This picture, taken just before midnight from the Edmonton area of Alberta, Canada, shows one such complex display of noctilucent cloud. The central part of the display had a peculiar <a class='anno' href='javascript:void(0);' onClick='showAnnotation("1", 5687);'>billow-like appearance with a number of lacunosus holes</a>.</p><p class="imgviewer_remark">Links in the image description will highlight features on the image. Mouse over the features for more detail.</p></div><div id="takenby7" class="img_desc">&#169; Mark Zalcik</div><div id="loc7" class="img_desc">Namao, Alberta, Canada</div><div id="lat7" class="img_desc">Latitude: 53° 43' 2'' N</div><div id="lng7" class="img_desc">Longitude: 113° 29' 39'' W</div><div id="photodate7" class="img_desc">26 June 2014 2343 (Local Time)</div><br><div id="dir7" class="img_desc">Camera direction: towards NW</div><div id="cloudcode7" class="img_desc"></div><div id="imgiden7" class="img_id">Image P/S code: P.10</div><div id="imgid7" class="img_id">Image I.D.: 5687</div></li>				</ul>
			<!-- /div -->
			<!-- a id="btn-next" href="javascript:void(0);" onClick="goNextItem();">&gt;</a -->
		</div>
	</div>