Issue #90. Change game filter dropdown to icon list. @wouatcha, you'r…

…e next!

src/main/webapp/WEB-INF/pages/timeline/timeline.jsp

@@ -27,14 +27,15 @@
 			</h1>
 			<div id="catContent">
                 <form action="">
-                    <label id="gameFilterLabel" for="gameFilter">Select a game</label>
-                    <select id="gameFilter" multiple="true">
+                    <ul id="gameFilter">Select a game</p>
                         <c:forEach var="game" items="${games}">
-                            <option value="<c:out value="${game.id}" />">
-                                <c:out value="${game.title}" />
-                            </option>
+                            <li><img class="gameIcon"
+                                     src="<c:out value="${game.iconUrl}" />"
+                                     alt="<c:out value="${game.title}" />"
+                                     data-game-id="<c:out value="${game.id}" />" />
+                            </li>
                         </c:forEach>
-                    </select>
+                    </ul>
                 </form>
 				<div id="calContent">
 					<c:choose>

src/main/webapp/static/css/timeline.css

@@ -27,4 +27,6 @@
 #arrowRight a { margin-right: 10px; background: url('../img/navNext.png') no-repeat;}
 
 #arrowLeft:hover a, #arrowRight:hover a { opacity:1;}
-img.gFImg { width:70px; height:70px;}
+img.gFImg { width:70px; height:70px;}
+
+.gameIcon.selected { border:3px solid pink;}

src/main/webapp/static/js/pages/timeline.js

@@ -7,21 +7,42 @@ define([
     "use strict";
 
     var filterId = "#gameFilter",
+        iconClass = ".gameIcon",
         hasErrors = false;
 
     return {
         trigger: function() {
+            var $icons = $(filterId + " " + iconClass);
             hasErrors = sanityChecker.checkIfNotExists(filterId, 'Game filter') || hasErrors;
 
             if (hasErrors) {
                 logger.error('Script initialization failed due to multiple errors');
             } else {
                 logger.debug('Initializing game filter...');
-                $(filterId).bind("change", function() {
-                    var selectedGameIds = _.map($(filterId).val(), function(gameId) {
-                        return parseInt(gameId, 10);
-                    }),
-                    allOccurrences = $("article[data-game]");
+                $icons.click(function() {
+                    var selectedGameIds,
+                        allOccurrences = $("article[data-game]"),
+                        newStatus = ($(this).data("selected") === undefined) ? true : !($(this).data("selected").value);
+
+                    $(this)
+                        .toggleClass("selected", newStatus)
+                        .data("selected", {value:newStatus});
+
+
+                    selectedGameIds = _.map(
+                        _.filter(
+                            $icons,
+                            function(icon) {
+                                var status = $(icon).data("selected");
+                                return !(_.isUndefined(status)) && status.value;
+                            }
+                        ),
+                        function(icon) {
+                            return $(icon).data("game-id");
+                        }
+                    );
+
+                    logger.debug(selectedGameIds);
 
                     _.map(allOccurrences, function(occ) {
                         if(_.indexOf(selectedGameIds, $(occ).data("game")) !== -1) {