diff --git a/analyze.sh b/analyze.sh
index 846b7ae0e71b5636838d9350be3a9d8b9fcbd599..26b7acf00d72a6bafb91d2cf540ac81765c3035d 100755
--- a/analyze.sh
+++ b/analyze.sh
@@ -43,7 +43,7 @@ function im_identify() {
 # Input: image
 # Sample: foo.png
 # Produces foo.grey with $PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY
-# Output: $PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY
+# Output: $PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY $ZEROES $HOLES
 function grey_stats() {
     local SRC="$1"
     if [ ! -f "$SRC" ]; then
@@ -56,6 +56,9 @@ function grey_stats() {
     local INFO=`cat "$IDENTIFY"`
     # TODO: No good as the histogram data might be much less than 256
     local VALUES=`cat "$IDENTIFY" | grep -A 256 Histogram`
+    if [ ! "." == ".`echo "$VALUES" | grep Colormap`" ]; then
+        local VALUES=`echo "$VALUES" | grep -B 256 Colormap`
+    fi        
     local RAW_VALUES=`echo "$VALUES" | grep "[0-9]\\+: ("`
 #    local VALUES="$INFO"
 
@@ -70,6 +73,11 @@ function grey_stats() {
     local LAST_COUNT=`echo $RAW_VALUES | tail -n 1 | grep -o " [0-9]\\+:" | grep -o "[0-9]\\+"`
     local LAST_GREY=`echo $RAW_VALUES | tail -n 1 | grep -o " ([0-9 ,]*)" | sed 's/ //g'`
 
+    local ZEROES=$((256-UNIQUE))
+    local SPAN=$((LAST_GREY-FIRST_GREY+1))
+    local EDGE=$((256-SPAN))
+    local HOLES=$((ZEROES-EDGE))
+
     local SPIKE_COUNT=`echo $RAW_VALUES | sort -n | tail -n 1 | grep -o " [0-9]\\+:" | grep -o "[0-9]\\+"`
     local SPIKE_GREY=`echo $RAW_VALUES | sort -n | tail -n 1 | grep -o " ([0-9 ,]*)" | sed 's/ //g'`
 
@@ -87,7 +95,7 @@ function grey_stats() {
 
     IFS=$SAVEIFS
 
-    echo "$PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY $SPIKE_COUNT $SPIKE_PERCENT $SPIKE_GREY"
+    echo "$PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY $SPIKE_COUNT $SPIKE_PERCENT $SPIKE_GREY $ZEROES $HOLES"
 }
 
 # Produces a histogram over greyscale intensities in the given image
diff --git a/quack.sh b/quack.sh
index f5cdc1b3a5be007e28c06a5bb941af254250a91a..f904c3184391e5056e236dd88f12b68a91a53e0a 100755
--- a/quack.sh
+++ b/quack.sh
@@ -321,6 +321,7 @@ function makeImageParams() {
     SOURCE_IMAGE="${SRC_FOLDER}/${IMAGE}"
     DEST_IMAGE="${DEST_FOLDER}/${BASE}.${IMAGE_DISP_EXT}"
     HIST_IMAGE="${DEST_FOLDER}/${BASE}.histogram.png"
+    HISTOGRAM_LINK=${HIST_IMAGE##*/}
     THUMB_IMAGE="${DEST_FOLDER}/${BASE}.thumb.jpg"
     THUMB_LINK=${THUMB_IMAGE##*/}
     WHITE_IMAGE="${DEST_FOLDER}/${BASE}.white.png"
@@ -373,6 +374,7 @@ function makeImages() {
     local SOURCE_IMAGE="${SRC_FOLDER}/${IMAGE}"
     local DEST_IMAGE="${DEST_FOLDER}/${BASE}.${IMAGE_DISP_EXT}"
     local HIST_IMAGE="${DEST_FOLDER}/${BASE}.histogram.png"
+    local HISTOGRAM_LINK=${HIST_IMAGE##*/}
     local THUMB_IMAGE="${DEST_FOLDER}/${BASE}.thumb.jpg"
     local THUMB_LINK=${THUMB_IMAGE##*/}
     local WHITE_IMAGE="${DEST_FOLDER}/${BASE}.white.png"
@@ -643,7 +645,7 @@ function resolveAlternatives() {
 # Creates only the HTML page itself. The corresponding makeImages must
 # be called before calling this function
 # up parent srcFolder dstFolder image prev_image next_image
-# Output: PAGE_LINK BASE THUMB_LINK THUMB_WIDTH THUMB_HEIGHT
+# Output: PAGE_LINK BASE THUMB_LINK THUMB_WIDTH THUMB_HEIGHT HISTOGRAM_LINK HISTOGRAM_WIDTH HISTOGRAM_HEIGHT
 function makePreviewPage() {
     local UP="$1"
     local PARENT="$2"
@@ -681,6 +683,9 @@ function makePreviewPage() {
     local TIDENTIFY=`identify "$THUMB_IMAGE" | grep -o " [0-9]\+x[0-9]\\+ "`
     THUMB_WIDTH=`echo $TIDENTIFY | grep -o "[0-9]\+x" | grep -o "[0-9]\+"`
     THUMB_HEIGHT=`echo $TIDENTIFY | grep -o "x[0-9]\+" | grep -o "[0-9]\+"`
+    local HIDENTIFY=`identify "$HIST_IMAGE" | grep -o " [0-9]\+x[0-9]\\+ "`
+    HISTOGRAM_WIDTH=`echo $HIDENTIFY | grep -o "[0-9]\+x" | grep -o "[0-9]\+"`
+    HISTOGRAM_HEIGHT=`echo $HIDENTIFY | grep -o "x[0-9]\+" | grep -o "[0-9]\+"`
 
     if [ ".true" == ".$PRESENTATION" ]; then
         local PIDENTIFY=`identify "$PRESENTATION_IMAGE" | grep -o " [0-9]\+x[0-9]\\+ "`
@@ -794,7 +799,7 @@ function makePreviewPage() {
     # TODO: Use destination if that is lossless and faster to open?
     local GREY=`grey_stats "$SOURCE_IMAGE"`
 
-    # $PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY $COUNT_SPIKE $PERCENT_SPIKE $GREY_SPIKE
+    # $PIXELS $UNIQUE $FIRST_COUNT $PERCENT_FIRST $FIRST_GREY $LAST_COUNT $PERCENT_LAST $LAST_GREY $COUNT_SPIKE $PERCENT_SPIKE $GREY_SPIKE $ZEROES $HOLES
     # 1000095 512 82362 8.23 (0,0,0) 255 .02 (255,255,255)
     GREY_PIXELS=`echo "$GREY" | cut -d\  -f1`
     GREY_UNIQUE=`echo "$GREY" | cut -d\  -f2`
@@ -807,6 +812,8 @@ function makePreviewPage() {
     GREY_COUNT_SPIKE=`echo "$GREY" | cut -d\  -f9`
     GREY_PERCENT_SPIKE=`echo "$GREY" | cut -d\  -f10`
     GREY_SPIKE=`echo "$GREY" | cut -d\  -f11`
+    GREY_ZEROES=`echo "$GREY" | cut -d\  -f12`
+    GREY_HOLES=`echo "$GREY" | cut -d\  -f13`
     local GREY_ALL_SOURCE=`im_identify "$SOURCE_IMAGE"`
     GREY_ALL=`cat "$GREY_ALL_SOURCE" | grep -A 256 Histogram | tail -n 256`
 
@@ -865,17 +872,20 @@ function makeIndex() {
 
     # Generate pages
     local THUMBS_HTML=""
+    local HISTOGRAMS_HTML=""
     local PREV_IMAGE=""
     if [ "." == ".$IMAGES" ]; then
         IMAGES_HTML="<p>No images</p>"$'\n'
     else
         IMAGES_HTML="<ul>"$'\n'
+        HISTOGRAMS_HTML="<ul>"$'\n'
         for I in $IMAGES; do
             local NEXT_IMAGE=`echo "$IMAGES" | grep -A 1 "$I" | tail -n 1 | grep -v "$I"`
             makePreviewPage "$UP" "$PARENT" "$SRC_FOLDER" "$DEST_FOLDER" "$I" "$PREV_IMAGE" "$NEXT_IMAGE"
             IMAGES_HTML="${IMAGES_HTML}<li><a href=\"$PAGE_LINK\">$BASE</a></li>"$'\n'
 
             THUMBS_HTML="${THUMBS_HTML}<div class=\"thumb\"><a class=\"thumblink\" href=\"$PAGE_LINK\"><span class=\"thumboverlay\"></span><img class=\"thumbimg\" src=\"${THUMB_LINK}\" alt=\"$BASE\" title=\"$BASE\" width=\"$THUMB_WIDTH\" height=\"$THUMB_HEIGHT\"/></a></div>"$'\n'
+            HISTOGRAMS_HTML="${HISTOGRAMS_HTML}<div class=\"histograminfolder\"><a href=\"$PAGE_LINK\"><img src=\"${HISTOGRAM_LINK}\" alt=\"Histogram for $BASE\" title=\"Histogram for $BASE\" width=\"$HISTOGRAM_WIDTH\" height=\"$HISTOGRAM_HEIGHT\"/></a></div>"$'\n'
 #            THUMBS_HTML="${THUMBS_HTML}<a class=\"thumblink\" href=\"$PAGE_LINK\"><img class=\"thumbimg\" src=\"${THUMB_LINK}\" alt=\"$BASE\" title=\"$BASE\" width=\"$THUMB_WIDTH\" height=\"$THUMB_HEIGHT\"/></a>"$'\n'
             PREV_IMAGE=$I
         done
@@ -922,7 +932,7 @@ function makeIndex() {
     fi
     popd > /dev/null
 
-    # UP, PARENT, SRC_FOLDER, DEST_FOLDER, IMAGES_HTML, THUMBS_HTML, SUBFOLDERS_HTML, EDITION_HTML, SNIPPET
+    # UP, PARENT, SRC_FOLDER, DEST_FOLDER, IMAGES_HTML, THUMBS_HTML, HISTOGRAMS_HTML, SUBFOLDERS_HTML, EDITION_HTML, SNIPPET
     ctemplate $FOLDER_TEMPLATE > $PP
     
     # Generate pages for sub folders
diff --git a/web/folder_template.html b/web/folder_template.html
index e15bb9c919feffc7ed186e4315c9994486aed38e..2d207ac6a63289831930f43c3f602af9e9a2151e 100644
--- a/web/folder_template.html
+++ b/web/folder_template.html
@@ -17,8 +17,9 @@
 
 <div class="images">
 <h2>Pages</h2>
-<p><input type="checkbox" id="toggle_blown_thumbs" onClick="toggleBlownThumbs();">Show absolute black and white</input></p>
+<p><input type="checkbox" id="toggle_blown_thumbs" onClick="toggleBlownThumbs();">Show absolute black and white</input><br/><input type="checkbox" id="toggle_histograms" onClick="toggleHistograms();">Histogram view</input></p>
 <div class="thumbs">${THUMBS_HTML}</div>
+<div class="histograms">${HISTOGRAMS_HTML}</div>
 <div class="imagelinks">
 ${IMAGES_HTML}
 </div>
diff --git a/web/image_template.html b/web/image_template.html
index 2d97206282a838d680c3f71df964a82d15ee4316..6e3d43696827358a219d58a04b6884163a66ddf3 100644
--- a/web/image_template.html
+++ b/web/image_template.html
@@ -30,6 +30,7 @@ Dark ${GREY_FIRST}: ${GREY_PERCENT_FIRST}%<br/>
 Spike ${GREY_SPIKE}: ${GREY_PERCENT_SPIKE}%<br/>
 Light ${GREY_LAST}: ${GREY_PERCENT_LAST}%<br/>
 Unique greyscale values: ${GREY_UNIQUE}<br/>
+Histogram holes: ${GREY_HOLES}<br/>
 ALTO-PC: ${ACCURACY}%
 <p><input type="checkbox" id="toggle_grid" onClick="toggleGrid();">Grid</input></p>
 <p><input type="checkbox" id="toggle_textblock" checked="checked" onClick="toggleTextBlock();">TextBlocks</input></p>
diff --git a/web/quack.css b/web/quack.css
index 0887d4a541b832de0e8e81869384824149e1fb1c..a3b61685b406cc6845f5384fb592a7ac74f68fcc 100644
--- a/web/quack.css
+++ b/web/quack.css
@@ -126,21 +126,30 @@ div.openseadragon-canvas canvas {
 .highlight {
     opacity:    0.4;
     filter:     alpha(opacity=40);
+    margin: -2px;
     border:     2px solid #BE3333;
     background-color: transparent;
 }
 .highlight:hover, .highlight:focus {
-    filter:     alpha(opacity=70);
-    opacity:    0.7;
-    border:     4px solid #FF3333;
+/*    filter:     alpha(opacity=70);
+    opacity:    0.7;*/
+/*    margin: -10px;
+    border:     10px solid #0000FF;*/
 }
-.group {
-    background-color: #9999FF;
+
+/* All elements in a selected group */
+.group_disabled {
+/*    background-color: #9999FF;*/
+    margin: -10px;
+    border:     10px solid #0000FF;
 }
 .next {
-    background-color: #3333FF;
+/*    background-color: #3333FF;
     opacity:    0.8;
-    filter:     alpha(opacity=80);
+    filter:     alpha(opacity=80);*/
+    margin: -10px;
+    border:  10px solid #000088;
+    outline: 2px solid #000000;
 }
 .illustration {
     opacity:    0.4;
@@ -149,6 +158,7 @@ div.openseadragon-canvas canvas {
     background-color: transparent;
 }
 .illustration.group {
+    margin: -3px;
     border: 3px solid #9999FF;
     opacity:    1.0;
     filter:     alpha(opacity=100);
@@ -213,10 +223,10 @@ ul.alternatives li + li:before {
 div.imagelinks {
     clear: both;
 }
-div.thumb {
+div.thumb, div.histograms div {
     float: left;
 }
-div.thumbs a {
+div.thumbs a, div.histograms a {
     position: relative;
     display: block;
 }
@@ -227,3 +237,124 @@ div.thumbs a {
     top: 0;
     left: 0;
 }
+.histograms img {
+    border: 1px dotted grey;
+    margin: 0.1em 0.2em 0.1em 0.2em;
+}
+.histograms {
+    display: none;
+}
+
+
+/* Linked articles on image page */
+
+.g1  { background-color: #FF0000; }
+.g2  { background-color: #00FF00; }
+.g3  { background-color: #0000FF; }
+.g4  { background-color: #FFFF00; }
+.g5  { background-color: #00FFFF; }
+.g6  { background-color: #FF00FF; }
+
+.g7  { background-color: #FFAA00; }
+.g8  { background-color: #AAFF00; }
+.g9  { background-color: #AA00FF; }
+.g10 { background-color: #FFFFAA; }
+.g11 { background-color: #AAFFFF; }
+.g12 { background-color: #FFAAFF; }
+.
+.g13 { background-color: #FF00AA; }
+.g14 { background-color: #00FFAA; }
+.g15 { background-color: #00AAFF; }
+
+.g16 { background-color: #FF5500; }
+.g17 { background-color: #55FF00; }
+.g18 { background-color: #5500FF; }
+.g19 { background-color: #FFFF55; }
+.g20 { background-color: #55FFFF; }
+.g21 { background-color: #FF55FF; }
+.
+.g22 { background-color: #FF0055; }
+.g23 { background-color: #00FF55; }
+.g24 { background-color: #0055FF; }
+
+.g25 { background-color: #FFAAAA; }
+.g26 { background-color: #AAFFAA; }
+.g27 { background-color: #AAAAFF; }
+
+.g25 { background-color: #FF5555; }
+.g26 { background-color: #55FF55; }
+.g27 { background-color: #5555FF; }
+
+.g28 { background-color: #550000; }
+.g29 { background-color: #005500; }
+.g30 { background-color: #000055; }
+.g31 { background-color: #555500; }
+.g32 { background-color: #005555; }
+.g33 { background-color: #550055; }
+
+.g34 { background-color: #555500; }
+.g35 { background-color: #555500; }
+.g36 { background-color: #550055; }
+.g37 { background-color: #555555; }
+.g38 { background-color: #555555; }
+.g39 { background-color: #555555; }
+.
+.g40 { background-color: #550055; }
+.g41 { background-color: #005555; }
+.g42 { background-color: #005555; }
+
+.g43 { background-color: #55AA00; }
+.g44 { background-color: #AA5500; }
+.g45 { background-color: #AA0055; }
+.g46 { background-color: #5555AA; }
+.g47 { background-color: #AA5555; }
+.g48 { background-color: #55AA55; }
+.
+.g49 { background-color: #5500AA; }
+.g50 { background-color: #0055AA; }
+.g51 { background-color: #00AA55; }
+
+.g52 { background-color: #555555; }
+.g53 { background-color: #555555; }
+.g54 { background-color: #555555; }
+
+.g55 { background-color: #55AAAA; }
+.g56 { background-color: #AA55AA; }
+.g57 { background-color: #AAAA55; }
+
+.g58 { background-color: #AA0000; }
+.g59 { background-color: #00AA00; }
+.g60 { background-color: #0000AA; }
+.g61 { background-color: #AAAA00; }
+.g62 { background-color: #00AAAA; }
+.g63 { background-color: #AA00AA; }
+
+.g64 { background-color: #AA5500; }
+.g65 { background-color: #55AA00; }
+.g66 { background-color: #5500AA; }
+.g67 { background-color: #AAAA55; }
+.g68 { background-color: #55AAAA; }
+.g69 { background-color: #AA55AA; }
+.
+.g70 { background-color: #AA0055; }
+.g71 { background-color: #00AA55; }
+.g72 { background-color: #0055AA; }
+
+.g73 { background-color: #AAAA00; }
+.g74 { background-color: #AAAA00; }
+.g75 { background-color: #AA00AA; }
+.g76 { background-color: #AAAAAA; }
+.g77 { background-color: #AAAAAA; }
+.g78 { background-color: #AAAAAA; }
+.
+.g79 { background-color: #AA00AA; }
+.g80 { background-color: #00AAAA; }
+.g81 { background-color: #00AAAA; }
+
+.g82 { background-color: #AA5555; }
+.g83 { background-color: #55AA55; }
+.g84 { background-color: #5555AA; }
+
+.g85 { background-color: #AAAAAA; }
+.g86 { background-color: #AAAAAA; }
+.g87 { background-color: #AAAAAA; }
diff --git a/web/quack.js b/web/quack.js
index d78120d385e1c1a9624475f6931955926a6cb61c..b27137489b8c876c04b093a48b69ec8e3a6d0791 100644
--- a/web/quack.js
+++ b/web/quack.js
@@ -77,7 +77,9 @@ var prevs = {};
 function addForward(overlay, className) {
     if (!document.getElementById(overlay)) return;
     document.getElementById(overlay).className = document.getElementById(overlay).className + ' ' + className;
+//    console.log("Overlay " + overlay + " now has className " + document.getElementById(overlay).className);
     if (overlay in nexts) {
+//    console.log("Adding to next " + nexts[overlay] + " for " + overlay);
         addForward(nexts[overlay], className);
     }
 }
@@ -193,15 +195,36 @@ function addResultBoxes() {
     }
 }
 
+// Mark all groups (articles linked with IDNEXT) with class g$COUNT, starting from 1
+function colorGroups() {
+    console.log('Coloring groups started');
+    var count=1
+    for (var i = 0; i < myDragon.overlays.length; i++) {
+        var id = myDragon.overlays[i].id;
+        var element = document.getElementById(id);
+  
+  //      element.className = element.className + ' g' + count;
+ //       count++;
+ //       continue;
+
+        if (('highlight' == element.className) && (id in nexts)) {
+//            console.log('id ' + id + ' was in nextx: ' + id + " " + nexts[id] + " with old className=" + element.className);
+            addForward(id, "g" + count);
+            count++;
+        }
+    }
+    console.log('Coloring groups finished');
+}
+ 
 function setupJS() {
     // TODO: Check if this is an image page and if not, exit immediately
-
+    colorGroups();
     toggleGrid();
     toggleTextBlock();
     toggleBlown();
     addResultBoxes();
 
-    //! Create a callback for eack overlay with the overlay-ID as argument
+    // Create a callback for eack overlay with the overlay-ID as argument
     for (var i = 0; i < myDragon.overlays.length; i++) {
         id = myDragon.overlays[i].id;
         shortid = id.split("/").pop();
diff --git a/web/quack_folder.js b/web/quack_folder.js
index 33a7f1776748832d652024626aacac994a746f81..0600e41cc9708dda6aca116e60c796c00e961fbe 100644
--- a/web/quack_folder.js
+++ b/web/quack_folder.js
@@ -10,6 +10,24 @@ function toggleBlownThumbs() {
         content[i].style.display = state;
     }
 }
+function toggleHistograms() {    
+    if (document.getElementById('toggle_histograms').checked) {
+        thumb_state = 'none';
+        hist_state = 'block';
+    } else {
+        thumb_state = 'block';
+        hist_state = 'none';
+    }
+    
+    var content = document.getElementsByClassName('thumbs');
+    for (var i = 0 ; i < content.length ; i++) {
+        content[i].style.display = thumb_state;
+    }
+    var content = document.getElementsByClassName('histograms');
+    for (var i = 0 ; i < content.length ; i++) {
+        content[i].style.display = hist_state;
+    }
+}
 
 function setupThumbOverlays() {
     var content = document.getElementsByClassName('thumblink');