JavaScript ver 2.0 uploaded
Hamid [2010-10-29 05:14:09]
JavaScript ver 2.0 uploaded
<html>
<head>
<title> Monthly Prayer Timetable </title>
<style>
body, td {font-family: tahoma; font-size: 11px; color: #404040; text-align: center; }
pre {font-family: courier, serif, size: 10pt; margin: 0px 8px;}
input {font-size: 12px;}
.form {padding:10px; background-color: #F8F7F4; border: 1px dashed #EAE9CD;}
.caption {font-size: 20px; color: #d95722; text-align: center; width: 200px;}
.arrow {font-weight: bold; text-decoration: none; color: #3D3D3D; }
.arrow:hover {text-decoration: underline;}
.command {font-weight: bold; text-decoration: none; color: #AAAAAA; }
.command:hover {text-decoration: underline;}
#head-row {color: black; background-color: #F8F7F4;}
#today-row-disabled {background-color: #FCFAFA;}
#timetable {border-width: 1px; border-style: outset; border-collapse: collapse; border-color: gray;}
#timetable td {border-width: 1px; border-spacing: 1px; padding: 1px; border-style: inset; border-color: #CCCCCC;}
</style>
</head>
<body>
<form class="form" action="javascript:viewMonth(0);">
Latitude: <input type="text" value="43" id="latitude" size="2" >
Longitude: <input type="text" value="-80" id="longitude" size="2">
Time Zone: <input type="text" value="-5" id="timezone" size="2">
<input type="submit" value=" Go " onclick="viewMonth(0);">
</form>
<table align="center">
<tbody>
<tr>
<td><a href="javascript:viewMonth(-1)" class="arrow"><<</a></td>
<td id="table-title" class="caption"></td>
<td><a href="javascript:viewMonth(+1)" class="arrow">>></a></td>
</tr>
</tbody>
</table>
<br>
<table id="timetable" align="center">
<tbody></tbody>
</table>
<div align="center" style="margin-top: 7px">
Time Format: <a id="time-format" href="javascript:switchFormat(1)" class="command"></a>
</div>
<br><br>
<script type="text/javascript" src="../PrayTime.js"></script>
<script type="text/javascript">
var currentDate = new Date();
var timeFormat = 0;
switchFormat(0);
function viewMonth(offset)
{
var lat = document.getElementById('latitude').value;
var lng = document.getElementById('longitude').value;
var timeZone = document.getElementById('timezone').value;
currentDate.setMonth(currentDate.getMonth()+ 1* offset);
var month = currentDate.getMonth();
var year = currentDate.getFullYear();
var title = monthFullName(month)+ ' '+ year;
document.getElementById('table-title').innerHTML = title;
makeTable(year, month, lat, lng, timeZone);
}
// make monthly timetable
function makeTable(year, month, lat, lng, timeZone)
{
var table = document.getElementById('timetable');
var tbody = document.createElement('tbody');
var timeTags = prayTime.timeNames.slice(0);
timeTags.unshift('Day');
tbody.appendChild(makeTableRow(timeTags, 'head-row'));
var date = new Date(year, month, 1);
var endDate = new Date(year, month+ 1, 1);
while (date < endDate)
{
var times = prayTime.getPrayerTimes(date, lat, lng, timeZone);
times.unshift(date.getDate()); // add day number
var today = new Date();
var isToday = (date.getMonth() == today.getMonth()) && (date.getDate() == today.getDate());
tbody.appendChild(makeTableRow(times, isToday ? 'today-row' : ''));
date.setDate(date.getDate()+ 1); // next day
}
removeChildrenOfNode(table);
table.appendChild(tbody);
}
// make a table row
function makeTableRow(items, id)
{
var row = document.createElement('tr');
for (var i=0; i< items.length; i++)
{
var cell = document.createElement('td');
cell.innerHTML = items[i];
cell.setAttribute('id', id);
cell.width = i==0 ? 25 : 40;
row.appendChild(cell);
}
return row;
}
// remove all children of a node
function removeChildrenOfNode(node)
{
if (node == undefined || node == null)
return;
while (node.firstChild)
node.removeChild(node.firstChild);
}
// switch time format
function switchFormat(offset)
{
var formats = new Array('24-hour', '12-hour');
timeFormat = (timeFormat+ offset)% 2;
document.getElementById('time-format').innerHTML = formats[timeFormat];
prayTime.setTimeFormat(timeFormat == 0 ? prayTime.Time24 : prayTime.Time12NS);
viewMonth(0);
}
// return month full name
function monthFullName(month)
{
var monthName = new Array('January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December');
return monthName[month];
}
</script>
</body>
</html>