#3 - Add refresh functionality to refetch data

css/main.css

@@ -26,15 +26,41 @@ h1 {
 }
 
 #schedule-tabs.tabs-2 > li {
-	width: 50%;
+	width: 45%;
 }
 
 #schedule-tabs.tabs-3 > li {
-	width: 33%;
+	width: 30%;
 }
 
 #schedule-tabs.tabs-4 > li {
-	width: 25%;
+	width: 22.5%;
+}
+
+#schedule-tabs li.refresh-tab {
+	background-color: #444;
+	width: 10%;
+	overflow: hidden;
+}
+
+.refresh-tab .refresh-icon {
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	background: transparent url(/images/refresh-white.png) center center no-repeat;
+}
+
+#schedule-tabs li.refresh-tab.refreshing .refresh-icon {
+	-webkit-animation: rotate 1s linear 0s infinite normal;
+}
+
+@-webkit-keyframes rotate {
+	from {
+		-webkit-transform: rotate(0deg);
+	}
+	to {
+		-webkit-transform: rotate(360deg);
+	}
 }
 
 h2 {

js/main.js

@@ -14,6 +14,7 @@
 		for (var date in data.schedule) {
 			list += '<li data-day="' + date + '"" class="schedule-tab">' + date + '</li>';
 		}
+		list += '<li class="refresh-tab"><span class="refresh-icon"></span></li>';
 
 		document.getElementById('schedule-tabs').setAttribute('class', 'tabs-' + Object.keys(data.schedule).length);
 		document.getElementById('schedule-tabs').innerHTML = list;
@@ -78,6 +79,22 @@
 			});
 		});
 
+		applyForSelector('refresh-tab', function(element) {
+			element.addEventListener('click', function(event) {
+				addClass(element, 'refreshing');
+
+				// I know, this is really dirty, but we need to refactor it anyway :)
+				var request = new XMLHttpRequest();
+				request.onreadystatechange = function() {
+					if (request.readyState === 4 && request.status === 200) {
+						initSchedule(request.responseText);
+					}
+				};
+				request.open("GET", 'data/schedule.json', true);
+				request.send();
+			});
+		});
+
 		applyForSelector('talk', function(element) {
 			element.addEventListener('click', function() {
 				var talk_id = element.getAttribute('data-talk-id');