<%@ page session="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>${boek.boek} <c:if test="${boek.hoofdstukken > 1}">${hoofdstuk} </c:if>(${vertaling.afkorting})</title>

<meta name="viewport"
	content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0" />


<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet"
	href="resources/css/themes/Psalmenweb.css" />
<link rel="stylesheet"
	href="resources/css/psalmenweb.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
	src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script>
<script src="resources/js/prefs.js"></script>
</head>
<body>

	<div data-role="page" data-theme="a">
		<div data-role="header" data-position="fixed" id="psalmhoofd">
			<div class="psalmheader">${boek.boek} <c:if test="${boek.hoofdstukken > 1}">${hoofdstuk} </c:if>(${vertaling.afkorting})</div>
			<a data-inline="true" data-icon="custom" data-iconpos="notext" id="bw" data-ajax="false" class="ui-btn-right" style="margin-right:350px;"></a>
	 		<a href="hcindex" data-inline="true" data-icon="custom" data-iconpos="notext" id="hc" data-ajax="false" class="ui-btn-right" style="margin-right:250px;"></a>
	 		<c:choose>
	 			<c:when test="${vertaling.id == 1}">
		 			<a href="${linkvertaling}" data-inline="true" data-icon="custom" data-iconpos="notext" id="sv" data-ajax="false" class="ui-btn-right" style="margin-right:150px;"></a>
	 			</c:when>
	 			<c:otherwise>
		 			<a href="${linkvertaling}" data-inline="true" data-icon="custom" data-iconpos="notext" id="hsv" data-ajax="false" class="ui-btn-right" style="margin-right:150px;"></a>
	 			</c:otherwise>
	 		</c:choose>		
	 		<a href="psalmindex" data-inline="true" data-icon="custom" data-iconpos="notext" id="note" data-ajax="false" class="ui-btn-right" style="margin-right:50px;"></a>	 		
		</div>
		<div data-role="content">
			<br /> <br />
			<c:forEach items="${verzen}" var="vers"
				varStatus="varstatus">
				<p class="psalmline"><span class="bijbelvers">${vers.vers}</span> ${vers.tekst}</p>
			</c:forEach>
 
			<br />
 		</div>
		<div data-role="footer" class="bigbuttons">
 			<div data-role="navbar" data-position="fixed" class="bigbuttons" data-grid="d">
				<ul>
					<li><a href="${linkvorige}"		id="left"	data-icon="custom" data-ajax="false">&nbsp;</a></li>
					<li><a href="#" 				id="minus"	data-icon="custom">&nbsp;</a></li>
					<li><a href="bijbelindex?t=${vertaling.id}"	id="index"	data-icon="custom" data-ajax="false" data-transition="pop">&nbsp;</a></li>
					<li><a href="#" 				id="plus"	data-icon="custom">&nbsp;</a></li>
					<li><a href="${linkvolgende}" 	id="right"	data-icon="custom" data-ajax="false">&nbsp;</a></li>
				</ul>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		var PREF_TEXTSIZE;
		var PREF_COLOR;
	
		$(function() {
			loadPreferences();
			setPreferences();
			bindListeners();
		});
		
		function changeTextSize(delta) {
			var size = parseInt($(".psalmverseheader").css("font-size"));
			cssSize = (size + delta) + "px";
			$(".psalmverseheader").css("font-size", cssSize);

			size = parseInt($(".psalmline").css("font-size"));
			cssSize = (size + delta) + "px";
			$(".psalmline").css("font-size", cssSize);
			
			PREF_TEXTSIZE = size + delta;
			savePreferences();
		}

		$(document).on('pageinit', function() {
			$(document).on("click", "#minus", function(e) {
				changeTextSize(-2);
			});

			$(document).on("click", "#plus", function(e) {
				changeTextSize(2);
			});
			
			if ($("#left").attr("href") == "#") {
				$("#left span.ui-icon").css("background-image", "none");
			}

			if ($("#right").attr("href") == "#") {
				$("#right span.ui-icon").css("background-image", "none");
			}

		});
		
//		function goToVerse(immediately) {
//			if ("${vers}" != "") {
//				var target = $("#v${vers}").get(0).offsetTop;
//			
//				if (target !== undefined) {
//					if (immediately) {
//						$.mobile.silentScroll(target);		
//					} else {
//						setTimeout(function(){$.mobile.silentScroll(target);}, 100);  // scroll after 1 sec
//					}
//				}
//			}
//		}
		
//		$(document).on('pageshow', function(){
			//goToVerse(false);
//		});
		
	</script>

</body>
</html>
