From c4db9ceb44242eb46db7931326090ea168d26cec Mon Sep 17 00:00:00 2001
From: Norman Soetbeer <norman.soetbeer@gmail.com>
Date: Wed, 2 Oct 2013 01:21:17 +0200
Subject: [PATCH] #3 - Add refresh functionality to refetch data

---
 css/main.css | 32 +++++++++++++++++++++++++++++---
 js/main.js   | 17 +++++++++++++++++
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/css/main.css b/css/main.css
index 9bde46b..ca89651 100644
--- a/css/main.css
+++ b/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 {
diff --git a/js/main.js b/js/main.js
index 02267e3..6d66755 100644
--- a/js/main.js
+++ b/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');