Change View Event to get Presentation next to the video

jm2l/templates/view_event.mako

@@ -1,6 +1,11 @@
 <%inherit file="jm2l:templates/layout.mako"/>
 <%namespace name="helpers" file="jm2l:templates/helpers.mako"/>
-
+<%def name="jsAddOn()">
+    <script src="/vendor/jquery.media/jquery.media.js"></script>
+    <script type="text/javascript">
+        $('a.media').media({width:480, height:360});
+    </script>
+</%def>
 <div class="row-fluid">
   <div class="span10 offset1">
 
@@ -29,19 +34,61 @@ ${event.start_time.strftime('%H:%M')} à ${event.end_time.strftime('%H:%M')}
 % else:
     <p>Cette évenement n'a pas de description.</p>
 % endif
-% for media in event.presentation:
-    <strong>Présentation</strong>:${media.filename} (${media.mime_type})
-% endfor
-<hr/> 
-% for media in event.video:
-    <div style="width:480px;margin:auto;">
-        <video width="480" poster="" controls="controls" preload="metadata">
-            <source type="${media.mime_type}" 
-                src="/resources/${media.for_year}/Video/${media.filename}" />
-        </video> <br />
-        <strong>Vidéo</strong>:${media.filename} (${media.mime_type})
+  </div>
+</div>
+<hr/>
+
+% if event.presentation.count() and event.video.count():
+    <div class="row-fluid">
+      <div id="pres" class="span6">
+    % for media in event.presentation:
+        <div align="right">
+            <a class="media" href="${media.get_path}">Présentation</a>
+        </div>
+        <center>
+            <a href="${media.get_path}"> Télécharger la présentation (${media.mime_type})</a>
+        </center>
+    % endfor
+      </div>
+      <div id="video" class="span6">
+    % for media in event.video:
+        <div align="left">
+            <video width="80%" poster="" controls="controls" preload="metadata">
+                <source type="${media.mime_type}" 
+                    src="${media.get_path}" />
+            </video> <br />
+        </div>
+        <center>
+            <a href="${media.get_path}"> Télécharger la vidéo (${media.mime_type})</a>
+        </center>
+    % endfor
+      </div>
     </div>
-% endfor
+% else:
+    <div class="row-fluid">
+      <div id="pres" class="span10 offset1">
+    % for media in event.presentation:
+        <div align="center">
+            <a href="${media.get_path}"> Télécharger la présentation (${media.mime_type})</a><br>
+            <a class="media" href="${media.get_path}">Présentation</a>
+        </div>
+    % endfor
+      </div>
+      <div id="video" class="span10 offset1">
+    % for media in event.video:
+        <div align="center">
+            <a href="${media.get_path}"> Télécharger la vidéo (${media.mime_type})</a><br>
+            <video width="90%" poster="" controls="controls" preload="metadata">
+                <source type="${media.mime_type}" 
+                    src="${media.get_path}" />
+            </video> <br />
+        </div>
+    % endfor
+      </div>
+    </div>
+% endif
+<div class="row-fluid">
+  <div class="span10 offset1">
 
 % for iterv in event.intervenants:
 <p>