--- a/src/jocondelab/static/jocondelab/css/front-common.css	Tue Sep 03 15:50:59 2013 +0200
+++ b/src/jocondelab/static/jocondelab/css/front-common.css	Wed Sep 04 13:34:26 2013 +0200
@@ -110,7 +110,7 @@
 
 body {
     color: #000000; background: url('../img/background-pinstripe-yellow.png');
-    font-family: 'OpenSans'; font-size: 10px;
+    font-family: 'OpenSans'; font-size: 10px; overflow-x: hidden;
 }
 
 .header-wrapper {
@@ -194,7 +194,7 @@
 
 .menu-list {
     position: absolute; top: 25px; right: 0; background: #ffffff; display: none;
-    font-size: 12px; box-shadow: 1px 1px 3px #333333; z-index: 2; text-align: right;
+    font-size: 12px; box-shadow: 1px 1px 3px #333333; z-index: 3; text-align: right;
 }
 
 .menu-item {
@@ -274,17 +274,41 @@
     height: 160px;
     overflow: hidden;
     float: left;
+    position: relative;
+}
+
+@media screen and (max-width: 640px) {
+    .notice-item {
+        width: 120px;
+        height: 120px;
+    }
+}
+
+.notice-image {
+    font-size: 0; line-height: 0;
+}
+
+.notice-item.notice-hover {
+    overflow: visible;
 }
 
 .notice-item .notice-metadata {
     display: none;
 }
 
-.notice-popin {
-    position: absolute; padding: 10px; z-index: 1;
+.notice-item.notice-hover .notice-metadata {
+    display: block;
+}
+
+.notice-contents {
+    position: absolute; padding: 9px; z-index: 1;
     background: url('../img/background-pinstripe-yellow.png'); border: 1px solid #cccccc; box-shadow: 0 0 5px #333333;
 }
 
+.notice-hover .notice-contents {
+    z-index: 2;
+}
+
 .notice-contents h2 {
     font-size: 15px; margin-bottom: 6px; line-height: 1.1em;
 }

--- a/src/jocondelab/static/jocondelab/js/front-common.js	Tue Sep 03 15:50:59 2013 +0200
+++ b/src/jocondelab/static/jocondelab/js/front-common.js	Wed Sep 04 13:34:26 2013 +0200
@@ -107,18 +107,18 @@
     }
     
     window.bindDbpediaBox = function(selector, defaultUri) {
-        $(selector).on({
-            mouseenter: function(e) {
-                $refdiv = $(this);
-                var dbpediaUri = $refdiv.attr("data-dbpedia-uri") || defaultUri;
-                if (!dbpediaUri || dbpediaUri === "None") {
-                    return;
-                }
-                hovering = dbpediaUri;
-                showUriData(dbpediaUri) || getUriData(dbpediaUri);
-            },
-            mouseleave: onDbpediaLeave
+        var $sel = $(selector);
+        $sel.off("mouseenter mouseleave");
+        $sel.mouseenter(function(e) {
+            $refdiv = $(this);
+            var dbpediaUri = $refdiv.attr("data-dbpedia-uri") || defaultUri;
+            if (!dbpediaUri || dbpediaUri === "None") {
+                return;
+            }
+            hovering = dbpediaUri;
+            showUriData(dbpediaUri) || getUriData(dbpediaUri);
         });
+        $sel.mouseleave(onDbpediaLeave);
     }
         
     $overlay.hover(function() {
@@ -134,59 +134,15 @@
     /* NOTICE LIST MANAGEMENT */
    
     var gridsize = 160,
-        $popin = null;
+        $popin = null,
+        hoverPopin = false;
     
     function removePopin() {
         if ($popin) {
-            $popin.remove();
+            $(".notice-item").removeClass("notice-hover");
             $popin = null;
         }
-    }
-    
-    function movePopin() {
-        if ($popin) {
-            var $tblist = $(".notice-list"),
-                $img = $popin.find(".notice-image"),
-                $refli = $tblist.find("li[data-notice-id=" + $popin.attr("data-notice-id") + "]"),
-                $refimg = $refli.find(".notice-image"),
-                $md = $popin.find(".notice-metadata"),
-                refo = $refimg.offset(),
-                refw = $refimg.width(),
-                winw = $win.width(),
-                x = refo.left + refw / 2;
-            $popin.css({
-                top: refo.top - 11,
-                width: refw + 260
-            });
-            if (x < winw / 2) {
-                $img.css({
-                    float: "left"
-                });
-                $md.css({
-                    "margin-left": refw + 10,
-                    "margin-right": 0
-                });
-                $popin.css({
-                    right: "none",
-                    left: refo.left - 11
-                });
-            } else {
-                $img.css({
-                    float: "right"
-                });
-                $md.css({
-                    "margin-left": 0,
-                    "margin-right": refw + 10
-                });
-                $popin.css({
-                    left: "none",
-                    right: winw - refo.left - refw - 11
-                });
-            }
-        }
-    }
-    
-    var hoverPopin = false;
+    }  
     
     function deferredRemovePopin() {
         window.setTimeout(function() {
@@ -199,73 +155,87 @@
     function adaptGrid() {
         var $tblist = $(".notice-list");
         if ($tblist.length) {
+            gridsize = $tblist.children(":first").width() || 160;
             $tblist.css({
                 padding: "0 " + Math.floor($tblist.parent().width() % gridsize / 2) + "px"
             });
         }
+        throttledCheckSizes();
     }
     
     function checkSizes() {
         var notloaded = false;
-        $(".notice-image").each(function() {
-            if (this.__isloaded) {
-                return;
-            }
-            var ih = this.height;
+        $(".notice-item").each(function() {
+            var $this = $(this),
+                $nc = $(this).find(".notice-contents"),
+                $img = $(this).find(".notice-image"),
+                $md = $(this).find(".notice-metadata"),
+                img = $img[0],
+                ih = img.height;
             if (ih < 30) {
                 notloaded = true;
                 return;
             }
-            var iw = this.width,
+            var iw = img.width,
                 scale = gridsize / Math.min(iw, ih),
                 nw = scale * iw,
-                nh = scale * ih;
-            $(this).css({
+                nh = scale * ih,
+                ww = $win.width(),
+                isleft = ($this.offset().left + gridsize / 2 < ww / 2),
+                isfull = (nw > ww - 300);
+            $img.css({
                 width: nw + "px",
                 height: nh + "px",
-                "margin-top": (gridsize - nh) / 2 + "px",
-                "margin-left": (gridsize - nw) / 2 + "px"
+                float: isleft ? "left": "right"
+            });
+            $md.css({
+                "margin-left" : (isleft && !isfull) ? nw + 10 : 0,
+                "margin-right" : (!isleft && !isfull) ? nw + 10 : 0
             });
-            this.__isloaded = true;
+            $nc.css({
+                left: isleft ? "0" : "",
+                right: isleft ? "" : "0",
+                width: isfull ? nw : (nw + 260),
+                "margin-top": ((gridsize - nh) / 3 - 10) + "px",
+                "margin-left": isleft ? ((gridsize - nw) / 2 - 10) + "px" : 0,
+                "margin-right": isleft ? 0 : ((gridsize - nw) / 2 - 10) + "px"
+            });
         });
         if (notloaded) {
-            setTimeout(checkSizes, 500);
+            setTimeout(throttledCheckSizes, 500);
         }
     }
     
+    var throttledCheckSizes = _(checkSizes).throttle(200);
+    
     window.bindResultsMouseover = function() {
-        $(".notice-item").mouseover(function() {
+        var $items = $(".notice-item");
+        $items.off("mouseenter mouseover");
+        $items.mouseenter(function() {
             var $this = $(this);
-            window.setTimeout(function() {
-                removePopin();
-                if (!$this.find(".notice-image")[0].width) {
-                    return;
-                }
-                $popin = $('<div class="notice-popin"></div>').append($this.find(".notice-contents").clone());
-                $popin.attr("data-notice-id",$this.attr("data-notice-id"));
-                $popin.find(".notice-image").css("margin", 0);
-                $("body").append($popin);
-                movePopin();
-                bindDbpediaBox($popin.find(".notice-term a"));
-                $popin.mouseover(function() {
-                    hoverPopin = true;
-                }).mouseleave(function() {
-                    hoverPopin = false;
-                    if ($overlay.is(":hidden")) {
-                        deferredRemovePopin();
-                    }
-                });
-            }, 0);
+            hoverPopin = true;
+            if ($popin && $popin === $this) {
+                return;
+            }
+            removePopin();
+            if (!$this.find(".notice-image")[0].width) {
+                return;
+            }
+            $popin = $this;
+            $this.addClass("notice-hover");
         });
-        
-        removePopin();
+        $items.mouseleave(function() {
+            hoverPopin = false;
+            if ($overlay.is(":hidden")) {
+                deferredRemovePopin();
+            }
+        });
+        bindDbpediaBox($items.find(".notice-term a"));
         adaptGrid();
-        checkSizes();
     }
     
     $win.resize(function() {
         adaptGrid();
-        movePopin();
         moveDbpediaPopin();
     }).scroll(moveDbpediaPopin);