diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..dc528e5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.Rhistory
diff --git a/index.html b/index.html
index 612c7fb..8d5d1fa 100644
--- a/index.html
+++ b/index.html
@@ -48,26 +48,7 @@
       </div>
       <div class="content-box chart-box strecken-selector">
         <div class="frame">
-	        <ul class="slidee">
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
-		        <li>test</li>
+	        <ul class="slidee" id="courseSelection">
 	        </ul>
         </div>
         <div class="scrollbar">
diff --git a/js/diagrams.js b/js/diagrams.js
index 0076e29..17daea1 100644
--- a/js/diagrams.js
+++ b/js/diagrams.js
@@ -2,7 +2,7 @@
 
 // https://bl.ocks.org/mbostock/3884955
 function createLineGraph(containerId, raceData){
-  console.log(raceData);
+  //console.log(raceData);
 
   var height = 720;
   var width = 1080;
@@ -38,7 +38,7 @@ function createLineGraph(containerId, raceData){
   y.domain([raceData.drivers.length, 1]);
 
   var enhancedLapData = processor.getEnhancedLapDataPerDriver(raceData);
-  console.log(enhancedLapData);
+  //console.log(enhancedLapData);
 
   // Adds all lines
   enhancedLapData.forEach((driverLapData, driverIndex) => {
@@ -102,7 +102,7 @@ function createLineGraph(containerId, raceData){
       d3.axisLeft(y)
         .ticks(raceData.drivers.length)
         .tickFormat(function(d) {
-          console.log(getDriverCodeFromPosAndLap(raceData, 0, d) + " " + d);
+          //console.log(getDriverCodeFromPosAndLap(raceData, 0, d) + " " + d);
           return getDriverCodeFromPosAndLap(raceData, 0, d) + " " + d;
         })
     );
@@ -112,7 +112,7 @@ function createLineGraph(containerId, raceData){
         d3.axisRight(y)
           .ticks(raceData.drivers.length)
           .tickFormat(function(d) {
-            console.log(getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) + " " + d);
+            //console.log(getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) + " " + d);
             return d + " " + getDriverCodeFromPosAndLap(raceData, raceData.lapTimes.size, d) ;
           })
       )
diff --git a/js/main.js b/js/main.js
index 5652d8f..49d791e 100644
--- a/js/main.js
+++ b/js/main.js
@@ -4,35 +4,58 @@
  * This file contains the main control flow.
  */
 
-preprocessor.load(function(data) {
-		var $frame  = $('.strecken-selector');
-		var $slidee = $frame.children('ul').eq(0);
-		var $wrap   = $frame.parent();
-    var options = {
-			horizontal: 1,
-			itemNav: 'basic',
-			smart: 1,
-			activateOn: 'click',
-			mouseDragging: 1,
-			touchDragging: 1,
-			releaseSwing: 1,
-			startAt: 3,
-			scrollBar: $wrap.find('.scrollbar'),
-			scrollBy: 1,
-			pagesBar: $wrap.find('.pages'),
-			activatePageOn: 'click',
-			speed: 300,
-			elasticBounds: 1,
-			dragHandle: 1,
-			dynamicHandle: 1,
-			clickBar: 1,
-    };
-    $('.frame').sly(options);
+var slyelement = {
+  obj: {},
+  el: '.frame',
+  options: {
+   horizontal: 1,
+	itemNav: 'basic',
+	smart: 1,
+	activateOn: 'click',
+	mouseDragging: 1,
+	touchDragging: 1,
+	releaseSwing: 1,
+	startAt: 3,
+	scrollBar: $('.strecken-selector').parent().find('.scrollbar'),
+	scrollBy: 1,
+	pagesBar: $('.strecken-selector').parent().find('.pages'),
+	activatePageOn: 'click',
+	speed: 300,
+	elasticBounds: 1,
+	dragHandle: 1,
+	dynamicHandle: 1,
+	clickBar: 1,
+  }
+};
+
+
+preprocessor.load(function(data) {    
+    slyelement.obj = new Sly($(slyelement.el), slyelement.options);  
+    slyelement.obj.init();
+   
 
   // Some sample code for a year selector - TODO: Improve a lot and move somewhere else
   var yearSelector = $("#seasonByYearSelector");
-  var seasons = processor.getSeasonsWithLapData();
-  for(var season in seasons){ yearSelector.append("<option>" + seasons[season].year + "</option>"); }
 
-  createLineGraph("#lineGraphBox", processor.getRace(970));
+  var seasons = processor.getSeasonsWithLapData();
+
+  for(var season in seasons){ yearSelector.append("<option>" + seasons[season].year + "</option>"); }
+  
+  // Someone chose a year
+  yearSelector.change(function(event) {
+    var selectedYear = $(event.target).val();
+    var races = processor.getRacesByYear(selectedYear);
+    $("#courseSelection").empty();
+    for(var race in races) {      
+      $("#courseSelection").append("<li>" + races[race].raceInfo.name  +" " + races[race].raceInfo.date + "</li>");
+    }
+    slyelement.obj.reload();
+    var raceData = races[0];
+    createLineGraph("#lineGraphBox", processor.getRace(974));
+  });
+
+  $(window).resize(function(e) {
+    slyelement.obj.reload();
+  });
+
 });
diff --git a/js/processor.js b/js/processor.js
index 9dabd99..73b1abb 100644
--- a/js/processor.js
+++ b/js/processor.js
@@ -62,7 +62,9 @@ var processor = {
 
   getRacesByYear: function(year) {
     var races = queries.getRacesByYear(year);
-    return races.map(race => processor.getRace(race.raceId));
+    var racesUnsorted = races.map(race => processor.getRace(race.raceId));
+    racesUnsorted.sort((o1,o2) => o1["raceInfo"]["round"] - o2["raceInfo"]["round"]);
+    return racesUnsorted;
   },
 
   //Gets the position of Driver with driverid in specific lap
diff --git a/js/queries.js b/js/queries.js
index 6bc0cac..761666d 100644
--- a/js/queries.js
+++ b/js/queries.js
@@ -112,7 +112,12 @@ var queries = {
 
   getRaceById: function(raceId){
     var rawData = preprocessor.getResults();
-    return rawData.races[raceId];
+    for(var key in rawData.races){
+        if(rawData.races[key].raceId == raceId){
+            return rawData.races[key];
+        }
+    }
+    return null;
   },
 
   getRacesByYear: function(year){