# HG changeset patch
# User veltr
# Date 1367845070 -7200
# Node ID 2937fe1ba8658610bc315d60a1317011ae9a9939
# Parent  9d95cc8b861bf3bb46d6ca577b32cfbaa86f95ac
Added opinion feed

diff -r 9d95cc8b861b -r 2937fe1ba865 integ/iri-buzz.html
--- a/integ/iri-buzz.html	Fri May 03 16:15:55 2013 +0200
+++ b/integ/iri-buzz.html	Mon May 06 14:57:50 2013 +0200
@@ -49,7 +49,7 @@
 		<!-- /connect -->
 	</header>
 
-	<div >
+	<div>
 		<section class="central">
 
 			<div class="wrap-buzz">
@@ -63,16 +63,18 @@
 								</ul>
 							</div>
 						</div>
-                        <a href="#" class="control-button play-pause pause">Pause</a>
-						<a href="#" class="control-button restart">Rejouer</a>
+						<a href="#" class="control-button restart" title="Rejouer">
+                            <i></i>
+                        </a>
+                        <a href="#" class="control-button play-pause pause" title="Pause">
+                            <i></i>
+                        </a>
 					</div>
 				</div>
 
 				<div id="data-viz">Chargement de la liste de films</div>
 				<ul class="posters clearfix"></ul>
 				
-				
-
 			</div>
 
 		</section>
@@ -94,38 +96,34 @@
 	</footer>
 	
     <div id="comment">
-        <div class="comment-content clearfix rate">
-            <div class="avatar"><img src="" alt="Avatar" /></div>
-            <div class="comment-right">
-                <div class="comment-metadata">
-                    <span class="username">{{auteur}}</span>
-                    <span class="date">{{Date}}</span>
-                    <ul class="stars-rating rate-5.0">
-                        <li></li><li></li><li></li><li></li><li></li>
-                    </ul>
-                </div>
-                <p class="review-content">veut voir ce film.</p>
-            </div>
-        </div>
-        <div class="comment-arrow"></div>
+
+    </div>
+    
+    <div id="comment-modal">
+        <h3>
+            <span class="comment-count">n</span>
+            opinions sur
+            &laquo;&nbsp;<span class="comment-subject">Titre du Film</span>&nbsp;&raquo;
+            de
+            <span class="comment-start">00:00</span>
+            à
+            <span class="comment-end">00:00</span>
+        </h3>
+        <div class="comment-list"></div>
     </div>
 
 <script src="js/libs/jquery-1.7.1.min.js"></script>
+
+<script src="renkan/lib/underscore-min.js"></script>
+<script src="js/vs/_VisualSedimentation.js"></script>
+
 <script src="js/libs/jquery-ui-1.8.21.custom.min.js"></script>
 
 <script type='text/javascript' src='js/jquery.simplemodal.js'></script>
-<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>
-<!-- mousewheel plugin -->
 <script src="js/jquery.mousewheel.min.js"></script>
 <!-- custom scrollbars plugin -->
 <script src="js/jquery.mCustomScrollbar.js"></script>
 
-
-<script type="text/javascript" src="js/script.js"></script>
-
-<script src="renkan/lib/underscore-min.js"></script>
-<script src="js/vs/_VisualSedimentation.js"></script>
-
 <script src="iri/js/iri-buzz.js"></script>
 
 </body>
diff -r 9d95cc8b861b -r 2937fe1ba865 integ/iri/css/iri-buzz.css
--- a/integ/iri/css/iri-buzz.css	Fri May 03 16:15:55 2013 +0200
+++ b/integ/iri/css/iri-buzz.css	Mon May 06 14:57:50 2013 +0200
@@ -40,6 +40,7 @@
     text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
     color: #919191;
     font-size: 12px;
+    font-weight: bold;
 }
 .hours li:before {
     content: "";
@@ -53,13 +54,10 @@
 
 .control-button {
     float: left;
-    margin-left: 10px;
-    width: 92px;
-    height: 32px;
+    margin-left: 12px;
+    height: 17px;
+    padding: 8px 9px;
     display: inline-block;
-    text-align: center;
-    text-transform: uppercase;
-    line-height: 32px;
     font-size: 11px;
     font-weight: bold;
     text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
@@ -71,47 +69,10 @@
     border-radius: 4px;
     
 }
-.play {
-    background: #15c42f;
-    background: -moz-linear-gradient(top,  #15c42f 0%, #0daa27 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#15c42f), color-stop(100%,#0daa27));
-    background: -webkit-linear-gradient(top,  #15c42f 0%,#0daa27 100%);
-    background: -o-linear-gradient(top,  #15c42f 0%,#0daa27 100%);
-    background: -ms-linear-gradient(top,  #15c42f 0%,#0daa27 100%);
-    background: linear-gradient(to bottom,  #15c42f 0%,#0daa27 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#15c42f', endColorstr='#0daa27',GradientType=0 );
-}
-.play:hover {
-    background: #0daa27;
-    background: -moz-linear-gradient(top,  #0daa27 0%, #15c42f 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0daa27), color-stop(100%,#15c42f));
-    background: -webkit-linear-gradient(top,  #0daa27 0%,#15c42f 100%);
-    background: -o-linear-gradient(top,  #0daa27 0%,#15c42f 100%);
-    background: -ms-linear-gradient(top,  #0daa27 0%,#15c42f 100%);
-    background: linear-gradient(to bottom,  #0daa27 0%,#15c42f 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0daa27', endColorstr='#15c42f',GradientType=0 );
+.control-button i {
+    display: inline-block; width: 16px; height: 17px; background: url(../img/buzz-play-sprite.png);
 }
-.pause {
-    background: #e21829;
-    background: -moz-linear-gradient(top,  #e21829 0%, #c60f1f 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e21829), color-stop(100%,#c60f1f));
-    background: -webkit-linear-gradient(top,  #e21829 0%,#c60f1f 100%);
-    background: -o-linear-gradient(top,  #e21829 0%,#c60f1f 100%);
-    background: -ms-linear-gradient(top,  #e21829 0%,#c60f1f 100%);
-    background: linear-gradient(to bottom,  #e21829 0%,#c60f1f 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e21829', endColorstr='#c60f1f',GradientType=0 );
-}
-.pause:hover {
-    background: #c60f1f;
-    background: -moz-linear-gradient(top,  #c60f1f 0%, #e21829 100%);
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c60f1f), color-stop(100%,#e21829));
-    background: -webkit-linear-gradient(top,  #c60f1f 0%,#e21829 100%);
-    background: -o-linear-gradient(top,  #c60f1f 0%,#e21829 100%);
-    background: -ms-linear-gradient(top,  #c60f1f 0%,#e21829 100%);
-    background: linear-gradient(to bottom,  #c60f1f 0%,#e21829 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c60f1f', endColorstr='#e21829',GradientType=0 );
-}
-.restart { 
+.play-pause { 
     background: #1899e1;
     background: -moz-linear-gradient(top,  #1899e1 0%, #126ae3 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1899e1), color-stop(100%,#126ae3));
@@ -121,7 +82,7 @@
     background: linear-gradient(to bottom,  #1899e1 0%,#126ae3 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1899e1', endColorstr='#126ae3',GradientType=0 );
 }
-.restart:hover {
+.play-pause:hover {
     background: #126ae3;
     background: -moz-linear-gradient(top,  #126ae3 0%, #1899e1 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#126ae3), color-stop(100%,#1899e1));
@@ -131,6 +92,33 @@
     background: linear-gradient(to bottom,  #126ae3 0%,#1899e1 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#126ae3', endColorstr='#1899e1',GradientType=0 );
 }
+.restart{
+    background: #7a7a7a;
+    background: -moz-linear-gradient(top,  #7a7a7a 0%, #555555 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a7a7a), color-stop(100%,#555555));
+    background: -webkit-linear-gradient(top,  #7a7a7a 0%,#555555 100%);
+    background: -o-linear-gradient(top,  #7a7a7a 0%,#555555 100%);
+    background: -ms-linear-gradient(top,  #7a7a7a 0%,#555555 100%);
+    background: linear-gradient(to bottom,  #7a7a7a 0%,#555555 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#555555',GradientType=0 );
+}
+.restart:hover{
+    background: #555555;
+    background: -moz-linear-gradient(top,  #555555 0%, #7a7a7a 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#7a7a7a));
+    background: -webkit-linear-gradient(top,  #555555 0%,#7a7a7a 100%);
+    background: -o-linear-gradient(top,  #555555 0%,#7a7a7a 100%);
+    background: -ms-linear-gradient(top,  #555555 0%,#7a7a7a 100%);
+    background: linear-gradient(to bottom,  #555555 0%,#7a7a7a 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#7a7a7a',GradientType=0 ); /* IE6-9 */
+}
+
+.pause i {
+    background-position: -16px 0;
+}
+.play i {
+    background-position: -32px 0;
+}
 
 .poster {
     float: left;
@@ -186,22 +174,22 @@
     position: absolute;
     display: none;
 }
-.comment-content {
+#comment .comment-content {
     -webkit-border-radius: 6px;
     border-radius: 6px;
     border: 2px solid #323232;
     width: 470px;
     background-color: rgba(0,0,0,.9);
-    padding-top: 12px;
+    padding: 12px 0;
     position: absolute;
     left: -235px;
     top: 8px;
     z-index: 1;
 }
-.left .comment-content {
+#comment.left .comment-content {
     left: -30px;
 }
-.right .comment-content {
+#comment.right .comment-content {
     left: -439px;
 }
 .comment-content .date {
@@ -214,40 +202,39 @@
     font-weight: bold;
 }
 .comment-content .avatar {
-    margin-left: 10px;
+    width: 52px;
+    margin: 4px 9px;
     float: left;
-    border: 1px solid #a4a3a8;
     overflow: hidden;
 }
 .comment-content .avatar img {
     max-width: 50px;
     max-height: 50px;
+    border: 1px solid #a4a3a8;
     margin: 0 auto; display: block;
 }
 .comment-right {
-    padding-bottom: 12px;
-    width: 380px;
-    padding-right: 15px;
+    margin-left: 70px;
+    margin-right: 15px;
+}
+.action-userreview .stars-rating {
     float: right;
 }
-.userreview .stars-rating {
-    float: right;
-}
-.userreview .stars-rating li {
+.action-userreview .stars-rating li {
     margin-right: 2px;
     background: url(../img/review-rating-star-sprite.png) top left no-repeat;
     width: 19px;
     height: 16px;
     display: inline-block;
 }
-.rate .stars-rating li {
+.action-rate .stars-rating li {
     margin-right: 3px;
     background: url(../img/rating-stars-large.png) top left no-repeat;
     width: 21px;
     height: 21px;
     display: inline-block;
 }
-.wanttosee .stars-rating {
+.action-wanttosee .stars-rating {
     display: none;
 }
 .stars-rating li:last-child {
@@ -275,18 +262,17 @@
 }
 
 .review-content {
-    clear: both;
     color: #ededed;
     font-size: 13px;
     margin: 8px 0 4px;
 }
 
-.wanttosee .review-content {
+.action-wanttosee .review-content {
     line-height: 19px; height: 19px; padding-left: 30px;
     background: url(../img/wanttosee.png) left no-repeat;
 }
 
-.comment-arrow {
+#comment .comment-arrow {
     top: 0;
     left: -5px;
     display: block;
@@ -297,3 +283,11 @@
     z-index: 2;
 }
 
+.comment-list .comment-arrow {
+    margin: 2px 10px 4px; height: 1px; background-color: #171717; border-bottom: 1px solid #313131;
+}
+
+.comment-list {
+    position: absolute; top: 45px; left: 0; right: 0; bottom: 0;
+    overflow: auto;
+}
diff -r 9d95cc8b861b -r 2937fe1ba865 integ/iri/img/buzz-play-sprite.png
Binary file integ/iri/img/buzz-play-sprite.png has changed
diff -r 9d95cc8b861b -r 2937fe1ba865 integ/iri/img/buzz-sprite.png
Binary file integ/iri/img/buzz-sprite.png has changed
diff -r 9d95cc8b861b -r 2937fe1ba865 integ/iri/js/iri-buzz.js
--- a/integ/iri/js/iri-buzz.js	Fri May 03 16:15:55 2013 +0200
+++ b/integ/iri/js/iri-buzz.js	Mon May 06 14:57:50 2013 +0200
@@ -61,7 +61,7 @@
     $("body").append(xml);
         
     function resizeTimer() {
-        var w = Math.max(80, $(window).width() - 272),
+        var w = Math.max(80, $(window).width() - 158),
             n = Math.min(12, Math.floor(w / 80));
     	$('.timer-bar').width(w);
     	var html = '';
@@ -81,10 +81,13 @@
     var vsHeight = $(window).height() - $('footer').height() - $('header').height() - 300,
         vsWidth = config.movieCount * (config.columnWidth + config.columnSpacing);
         
-    $("#data-viz").css('height', vsHeight);
+    $("#data-viz").css({
+        height: vsHeight,
+        width: vsWidth
+    });
     $('.posters').css('width', vsWidth);
     
-    var timeAtPause = 0, paused = true;
+    var timeAtPause = 0, paused = true, timeStart;
     
     function currentVizTime() {
         if (paused) {
@@ -106,9 +109,9 @@
         if (!paused) {
             return;
         }
-        timeStart = new Date().valueOf() - timeAtPause;
+        timeStart = Date.now() - timeAtPause;
         paused = false;
-        $(".play-pause").removeClass("play").addClass("pause").text("Pause");
+        $(".play-pause").removeClass("play").addClass("pause").attr("title", "Pause");
     }
     
     function pause() {
@@ -117,7 +120,7 @@
         }
         timeAtPause = currentVizTime();
         paused = true;
-        $(".play-pause").removeClass("pause").addClass("play").text("Lecture");
+        $(".play-pause").removeClass("pause").addClass("play").attr("title", "Lecture");
     }
     
     $(".play-pause").click(function() {
@@ -128,8 +131,46 @@
         }
     });
     
+    function agoify(timestamp) {
+        var h = "Il y a ",
+            deltaT = Date.now() - timestamp,
+            deltaH = Math.round(deltaT / HOURS);
+        if (deltaH) {
+            h += deltaH + " heure";
+            if (deltaH > 1) {
+                h += "s";
+            }
+        } else {
+            var deltaM = Math.round(deltaT / MINUTES);
+            h += deltaM + " minute";
+            if (deltaM > 1) {
+                h += "s";
+            }
+        }
+        return h;
+    }
+    
+    var opinionTemplate = _.template(
+        '<div class="comment-content clearfix action-<%- actiontype %>">'
+            + '<div class="avatar"><img src="<%- avatar %>" alt="Avatar" /></div>'
+            + '<div class="comment-right">'
+                + '<div class="comment-metadata">'
+                    + '<span class="username"><%- username %> </span>'
+                    + ' <span class="date"> <%- ago %></span>'
+                    + '<ul class="stars-rating rate-<%- ratevalue %>">'
+                        + '<li></li><li></li><li></li><li></li><li></li>'
+                    + '</ul>'
+                + '</div>'
+                + '<p class="review-content"><%- content %></p>'
+            + '</div>'
+        + '</div>'
+        + '<div class="comment-arrow"></div>'
+    );
+    
     function startViz() {
         
+        var barChart = undefined;
+        
         timeAtPause = 0;
         
         opinions.sort(function(a,b) {
@@ -219,28 +260,14 @@
         function onTokenMouseover(token) {
             if (token !== lastShownToken) {
                 $("body").css("cursor", "pointer");
-                var h = "Il y a ",
-                    deltaT = Date.now() - token.attr("timestamp"),
-                    deltaH = Math.round(deltaT / HOURS);
-                if (deltaH) {
-                    h += deltaH + " heure";
-                    if (deltaH > 1) {
-                        h += "s";
-                    }
-                } else {
-                    var deltaM = Math.round(deltaT / MINUTES);
-                    h += deltaM + " minute";
-                    if (deltaM > 1) {
-                        h += "s";
-                    }
-                }
-                commentDiv.find(".comment-content").removeClass("userreview wanttosee rate").addClass(token.attr("actiontype"));
-                commentDiv.find(".stars-rating").attr("className","stars-rating rate-"+token.attr("actionvalue"));
-                commentDiv.find(".review-content").text(token.attr("content"));
-                commentDiv.find(".date").text(h);
-                commentDiv.find(".avatar img").attr("src", token.attr("avatar"));
-                commentDiv.find(".username").text(token.attr("username"));
-                commentDiv.show();
+                commentDiv.html(opinionTemplate({
+                    actiontype: token.attr("actiontype"),
+                    avatar: token.attr("avatar"),
+                    username: token.attr("username"),
+                    ago: agoify(token.attr("timestamp")),
+                    ratevalue: token.attr("actionvalue"),
+                    content: token.attr("content")
+                })).show();
                 lastShownToken = token;
             }
         }
@@ -260,7 +287,7 @@
         var barChart = $("#data-viz").vs(barChartSettings).data('visualSedimentation');
         
         barChart.world.SetGravity(new barChart.phy.b2Vec2(0,10 * config.fallSpeed));
-                
+        
         $(".timer-bar-value").width(0);
         
         play();
@@ -277,31 +304,27 @@
             
             var vizT = currentVizTime();
             
-            var originalT = vizTimeToOriginalTime(vizT),
-                tokensToAdd = opinions.filter(function(o) {
-                    return o._timestamp > lastTimestamp && o._timestamp <= originalT
+            var tokensToAdd = opinions.filter(function(o) {
+                    return o._viztime > lastTimestamp && o._viztime <= vizT
                 });
             
-            lastTimestamp = originalT;
+            lastTimestamp = vizT;
             
             tokensToAdd.forEach(function(opinion) {
                 barChart.addToken({
                     category: opinion._column,
                     datetime: opinion.datetime,
                     timestamp: opinion._timestamp,
-                    viztime: originalTimeToVizTime(opinion._timestamp),
+                    viztime: opinion._viztime,
                     movie: opinion._movie,
                     colorId: opinion._colorId,
                     fillStyle: config.colors[opinion._colorId],
-                    avatar: (typeof opinion.actor.user.avatar === "undefined" ? "http://fr.web.img6.acsta.net/r_50_x/commons/emptymedia/AvatarAllocineMr.gif" : resizeAcPicture( opinion.actor.user.avatar, 50, "x" )),
+                    avatar: opinion._avatar,
                     username: opinion.actor.user.userName,
                     actiontype: opinion.action.type,
                     actionvalue: opinion.action.value,
-                    content: ( opinion.action.type === "userreview" ? opinion.content.$ : (opinion.action.type === "wanttosee" ? "veut voir ce film." : "" ) ).replace(/[\n\r\s]+/mg,' ').replace(/(^.{320,340})[\s].+$/,'$1…'),
-                    size: 30,
-                    texture: {
-                        src: "iri/img/logo-iri.png"
-                    },
+                    content: opinion._content.replace(/(^.{320,340})[\s].+$/,'$1…'),
+                    //size: 30,
                     strokeStyle: config.borderColors[opinion._colorId],
                     shape:{
                       type:'box',
@@ -358,8 +381,11 @@
                 tokens.forEach(function(a) {
                     a._colorId = config.colorIds[a.action.value];
                     a._timestamp = Date.parse(a.datetime + tzSuffix) - tzDelta;
+                    a._viztime = originalTimeToVizTime(a._timestamp);
                     a._movie = movie.id;
                     a._column = movie.column;
+                    a._avatar = ((typeof a.actor.user.avatar === "undefined" || /https?:\/\/graph\.facebook\.com/.test(a.actor.user.avatar.href)) ? "http://fr.web.img6.acsta.net/r_50_x/commons/emptymedia/AvatarAllocineMr.gif" : resizeAcPicture( a.actor.user.avatar, 50, "x" ));
+                    a._content = ( a.action.type === "userreview" ? a.content.$ : (a.action.type === "wanttosee" ? "veut voir ce film." : "" ) ).replace(/[\n\r\s]+/mg,' ');
                 });
                 var tokcount = tokens.length;
                 tokens = tokens.filter(function(a) {
@@ -439,10 +465,12 @@
             });
             moviesToLoad = movies.length;
             movies.forEach(loadMovie);
-            $('.posters').html(movies.map(function(movie) {
+            $('.posters').html(movies.map(function(movie, i) {
                 return '<li class="poster" style=" margin: 0 '
                     + Math.floor(config.columnSpacing / 2)
-                    + 'px"><img width="150" height="200" src="'
+                    + 'px" data-movie-index="'
+                    + i
+                    + '"><img width="150" height="200" src="'
                     + resizeAcPicture(movie.poster,150,200)
                     + '" alt="'
                     + movie.title
@@ -452,6 +480,41 @@
             }).join(""));
             
             $(".poster")
+                .click(function() {
+                    $("#comment-modal").modal({
+                        containerCss: {
+                            height: $(window).height()-200,
+                            width: Math.min($(window).width()-200, 640)
+                        },
+                        overlayClose: true
+                    });
+                    var vizT = currentVizTime(),
+                        movie = movies[$(this).attr("data-movie-index")],
+                        opsToShow = movie.opinions.filter(function(o) {
+                            return o._viztime <= vizT;
+                        });
+                    $(".comment-count").text(opsToShow.length);
+                    $(".comment-subject").text(movie.title);
+                    $(".comment-start").text(new Date(originalStart).toTimeString().substr(0,5));
+                    $(".comment-end").text(new Date(vizTimeToOriginalTime(vizT)).toTimeString().substr(0,5));
+                    $(".comment-list").html(opsToShow.map(function(o) {
+                        return opinionTemplate({
+                            actiontype: o.action.type,
+                            avatar: o._avatar,
+                            username: o.actor.user.userName,
+                            ago: agoify(o._timestamp),
+                            ratevalue: o.action.value,
+                            content: o._content
+                        });
+                    }).join(""))
+                        .mCustomScrollbar({
+                            autoDraggerLength:false,
+                            scrollButtons:{
+                                enable:false
+                            }
+                        });
+                    return false;
+                })
                 .each(function(i) {
                     movies[i].poster$ = $(this);
                 });