merge in timer in notes window, timer now stays hidden until initial time is set

plugin/notes/notes.html

@@ -95,10 +95,22 @@
 			.error code {
 				font-family: monospace;
 			}
+
 			.time {
+				width: 448px;
+				margin: 30px 0 0 10px;
+				float: left;
 				text-align: center;
+				opacity: 0;
+
+				-webkit-transition: opacity 0.4s;
+				   -moz-transition: opacity 0.4s;
+				     -o-transition: opacity 0.4s;
+				        transition: opacity 0.4s;
 			}
-			.elapsed, .clock {
+
+			.elapsed,
+			.clock {
 				color: #333;
 				font-size: 2em;
 				text-align: center;
@@ -107,12 +119,15 @@
 				background-color: #eee;
 				border-radius: 10px;
 			}
-			.elapsed h2, .clock h2 {
+
+			.elapsed h2,
+			.clock h2 {
 				font-size: 0.8em;
 				line-height: 100%;
 				margin: 0;
 				color: #aaa;
 			}
+
 			.elapsed .mute {
 				color: #ddd;
 			}
@@ -130,29 +145,27 @@
 			<script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
 			<span>UPCOMING:</span>
 		</div>
-		<div class='time'>
+
-			<div class='clock'>
+		<div class="time">
+			<div class="clock">
 				<h2>Time</h2>
-				<span id='clock'>0:00:00 AM</span>
+				<span id="clock">0:00:00 AM</span>
 			</div>
-			<div class='elapsed'>
+			<div class="elapsed">
 				<h2>Elapsed</h2>
-				<span id='hours'>00</span><span id='minutes'>:00</span><span id='seconds'>:00</span>
+				<span id="hours">00</span><span id="minutes">:00</span><span id="seconds">:00</span>
 			</div>
 		</div>
+
 		<div id="notes"></div>
 
 		<script src="../../plugin/markdown/showdown.js"></script>
 		<script>
-			function zeroPadInteger(num) {
+
-				var str = "00" + parseInt(num);
-				return str.substring(str.length - 2);
-			}
 			window.addEventListener( 'load', function() {
 
 				if( window.opener && window.opener.location && window.opener.location.href ) {
 
-					(function( window, undefined ) {
 					var notes = document.getElementById( 'notes' ),
 						currentSlide = document.getElementById( 'current-slide' ),
 						nextSlide = document.getElementById( 'next-slide' );
@@ -184,24 +197,20 @@
 
 					}, false );
 
-					})( window );
-
-				}
-				else {
-
-					document.body.innerHTML =  '<p class="error">Unable to access <code>window.opener.location</code>.<br>Make sure the presentation is running on a web server.</p>';
-
-				}
-
 					var start = new Date(),
+						timeEl = document.querySelector( '.time' ),
 						clockEl = document.getElementById( 'clock' ),
 						hoursEl = document.getElementById( 'hours' ),
 						minutesEl = document.getElementById( 'minutes' ),
 						secondsEl = document.getElementById( 'seconds' );
 
 					setInterval( function() {
+
+						timeEl.style.opacity = 1;
+
 						var diff, hours, minutes, seconds,
 							now = new Date();
+
 						diff = now.getTime() - start.getTime();
 						hours = parseInt( diff / ( 1000 * 60 * 60 ) );
 						minutes = parseInt( ( diff / ( 1000 * 60 ) ) % 60 );
@@ -213,11 +222,24 @@
 						minutesEl.innerHTML = ":" + zeroPadInteger( minutes );
 						minutesEl.className = minutes > 0 ? "" : "mute";
 						secondsEl.innerHTML = ":" + zeroPadInteger( seconds );
+
 					}, 1000 );
 
+				}
+				else {
+
+					document.body.innerHTML =  '<p class="error">Unable to access <code>window.opener.location</code>.<br>Make sure the presentation is running on a web server.</p>';
+
+				}
+
 
 			}, false );
 
+			function zeroPadInteger( num ) {
+				var str = "00" + parseInt( num );
+				return str.substring( str.length - 2 );
+			}
+
 		</script>
 	</body>
 </html>