<!DOCTYPE html>
<html lang="zh-hant">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title id="topTitle">Page Title</title>
	<style>
		body {
			font-family: MingLiU,mingliu;
			font-size: 14pt;
			background-color: #c7edcc;
		}
		a:link, a:visited {
			text-decoration: none;
		}
		a:hover {
			text-decoration:underline;
		}
		
		input {
			font-size: 14px;
		}
		
		.desc-section { /* top description section */
			margin-top: 10px;
			margin-bottom: 10px;
			text-align: center;
		}
		
		.img-section { /* image displaying section */
			margin-left:auto;
			margin-right:auto;
		}

		#currImage {
			width: 100%;
			border: 1px solid black;
		}
	</style>
	<script>
		// define global constants and variables
		var pageTitle = "隸辨偏旁五百四十部（康熙五十七年項絪玉淵堂刻本）";
		var mainPage = "index.html";
		var subFolderName = "png21";
		var imageFormat = "png";
		var lastPage = 172;
		var imgSmall = "400px";
		var imgMedium = "800px";
		var imgBig = "1200px";
		var imagSize, imgWidth, currPage, prevPage, nextPage;

		var urlParams = new URLSearchParams(window.location.search);
		currPage = Number(urlParams.get('page'));
		imgSize = Number(urlParams.get('size'));
		if ( imgSize == null ) {
			imgSize = 1;
		}

		// set navigation page numbers
		if (currPage < 1){
			currPage = 1;
			prevPage = 1 ;
			nextPage = currPage + 1;
		} else if (currPage > lastPage){
			currPage  = lastPage;
			prevPage = lastPage - 1;
			nextPage = lastPage;
		} else {
			prevPage = currPage - 1;
			nextPage = currPage + 1;
		}
	</script>
</head>

<body>

<div class="desc-section">
	<form>
		<span id="pageTitle">Page Title</span>
		<span>
			<a id="imgSize1" href="?page=1&size=3">大圖</a>／<a id="imgSize2" href="?page=1&size=2">中圖</a>
		</span>
		<a id="mainPage" href=""></a>
		<a id="firstPage" href="">首頁</a>
		<a id="prevPage" href="">上頁</a>
		<a id="nextPage" href="">下頁</a>
		<a id="lastPage" href="">尾頁</a>
		<span id="currPage">頁</span>
		<input name="page" maxLength=4 size=4>
		<input type="submit" value="跳頁">
	</form>
</div>

<div class="img-section">
	<img id="currImage" src="../HomeShroudedInMists.gif">
</div>

<script>
	// set Page Title if defined
	if ( pageTitle ) {
		document.querySelector("#topTitle").innerHTML = pageTitle;		
		document.querySelector("#pageTitle").innerHTML = pageTitle;
	}

	// build image size selector
	switch (imgSize) {
		case 2:
			document.querySelector("#imgSize1").href = "?page="+currPage+"&size=3";
			document.querySelector("#imgSize1").innerHTML = "大圖";
			document.querySelector("#imgSize2").href = "?page="+currPage+"&size=1";
			document.querySelector("#imgSize2").innerHTML = "小圖";
			imgWidth = imgMedium;
			break;
		case 3:
			document.querySelector("#imgSize1").href = "?page="+currPage+"&size=2";
			document.querySelector("#imgSize1").innerHTML = "中圖";
			document.querySelector("#imgSize2").href = "?page="+currPage+"&size=1";
			document.querySelector("#imgSize2").innerHTML = "小圖";
			imgWidth = imgBig;
			break;
		default:
			document.querySelector("#imgSize1").href = "?page="+currPage+"&size=3";
			document.querySelector("#imgSize1").innerHTML = "大圖";
			document.querySelector("#imgSize2").href = "?page="+currPage+"&size=2";
			document.querySelector("#imgSize2").innerHTML = "中圖";
			imgSize = 1;
			imgWidth = imgSmall;
	}

	// set main page path if defined
	if ( mainPage ) {
		document.querySelector("#mainPage").href = mainPage;
		document.querySelector("#mainPage").innerHTML = "主頁";
	}

	// set up navigation page links
	if (currPage === 1){
		document.querySelector("#firstPage").innerHTML = "";
		document.querySelector("#prevPage").innerHTML = "";
		document.querySelector("#nextPage").href = "?page="+nextPage+"&size="+imgSize;
		document.querySelector("#lastPage").href = "?page="+lastPage+"&size="+imgSize;
	} else if (currPage === lastPage ) {
		document.querySelector("#firstPage").href = "?page=1"+"&size="+imgSize;		
		document.querySelector("#prevPage").href = "?page="+prevPage+"&size="+imgSize;
		document.querySelector("#nextPage").innerHTML = "";
		document.querySelector("#lastPage").innerHTML = "";
	} else {
		document.querySelector("#firstPage").href = "?page=1"+"&size="+imgSize;
		document.querySelector("#prevPage").href = "?page="+prevPage+"&size="+imgSize;
		document.querySelector("#nextPage").href = "?page="+nextPage+"&size="+imgSize;
		document.querySelector("#lastPage").href = "?page="+lastPage+"&size="+imgSize;
	}
	
	// set current page number
	document.querySelector("#currPage").innerHTML = "頁"+currPage;
	
	// set current image path
	document.querySelector("#currImage").src = subFolderName+"/"+currPage+"."+imageFormat;
	
	// set current image width
	document.querySelector(".img-section").style.maxWidth = imgWidth;

</script>
</body>
</html>