3 files changed, 44 insertions(+), 3 deletions(-)

M assets/atom2html.xslt
A assets/script.js
M assets/style.css

@@ 95,6 95,10 @@
         <ul id="photos">
           <xsl:for-each select="a:entry">
             <li id="{substring-after(a:id, '#')}">
+              <xsl:attribute name="class">
+                <xsl:for-each select="a:category">cat_<xsl:value-of select="generate-id(key('CategorY',@term))"/><xsl:text> </xsl:text></xsl:for-each>
+              </xsl:attribute>
+
               <xsl:variable name="time" select="substring(translate(a:updated,'T',' '), 1, 16)"/>
               <a href="{a:link[@rel='enclosure']/@href}" title="{normalize-space(a:title)}" data-lightbox="foo" data-title="{normalize-space(a:title)} | {$time}">
                 <span style="display:block;width:200px;height:200px;text-align:center">


@@ 128,17 132,18 @@
 
         <ul id="categories">
           <!-- http://stackoverflow.com/a/16328207 -->
-          <xsl:for-each select="a:entry/a:category[generate-id() = generate-id(key('CategorY',@term)[1])]">
+          <xsl:for-each select="a:entry/a:category[generate-id() = generate-id(key('CategorY',@term))]">
             <xsl:sort select="@label"/>
             <xsl:sort select="@term"/>
-            <li id="{generate-id(@term)}">
-              <span><xsl:value-of select="@label"/></span><xsl:text> </xsl:text><xsl:value-of select="count(../../a:entry[a:category/@term = current()/@term])"/>
+            <li id="{generate-id(key('CategorY',@term))}">
+              <a onclick="toggleCategory(this)" class="cat_{generate-id(key('CategorY',@term))}"><xsl:value-of select="@label"/></a><xsl:text> </xsl:text><xsl:value-of select="count(../../a:entry[a:category/@term = current()/@term])"/>
             </li>
           </xsl:for-each>
         </ul>
 
         <!-- http://lokeshdhakar.com/projects/lightbox2/#how-to-use -->
         <script src="assets/lightbox2/js/lightbox-plus-jquery.min.js" type="text/javascript"></script>
+        <script src="assets/script.js" type="text/javascript"></script>
 
         <hr style="clear:left;"/>
         <p id="footer">

@@ 0,0 1,18 @@
+
+var active = {};
+
+function toggleCategory(elem) {
+  var clz = '.cat_' + elem.parentNode.getAttribute('id');
+  if( active[clz] ) {
+    $(clz).removeClass('active');
+    delete active[clz];
+  } else {
+    $(clz).addClass('active');
+    active[clz] = true;
+  }
+  if( 0 == Object.keys(active).length ) {
+    $('#photos').removeClass('active');
+  } else {
+    $('#photos').addClass('active');
+  }
+}

@@ 62,3 62,21 @@ ul#photos > li a:visited { color: white; text-decoration:none; }
  * See http://purl.mro.name/safari-xslt-br-bug */
 br { display:none; }
 br.br { display:inline; }
+
+
+#categories a {
+  text-decoration: underline;
+}
+#categories a:hover {
+  cursor: pointer;
+}
+#categories a.active {
+  color: orange;
+  font-weight: bold;
+}
+ul#photos.active li {
+  display: none;
+}
+ul#photos.active li.active {
+  display: block;
+}