WEB: Hide demos with the same target IDs by default (can be toggled)

Now, only the first demo will be shown from a group of demos with the
same target ID. Icons are shown next to each grouped download, which
allow the users to open/close the groups (forming virtual "folders").
This simplifies the demos page a lot, without any changes to the
existing data. This feature is a progressive enhancement: the demos
page will still look the same when Javascript is disabled

css/chart.css

@@ -57,24 +57,37 @@
 	background-color: rgb(153, 153, 153);
 }
 
-#gameDemos tr {
+.gameDemos tr {
 	padding: 0px;
 }
 
-#gameDemos th {
+.gameDemos th {
 	padding: 2px;
 }
 
-#gameDemos td {
+.gameDemos td {
 	padding: 0px 2px;
 }
 
-#gameDemos td img {
+.gameDemos td img.downloadImage {
 	vertical-align: middle;
 	width: 22px;
 	height: 22px;
 }
 
-#gameDemos .gameTarget {
+.gameDemos td img.noSubcat {
+	vertical-align: middle;
+	width: 14px;
+	height: 14px;
+}
+
+.gameDemos td img.subcatToggle {
+	vertical-align: middle;
+	width: 14px;
+	height: 14px;
+	cursor: pointer;
+}
+
+.gameDemos .gameTarget {
 	width: 15%;
 }

javascripts/game_demos.js

@@ -0,0 +1,59 @@
+$(document).ready(function () {
+	hideDuplicates();
+	resetDemosTable();
+	attachSubcatListeners();
+});
+
+function attachSubcatListeners() {
+	$(".gameDemos .subcatToggle").live("click", function() {
+		var clickedImage = $(this);
+		var clickedTarget = $(this).parent().parent().children("td:nth-child(2)").html();
+		var doOpen = (clickedImage.attr("src") == "images/subcat-open.png");
+
+		$(this).parent().parent().nextAll().each(function() {
+			var curRow = $(this);
+			var curTarget  = curRow.children("td:nth-child(2)").html();
+			if (curTarget == clickedTarget) {
+				if (doOpen) {
+					clickedImage.attr("src", "images/subcat-close.png");
+					curRow.fadeIn("fast", function() {
+						resetDemosTable();
+					});
+				} else {
+					clickedImage.attr("src", "images/subcat-open.png");
+					curRow.fadeOut("fast", function() {
+						resetDemosTable();
+					});
+				}
+			}
+		});
+	});
+}
+
+function hideDuplicates() {
+	$(".gameDemos tbody tr").each(function() {
+		var curRow = $(this);
+		var curTarget  = curRow.children("td:nth-child(2)").html();
+		var prevTarget = curRow.prev().children("td:nth-child(2)").html();
+		var nextTarget = curRow.next().children("td:nth-child(2)").html();
+		var buttonHTML = "";
+
+		if (curTarget == prevTarget) {
+			curRow.hide();
+			buttonHTML = "<img src='images/cat-blank.png' class='noSubcat'>";
+		} else if (curTarget != prevTarget && curTarget == nextTarget) {
+			buttonHTML = "<img src='images/subcat-open.png' class='subcatToggle'>";
+		} else {
+			buttonHTML = "<img src='images/cat-blank.png' class='noSubcat'>";
+		}
+
+		curRow.children("td:nth-child(1)").html(buttonHTML + curRow.children("td:nth-child(1)").html());
+	});
+}
+
+function resetDemosTable() {
+	$(".gameDemos").each(function() {
+		$(this).filter("tbody tr:visible:odd" ).removeClass("color2 color0").addClass("color2");
+		$(this).filter("tbody tr:visible:even").removeClass("color2 color0").addClass("color0");
+	});
+}

templates/game_demos.tpl

@@ -1,3 +1,6 @@
+<script type="text/javascript" src="javascripts/jquery-1.3.2.min.js"></script>
+<script type="text/javascript" src="javascripts/game_demos.js"></script>
+
 <div class="box">
 	<div class="intro">
 		<div class="navigation">
@@ -21,7 +24,7 @@
 	<div class="content">
 		{foreach from=$demos item=group}
 		<a name="{$group.href}"></a>
-		<table class="chart color4" id="gameDemos">
+		<table class="chart color4 gameDemos">
 			<caption>{$group.name}</caption>
 			<thead>
 				<tr class="color4">
@@ -32,7 +35,10 @@
 			<tbody>
 			{foreach from=$group.demos item=demo}
 				<tr class="{cycle values="color2, color0"}">
-					<td><img src="images/cat-{$demo->getCategory()}.png"> <a href="{$demo->getURL()}">{$demo->getName()}</a></td>
+					<td>
+						<img src="images/cat-{$demo->getCategory()}.png" class="downloadImage">
+						<a href="{$demo->getURL()}">{$demo->getName()}</a>
+					</td>
 					<td class="gameTarget">{$demo->getTarget()}</td>
 				</tr>
 			{/foreach}