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,61 +145,85 @@
 			<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' );
-
-						window.addEventListener( 'message', function( event ) {
-							var data = JSON.parse( event.data );
-							// No need for updating the notes in case of fragment changes
-							if ( data.notes !== undefined) {
-								if( data.markdown ) {
-									notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes );
-								}
-								else {
-									notes.innerHTML = data.notes;
-								}
-							}
+					var notes = document.getElementById( 'notes' ),
+						currentSlide = document.getElementById( 'current-slide' ),
+						nextSlide = document.getElementById( 'next-slide' );
 
-							// Showing and hiding fragments
-							if( data.fragment === 'next' ) {
-								currentSlide.contentWindow.Reveal.nextFragment();
-							}
-							else if( data.fragment === 'prev' ) {
-								currentSlide.contentWindow.Reveal.prevFragment();
+					window.addEventListener( 'message', function( event ) {
+						var data = JSON.parse( event.data );
+						// No need for updating the notes in case of fragment changes
+						if ( data.notes !== undefined) {
+							if( data.markdown ) {
+								notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes );
 							}
 							else {
-								// Update the note slides
-								currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
-								nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
+								notes.innerHTML = data.notes;
 							}
-
-						}, false );
-
-					})( window );
+						}
+
+						// Showing and hiding fragments
+						if( data.fragment === 'next' ) {
+							currentSlide.contentWindow.Reveal.nextFragment();
+						}
+						else if( data.fragment === 'prev' ) {
+							currentSlide.contentWindow.Reveal.prevFragment();
+						}
+						else {
+							// Update the note slides
+							currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
+							nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
+						}
+
+					}, false );
+
+					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 );
+						seconds = parseInt( ( diff / 1000 ) % 60 );
+
+						clockEl.innerHTML = now.toLocaleTimeString();
+						hoursEl.innerHTML = zeroPadInteger( hours );
+						hoursEl.className = hours > 0 ? "" : "mute";
+						minutesEl.innerHTML = ":" + zeroPadInteger( minutes );
+						minutesEl.className = minutes > 0 ? "" : "mute";
+						secondsEl.innerHTML = ":" + zeroPadInteger( seconds );
+
+					}, 1000 );
 
 				}
 				else {
@@ -193,31 +232,14 @@
 
 				}
 
-				var start = new Date(),
-					clockEl = document.getElementById('clock'),
-					hoursEl = document.getElementById('hours'),
-					minutesEl = document.getElementById('minutes'),
-					secondsEl = document.getElementById('seconds');
-
-				setInterval(function() {
-					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);
-					seconds = parseInt((diff / 1000) % 60);
-
-					clockEl.innerHTML = now.toLocaleTimeString();
-					hoursEl.innerHTML = zeroPadInteger(hours);
-					hoursEl.className = hours > 0 ? "" : "mute";
-					minutesEl.innerHTML = ":" + zeroPadInteger(minutes);
-					minutesEl.className = minutes > 0 ? "" : "mute";
-					secondsEl.innerHTML = ":" + zeroPadInteger(seconds);
-				}, 1000);
-
 
 			}, false );
 
+			function zeroPadInteger( num ) {
+				var str = "00" + parseInt( num );
+				return str.substring( str.length - 2 );
+			}
+
 		</script>
 	</body>
 </html>