Last commit for v2/js/examples/yearly.htm: c36f21f22ab69bdc840751846a2f0aa9a2195cb4

v2.2: Auto TimeZone and DST detection added

Hamid [2011-03-17 05:50:02]
v2.2: Auto TimeZone and DST detection added
<!DOCTYPE html>
	<title> Yearly Prayer Timetable </title>
		body, form {font-family: tahoma; font-size: 12px; color: #404040; text-align: center; margin: 0; padding: 0}
		pre {font-family: courier, serif, size: 10pt; margin: 0px auto;}
		.header {background:#eef; border-bottom: 1px solid #ddd; padding: 7px;}


<script type="text/javascript" src="../PrayTimes.js"></script>

<div class="header">
<form class="form" action="javascript:update();">
	Latitude: <input type="text" value="43" id="latitude" size="2" onchange="update();">&nbsp;
	Longitude: <input type="text" value="-80" id="longitude" size="2" onchange="update();">&nbsp;
	Year: <input type="text" value="2011" id="year" size="4" onchange="update();">&nbsp;
	Time Zone: <input type="text" value="-5" id="timezone" size="2" onchange="update();">&nbsp;
	<select id="dst" size="1" style="font-size: 12px;" onchange="update()">
		<option value="auto" selected="selected">Auto</option>
		<option value="0">0</option>
		<option value="1">1</option>
	<select id="method" size="1" style="font-size: 12px;" onchange="update()">
		<option value="MWL">Muslim World League (MWL)</option>
		<option value="ISNA" selected="selected">Islamic Society of North America (ISNA)</option>
		<option value="Egypt">Egyptian General Authority of Survey</option>
		<option value="Makkah">Umm al-Qura University, Makkah</option>
		<option value="Karachi">University of Islamic Sciences, Karachi</option>
		<option value="Jafari">Shia Ithna-Ashari (Jafari)</option>
		<option value="Tehran">Institute of Geophysics, University of Tehran</option>

 Date   Fajr   Sunrise  Dhuhr    Asr   Maghrib  Isha

<div id="timetable">

<div align="center" style="margin-top: 7px">
	Powered by: <a href=""></a>

<script type="text/javascript">

	var date = new Date();
	$('year').value = date.getFullYear();

	function update() {
		var lat = $('latitude').value;
		var lng = $('longitude').value;
		var timeZone = $('timezone').value;
		var dst = $('dst').value;
		var year = $('year').value;
		var method = $('method').value;
		var html = makeTable(method, year, lat, lng, timeZone, dst);
		$('timetable').innerHTML = '<pre>'+ html+ '</pre>';

	function makeTable(method, year, lat, lng, timeZone, dst) {
		var table = '';
		var monthNames = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May',
				'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
		var date = new Date(year, 0, 1);
		var endDate = new Date(1*year+ 1, 0, 1);

		var output = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];

		while (date < endDate) {
			var times = prayTimes.getTimes(date, [lat, lng], timeZone, dst);
			var day = date.getDate();
			day = (day <10) ? '0'+ day : day;
			table += monthNames[date.getMonth()]+ ' '+ day+ '\t';
			for (var i in output)
				table += times[output[i].toLowerCase()]+ '\t';
			table += '\n';
			date.setDate(date.getDate()+ 1);  // next day
		return table;

	function $(id) {
		return document.getElementById(id);