<%@ page session="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>Zondag ${hc}</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.min.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">
			<div class="psalmheader">Zondag ${hc}</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="psalmindex" data-inline="true" data-icon="custom" data-iconpos="notext" id="note" data-ajax="false" class="ui-btn-right" style="margin-right:150px;"></a>
	 		<a href="bijbelindex?t=1" data-inline="true" data-icon="custom" data-iconpos="notext" id="book" data-ajax="false" class="ui-btn-right" style="margin-right:50px;"></a>
		</div>
		<div data-role="content">
			<br /> <br />
	 		<c:forEach items="${zondag}" var="vraag" varStatus="varstatus">
				<div class="psalmverseheader">Vraag ${vraag.vraag}</div>
				<p class="hclinequestion">${vraag.tekstVraag}</p>
				<p class="hclineanswer">${vraag.tekstAntwoord}</p>
				<br />
			</c:forEach>

			<br />
 		</div>
		<div data-role="footer" class="bigbuttons">
			<div data-role="navbar" class="bigbuttons" data-position="fixed">
				<ul>
					<li><a href="hc?z=${hc - 1}"		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="hcindex"				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="hc?z=${hc + 1}"		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($(".hclinequestion").css("font-size"));
			cssSize = (size + delta) + "px";
			$(".hclinequestion").css("font-size", cssSize);
			
			size = parseInt($(".hclineanswer").css("font-size"));
			cssSize = (size + delta) + "px";
			$(".hclineanswer").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 ('${hc}' == '1') {
				$("#left").attr("href", "#");
				$("#left span.ui-icon").css("background-image", "none");
			}
			if ('${hc}' == '52') {
				$("#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>
