# HG changeset patch
# User veltr
# Date 1366888919 -7200
# Node ID 933b388521f664e72e0455703234e943bc794dd5
# Parent  4e1e66b2fdf162d4eabf4dce2ac74983fa4aca84
tag-it

diff -r 4e1e66b2fdf1 -r 933b388521f6 css/startscreen.css
--- a/css/startscreen.css	Wed Apr 24 17:54:48 2013 +0200
+++ b/css/startscreen.css	Thu Apr 25 13:21:59 2013 +0200
@@ -37,18 +37,20 @@
 }
 
 .explain-block h3 {
-    font-size: 18px; line-height: 32px;
+    font-size: 18px; line-height: 24px;
 }
 
-.keyword-search {
-    line-height: 30px; padding: 0 5px; border: 1px solid #000000; width: 300px; font-size: 18px;
-    background: #666666; color: #FFFFFF;
+ul.keyword-search {
+    border: 1px solid #000000; width: 480px; font-size: 15px;
+    background: #666666;
 }
-::-webkit-input-placeholder { 
-    color: #cccccc; font-style: italic;
+
+ul.tagit input {
+    background: #666666; color: #ffffff;
 }
-:-moz-placeholder {
-    color: #cccccc; font-style: italic;
+
+ul.tagit li.tagit-choice {
+    margin-top: 4px;
 }
 
 .ui-autocomplete {
diff -r 4e1e66b2fdf1 -r 933b388521f6 js/playscreen.js
--- a/js/playscreen.js	Wed Apr 24 17:54:48 2013 +0200
+++ b/js/playscreen.js	Thu Apr 25 13:21:59 2013 +0200
@@ -426,8 +426,11 @@
 		
         $(".play-localtweets .tweet").each(function() {
         	var el = $(this),
-        		liY = + el.offset().top + el.outerHeight() / 2 - deltaY,
-        		t = +el.attr("data-timestamp"),
+        		liY = + el.offset().top + el.outerHeight() / 2 - deltaY;
+    		if (liY < 0 || liY > ph) {
+    		    return;
+    		}
+        	var t = +el.attr("data-timestamp"),
         		tY = localyscale * (t - localpos + localduration / 2),
                 tX = localL + lxscale * (data.fiveseconds[Math.floor(t / 5)].count - lmi);
     		ctx.beginPath();
diff -r 4e1e66b2fdf1 -r 933b388521f6 js/startscreen.js
--- a/js/startscreen.js	Wed Apr 24 17:54:48 2013 +0200
+++ b/js/startscreen.js	Thu Apr 25 13:21:59 2013 +0200
@@ -57,7 +57,7 @@
         return b.score - a.score;
     });
     
-    var selectedWords = [], searchString = "", topicscache = {};
+    var selectedWords = [], topicscache = {};
     
     function showTopicsForWord(word) {
     	var topicweights = topicscache[word];
@@ -71,13 +71,11 @@
     }
     
     function wordFilter() {
-        searchString = $(".keyword-search").val() || "",
-        selectedWords = [];
-        if (searchString.length) {
-            selectedWords.push(searchString);
-        }
+        selectedWords = $(".keyword-search").tagit("assignedTags");
+        
         if (selectedWords.length) {
         	var k = selectedWords.join(",");
+        	console.log(k);
         	if (typeof topicscache[k] === "undefined") {
         		TopicsBean.topicsForKeywords(k,{
 	                callback: function(topicweights) {
@@ -94,39 +92,50 @@
         }
     }
     
+    var currenttopics;
+    
     function showTopics(topiclist) {
-        var topicHtmls = ["", "", ""];
-        if (searchString.length) {
-            var searchStringRx = new RegExp('(' + searchString.replace(/(\W)/g,'\\$1') + ')', "gim");
+        var tb = $(".topics-block");
+        if (topiclist.join(",") !== currenttopics) {
+            currenttopics = topiclist.join(",");
+            var topicHtmls = ["", "", ""];
+            topiclist.forEach(function(topic,i) {
+                var wordsToShow = topic.words.slice(),
+                    max = wordsToShow[0].weight,
+                    min = Math.min(wordsToShow[wordsToShow.length - 1].weight, max - .01),
+                    scale = 10 / (max - min);
+                var li = '<li class="shadow-block topic" data-topic-id="'
+                    + topic.index
+                    + '" data-timestamp="999999"><ul class="topic-words">'
+                    + wordsToShow.reduce(function(memwords, word) {
+                        return memwords
+                            + '<li style="font-size: '
+                            + ( 10 + scale * (word.weight - min) )
+                            + 'px;">'
+                            + word.word
+                            + '</li>';
+                    },"")
+                    + '</ul></li>';
+                topicHtmls[i % 3] += li;
+            });
+            tb.html(topicHtmls.reduce(function(mem,html) {
+               return mem + '<ul class="topic-column">' + html + '</ul>' 
+            },""));
         }
-        var replaceRx = new RegExp('(' + selectedWords.map(function(w) {
-            return w.replace(/(\W)/g,'\\$1')
-        }).join("|") + ')', "gim");
-        topiclist.forEach(function(topic,i) {
-            var wordsToShow = topic.words.slice(),
-                max = wordsToShow[0].weight,
-                min = Math.min(wordsToShow[wordsToShow.length - 1].weight, max - .01),
-                scale = 10 / (max - min);
-            var li = '<li class="shadow-block topic" data-topic-id="'
-                + topic.index
-                + '" data-timestamp="999999"><ul class="topic-words">'
-                + wordsToShow.reduce(function(memwords, word) {
-                    return memwords
-                        + '<li style="font-size: '
-                        + ( 10 + scale * (word.weight - min) )
-                        + 'px;">'
-                        + ( selectedWords.length
-                            ? word.word.replace(replaceRx,'<span class="highlight">$1</span>')
-                            : word.word )
-                        + '</li>';
-                },"")
-                + '</ul></li>';
-            topicHtmls[i % 3] += li;
+        if (selectedWords.length) {
+            var replaceRx = new RegExp('(' + selectedWords.map(function(w) {
+                return w.replace(/(\W)/g,'\\$1')
+            }).join("|") + ')', "gim");
+        }
+        tb.find(".topic-words li").each(function() {
+            var el = $(this);
+            if (selectedWords.length) {
+                var w = _(el.text()).escape().replace(replaceRx,'<span class="highlight">$1</span>');
+                el.html(w);
+            } else {
+                el.text(el.text());
+            }
         });
-        var tb = $(".topics-block");
-        tb.html(topicHtmls.reduce(function(mem,html) {
-           return mem + '<ul class="topic-column">' + html + '</ul>' 
-        },""));
         tb.css("top",0);
         
         showTopicViz();
@@ -156,6 +165,13 @@
         
     allwords.sort();
     
+    $(".keyword-search").tagit({
+        availableTags: allwords,
+        afterTagAdded: wordFilter,
+        afterTagRemoved: wordFilter
+    })
+    
+/*    
     $(".keyword-search").autocomplete({
         source: allwords,
         change: function() {
diff -r 4e1e66b2fdf1 -r 933b388521f6 lib/jquery.hammer.min.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/lib/jquery.hammer.min.js	Thu Apr 25 13:21:59 2013 +0200
@@ -0,0 +1,7 @@
+/*! Hammer.JS - v1.0.3 - 2013-03-02
+ * http://eightmedia.github.com/hammer.js
+ *
+ * Copyright (c) 2013 Jorik Tangelder <j.tangelder@gmail.com>;
+ * Licensed under the MIT license */
+
+(function(t){"use strict";function e(){if(!n.READY){n.event.determineEventTypes();for(var t in n.gestures)n.gestures.hasOwnProperty(t)&&n.detection.register(n.gestures[t]);n.event.onTouch(document,n.EVENT_MOVE,n.detection.detect),n.event.onTouch(document,n.EVENT_END,n.detection.endDetect),n.READY=!0}}var n=function(t,e){return new n.Instance(t,e||{})};n.defaults={stop_browser_behavior:{userSelect:"none",touchCallout:"none",touchAction:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}},n.HAS_POINTEREVENTS=navigator.pointerEnabled||navigator.msPointerEnabled,n.HAS_TOUCHEVENTS="ontouchstart"in t,n.EVENT_TYPES={},n.DIRECTION_DOWN="down",n.DIRECTION_LEFT="left",n.DIRECTION_UP="up",n.DIRECTION_RIGHT="right",n.POINTER_MOUSE="mouse",n.POINTER_TOUCH="touch",n.POINTER_PEN="pen",n.EVENT_START="start",n.EVENT_MOVE="move",n.EVENT_END="end",n.plugins={},n.READY=!1,n.Instance=function(t,i){var r=this;return e(),this.element=t,this.enabled=!0,this.options=n.utils.extend(n.utils.extend({},n.defaults),i||{}),this.options.stop_browser_behavior&&n.utils.stopDefaultBrowserBehavior(this.element,this.options.stop_browser_behavior),n.event.onTouch(t,n.EVENT_START,function(t){r.enabled&&n.detection.startDetect(r,t)}),this},n.Instance.prototype={on:function(t,e){for(var n=t.split(" "),i=0;n.length>i;i++)this.element.addEventListener(n[i],e,!1);return this},off:function(t,e){for(var n=t.split(" "),i=0;n.length>i;i++)this.element.removeEventListener(n[i],e,!1);return this},trigger:function(t,e){var n=document.createEvent("Event");return n.initEvent(t,!0,!0),n.gesture=e,this.element.dispatchEvent(n),this},enable:function(t){return this.enabled=t,this}};var i=null,r=!1,o=!1;n.event={bindDom:function(t,e,n){for(var i=e.split(" "),r=0;i.length>r;r++)t.addEventListener(i[r],n,!1)},onTouch:function(t,e,s){var a=this;this.bindDom(t,n.EVENT_TYPES[e],function(c){var u=c.type.toLowerCase();return u.match(/mouseup/)&&o?(o=!1,void 0):((u.match(/touch/)||u.match(/mouse/)&&1===c.which||n.HAS_POINTEREVENTS&&u.match(/down/))&&(r=!0),u.match(/touch|pointer/)&&(o=!0),!r||o&&u.match(/mouse/)||(n.HAS_POINTEREVENTS&&e!=n.EVENT_END&&n.PointerEvent.updatePointer(e,c),e===n.EVENT_END&&null!==i?c=i:i=c,s.call(n.detection,a.collectEventData(t,e,c)),n.HAS_POINTEREVENTS&&e==n.EVENT_END&&n.PointerEvent.updatePointer(e,c)),u.match(/up|cancel|end/)&&(r=!1,i=null,n.PointerEvent.reset()),void 0)})},determineEventTypes:function(){var t;t=n.HAS_POINTEREVENTS?n.PointerEvent.getEvents():["touchstart mousedown","touchmove mousemove","touchend touchcancel mouseup"],n.EVENT_TYPES[n.EVENT_START]=t[0],n.EVENT_TYPES[n.EVENT_MOVE]=t[1],n.EVENT_TYPES[n.EVENT_END]=t[2]},getTouchList:function(t){return n.HAS_POINTEREVENTS?n.PointerEvent.getTouchList():t.touches?t.touches:[{identifier:1,pageX:t.pageX,pageY:t.pageY,target:t.target}]},collectEventData:function(t,e,i){var r=this.getTouchList(i,e),o=n.POINTER_TOUCH;return(i.type.match(/mouse/)||n.PointerEvent.matchType(n.POINTER_MOUSE,i))&&(o=n.POINTER_MOUSE),{center:n.utils.getCenter(r),timestamp:i.timestamp||(new Date).getTime(),target:i.target,touches:r,eventType:e,pointerType:o,srcEvent:i,preventDefault:function(){this.srcEvent.preventManipulation&&this.srcEvent.preventManipulation(),this.srcEvent.preventDefault&&this.srcEvent.preventDefault()},stopPropagation:function(){this.srcEvent.stopPropagation()},stopDetect:function(){return n.detection.stopDetect()}}}},n.PointerEvent={pointers:{},getTouchList:function(){var t=this.pointers,e=[];return Object.keys(t).sort().forEach(function(n){e.push(t[n])}),e},updatePointer:function(t,e){t==n.EVENT_END?delete this.pointers[e.pointerId]:(e.identifier=e.pointerId,this.pointers[e.pointerId]=e)},matchType:function(t,e){if(!e.pointerType)return!1;var i={};return i[n.POINTER_MOUSE]=e.pointerType==e.MSPOINTER_TYPE_MOUSE||e.pointerType==n.POINTER_MOUSE,i[n.POINTER_TOUCH]=e.pointerType==e.MSPOINTER_TYPE_TOUCH||e.pointerType==n.POINTER_TOUCH,i[n.POINTER_PEN]=e.pointerType==e.MSPOINTER_TYPE_PEN||e.pointerType==n.POINTER_PEN,i[t]},getEvents:function(){return["pointerdown MSPointerDown","pointermove MSPointerMove","pointerup pointercancel MSPointerUp MSPointerCancel"]},reset:function(){this.pointers={}}},n.utils={extend:function(t,e){for(var n in e)t[n]=e[n];return t},getCenter:function(t){for(var e=[],n=[],i=0,r=t.length;r>i;i++)e.push(t[i].pageX),n.push(t[i].pageY);return{pageX:(Math.min.apply(Math,e)+Math.max.apply(Math,e))/2,pageY:(Math.min.apply(Math,n)+Math.max.apply(Math,n))/2}},getVelocity:function(t,e,n){return{x:Math.abs(e/t)||0,y:Math.abs(n/t)||0}},getAngle:function(t,e){var n=e.pageY-t.pageY,i=e.pageX-t.pageX;return 180*Math.atan2(n,i)/Math.PI},getDirection:function(t,e){var i=Math.abs(t.pageX-e.pageX),r=Math.abs(t.pageY-e.pageY);return i>=r?t.pageX-e.pageX>0?n.DIRECTION_LEFT:n.DIRECTION_RIGHT:t.pageY-e.pageY>0?n.DIRECTION_UP:n.DIRECTION_DOWN},getDistance:function(t,e){var n=e.pageX-t.pageX,i=e.pageY-t.pageY;return Math.sqrt(n*n+i*i)},getScale:function(t,e){return t.length>=2&&e.length>=2?this.getDistance(e[0],e[1])/this.getDistance(t[0],t[1]):1},getRotation:function(t,e){return t.length>=2&&e.length>=2?this.getAngle(e[1],e[0])-this.getAngle(t[1],t[0]):0},isVertical:function(t){return t==n.DIRECTION_UP||t==n.DIRECTION_DOWN},stopDefaultBrowserBehavior:function(t,e){var n,i=["webkit","khtml","moz","ms","o",""];if(e&&t.style){for(var r=0;i.length>r;r++)for(var o in e)e.hasOwnProperty(o)&&(n=o,i[r]&&(n=i[r]+n.substring(0,1).toUpperCase()+n.substring(1)),t.style[n]=e[o]);"none"==e.userSelect&&(t.onselectstart=function(){return!1})}}},n.detection={gestures:[],current:null,previous:null,stopped:!1,startDetect:function(t,e){this.current||(this.stopped=!1,this.current={inst:t,startEvent:n.utils.extend({},e),lastEvent:!1,name:""},this.detect(e))},detect:function(t){if(this.current&&!this.stopped){t=this.extendEventData(t);for(var e=this.current.inst.options,n=0,i=this.gestures.length;i>n;n++){var r=this.gestures[n];if(!this.stopped&&e[r.name]!==!1&&r.handler.call(r,t,this.current.inst)===!1){this.stopDetect();break}}this.current&&(this.current.lastEvent=t)}},endDetect:function(t){this.detect(t),this.stopDetect()},stopDetect:function(){this.previous=n.utils.extend({},this.current),this.current=null,this.stopped=!0},extendEventData:function(t){var e=this.current.startEvent;if(e&&(t.touches.length!=e.touches.length||t.touches===e.touches)){e.touches=[];for(var i=0,r=t.touches.length;r>i;i++)e.touches.push(n.utils.extend({},t.touches[i]))}var o=t.timestamp-e.timestamp,s=t.center.pageX-e.center.pageX,a=t.center.pageY-e.center.pageY,c=n.utils.getVelocity(o,s,a);return n.utils.extend(t,{deltaTime:o,deltaX:s,deltaY:a,velocityX:c.x,velocityY:c.y,distance:n.utils.getDistance(e.center,t.center),angle:n.utils.getAngle(e.center,t.center),direction:n.utils.getDirection(e.center,t.center),scale:n.utils.getScale(e.touches,t.touches),rotation:n.utils.getRotation(e.touches,t.touches),startEvent:e}),t},register:function(t){var e=t.defaults||{};return e[t.name]===void 0&&(e[t.name]=!0),n.utils.extend(n.defaults,e),t.index=t.index||1e3,this.gestures.push(t),this.gestures.sort(function(t,e){return t.index<e.index?-1:t.index>e.index?1:0}),this.gestures}},n.gestures=n.gestures||{},n.gestures.Hold={name:"hold",index:10,defaults:{hold_timeout:500,hold_threshold:1},timer:null,handler:function(t,e){switch(t.eventType){case n.EVENT_START:clearTimeout(this.timer),n.detection.current.name=this.name,this.timer=setTimeout(function(){"hold"==n.detection.current.name&&e.trigger("hold",t)},e.options.hold_timeout);break;case n.EVENT_MOVE:t.distance>e.options.hold_threshold&&clearTimeout(this.timer);break;case n.EVENT_END:clearTimeout(this.timer)}}},n.gestures.Tap={name:"tap",index:100,defaults:{tap_max_touchtime:250,tap_max_distance:10,doubletap_distance:20,doubletap_interval:300},handler:function(t,e){if(t.eventType==n.EVENT_END){var i=n.detection.previous;if(t.deltaTime>e.options.tap_max_touchtime||t.distance>e.options.tap_max_distance)return;n.detection.current.name=i&&"tap"==i.name&&t.timestamp-i.lastEvent.timestamp<e.options.doubletap_interval&&t.distance<e.options.doubletap_distance?"doubletap":"tap",e.trigger(n.detection.current.name,t)}}},n.gestures.Swipe={name:"swipe",index:40,defaults:{swipe_max_touches:1,swipe_velocity:.7},handler:function(t,e){if(t.eventType==n.EVENT_END){if(e.options.swipe_max_touches>0&&t.touches.length>e.options.swipe_max_touches)return;(t.velocityX>e.options.swipe_velocity||t.velocityY>e.options.swipe_velocity)&&(e.trigger(this.name,t),e.trigger(this.name+t.direction,t))}}},n.gestures.Drag={name:"drag",index:50,defaults:{drag_min_distance:10,drag_max_touches:1,drag_block_horizontal:!1,drag_block_vertical:!1,drag_lock_to_axis:!1},triggered:!1,handler:function(t,e){if(n.detection.current.name!=this.name&&this.triggered)return e.trigger(this.name+"end",t),this.triggered=!1,void 0;if(!(e.options.drag_max_touches>0&&t.touches.length>e.options.drag_max_touches))switch(t.eventType){case n.EVENT_START:this.triggered=!1;break;case n.EVENT_MOVE:if(t.distance<e.options.drag_min_distance&&n.detection.current.name!=this.name)return;n.detection.current.name=this.name;var i=n.detection.current.lastEvent.direction;e.options.drag_lock_to_axis&&i!==t.direction&&(t.direction=n.utils.isVertical(i)?0>t.deltaY?n.DIRECTION_UP:n.DIRECTION_DOWN:0>t.deltaX?n.DIRECTION_LEFT:n.DIRECTION_RIGHT),this.triggered||(e.trigger(this.name+"start",t),this.triggered=!0),e.trigger(this.name,t),e.trigger(this.name+t.direction,t),(e.options.drag_block_vertical&&n.utils.isVertical(t.direction)||e.options.drag_block_horizontal&&!n.utils.isVertical(t.direction))&&t.preventDefault();break;case n.EVENT_END:this.triggered&&e.trigger(this.name+"end",t),this.triggered=!1}}},n.gestures.Transform={name:"transform",index:45,defaults:{transform_min_scale:.01,transform_min_rotation:1,transform_always_block:!1},triggered:!1,handler:function(t,e){if(n.detection.current.name!=this.name&&this.triggered)return e.trigger(this.name+"end",t),this.triggered=!1,void 0;if(!(2>t.touches.length))switch(e.options.transform_always_block&&t.preventDefault(),t.eventType){case n.EVENT_START:this.triggered=!1;break;case n.EVENT_MOVE:var i=Math.abs(1-t.scale),r=Math.abs(t.rotation);if(e.options.transform_min_scale>i&&e.options.transform_min_rotation>r)return;n.detection.current.name=this.name,this.triggered||(e.trigger(this.name+"start",t),this.triggered=!0),e.trigger(this.name,t),r>e.options.transform_min_rotation&&e.trigger("rotate",t),i>e.options.transform_min_scale&&(e.trigger("pinch",t),e.trigger("pinch"+(1>t.scale?"in":"out"),t));break;case n.EVENT_END:this.triggered&&e.trigger(this.name+"end",t),this.triggered=!1}}},n.gestures.Touch={name:"touch",index:-1/0,defaults:{prevent_default:!1},handler:function(t,e){e.options.prevent_default&&t.preventDefault(),t.eventType==n.EVENT_START&&e.trigger(this.name,t)}},n.gestures.Release={name:"release",index:1/0,handler:function(t,e){t.eventType==n.EVENT_END&&e.trigger(this.name,t)}},"object"==typeof module&&"object"==typeof module.exports?module.exports=n:(t.Hammer=n,"function"==typeof t.define&&t.define.amd&&t.define("hammer",[],function(){return n}))})(this),function(t){"use strict";t&&(Hammer.event.bindDom=function(e,n,i){t(e).on(n,function(t){var e=t.originalEvent;e.pageX||(e.pageX=t.pageX,e.pageY=t.pageY),e.target||(e.target=t.target),e.which||(e.which=e.button),e.preventDefault||(e.preventDefault=t.preventDefault),e.stopPropagation||(e.stopPropagation=t.stopPropagation),i.call(this,e)})},Hammer.Instance.prototype.on=function(e,n){return t(this.element).on(e,n)},Hammer.Instance.prototype.off=function(e,n){return t(this.element).off(e,n)},Hammer.Instance.prototype.trigger=function(e,n){return t(n.srcEvent.target).trigger({type:e,gesture:n})},t.fn.hammer=function(e){return this.each(function(){var n=t(this),i=n.data("hammer");i?i&&e&&Hammer.utils.extend(i.options,e):n.data("hammer",Hammer(this,e||{}))})})}(window.jQuery||!1);
\ No newline at end of file
diff -r 4e1e66b2fdf1 -r 933b388521f6 lib/jquery.tagit.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/lib/jquery.tagit.css	Thu Apr 25 13:21:59 2013 +0200
@@ -0,0 +1,67 @@
+ul.tagit {
+    padding: 1px 5px;
+    overflow: auto;
+    margin-left: inherit; /* usually we don't want the regular ul margins. */
+    margin-right: inherit;
+}
+ul.tagit li {
+    display: block;
+    float: left;
+    margin: 2px 5px 2px 0;
+}
+ul.tagit li.tagit-choice {    
+    position: relative;
+    line-height: inherit;
+}
+
+ul.tagit li.tagit-choice-read-only { 
+    padding: .2em .5em .2em .5em; 
+} 
+
+ul.tagit li.tagit-choice-editable { 
+    padding: .2em 18px .2em .5em; 
+} 
+
+ul.tagit li.tagit-new {
+    padding: .25em 4px .25em 0;
+}
+
+ul.tagit li.tagit-choice a.tagit-label {
+    cursor: pointer;
+    text-decoration: none;
+}
+ul.tagit li.tagit-choice .tagit-close {
+    cursor: pointer;
+    position: absolute;
+    right: .1em;
+    top: 50%;
+    margin-top: -8px;
+    line-height: 17px;
+}
+
+/* used for some custom themes that don't need image icons */
+ul.tagit li.tagit-choice .tagit-close .text-icon {
+    display: none;
+}
+
+ul.tagit li.tagit-choice input {
+    display: block;
+    float: left;
+    margin: 2px 5px 2px 0;
+}
+ul.tagit input[type="text"] {
+    -moz-box-sizing:    border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing:         border-box;
+
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: inherit;
+    background-color: inherit;
+    outline: none;
+}
diff -r 4e1e66b2fdf1 -r 933b388521f6 lib/tag-it.min.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/lib/tag-it.min.js	Thu Apr 25 13:21:59 2013 +0200
@@ -0,0 +1,16 @@
+(function(b){b.widget("ui.tagit",{options:{allowDuplicates:!1,caseSensitive:!0,fieldName:"tags",placeholderText:null,readOnly:!1,removeConfirmation:!1,tagLimit:null,availableTags:[],autocomplete:{},showAutocompleteOnFocus:!1,allowSpaces:!1,singleField:!1,singleFieldDelimiter:",",singleFieldNode:null,animate:!0,tabIndex:null,beforeTagAdded:null,afterTagAdded:null,beforeTagRemoved:null,afterTagRemoved:null,onTagClicked:null,onTagLimitExceeded:null,onTagAdded:null,onTagRemoved:null,tagSource:null},_create:function(){var a=
+this;this.element.is("input")?(this.tagList=b("<ul></ul>").insertAfter(this.element),this.options.singleField=!0,this.options.singleFieldNode=this.element,this.element.css("display","none")):this.tagList=this.element.find("ul, ol").andSelf().last();this.tagInput=b('<input type="text" />').addClass("ui-widget-content");this.options.readOnly&&this.tagInput.attr("disabled","disabled");this.options.tabIndex&&this.tagInput.attr("tabindex",this.options.tabIndex);this.options.placeholderText&&this.tagInput.attr("placeholder",
+this.options.placeholderText);this.options.autocomplete.source||(this.options.autocomplete.source=function(a,c){var d=a.term.toLowerCase(),e=b.grep(this.options.availableTags,function(a){return 0===a.toLowerCase().indexOf(d)});c(this._subtractArray(e,this.assignedTags()))});this.options.showAutocompleteOnFocus&&(this.tagInput.focus(function(){a._showAutocomplete()}),"undefined"===typeof this.options.autocomplete.minLength&&(this.options.autocomplete.minLength=0));b.isFunction(this.options.autocomplete.source)&&
+(this.options.autocomplete.source=b.proxy(this.options.autocomplete.source,this));b.isFunction(this.options.tagSource)&&(this.options.tagSource=b.proxy(this.options.tagSource,this));this.tagList.addClass("tagit").addClass("ui-widget ui-widget-content ui-corner-all").append(b('<li class="tagit-new"></li>').append(this.tagInput)).click(function(c){var d=b(c.target);d.hasClass("tagit-label")?(d=d.closest(".tagit-choice"),d.hasClass("removed")||a._trigger("onTagClicked",c,{tag:d,tagLabel:a.tagLabel(d)})):
+a.tagInput.focus()});var d=!1;if(this.options.singleField)if(this.options.singleFieldNode){var c=b(this.options.singleFieldNode),e=c.val().split(this.options.singleFieldDelimiter);c.val("");b.each(e,function(b,c){a.createTag(c,null,!0);d=!0})}else this.options.singleFieldNode=b('<input type="hidden" style="display:none;" value="" name="'+this.options.fieldName+'" />'),this.tagList.after(this.options.singleFieldNode);d||this.tagList.children("li").each(function(){b(this).hasClass("tagit-new")||(a.createTag(b(this).text(),
+b(this).attr("class"),!0),b(this).remove())});this.tagInput.keydown(function(c){if(c.which==b.ui.keyCode.BACKSPACE&&""===a.tagInput.val()){var d=a._lastTag();!a.options.removeConfirmation||d.hasClass("remove")?a.removeTag(d):a.options.removeConfirmation&&d.addClass("remove ui-state-highlight")}else a.options.removeConfirmation&&a._lastTag().removeClass("remove ui-state-highlight");if(c.which===b.ui.keyCode.COMMA||c.which===b.ui.keyCode.ENTER||c.which==b.ui.keyCode.TAB&&""!==a.tagInput.val()||c.which==
+b.ui.keyCode.SPACE&&!0!==a.options.allowSpaces&&('"'!=b.trim(a.tagInput.val()).replace(/^s*/,"").charAt(0)||'"'==b.trim(a.tagInput.val()).charAt(0)&&'"'==b.trim(a.tagInput.val()).charAt(b.trim(a.tagInput.val()).length-1)&&0!==b.trim(a.tagInput.val()).length-1))c.which===b.ui.keyCode.ENTER&&""===a.tagInput.val()||c.preventDefault(),a.createTag(a._cleanedInput()),a.tagInput.autocomplete("close")}).blur(function(){a.tagInput.data("autocomplete-open")||a.createTag(a._cleanedInput())});if(this.options.availableTags||
+this.options.tagSource||this.options.autocomplete.source)c={select:function(b,c){a.createTag(c.item.value);return!1}},b.extend(c,this.options.autocomplete),c.source=this.options.tagSource||c.source,this.tagInput.autocomplete(c).bind("autocompleteopen",function(){a.tagInput.data("autocomplete-open",!0)}).bind("autocompleteclose",function(){a.tagInput.data("autocomplete-open",!1)})},_cleanedInput:function(){return b.trim(this.tagInput.val().replace(/^"(.*)"$/,"$1"))},_lastTag:function(){return this.tagList.find(".tagit-choice:last:not(.removed)")},
+_tags:function(){return this.tagList.find(".tagit-choice:not(.removed)")},assignedTags:function(){var a=this,d=[];this.options.singleField?(d=b(this.options.singleFieldNode).val().split(this.options.singleFieldDelimiter),""===d[0]&&(d=[])):this._tags().each(function(){d.push(a.tagLabel(this))});return d},_updateSingleTagsField:function(a){b(this.options.singleFieldNode).val(a.join(this.options.singleFieldDelimiter)).trigger("change")},_subtractArray:function(a,d){for(var c=[],e=0;e<a.length;e++)-1==
+b.inArray(a[e],d)&&c.push(a[e]);return c},tagLabel:function(a){return this.options.singleField?b(a).find(".tagit-label:first").text():b(a).find("input:first").val()},_showAutocomplete:function(){this.tagInput.autocomplete("search","")},_findTagByLabel:function(a){var d=this,c=null;this._tags().each(function(){if(d._formatStr(a)==d._formatStr(d.tagLabel(this)))return c=b(this),!1});return c},_isNew:function(a){return!this._findTagByLabel(a)},_formatStr:function(a){return this.options.caseSensitive?
+a:b.trim(a.toLowerCase())},_effectExists:function(a){return Boolean(b.effects&&(b.effects[a]||b.effects.effect&&b.effects.effect[a]))},createTag:function(a,d,c){var e=this;a=b.trim(a);this.options.preprocessTag&&(a=this.options.preprocessTag(a));if(""===a)return!1;if(!this.options.allowDuplicates&&!this._isNew(a))return a=this._findTagByLabel(a),!1!==this._trigger("onTagExists",null,{existingTag:a,duringInitialization:c})&&this._effectExists("highlight")&&a.effect("highlight"),!1;if(this.options.tagLimit&&
+this._tags().length>=this.options.tagLimit)return this._trigger("onTagLimitExceeded",null,{duringInitialization:c}),!1;var g=b(this.options.onTagClicked?'<a class="tagit-label"></a>':'<span class="tagit-label"></span>').text(a),f=b("<li></li>").addClass("tagit-choice ui-widget-content ui-state-default ui-corner-all").addClass(d).append(g);this.options.readOnly?f.addClass("tagit-choice-read-only"):(f.addClass("tagit-choice-editable"),d=b("<span></span>").addClass("ui-icon ui-icon-close"),d=b('<a><span class="text-icon">\u00d7</span></a>').addClass("tagit-close").append(d).click(function(){e.removeTag(f)}),
+f.append(d));this.options.singleField||(g=g.html(),f.append('<input type="hidden" style="display:none;" value="'+g+'" name="'+this.options.fieldName+'" />'));!1!==this._trigger("beforeTagAdded",null,{tag:f,tagLabel:this.tagLabel(f),duringInitialization:c})&&(this.options.singleField&&(g=this.assignedTags(),g.push(a),this._updateSingleTagsField(g)),this._trigger("onTagAdded",null,f),this.tagInput.val(""),this.tagInput.parent().before(f),this._trigger("afterTagAdded",null,{tag:f,tagLabel:this.tagLabel(f),
+duringInitialization:c}),this.options.showAutocompleteOnFocus&&!c&&setTimeout(function(){e._showAutocomplete()},0))},removeTag:function(a,d){d="undefined"===typeof d?this.options.animate:d;a=b(a);this._trigger("onTagRemoved",null,a);if(!1!==this._trigger("beforeTagRemoved",null,{tag:a,tagLabel:this.tagLabel(a)})){if(this.options.singleField){var c=this.assignedTags(),e=this.tagLabel(a),c=b.grep(c,function(a){return a!=e});this._updateSingleTagsField(c)}if(d){a.addClass("removed");var c=this._effectExists("blind")?
+["blind",{direction:"horizontal"},"fast"]:["fast"],g=this;c.push(function(){a.remove();g._trigger("afterTagRemoved",null,{tag:a,tagLabel:g.tagLabel(a)})});a.fadeOut("fast").hide.apply(a,c).dequeue()}else a.remove(),this._trigger("afterTagRemoved",null,{tag:a,tagLabel:this.tagLabel(a)})}},removeTagByLabel:function(a,b){var c=this._findTagByLabel(a);if(!c)throw"No such tag exists with the name '"+a+"'";this.removeTag(c,b)},removeAll:function(){var a=this;this._tags().each(function(b,c){a.removeTag(c,
+!1)})}})})(jQuery);
diff -r 4e1e66b2fdf1 -r 933b388521f6 startscreen-frame.html
--- a/startscreen-frame.html	Wed Apr 24 17:54:48 2013 +0200
+++ b/startscreen-frame.html	Thu Apr 25 13:21:59 2013 +0200
@@ -5,6 +5,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
         <title>IRI/ALBLF Social Media</title>
         <link rel="stylesheet" type="text/css" href="lib/jquery-ui.min.css" />
+        <link rel="stylesheet" type="text/css" href="lib/jquery.tagit.css" />
         <link rel="stylesheet" type="text/css" href="css/reset.css" />
         <link rel="stylesheet" type="text/css" href="css/ipadsim.css" />
         <link rel="stylesheet" type="text/css" href="css/socialmedia.css" />
@@ -17,6 +18,7 @@
         <script src="lib/underscore-min.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/jquery-ui.min.js"></script>
+        <script src="lib/tag-it.min.js"></script>
         <script src="lib/raphael-min.js"></script>
         <script src="js/startscreen.js"></script>
         <script type="text/javascript" src="http://159.217.144.101:8050/sia-solr/dwr/engine.js"></script>
@@ -35,8 +37,8 @@
                         <div class="duration">2:50:00</div>
                     </div>
                     <div class="explain-block shadow-block">
-                        <h3>Recherchez les sujets de l'émission par mots-clés</h3>
-                        <p><input class="keyword-search" type="search" placeholder="Rechercher" /></p>
+                        <h3>Filtrez les sujets de l'émission par mots-clés</h3>
+                        <ul class="keyword-search"></ul>
                     </div>
                 </div>
                 
diff -r 4e1e66b2fdf1 -r 933b388521f6 startscreen.html
--- a/startscreen.html	Wed Apr 24 17:54:48 2013 +0200
+++ b/startscreen.html	Thu Apr 25 13:21:59 2013 +0200
@@ -6,6 +6,7 @@
         <title>IRI/ALBLF Social Media</title>
                 <meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width" />
         <link rel="stylesheet" type="text/css" href="lib/jquery-ui.min.css" />
+        <link rel="stylesheet" type="text/css" href="lib/jquery.tagit.css" />
         <link rel="stylesheet" type="text/css" href="css/reset.css" />
         <link rel="stylesheet" type="text/css" href="css/socialmedia.css" />
         <link rel="stylesheet" type="text/css" href="css/startscreen.css" />
@@ -17,6 +18,7 @@
         <script src="lib/underscore-min.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/jquery-ui.min.js"></script>
+        <script src="lib/tag-it.min.js"></script>
         <script src="lib/jquery.ui.touch-punch.min.js"></script>
         <script src="lib/raphael-min.js"></script>
         <script src="js/startscreen.js"></script>
@@ -35,8 +37,8 @@
                         <div class="duration">2:50:00</div>
                     </div>
                     <div class="explain-block shadow-block">
-                        <h3>Recherchez les sujets de l'émission par mots-clés</h3>
-                        <p><input class="keyword-search" type="search" placeholder="Rechercher" /></p>
+                        <h3>Filtrez les sujets de l'émission par mots-clés</h3>
+                        <ul class="keyword-search"></ul>
                     </div>
                 </div>