From 604d2db969acbcea4e87b1a78d37e578cf3455f9 Mon Sep 17 00:00:00 2001
From: Brennan Taylor <taylor.brennan@gmail.com>
Date: Fri, 26 Mar 2010 19:50:59 -0400
Subject: [PATCH] Changed talks page to have thumbnails and be awesome.

---
 buttons/audio-file.svg | 247 +++++++++++++++++++++++++++++++++++++++++
 default.css            |  17 +++
 media/index.xml        |  50 ++++++++-
 xsl/media.xsl          |   3 +-
 4 files changed, 314 insertions(+), 3 deletions(-)
 create mode 100644 buttons/audio-file.svg

diff --git a/buttons/audio-file.svg b/buttons/audio-file.svg
new file mode 100644
index 0000000..b21edcd
--- /dev/null
+++ b/buttons/audio-file.svg
@@ -0,0 +1,247 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="128"
+   height="128"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.47pre4 r22446"
+   sodipodi:docname="New document 1">
+  <defs
+     id="defs4">
+    <linearGradient
+       id="linearGradient3618">
+      <stop
+         style="stop-color:#2f66ad;stop-opacity:1;"
+         offset="0"
+         id="stop3620" />
+      <stop
+         style="stop-color:#1d4c8b;stop-opacity:1;"
+         offset="1"
+         id="stop3622" />
+    </linearGradient>
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 526.18109 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       id="perspective10" />
+    <inkscape:perspective
+       id="perspective3598"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <inkscape:perspective
+       id="perspective3612"
+       inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
+       inkscape:vp_z="1 : 0.5 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 0.5 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3618"
+       id="linearGradient3624"
+       x1="60.356613"
+       y1="5.7715416"
+       x2="60.356613"
+       y2="118.90862"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       id="linearGradient4873">
+      <stop
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1"
+         id="stop4875" />
+      <stop
+         offset="1"
+         style="stop-color:#ffffff;stop-opacity:0"
+         id="stop4877" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3242-187-536">
+      <stop
+         offset="0"
+         style="stop-color:#8badea;stop-opacity:1"
+         id="stop2778" />
+      <stop
+         offset="0.26238"
+         style="stop-color:#6396cd;stop-opacity:1"
+         id="stop2780" />
+      <stop
+         offset="0.66093999"
+         style="stop-color:#3b7caf;stop-opacity:1"
+         id="stop2782" />
+      <stop
+         offset="1"
+         style="stop-color:#194c70;stop-opacity:1;"
+         id="stop2784" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient2490-182-124">
+      <stop
+         offset="0"
+         style="stop-color:#1f4b6a;stop-opacity:1;"
+         id="stop2788" />
+      <stop
+         offset="1"
+         style="stop-color:#4083c2;stop-opacity:1"
+         id="stop2790" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient8838">
+      <stop
+         offset="0"
+         style="stop-color:#000000;stop-opacity:1"
+         id="stop8840" />
+      <stop
+         offset="1"
+         style="stop-color:#000000;stop-opacity:0"
+         id="stop8842" />
+    </linearGradient>
+    <inkscape:perspective
+       id="perspective3653"
+       inkscape:persp3d-origin="24 : 16 : 1"
+       inkscape:vp_z="48 : 24 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 24 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4873"
+       id="linearGradient3684"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(5.8862567,0,0,5.8861226,-302.12755,1009.0274)"
+       x1="63.397362"
+       y1="-12.489107"
+       x2="63.397362"
+       y2="5.4675598" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3242-187-536"
+       id="radialGradient3687"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(0,6.3651041,-8.4018246,0,97.523312,777.91305)"
+       cx="23.895569"
+       cy="3.9900031"
+       fx="23.895569"
+       fy="3.9900031"
+       r="20.397499" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient2490-182-124"
+       id="linearGradient3689"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(2.6669535,0,0,2.666954,-0.00687917,924.35529)"
+       x1="18.379412"
+       y1="44.980297"
+       x2="18.379412"
+       y2="3.0816143" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient8838"
+       id="radialGradient3692"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(6.0235295,0,0,2.095138,-313.22353,1020.4113)"
+       cx="62.625"
+       cy="4.625"
+       fx="62.625"
+       fy="4.625"
+       r="10.625" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="7.9195959"
+     inkscape:cx="62.014165"
+     inkscape:cy="77.797144"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer3"
+     showgrid="false"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1680"
+     inkscape:window-height="919"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-924.36218)"
+     style="display:inline">
+    <path
+       style="opacity:0.3;fill:url(#radialGradient3692);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999988;marker:none;visibility:visible;display:inline;overflow:visible"
+       id="path8836"
+       d="m 128,1030.1013 c 0,12.2943 -28.653779,22.2609 -63.999999,22.2609 C 28.65378,1052.3622 0,1042.3956 0,1030.1013 c 0,-12.2943 28.65378,-22.2609 64.000001,-22.2609 35.34622,0 63.999999,9.9666 63.999999,22.2609 l 0,0 z" />
+    <path
+       style="fill:url(#radialGradient3687);fill-opacity:1;stroke:url(#linearGradient3689);stroke-width:2.79277635;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+       id="path2555"
+       d="m 64.000015,934.10634 c -29.936499,0 -54.2558425,24.31934 -54.2558425,54.25584 0,29.93652 24.3193435,54.25582 54.2558425,54.25582 29.936487,0 54.255855,-24.3193 54.255825,-54.25582 0,-29.9365 -24.319338,-54.25584 -54.255825,-54.25584 z" />
+    <path
+       style="opacity:0.4;fill:none;stroke:url(#linearGradient3684);stroke-width:2.78260875;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="path8655"
+       d="m 115.47828,988.36035 c 0,28.43155 -23.049304,51.48005 -51.477617,51.48005 -28.430915,0 -51.478914,-23.0487 -51.478914,-51.48005 0,-28.43026 23.047999,-51.47643 51.478914,-51.47643 28.428313,0 51.477617,23.04617 51.477617,51.47643 l 0,0 z" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer3"
+     inkscape:label="Shadow"
+     style="display:inline">
+    <g
+       transform="translate(0,-924.36218)"
+       style="font-size:100.56345367px;font-style:normal;font-weight:normal;fill:#000000;fill-opacity:0.19607843;stroke:none;display:inline;font-family:Bitstream Vera Sans"
+       id="text3698">
+      <path
+         d="m 61.372977,949.18824 4.271983,0 0.392826,0.34372 0,1.91503 c 0.883823,1.76778 4.15737,3.68281 9.82065,5.74508 7.856468,2.29155 11.784724,5.69604 11.784779,10.21347 -5.5e-5,4.77944 -1.996919,8.74043 -5.990596,11.88299 l -0.448951,1.95717 -1.851904,-1.91854 c 1.996815,-1.604 3.626592,-5.39083 3.626643,-8.14067 -5.1e-5,-2.29143 -3.731895,-4.59928 -11.195541,-6.92355 -3.011703,-1.37483 -4.926728,-2.48784 -5.74508,-3.33902 l 0,52.34408 c -3.4e-5,5.0085 -3.666407,8.2493 -10.999128,9.7224 l -2.798885,0 c -7.922003,0 -11.882995,-2.7498 -11.882986,-8.2493 -9e-6,-4.2884 3.469951,-6.809 10.409888,-7.5619 l 1.129375,0 c 3.142585,0 6.170616,1.0475 9.084101,3.1426 l 0,-60.78984 0.392826,-0.34372"
+         id="path3703"
+         sodipodi:nodetypes="cccccscccscccccsccccc" />
+    </g>
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Note"
+     style="display:inline">
+    <text
+       transform="translate(0,-924.36218)"
+       xml:space="preserve"
+       style="font-size:100.56345367px;font-style:normal;font-weight:normal;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Bitstream Vera Sans"
+       x="31.911028"
+       y="1024.7722"
+       id="text3694"><tspan
+         sodipodi:role="line"
+         id="tspan3696"
+         x="31.911028"
+         y="1024.7722">♪</tspan></text>
+  </g>
+</svg>
diff --git a/default.css b/default.css
index 4433132..92e17af 100644
--- a/default.css
+++ b/default.css
@@ -223,3 +223,20 @@ input.library {
     width: 600px;
 }
 
+ul.media {
+    list-style: none;
+    vertical-align: middle;
+    padding: 0px;
+}
+
+img.media {
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
+li.media {
+    border-bottom: 1px solid #ccc;
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
diff --git a/media/index.xml b/media/index.xml
index 29b248d..9645254 100644
--- a/media/index.xml
+++ b/media/index.xml
@@ -9,7 +9,28 @@
     and we do not recommend attempting to stream them. Most of these should be
     available upon request at the Computer Science Club office to be burnt to
     CD or DVD should you so choose.
-    <ul>
+    <ul class="media">
+
+<mediaitem title="Software Transactional Memory and Haskell">
+  <abstract><p>
+    Concurrency is hard. Well maybe not hard, but it sure is annoying to get right. Even the
+    simplest of synchronization tasks are hard to implement correctly when using synchronization
+    primitives such as locks and semaphores.
+  <p></p>
+    In this talk we explore what Software Transactional Memory (STM) is, what problems STM solves,
+    and how to use STM in Haskell. We explore a number of examples that show how easy STM is to use
+    and how expressive Haskell can be. The goal of this talk is to convince attendees that STM is
+    not only a viable synchronization solution, but superior to how synchronization is typically
+    done today.
+  </p></abstract>
+
+  <thumbnail file="b4taylor-stm-thumb-small.jpg" />
+  <mediafile file="b4taylor-stm.avi" type="Talk (XviD)" />
+  <mediafile file="b4taylor-stm.ogg" type="Talk (Ogg/Theora)" />
+  <mediafile file="b4taylor-stm.mp4" type="Talk (MP4)" />
+  <mediafile file="b4taylor-stm.mpg" type="Talk (MPG)" />
+  <flvfile file="b4taylor-stm.flv" />
+</mediaitem>
 
 <mediaitem title="Programming Quantum Computers">
   <abstract><p>
@@ -18,6 +39,7 @@
     He will give a brief introduction to quantum computing and why it matters, followed 
     by a talk on programming quantum computers. This is followed by tours of IQC Labs.
   </p></abstract>
+  <thumbnail file="iqc1-thumb-small.jpg" />
   <mediafile file="iqc1.avi" type="Talk (XviD)" />
   <mediafile file="iqc1.ogg" type="Talk (Ogg/Theora)" />
   <mediafile file="iqc1.mp4" type="Talk (MP4)" />
@@ -46,6 +68,7 @@
   </p>
   <p>The slides for this talk can be found <a href="http://mirror.csclub.uwaterloo.ca/csclub/pr-functional-lexing-parsing-slides.pdf">here</a> as a pdf.
   </p></abstract>
+  <thumbnail file="pr-functional-lexing-parsing-thumb-small.jpg" />
   <mediafile file="pr-functional-lexing-parsing.avi" type="XviD" />
   <mediafile file="pr-functional-lexing-parsing.ogg" type="Ogg/Theora" />
   <mediafile file="pr-functional-lexing-parsing.mp4" type="MP4" />
@@ -56,7 +79,7 @@
   <p>If you would like to contact Dr. Ragde check out his <a href="http://www.cs.uwaterloo.ca/~plragde">website</a> or e-mail him at plragde at uwaterloo dot ca.</p>
   </other>
 </mediaitem>
-  
+
 
 <mediaitem title="Rapid Prototyping and Mathematical Art">
   <abstract><p>
@@ -72,6 +95,7 @@
    and computational techniques that come into play.</p>
    <p>The slides for this talk can be found <a href="http://mirror.csclub.uwaterloo.ca/csclub/kaplan-mathematical-art-slides.pdf">here</a> as a pdf.</p>
   </abstract>
+  <thumbnail file="kaplan-mathematical-art-thumb-small.jpg" />
   <mediafile file="kaplan-mathematical-art.avi" type="XviD" />
   <mediafile file="kaplan-mathematical-art.ogg" type="Ogg/Theora" />
   <mediafile file="kaplan-mathematical-art.mp4" type="MP4" />
@@ -156,6 +180,7 @@
   <abstract><p>
     TODO
   </p></abstract>
+  <thumbnail file="abarbu2-thumb-small.jpg" />
   <mediafile file="abarbu2.avi" type="XviD" />
   <mediafile file="abarbu2.ogg" type="Ogg/Theora" />
   <mediafile file="abarbu2.mp4" type="MP4" />
@@ -167,6 +192,7 @@
   <abstract><p>
     TODO
   </p></abstract>
+  <thumbnail file="abarbu1-thumb-small.jpg" />
   <mediafile file="abarbu1.avi" type="XviD" />
   <mediafile file="abarbu1.ogg" type="Ogg/Theora" />
   <mediafile file="abarbu1.mp4" type="MP4" />
@@ -193,6 +219,7 @@ outline the properties of Useful Security and Privacy Technologies that
 motivated OTR's design, compare it to other IM security mechanisms, and
 talk about its ongoing development directions.
   </p></abstract>
+  <thumbnail file="ian-goldberg-otr-thumb-small.jpg" />
   <mediafile file="ian-goldberg-otr.avi" type="XviD" />
   <mediafile file="ian-goldberg-otr.ogg" type="Ogg/Theora" />
   <mediafile file="ian-goldberg-otr.mp4" type="MP4" />
@@ -222,6 +249,7 @@ jeopradize informational privacy. Dr. Ann Cavoukian talks about how to use techn
 included instant messaging, RFID tags and Elliptical Curve Cryptography (ECC). Then Dr. Cavoukian explained the “7 Privacy – Embedded Laws” followed 
 by a discussion on a biometrics solution to encryption.
   </p></abstract>
+  <thumbnail file="privacy-thumb-small.jpg" />
   <mediafile file="privacy.avi" type="XviD" />
   <mediafile file="privacy.ogg" type="Ogg/Theora" />
   <mediafile file="privacy.mp4" type="MP4" />
@@ -259,6 +287,7 @@ Safeguarding Your Privacy in a Networked World."
    Dr. Bjarne Stroustrup is the original designer and implementer of the
    C++ Programming Language.
   </p></abstract>
+  <thumbnail file="stroustrup-thumb-small.jpg" />
   <mediafile file="stroustrup.avi" type="XviD" />
   <mediafile file="stroustrup.ogg" type="Ogg/Theora" />
   <mediafile file="stroustrup.mp4" type="MP4" />
@@ -278,6 +307,7 @@ Safeguarding Your Privacy in a Networked World."
 </mediaitem>
 
 <mediaitem title="PMAMC&amp;OC SASMS - Spring 2007">
+  <thumbnail file="pmc-sasms-spring-2007-thumb-small.jpg" />
   <mediafile file="pmc-sasms-spring-2007.avi" type="XviD" size="643M" />
   <mediafile file="pmc-sasms-spring-2007.ogg" type="Ogg/Theora" size="598M" />
   <mediafile file="pmc-sasms-spring-2007.mp4" type="MP4" size="625M" />
@@ -316,6 +346,7 @@ Safeguarding Your Privacy in a Networked World."
     <li> If most of the computing industry and the US Copyright Board don't disagree with your views on copyright, how come no one has gone to change things?  </li>
   </ul>
   </other>
+  <thumbnail file="rms-qa-thumb-small.jpg" />
   <mediafile file="rms-talk.ogg" type="Talk (Ogg/Theora)" size="687M" />
   <mediafile file="rms-qa.ogg" type="Q&amp;A (Ogg/Theora)" size="225M" />
 </mediaitem>
@@ -335,6 +366,7 @@ Safeguarding Your Privacy in a Networked World."
     </p><p>
     The slides from the talk are available here: <a href="http://mirror.csclub.uwaterloo.ca/csclub/ingimp_uw_csc_talk_6_27_2007.pdf">ingimp_uw_csc_talk_6_27_2007.pdf</a>.
   </p></abstract>
+  <thumbnail file="mterry2-thumb-small.jpg" />
   <mediafile file="mterry2.avi" type="XviD" size="521M" />
   <mediafile file="mterry2.ogg" type="Ogg/Theora" size="535M" />
   <mediafile file="mterry2.mp4" type="MP4" size="509M" />
@@ -347,6 +379,7 @@ Safeguarding Your Privacy in a Networked World."
     Ralph Stanton reflects on the founding of the University of 
     Waterloo Math Faculty.
   </p></abstract>
+  <thumbnail file="ralph-stanton-thumb-small.jpg" />
   <mediafile file="ralph-stanton.avi" type="XviD" />
   <mediafile file="ralph-stanton-xvid.avi" type="DivX" />
   <mediafile file="ralph-stanton.ogg" type="Ogg" />
@@ -390,6 +423,7 @@ Safeguarding Your Privacy in a Networked World."
     The talk is only available in Ogg Theora, in keeping with Richard 
     Stallman's wishes.
   </p></abstract>
+  <thumbnail file="audio-file.png" />
   <mediafile file="rms_ucsd.ogg" type="Ogg Theora" size="148MB" />
 </mediaitem>
 
@@ -400,6 +434,7 @@ Safeguarding Your Privacy in a Networked World."
     polygons on screen, as well as simple cropping techniques to improve 
     efficiency. Translation and rotation of polygons will also be discussed.
   </p></abstract>
+  <thumbnail file="the-prof-graphics-thumb-small.jpg" />
   <mediafile file="the-prof-graphics.avi" type="DivX" size="272M" />
   <mediafile file="the-prof-graphics-xvid.avi" type="XviD" size="272M" />
   <mediafile file="the-prof-graphics.mpg" type="MPG" size="272M" />
@@ -413,6 +448,7 @@ Safeguarding Your Privacy in a Networked World."
     most insights and guard the confidences of the individuals involved, none 
     of the companies will be identified.
   </p></abstract>
+  <thumbnail file="larry-smith-talk2-thumb-small.jpg" />
   <mediafile file="larry-smith-talk2.avi" type="DivX" size="332M" />
   <mediafile file="larry-smith-talk2-xvid.avi" type="XviD" size="332M" />
   <mediafile file="larry-smith-talk2.mpg" type="MPG" size="332M" />
@@ -437,6 +473,7 @@ Safeguarding Your Privacy in a Networked World."
     looking to revolutionize the way software is written to deliver on the 
     promise multi-core holds.
   </p></abstract>
+  <thumbnail file="sdt-thumb-small.jpg" />
   <mediafile file="sdt.avi" type="DivX" size="406M" />
   <mediafile file="sdt-xvid.avi" type="XviD" size="406M" />
   <mediafile file="sdt.mpg" type="MPG" size="405M" />
@@ -481,6 +518,7 @@ Safeguarding Your Privacy in a Networked World."
     providing hands-on workshops and lectures on Windows NT internals and 
     security to various companies.
   </p></abstract>
+  <thumbnail file="alex-ionescu-thumb-small.jpg" />
   <mediafile file="alex-ionescu.avi" type="DivX" size="451M" />
   <mediafile file="alex-ionescu-xvid.avi" type="XviD" size="451M" />
   <mediafile file="alex-ionescu.mpg" type="MPG" size="450M" />
@@ -528,6 +566,7 @@ Safeguarding Your Privacy in a Networked World."
     <a href="http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989-big.jpg" target="_blank">
       <img src="http://mirror.csclub.uwaterloo.ca/csclub/bill-gates-1989.jpg" /></a>
     </p></abstract>
+        <thumbnail file="audio-file.png" />
 	<mediafile file="bill-gates-1989.mp3" type="mp3" size="85M" />
 	<mediafile file="bill-gates-1989.flac" type="flac" size="540M" />
 	<mediafile file="bill-gates-1989.ogg" type="ogg" size="56M" />
@@ -553,6 +592,7 @@ Safeguarding Your Privacy in a Networked World."
       Gord Cormack talks about the science, logistics, and politics of Spam 
       Filter Evaluation.
     </p></abstract>
+  <thumbnail file="cormack-spam-thumb-small.jpg" />
   <mediafile file="cormack-spam-xvid.avi" type="XviD" size="473M" />
   <mediafile file="cormack-spam.avi" type="DiVX" size="473M" />
   <mediafile file="cormack-spam.mpg" type="MPG" size="472M" />
@@ -576,6 +616,7 @@ Safeguarding Your Privacy in a Networked World."
     The Computer Science Club would like to thank the CS-Commons Committee for 
     co-sponsoring this talk.
   </p></abstract>
+  <thumbnail file="simon-talk-thumb-small.jpg" />
   <mediafile file="simon-talk-xvid.avi" type="XviD" size="178M" />
   <mediafile file="simon-talk.avi" type="DivX" size="178M" />
   <mediafile file="simon-talk.mpg" type="MPG" size="177M" />
@@ -593,6 +634,7 @@ Safeguarding Your Privacy in a Networked World."
     ubiquitous computing to advertising. Simon Woodside (founder) will discuss 
     what it's like to start a business and how the imaging code works.
   </p></abstract>
+  <thumbnail file="semacode-thumb-small.jpg" />
   <mediafile file="semacode.avi" type="DivX" size="180M"/>
   <mediafile file="semacode-xvid.avi" type="XviD" size="180M"/>
   <mediafile file="semacode.mpg" type="Mpeg" size="180M"/>
@@ -611,6 +653,7 @@ Safeguarding Your Privacy in a Networked World."
 	Note: the slides are hard to make out in the video, so make sure to 
     download the slides as well.
   </p></abstract>
+  <thumbnail file="ericlaforest-thumb-small.jpg" />
   <mediafile file="eric-laforest2-720-480.avi" type="DiVX" size="357M"/>
   <mediafile file="ericlaforest-xvid.avi" type="XViD" size="309M"/>
   <mediafile file="ericlaforest.mpg" type="Mpeg" size="307M" />
@@ -625,6 +668,7 @@ Safeguarding Your Privacy in a Networked World."
     significance. Particular attention will be paid to the challenge of 
     acquiring cross domain knowledge and setting up effective collaboration.
   </p></abstract>
+  <thumbnail file="larry-killer-applications-thumb-small.jpg" />
   <mediafile file="larry-killer-applications.avi" size="686M" type="DiVX" />
   <mediafile file="larry-killer-applications-xvid.avi" size="686M" type="XviD" />
   <mediafile file="larry-killer-applications.mpg" size="685M" type="MPG" />
@@ -632,6 +676,7 @@ Safeguarding Your Privacy in a Networked World."
 </mediaitem>
 
 <mediaitem title="Larry Smith: Computing's Next Great Empires">
+  <thumbnail file="audio-file.png" />
   <mediafile file="larry-smith-talk.ogg" type="Ogg" />
   <mediafile file="larry-smith-talk.mp3" type="MP3" />
 </mediaitem>
@@ -648,6 +693,7 @@ Safeguarding Your Privacy in a Networked World."
     Particularly illuminating are his responses to advocates of 
     free/open-source software.
   </p></abstract>
+  <thumbnail file="rico-thumb-small.jpg" />
   <mediafile file="rico.avi" type="XviD" size="534M" />
   <mediafile file="rico.ogg" type="Ogg/Theora" size="528M" />
   <mediafile file="rico.mp4" type="MP4" size="507M" />
diff --git a/xsl/media.xsl b/xsl/media.xsl
index 3ca72f3..adfb76a 100644
--- a/xsl/media.xsl
+++ b/xsl/media.xsl
@@ -43,7 +43,8 @@
       </p>
     </xsl:with-param>
   </xsl:call-template>
-  <li><a href= "{@title}"><xsl:value-of select="@title" /></a></li>
+  <xsl:variable name="thumb-url" select="concat('http://mirror.csclub.uwaterloo.ca/csclub/' ,thumbnail/@file)" />
+  <li class="media"><img class="media" src="{$thumb-url}" /><a href= "{@title}"><xsl:value-of select="@title" /></a></li>
 </xsl:template>
 
 <xsl:template name="makemediaitem">