# HG changeset patch
# User veltr
# Date 1329391458 -3600
# Node ID ab76826cf7bc3ad3fc63e1beda42c3b1ed91e1e4
# Parent  17a9402e2dc31dcaef65dd4e66110f8bb3343e9c
Layout modifications

diff -r 17a9402e2dc3 -r ab76826cf7bc client/controlpanel.html
--- a/client/controlpanel.html	Wed Feb 15 18:59:57 2012 +0100
+++ b/client/controlpanel.html	Thu Feb 16 12:24:18 2012 +0100
@@ -23,7 +23,7 @@
                     <input id="btv-cp-champ-filtre" />
                     <a href="#" id="btv-cp-clear-filtre">x</a>
                 </div>
-                <div class="btv-cp-element">
+                <div class="btv-cp-element btv-cp-cont-liste">
                     <h3>Derniers tweets</h3>
                     <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-tout">
                         <li>
@@ -76,7 +76,7 @@
                         </li>
                     </ul>
                 </div>
-                <div class="btv-cp-element">
+                <div class="btv-cp-element btv-cp-cont-liste">
                     <h3>Tweets sélectionnés</h3>
                     <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-tout">
                         <li>
diff -r 17a9402e2dc3 -r ab76826cf7bc client/css/base-metric.css
--- a/client/css/base-metric.css	Wed Feb 15 18:59:57 2012 +0100
+++ b/client/css/base-metric.css	Thu Feb 16 12:24:18 2012 +0100
@@ -25,4 +25,4 @@
 }
 body {
     font-family: Metric; background: #000000;
-}
\ No newline at end of file
+}
diff -r 17a9402e2dc3 -r ab76826cf7bc client/css/controlpanel.css
--- a/client/css/controlpanel.css	Wed Feb 15 18:59:57 2012 +0100
+++ b/client/css/controlpanel.css	Thu Feb 16 12:24:18 2012 +0100
@@ -1,47 +1,46 @@
 
 #btv-cp-container {
-    position: absolute; top: -65px; width: 100%;
-    background-image: linear-gradient(bottom, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
-    background-image: -o-linear-gradient(bottom, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
-    background-image: -moz-linear-gradient(bottom, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
-    background-image: -webkit-linear-gradient(bottom, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
-    background-image: -ms-linear-gradient(bottom, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
-    height: 70px;
-    border-bottom: 2px solid #666666;
+    position: absolute; left: -315px; width: 320px;
+    background-image: linear-gradient(right, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
+    background-image: -o-linear-gradient(right, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
+    background-image: -moz-linear-gradient(right, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
+    background-image: -webkit-linear-gradient(right, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
+    background-image: -ms-linear-gradient(right, rgb(224,224,224) 20%, rgb(250,250,250) 80%);
+    top: 0; height: 100%;
+    border-right: 4px solid #666666;
 }
 #btv-cp-container:hover {
-    top: 0;
+    left: 0;
 }
 .btv-cp-line {
-    position: relative; width: 1160px; height: 100%; margin: 0 auto;
+    position: relative; width: 100%; height: 100%; margin: 0 auto;
 }
 .btv-cp-element {
-    float: left;
-    height: 66px;
-    padding: 2px 4px; border-right: 1px solid #cccccc;
+    float: left; text-align: center;
+    width: 312px;
+    padding: 4px; border-bottom: 1px solid #cccccc;
 }
 .btv-cp-element h2 {
-    font-size: 24px; margin: 18px 0 0;
+    font-size: 28px; margin: 10px 0;
 }
 .btv-cp-element h3 {
-    font-size: 14px; margin: 3px 0; text-align: center; line-height: 12px;
+    font-size: 18px; margin: 4px 0; line-height: 12px;
 }
 .btv-cp-element h4 {
-    font-size: 24px; font-weight: bold; text-align: center;
+    font-size: 28px; font-weight: bold;
 }
 
 #btv-cp-champ-filtre {
-    width: 100px;
+    width: 180px;
 }
 
 .btv-cp-liste-tweets {
-    width: 280px; max-height: 45px; background: #fefefe; overflow: auto;
-}
-.btv-cp-liste-tweets:hover {
-    max-height: 150px;
+    width: 310px; height: 160px; border: 1px solid #b0b0b0;
+    background: #fefefe; overflow: auto; margin: 4px 0;
 }
 .btv-cp-liste-tweets li {
-    padding: 1px; border-bottom: 1px solid #ddd; font-size: 12px; font-family: Arial, Helvetica, sans-serif;
+    padding: 1px; border-bottom: 1px solid #ddd; font-size: 12px;
+    font-family: Arial, Helvetica, sans-serif; text-align: left;
 }
 .btv-cp-tweet-button {
     display: inline-block; margin: -1px 0; width: 15px; height: 14px; background: url("../img/addshow.png");
@@ -59,21 +58,21 @@
     background: #00f; color: #fff;
 }
 
+.btv-cp-highlight {
+    background: #ffff00;
+}
+
 .btv-cp-cont-pause {
-    width: 60px;
+    width: 152px;
 }
 .btv-cp-play-pause {
-    display: block; margin: 0 12px; width: 32px; height: 35px; background: url("../img/playpause.png");
+    display: block; margin: 5px 60px; width: 32px; height: 35px; background: url("../img/playpause.png");
 }
 .btv-cp-status-play {
     background-position: -32px 0;
 }
 
 .btv-cp-compteur {
-    width: 75px; position: relative;
-}
-
-.btv-cp-compteur h4 {
-    width: 100%; position: absolute; left: 0; top: 40px;
+    width: 152px;
 }
  
\ No newline at end of file
diff -r 17a9402e2dc3 -r ab76826cf7bc client/podium-cp-tweets.html
--- a/client/podium-cp-tweets.html	Wed Feb 15 18:59:57 2012 +0100
+++ b/client/podium-cp-tweets.html	Thu Feb 16 12:24:18 2012 +0100
@@ -9,72 +9,98 @@
         <link rel="stylesheet" href="css/controlpanel.css" />
         <style type="text/css">
             #podium-container {
-                width: 800px;
-                margin: 200px auto 0;
+                position: absolute;
+                width: 1480px;
+                top: 600px;
+                left: 400px;
             }
             #podium {
                 width: 100%;
                 height: 300px;
-                cursor: pointer;
             }
             #podium-labels {
-                float: left;
+                position: absolute;
                 width: 100%;
-                clear: both;
-                margin-top: 20px;
+                top: 320px;
             }
             #podium-labels li {
                 float: left;
-                width: 200px;
+                width: 25%;
                 color: #ffffff;
                 text-align: center;
-                font-size: 28px;
+                font-size: 42px;
+            }
+            #podium-chiffres {
+                position: absolute;
+                width: 100%;
+                top: 240px;
+            }
+            #podium-chiffres li {
+                float: left;
+                width: 25%;
+                color: #000000;
+                text-align: center;
+                font-size: 50px;
                 font-weight: bold;
             }
+            
+            
+            #btv-tweet {
+                position: absolute;
+                left: 775px;
+                top: 250px;
+                width: 650px;
+                background: #0031ff;
+                padding: 40px;
+                color: #ffffff;
+                font-size: 42px;
+                display: none;
+            }
+            .btv-tweet-image {
+                width: 100px;
+                height: 100px;
+                margin: 0 30px 30px 0;
+                float: left;
+            }
+            .btv-tweet-screen-name {
+                font-weight: bold;
+            }
+            .btv-tweet-name {
+                margin: 10px 0;
+            }
+            .btv-tweet-text {
+                clear: both;
+            }
         </style>
         <script type="text/javascript" src="lib/jquery.min.js"></script>
         <script type="text/javascript" src="js/podium.js"></script>
         <script type="text/javascript" src="js/tweetsource.js"></script>
         <script type="text/javascript">
-            var tzero = new Date();
-            $(function() {
-                setInterval(function() {
-                    var _t = Math.floor((new Date() - tzero)/1000),
-                        _s = _t % 60,
-                        _m = Math.floor(_t/60) % 60,
-                        _h = Math.floor(_t/3600);
-                    $("#btv-cp-temps").html(
-                        _h  + ':' + (_m < 10 ? '0' : '') + _m + ':' + (_s < 10 ? '0' : '') + _s
-                    )
-                }, 500);
-                var _keywords = ['Sarkozy', 'Hollande', 'candidat', 'politique']
-                myTweetSource = new Btv_TweetSource({
-                    keywords: _keywords
-                });
-                myPodium = new Btv_Podium([0,0,0,0]);
-                myTweetSource.setTweetsCallback(function() {
-                    var _filtered = this.afterDate(tzero);
-                    $("#btv-cp-nb-tweets").html(_filtered.count());
-                    var _counts = [];
-                    for (var _i = 0; _i < _keywords.length; _i++) {
-                        _counts.push(_filtered.search(_keywords[_i]).count());
-                    }
-                    myPodium.update(_counts);
-                    $('#btv-cp-liste-tweets-tout').html(
-                        _filtered.reverse().slice(0,20).map(function(_t) {
-                            return '<li onclick="addTweet(\''
-                                + _t.id_str
-                                + '\'); return false;"><a title="Ajouter à la sélection" href="#"><span class="btv-cp-tweet-date">'
-                                + _t.created_at.match(/\d+:\d+:\d+/)[0]
-                                + '</span> <span class="btv-cp-tweet-from">@'
-                                + _t.from_user
-                                + '</span> <span class="btv-cp-tweet-text">'
-                                + _t.text
-                                + '</span><div class="btv-cp-tweet-button btv-cp-tweet-add"></div></a></li>'
-                        }).join('')
-                    )
-                });
-            });
+            var tzero = new Date() - 120000;
+            
+            function updateLastTweets() {
+                var _filtered = myTweetSource.afterDate(tzero),
+                    _txtFilter = $("#btv-cp-champ-filtre").val(),
+                    _reFilter = null;
+                if (_txtFilter.length > 1) {
+                    _filtered = _filtered.search(_txtFilter);
+                    _reFilter = new RegExp('(' + _txtFilter.replace(/\W/gim,'\\$1') + ')','gim');
+                }
+                $('#btv-cp-liste-tweets-tout').html(
+                    _filtered.reverse().slice(0,20).map(function(_t) {
+                        return '<li onclick="addTweet(\''
+                            + _t.id_str
+                            + '\'); return false;"><a title="Ajouter à la sélection" href="#"><span class="btv-cp-tweet-date">'
+                            + _t.created_at.match(/\d+:\d+:\d+/)[0]
+                            + '</span> <span class="btv-cp-tweet-from">'
+                            + ( _reFilter ? ('@' + _t.from_user).replace(_reFilter, '<span class="btv-cp-highlight">$1</span>') : ('@' + _t.from_user) )
+                            + '</span> <span class="btv-cp-tweet-text">'
+                            + ( _reFilter ? _t.text.replace(_reFilter, '<span class="btv-cp-highlight">$1</span>') : _t.text )
+                            + '</span><div class="btv-cp-tweet-button btv-cp-tweet-add"></div></a></li>'
+                    }).join('')
+                );
+            }
+            
             function addTweet(tweetId) {
                 var _t = myTweetSource.tweetById(tweetId);
                 if (_t) {
@@ -91,55 +117,124 @@
                     );
                 }
             }
+            
+            function showTweet(tweetId) {
+                var _t = myTweetSource.tweetById(tweetId);
+                if (_t) {
+                    $("#btv-tweet").html('<img class="btv-tweet-image" src="'
+                    + _t.profile_image_url
+                    + '" /><p class="btv-tweet-screen-name">'
+                    + _t.from_user
+                    + '</p><p class="btv-tweet-name">'
+                    + _t.from_user_name
+                    +'</p><p class="btv-tweet-text">'
+                    + _t.text
+                    +'</p>').show();
+                    $(".btv-cp-hide-tweets").show();
+                }
+            }
+            
+            $(function() {
+                setInterval(function() {
+                    var _t = Math.floor((new Date() - tzero)/1000),
+                        _s = _t % 60,
+                        _m = Math.floor(_t/60) % 60,
+                        _h = Math.floor(_t/3600);
+                    $("#btv-cp-temps").html(
+                        _h  + ':' + (_m < 10 ? '0' : '') + _m + ':' + (_s < 10 ? '0' : '') + _s
+                    )
+                }, 500);
+                myPodium = new Btv_Podium([0,0,0,0]);
+                
+                var _keywords = ['Sarkozy', 'Hollande', 'candidat', 'France'];
+                
+                $("#podium-labels").html(_keywords.map(function(_w) {
+                    return '<li>' + _w + '</li>'
+                }).join(""));
+                
+                myTweetSource = new Btv_TweetSource({
+                    keywords: _keywords
+                });
+                
+                myTweetSource.setTweetsCallback(function() {
+                    var _filtered = this.afterDate(tzero);
+                    $("#btv-cp-nb-tweets").html(_filtered.count());
+                    var _counts = [];
+                    for (var _i = 0; _i < _keywords.length; _i++) {
+                        _counts.push(_filtered.search(_keywords[_i]).count());
+                    }
+                    updateLastTweets();
+                    myPodium.update(_counts);
+                    $("#podium-chiffres").html(_counts.map(function(_c) {
+                        return '<li>' + _c + '</li>'
+                    }).join(""));
+                });
+                
+                $("#btv-cp-champ-filtre").keyup(function() {
+                    updateLastTweets();
+                });
+                $("#btv-cp-clear-filtre").click(function() {
+                    $("#btv-cp-champ-filtre").val("");
+                    updateLastTweets();
+                    return false; 
+                });
+                $("#btv-tweet, .btv-cp-hide-tweets").click(function() {
+                    $("#btv-tweet, .btv-cp-hide-tweets").hide();
+                })
+            });
+            
         </script>
     </head>
     <body>
-        <div id="btv-cp-container">
-            <div class="btv-cp-line">
-                <div class="btv-cp-element">
-                    <h2>Bubble <b>TV</b></h2>
-                </div>
-                <div class="btv-cp-element" id="btv-cp-cont-filtre">
-                    <h3>Rechercher/Filtrer</h3>
-                    <input id="btv-cp-champ-filtre" />
-                    <a href="#" id="btv-cp-clear-filtre">x</a>
-                </div>
-                <div class="btv-cp-element">
-                    <h3>Derniers tweets</h3>
-                    <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-tout">
-                    </ul>
-                </div>
-                <div class="btv-cp-element">
-                    <h3>Tweets sélectionnés</h3>
-                    <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-selection">
-                    </ul>
-                </div>
-                <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-amont">
-                    <h3>Arrivée des tweets</h3>
-                    <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
-                </div>
-                <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-aval">
-                    <h3>Purge des colonnes</h3>
-                    <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
-                </div>
-                <div class="btv-cp-element btv-cp-compteur">
-                    <h3>Nombre de tweets</h3>
-                    <h4 id="btv-cp-nb-tweets"></h4>
-                </div>
-                <div class="btv-cp-element btv-cp-compteur">
-                    <h3>Temps écoulé</h3>
-                    <h4 id="btv-cp-temps">0:00:00</h4>
+        <div id="btv-global-container">
+            <div id="btv-cp-container">
+                <div class="btv-cp-line">
+                    <div class="btv-cp-element">
+                        <h2>Bubble <b>TV</b></h2>
+                    </div>
+                    <div class="btv-cp-element" id="btv-cp-cont-filtre">
+                        <h3>Rechercher/Filtrer</h3>
+                        <input id="btv-cp-champ-filtre" />
+                        <a href="#" id="btv-cp-clear-filtre">x</a>
+                    </div>
+                    <div class="btv-cp-element btv-cp-cont-liste">
+                        <h3>Derniers tweets</h3>
+                        <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-tout">
+                        </ul>
+                    </div>
+                    <div class="btv-cp-element btv-cp-cont-liste">
+                        <h3>Tweets sélectionnés</h3>
+                        <ul class="btv-cp-liste-tweets" id="btv-cp-liste-tweets-selection">
+                        </ul>
+                        <a class="btv-cp-hide-tweets" href="#" style="display: none;">Cacher le tweet à l'écran</a>
+                    </div>
+                    <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-amont">
+                        <h3>Arrivée des tweets</h3>
+                        <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
+                    </div>
+                    <div class="btv-cp-element btv-cp-cont-pause" id="btv-cp-cont-pause-aval">
+                        <h3>Purge des colonnes</h3>
+                        <a class="btv-cp-play-pause btv-cp-status-pause" href="#"></a>
+                    </div>
+                    <div class="btv-cp-element btv-cp-compteur">
+                        <h3>Nombre de tweets</h3>
+                        <h4 id="btv-cp-nb-tweets"></h4>
+                    </div>
+                    <div class="btv-cp-element btv-cp-compteur">
+                        <h3>Temps écoulé</h3>
+                        <h4 id="btv-cp-temps">0:00:00</h4>
+                    </div>
                 </div>
             </div>
-        </div>
-        <div id="podium-container">
-            <div id="podium"></div>
-            <ul id="podium-labels">
-                <li>Sarkozy</li>
-                <li>Hollande</li>
-                <li>candidat</li>
-                <li>politique</li>
-            </ul>
+            <div id="podium-container">
+                <div id="podium"></div>
+                <ul id="podium-chiffres">
+                </ul>
+                <ul id="podium-labels">
+                </ul>
+            </div>
+            <div id="btv-tweet">
+            </div>
         </div>
     </body>
 </html>