Added current time and time remaining (issue #11)

It was impossible to put both oriented left without messing with other
things (because HTML) so the remaining time is centered. Manan does not
like the time remaining in the period but I think it’s nice. People
like countdowns. Countdowns are good.

index.html

@@ -464,12 +464,19 @@
 English	9:00-11:00
 Lunch	11:00-12:00
 Conflicts	12:00-2:00</div>
-
+<h3> 
+	<span id="currentTime"></span>
+</h3>
 <h1 id="header" class="noHighlight">
 	<span id="leftArrow" title="Last Week">&#8249;</span>
 	<span id="rightArrow" title="Next Week">&#8250;</span>
 	<span id="title">Bell Schedule</span>
 </h1>
+<h3>
+	<span id="timeRemaining"></span>
+	<!-- <br> 
+	<span id="currentTime"></span> -->
+</h3>
 
 <!--<div class="noHighlight" id="currWeekWrapper" class="noHighlight"><h2>
 	<button class="noHighlight" type="button" id="currWeek" title="Go to Current Week" onclick="goCurrWeek()">Current Week</button>

script.js

@@ -1,4 +1,4 @@
-//warning: I left debug code everywhere, and much of this is still pretty messy.
+/*warning: I left debug code everywhere, and much of this is still pretty messy.*/
 
 /**
  * Globals
@@ -10,6 +10,7 @@ var dispWeek; //Sunday of week currently being displayed by the schedule
 var mobile = isMobile();
 
 var updateScheduleID; //ID of interval of updateSchedule
+
 var options = new Object();
 
 var hasFocus = true; //document.hasFocus() seems to be unreliable; assumes window has focus on page load
@@ -457,11 +458,12 @@ function setHighlightedPeriod(time){
 					period.classList.add("now");
 					//add period length if it fits
 					if((period.end-period.start)/60000>=40){
-						var length = (period.end - time) / 60000;
+						length = (period.end - time) / 60000;
 						period.innerHTML += "<div class=\"periodLength\">" + 
-								(length>1 ?
+								(length >1 ?
 									Math.round(length) + " min. left</div>" :
-									Math.round(length*60) + " sec. left</div>");
+									Math.round(length * 60) + " sec. left</div>");
+						updateDisplayTime(length);
 					}
 				}
 			}
@@ -625,3 +627,24 @@ function isMobile() {
 	if(window.innerWidth <= 800 && window.innerHeight <= 600) return true;
 	return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4));
 }
+
+/**
+ * Updates and formats the time displayed on the top-left corner of the screen and
+ * the time remaining in the period in the center. It takes the time left in the period 
+ * from setHighlightedPeriod, (kind of hacky but that's the only place to find period length.
+ * timeRemaining should be in minutes.
+ */
+function updateDisplayTime(timeRemaining) {
+	var now = new Date();
+	var h = (now.getHours() > 12) ? now.getHours() - 12 : now.getHours(); //12-hour time, because America is special
+	var m = (now.getMinutes() < 10) ? "0" + now.getMinutes() : now.getMinutes(); //Add a zero for numbers less than 10
+	var s = (now.getSeconds() < 10) ? "0" + now.getSeconds() : now.getSeconds();
+	var hRem = Math.floor(timeRemaining / 60);
+	var mRem = Math.floor(timeRemaining % 60);
+	var sRem = Math.floor((timeRemaining % 1) * 60);
+	mRem = (mRem < 10) ? "0" + mRem : mRem; //Again add the zero for numbers less than 10.
+	sRem = (sRem < 10) ? "0" + sRem : sRem; //Done on a different line to avoid repeat calculation.
+	var ampm = (now.getHours() > 12) ? "PM" : "AM";
+	document.getElementById("currentTime").innerHTML = "Current Time: " + h + ":" + m + ":" + s + " " + ampm;
+	document.getElementById("timeRemaining").innerHTML = "Time Remaining: " + hRem + ":" + mRem + ":" + sRem;
+}

style.css

@@ -29,7 +29,7 @@ a{
 }
 
 #header{
-	margin: .67em auto;
+	margin: .88em auto;
 	max-width: 400px;
 	width: 50%;
 }
@@ -43,10 +43,21 @@ a{
 	-ms-user-select: initial;
 	user-select: initial;
 }
-
+#currentTime{
+	/* text-align: center; */
+	float: left;
+	font-weight: normal;
+}
+#timeRemaining{
+	text-align: center;
+	font-weight: normal;
+}
 #leftArrow{
 	float: left;
 }
+#leftArrow br{
+	display: none;
+}
 #rightArrow{
 	float: right;
 }