From 23e7ce324bd19d4eb48c483a75351043c2de8ef5 Mon Sep 17 00:00:00 2001
From: Jan Philipp Timme <jan.philipp@timme.it>
Date: Sat, 30 Dec 2017 00:15:53 +0100
Subject: [PATCH] Add state to courseSelector

---
 css/main.css |  8 ++++++++
 js/main.js   | 17 ++++++++++++++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/css/main.css b/css/main.css
index 0a6dd99..a42e659 100644
--- a/css/main.css
+++ b/css/main.css
@@ -15,6 +15,14 @@ body {
   /*border: 1px solid grey;*/
 }
 
+#courseSelection li.hover {
+  background-color: #e2eaff;
+}
+
+#courseSelection li.selected {
+  border-color: #aaaaff;
+}
+
 /* This container will allow scaling svg, so we don't need to care about it in d3.js */
 .svg-container {
   display: inline-block;
diff --git a/js/main.js b/js/main.js
index 19358aa..7e50ed4 100644
--- a/js/main.js
+++ b/js/main.js
@@ -44,8 +44,9 @@ preprocessor.load(function(data) {
   yearSelector.change(function(event) {
     var selectedYear = $(event.target).val();
     slyelement.curRaces = processor.getRacesByYear(selectedYear);
+    // Empty the course selector
     $("#courseSelection").empty();
-    // Add all the races to the selector
+    // ... and fill it with fresh races to choose from
     for(var race in slyelement.curRaces) {
         var raceD = slyelement.curRaces[race];
           $("#courseSelection").append("<li data=\"" + raceD.raceInfo.raceId + "\">" +
@@ -53,6 +54,11 @@ preprocessor.load(function(data) {
             "<div class=\"courseimagecontainer\"></div>" + raceD.raceInfo.date.toLocaleDateString("de-DE") + "</li>");
 
 	  $("#courseSelection li").click(function(event) {
+            // Clear previously selected courses
+            $("#courseSelection .selected").removeClass("selected");
+            // Mark selected course
+            $(event.currentTarget).addClass("selected");
+            // Hand off to diagram rendering
 	    var raceI = event.currentTarget.attributes.data.value;
             if(slyelement.curRaceId == raceI){ return; }
             slyelement.curRaceId = raceI;
@@ -62,7 +68,16 @@ preprocessor.load(function(data) {
 	});
         slyelement.obj.reload();
     }
+    // Refresh carousell after building the selector
     slyelement.obj.reload();
+    // Register hover event
+    $("#courseSelection li").hover(function(event){
+      // handlerIn
+      $(event.currentTarget).addClass("hover");
+    }, function(event) {
+      // handlerOut
+      $(event.currentTarget).removeClass("hover");
+    });
 
     // TODO: Now add all the images without disturbing the user
     for(var race in slyelement.curRaces) {