--- a/templates/sat_website/gallery.html	Tue May 05 09:47:55 2015 +0200
+++ b/templates/sat_website/gallery.html	Tue May 05 11:03:18 2015 +0200
@@ -22,11 +22,11 @@
 {% load staticfiles %}
 {% load utils %}
 
-<div id="carousel-screenshots" class="carousel slide" data-ride="carousel" data-interval="0">
+<div id="carousel-{{ name }}" class="carousel slide my-carousel" data-ride="carousel" data-interval="0">
     {% if screenshots|length > 9 %}
         <ol class="carousel-indicators">
             {% for row in screenshots|buffer:9 %}
-                <li data-target="#carousel-screenshots" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
+                <li data-target="#carousel-{{ name }}" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
             {% endfor %}
         </ol>
     {% endif %}
@@ -47,11 +47,11 @@
             </div>
         {% endfor %}
         {% if screenshots|length > 9 %}
-	        <a class="left carousel-control" href="#carousel-screenshots" role="button" data-slide="prev">
+	        <a class="left carousel-control" href="#carousel-{{ name }}" role="button" data-slide="prev">
 	          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 	          <span class="sr-only">Previous</span>
 	        </a>
-	        <a class="right carousel-control" href="#carousel-screenshots" role="button" data-slide="next">
+	        <a class="right carousel-control" href="#carousel-{{ name }}" role="button" data-slide="next">
 	          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 	          <span class="sr-only">Next</span>
 	        </a>
@@ -59,18 +59,18 @@
     </div>
 </div>
 
-<div class="modal" id="modal-screenshots" role="dialog">
+<div class="modal my-modal" id="modal-{{ name }}" role="dialog">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
                 <button class="close" type="button" data-dismiss="modal">×</button>
             </div>
             <div class="modal-body">
-                <div id="carousel-screenshots-modal" class="carousel slide" data-ride="carousel" data-interval="0">
+                <div id="carousel-{{ name }}-modal" class="carousel slide my-carousel-modal" data-ride="carousel" data-interval="0">
                     {% if screenshots|length > 1 %}
                         <ol class="carousel-indicators">
                             {% for screenshot in screenshots %}
-                                <li data-target="#carousel-screenshots-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
+                                <li data-target="#carousel-{{ name }}-modal" data-slide-to="{{ forloop.counter0 }}"{% if not forloop.counter0 %} class="active"{% endif %}></li>
                             {% endfor %}
                         </ol>
                     {% endif %}
@@ -92,11 +92,11 @@
                         {% endfor %}
                     </div>
                     {% if screenshots|length > 1 %}
-	                    <a class="left carousel-control" href="#carousel-screenshots-modal" data-slide="prev">
+	                    <a class="left carousel-control" href="#carousel-{{ name }}-modal" data-slide="prev">
 	                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 	                        <span class="sr-only">Previous</span>
 	                    </a>
-	                    <a class="right carousel-control" href="#carousel-screenshots-modal" data-slide="next">
+	                    <a class="right carousel-control" href="#carousel-{{ name }}-modal" data-slide="next">
 	                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 	                        <span class="sr-only">Next</span>
 	                    </a>
@@ -106,3 +106,24 @@
         </div>
     </div>
 </div>
+
+<script>
+$(document).ready(function() {
+    // open the big gallery when a thumbnail is clicked
+    $('#carousel-{{ name }} .thumbnail').click(function() {
+        $('#modal-{{ name }}').modal('show');
+        index = parseInt($(this).attr('index'));
+        $('#carousel-{{ name }}-modal').carousel(index);
+        // start playing the big video
+        if ($(this)[0].tagName == 'VIDEO') {
+           $('#carousel-{{ name }}-modal img, #carousel-{{ name }}-modal video')[index].play();
+        }
+    });
+    
+    // thumbail's video starts playing when clicked, pause it
+    $('#carousel-{{ name }} video.thumbnail').each(function(index) {
+        $(this).on('play', function(e) { $(this)[0].pause(); });
+    });
+
+});
+</script>
\ No newline at end of file