WebContent/demos.html


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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>IT Mill Toolkit 5 Demos</title>
		<link rel="stylesheet" type="text/css" href="demo/css/demos.css" />
		<!--[if IE]>
		<link rel="stylesheet" type="text/css" href="demo/css/ie.css" />
		<![endif]-->
		<script type="text/javascript">
		
		window.onload = function() {
			itmill.init();
		}
		
		var itmill = function() {
		
			var isIE = /MSIE/.test(navigator.userAgent) && !window.opera;
			var packageOpen = false;
			var packageContent;
			var package;
			var demoArea;
		
			return {
			
				init : function() {
					// Fetch references
					packageContent = document.getElementById("additional-content");
					package = document.getElementById("additional");
					demoArea = document.getElementById("demos");
					
					// Hide package contents initially
					packageContent.style.display = "none";
					
					// Enable package contents panel hiding/showing
					var toggle = package.getElementsByTagName("h3")[0];
					toggle.style.cursor = "pointer";
					toggle.title = "Show/hide package contents";
					// Use the quick-n-dirty way to attach event listeners
					toggle.onclick = this.togglePackage;					
					
					// TODO enable demo button hovers
					var demos = demoArea.getElementsByTagName("li");
					for(var i=0; i < demos.length; i++) {
						demos[i].onmouseover = this.focusDemo;
						//demos[i].onmouseout = this.blurDemos;
					}
					demoArea.onmouseout = this.blurDemos;
					
				},
				
				togglePackage : function() {
					if(packageOpen) {
							packageContent.style.display = "none";
							packageOpen = false;
						} else {
							packageContent.style.display = "block";
							packageOpen = true;
						}
				},
				
				focusDemo : function(e) {
					var evt = e ? e : window.event;
					var target = evt.target ? evt.target.parentNode : evt.srcElement.parentNode; // Should be the LI element
					if(target.nodeType != 1 || target.nodeName != "LI")
						return;
						
					var demos = document.getElementById("demos").getElementsByTagName("li");
					for(var i=0; i < demos.length; i++) {
						var demo = demos[i];
						if(demo != target) {
							if(isIE)
								demo.style.filter = "alpha(opacity=60)";
							else 
								demo.style.opacity = "0.6";
							
						} else {
							if(isIE)
								demo.style.filter = "";
							else 
								demo.style.opacity = "1";
						}
					}
				},
				
				blurDemos : function(e) {
					var evt = e ? e : window.event;
					var target = evt.toElement || evt.relatedTarget;
					if((target == demoArea || target.parentNode == demoArea || target.parentNode.parentNode == demoArea) && target.nodeName != "H2")
						return;
					var demos = demoArea.getElementsByTagName("li");
					for(var i=0; i < demos.length; i++) {
						if(isIE)
							demos[i].style.filter = "";
						else 
							demos[i].style.opacity = "1";
					}
				}
				
			};
		}();
		
		</script>
	</head>
	<body>
	
	<div id="container">
	
		<div class="header">
			<h1>Introducing IT Mill Toolkit 5</h1>
			<em>Effortless web application development for Java-programmers.</em>
			<a href="http://www.itmill.com" title="Open www.itmill.com">Visit itmill.com</a>
		</div> <!-- /Header -->
		
		<div class="content">
		
			<div id="demos">
				<h2>Demos</h2>
				<ul>
					<li id="feature-browser"><a href="feature-browser">Feature browser</a></li>
					<li id="notifications"><a href="notification-demo">Notifications</a></li>
					<li id="reservr"><a href="reservr">Reservation application</a></li>
					<li id="windowed-demos"><a href="windowed-demo">Windowed demos</a></li>
				</ul>
				<div class="clearer"></div>
			</div> <!-- /demos -->
			
			<div class="clearer"></div>
			
			<div id="additional">
				<div class="top"></div>
				
				<h3>&raquo; Additional demos</h3>
				
				<div id="additional-content"> <!-- For JavaScript hooking -->
				
				<ul>
					<li><a href="table-demo">Table Demo</a></li>
					<li><a href="select-demo">Select Demo</a></li>
				</ul>
				
				</div>
			
				<div class="bottom"></div>
			</div> <!-- /package-contents -->
			
			<div class="clearer"></div>
		</div> <!-- /content-->
		
		<div class="footer">
			<a href="http://www.itmill.com">IT Mill Ltd.</a>
			<em>Interfacing IT</em>
		</div> <!-- /footer -->
	
	</div> <!-- /container -->
	
	</body>
</html>