--- a/integration/v2/18-19-20-21-collection_vue_mosaique.html	Thu Jun 27 16:17:44 2013 +0200
+++ b/integration/v2/18-19-20-21-collection_vue_mosaique.html	Thu Jun 27 17:31:15 2013 +0200
@@ -156,13 +156,14 @@
             <div class="clearfix">
                 <div class="filters-wrap float-left">
                     <ul class="filters">
+
                     </ul>
                 </div>
 
                 <ul class="list-projets-5 mosaic float-left clearfix masonry-177">
 
 
-                    <li class="item-masonry" data-keywords="Musée Grévin, über ällës, Beaux Arts, éè">
+                    <li class="item-masonry" data-keywords="héroïne gréco-romaine, über ällës, Beaux Arts, éè">
                         <div class="curtain"></div>
                         <div class="visuel-project">
                             <img src="img/177x224.png" alt="">

--- a/integration/v2/css/style.css	Thu Jun 27 16:17:44 2013 +0200
+++ b/integration/v2/css/style.css	Thu Jun 27 17:31:15 2013 +0200
@@ -234,13 +234,15 @@
 .item-masonry{margin-bottom: 20px;}
 .filters{padding: 10px 0; text-align: center;}
 .filters li{ margin-bottom: 10px; position: relative; text-align: left; font-size: 12px; font-family: 'Lato'; display:inline-block; width: 200px; height: 28px; line-height: 28px; background-color: #fff;}
-.filters a:first-child{ overflow: hidden; color: #7F7F7F; padding-left: 6px; display: block; }
+.filters a.display-keyword:first-child{ overflow: hidden; color: #7F7F7F; padding-left: 6px; display: block; }
 .filters li:hover{-webkit-box-shadow : none; -moz-box-shadow : none; box-shadow : none;}
-.filters .icon-action{position: absolute; top: 10px; right: 6px;width: 10px; height: 10px; display: inline-block;}
-.filters .cross{  background: url(../img/icon-cross-10.png) 0 0 no-repeat; }
-.filters .circle{width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; background-color: #7F7F7F;}
+.filters  .icon-action{position: absolute; top: 10px; right: 6px;width: 10px; height: 10px; display: inline-block;}
+
+.filters li.disabled .icon-action{width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; background-color: #7F7F7F;}
 .filters li.disabled a{opacity: 0.5;}
 
+.filters li .icon-action{background: url(../img/icon-cross-10.png) 0 0 no-repeat;}
+
 .float-left{float: left;}
 .filters-wrap{width: 225px; background-color: #EEE; margin-right: 17px;}
 .list-projets-5{width: 708px;}

--- a/integration/v2/js/keyword-mosaic.js	Thu Jun 27 16:17:44 2013 +0200
+++ b/integration/v2/js/keyword-mosaic.js	Thu Jun 27 17:31:15 2013 +0200
@@ -103,5 +103,82 @@
         }
         updateMasonry();
     });
-    
+
+//##################
+/*
+    $(document).on('click','.display-keyword', function(e){
+        e.preventDefault();
+        var ul = $(this).parents('ul'),
+            li = $(this).parents('li'),
+            iconAction = li.find('.icon-action'),
+            index = li.index(),
+            keyword = $(this).attr('data-keyword');
+        
+        if(!li.hasClass('disabled') && ul.find('li.disabled').length){
+            ul.find('li').each(function(k, v){
+                var displayKeyword = $(v).find('.display-keyword'),
+                    iconAction = $(v).find('.icon-action'),
+                    keyword = $.trim(displayKeyword.attr('data-keyword'));
+                enabledDisplayKeyword($(v), keyword, iconAction);
+            });
+        }else{
+            ul.find('li').each(function(k, v){
+                if(index != k){
+                    var displayKeyword = $(v).find('.display-keyword'),
+                        iconAction = $(v).find('.icon-action'),
+                        keyword = displayKeyword.attr('data-keyword');
+                    disabledDisplayKeyword($(v), keyword, iconAction);
+                }
+            });
+            enabledDisplayKeyword(li, keyword, iconAction);
+        }
+    });
+    $('.icon-action').bind('click', function(e){
+        e.preventDefault();
+        var li = $(this).parents('li');
+        toggleDisplayKeyword(li);
+    });
+
+    function toggleDisplayKeyword(li){
+        var displayKeyword = li.find('.display-keyword'),
+            iconAction = li.find('.icon-action'),
+            keyword = displayKeyword.attr('data-keyword');
+        if(li.hasClass('disabled')){
+            enabledDisplayKeyword(li, keyword, iconAction);
+        }else{
+            disabledDisplayKeyword(li, keyword, iconAction);
+        }
+    }
+    function enabledDisplayKeyword(li, keyword, iconAction){
+
+        $('ul.mosaic > li').each(function(k, v){
+
+            var keywords = $(v).attr('data-keywords'),
+                item = $(v);
+            keywords = keywords.split(',');
+            for(var i=0; i<= keywords.length; i++){
+                if($.trim(keywords[i]) == keyword){
+                    item.find('.curtain').hide();
+                }
+            }
+        });
+        $('li.keyword-'+keyword).find('.curtain').hide();
+        iconAction.addClass('cross');
+    }
+    function disabledDisplayKeyword(li, keyword, iconAction){
+
+        $('ul.mosaic > li').each(function(k, v){
+
+            var keywords = $(v).attr('data-keywords'),
+                item = $(v);
+            keywords = keywords.split(',');
+            for(var i=0; i<= keywords.length; i++){
+                if($.trim(keywords[i]) == keyword){
+                    item.find('.curtain').show();
+                }
+            }
+        });
+        iconAction.addClass('circle');
+    }
+*/
 });

--- a/integration/v2/js/main.js	Thu Jun 27 16:17:44 2013 +0200
+++ b/integration/v2/js/main.js	Thu Jun 27 17:31:15 2013 +0200
@@ -2,8 +2,8 @@
 //filters
 	$('.filters a').each(function(){
 		var text = $.trim($(this).text());
-		if(text.length > 30){
-			$(this).text(text.substr(0, 30) + '...')
+		if(text.length > 26){
+			$(this).text(text.substr(0, 26) + '...')
 		}
 	});
 //masonry
@@ -52,6 +52,7 @@
 			keywordsTagIt.tagit("createTag", tag);
 		});
 	}
+
 //map
 	if($('#map').length){
 		initmap()