1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
	<ModulePrefs title="Progress Bars of time" /> 
	<Content type="html">
		<![CDATA[
		<style>
			.PBoT_PBContainer
			{
				border:1px solid black;
				margin:2px; 
				width:100%; 
				overflow:hidden;
			}
			#PBot td
			{
				font-size:10px;
			}
		</style>
		<div id="PBoT_placeHolder"></div>
		<script>
			String.prototype.format = function() {
				var params = String.prototype.format.arguments;
				var toReturn = this;
				
				for (var i = 0; i < params.length; i++) {
					var regex = new RegExp("\\{" + i + "\\}", "g");
					toReturn = toReturn.replace(regex, params[i]);
				}
				
				return toReturn;
			}
			function updatePBoT()
			{
				var date = new Date();
				var yearProgress = (date.getMonth()+1)/12*100;
				var daysInMonth = 32-(new Date(date.getFullYear(),date.getMonth(),32)).getDate();
				var monthProgress = (date.getDate()+1)/daysInMonth*100;
				var dayProgress = (date.getHours()+1)/24*100;
				var hourProgress = (date.getMinutes()+1)/60*100;
				var minuteProgress = (date.getSeconds()+1)/60*100;
				var progressBars = [
				 ['Y', yearProgress],
				 ['M', monthProgress],
				 ['D', dayProgress],
				 ['H', hourProgress],
				 ['M', minuteProgress]
				];
				
				var PBoT = document.getElementById('PBoT');
				if(!PBoT)
				{
					var table = document.createElement('table');
					table.id="PBoT";
					// This is the format used for each row in the table that is created.
					var tableRow = 
					'<tr>\n'
					+'	<td>{1}</td>\n'
					+'	<td class="PBoT_PBContainer">\n'
					+'		<div id="PBoT_PB{0}" style="background-color:orange;height:5px;width:{2}%"></div>\n'
					+'	</td>\n'
					+'</tr>\n';
					
					// Create the table and each row of the table.
					table.innerHTML = '<tbody>\n'
					for(i=0; i<progressBars.length; i++)
						table.innerHTML+=tableRow.format(i,progressBars[i][0],progressBars[i][1]);
					table.innerHTML+='</tbody>\n';
					
					// Insert the table before the placeHolder div.
					var placeHolder = document.getElementById('PBoT_placeHolder');
					placeHolder.parentNode.insertBefore(table,placeHolder);
				}
				else
				{
					for(i=0; i<progressBars.length; i++)
						document.getElementById('PBoT_PB'+i).style.width=progressBars[i][1]+'%';
				}
				setTimeout('updatePBoT();',1000);
			}
			updatePBoT();
		</script>
		]]>
	</Content> 
</Module>