Simplified javascript code

16 files changed, 586 insertions, 631 deletions

diff --git a/web/public/js/taginfo.js b/web/public/js/taginfo.js
index 29c7969..b7232b2 100644
--- a/web/public/js/taginfo.js
+++ b/web/public/js/taginfo.js
@@ -377,19 +377,15 @@ function create_flexigrid(domid, options) {
     }
 }
 
-function init_tabs(page, params) {
-    var tabset = create_flexigrid_for[page];
-    if (tabset === undefined) {
-        tabset = create_flexigrid_for[page.split(/\./)[0]][page.split(/\./)[1]];
-    }
+function init_tabs(params) {
     return jQuery('#tabs').tabs({
         show: function(event, ui) { 
             resize_box();
             if (ui.index != 0 || window.location.hash != '') {
                 window.location.hash = ui.tab.hash;
             }
-            if (ui.tab.hash.substring(1) in tabset) {
-                tabset[ui.tab.hash.substring(1)].apply(this, params);
+            if (ui.tab.hash.substring(1) in create_flexigrid_for) {
+                create_flexigrid_for[ui.tab.hash.substring(1)].apply(this, params);
             }
         }
     });
diff --git a/web/views/key.erb b/web/views/key.erb
index ac4ec22..ee369ca 100644
--- a/web/views/key.erb
+++ b/web/views/key.erb
@@ -112,7 +112,7 @@
 <% javascript do
     JS.raw(<<"JAVASCRIPT")
 function page_init2() {
-    init_tabs('key', [#{ @key.to_json }, #{ @filter_type.to_json }, #{ r18n.locale.code.to_json }]);
+    init_tabs([#{ @key.to_json }, #{ @filter_type.to_json }, #{ r18n.locale.code.to_json }]);
 
     var data = #{ @prevalent_values.to_json() };
 
diff --git a/web/views/reports/characters_in_keys.erb b/web/views/reports/characters_in_keys.erb
index 23db20c..27fbeca 100644
--- a/web/views/reports/characters_in_keys.erb
+++ b/web/views/reports/characters_in_keys.erb
@@ -53,43 +53,4 @@
         </table>
     </div>
 </div>
-
-<% javascript do
-    JS.raw(<<"JAVASCRIPT")
-function page_init2() {
-    init_tabs('reports.characters_in_keys', []);
-
-    var data = #{ i = '@'; %w(plain colon letters space problem rest).map{ |type| i=i.next; [ { :label => i, :value => @db.stats('characters_in_keys_' + type) } ] }.to_json() };
-
-    var w=968, h=50;
-
-    var vis = new pv.Panel()
-        .canvas('canvas')
-        .width(w + 20)
-        .height(h);
-
-    var colors = #{ colors.to_json };
-
-    var scale = pv.Scale.linear(0, #{ @db.stats('num_keys') }).range(0, w);
-
-    vis.add(pv.Layout.Stack)
-        .orient('left-top')
-        .left(10)
-        .layers(data)
-        .x(10)
-        .y(function(d) { return scale(d.value); })
-    .layer.add(pv.Bar)
-        .fillStyle(function(d) { return colors[d.label]; })
-        .height(20)
-    .anchor('bottom')
-        .add(pv.Label)
-        .font('12px Arial,sans-serif')
-        .top(46)
-        .text(function(d) { return d.label; });
-
-    vis.render();
-}
-JAVASCRIPT
-end
-%>
 <% javascript "#{ r18n.locale.code }/reports/characters_in_keys" %>
diff --git a/web/views/reports/frequently_used_keys_without_wiki_page.erb b/web/views/reports/frequently_used_keys_without_wiki_page.erb
index 95780b6..b1556aa 100644
--- a/web/views/reports/frequently_used_keys_without_wiki_page.erb
+++ b/web/views/reports/frequently_used_keys_without_wiki_page.erb
@@ -20,7 +20,7 @@
 <% javascript do
     JS.raw(<<"JAVASCRIPT")
 function page_init2() {
-    create_flexigrid_for.reports.frequently_used_keys_without_wiki_page(#{ params[:english] == '1' ? '1' : '0' });
+    create_flexigrid_with_option(#{ params[:english] == '1' ? '1' : '0' });
     jQuery('#english').bind('click', function() {
         jQuery('#grid-keys').flexOptions({
             url: '/api/2/reports/frequently_used_keys_without_wiki_page?english=' + (jQuery('#english')[0].checked ? '1' : '0')
diff --git a/web/views/reports/josm_styles.erb b/web/views/reports/josm_styles.erb
index b3a9981..3b22a1f 100644
--- a/web/views/reports/josm_styles.erb
+++ b/web/views/reports/josm_styles.erb
@@ -15,7 +15,7 @@
 <% javascript do
     JS.raw(<<"JAVASCRIPT")
 function page_init2() {
-    create_flexigrid_for.reports.josm_styles('standard');
+    create_flexigrid_with_option('standard');
 }
 JAVASCRIPT
 end
diff --git a/web/views/reports/key_lengths.erb b/web/views/reports/key_lengths.erb
index 1f3bc2f..d077545 100644
--- a/web/views/reports/key_lengths.erb
+++ b/web/views/reports/key_lengths.erb
@@ -2,13 +2,6 @@
     <h1><%= @title %></h1>
     <p>Tag keys can be between 0 and 255 (Unicode) characters long. Very short or very long keys are often, but not always, errors.</p>
 </div>
-<%
-    hist = Array.new
-    @db.execute('SELECT length(key) AS length, count(*) AS count FROM db.keys GROUP BY length(key) ORDER BY length(key)') do |row|
-        hist[row['length'].to_i] = row['count'].to_i
-    end
-    hist = hist.map{ |item| item.nil? ? 0 : item }
-%>
 <div id="tabs">
     <ul>
         <li><a href="#keys">Keys</a></li>
@@ -25,77 +18,4 @@
         <div id="canvas"></div>
     </div>
 </div>
-<% javascript do
-    JS.raw(<<"JAVASCRIPT")
-function page_init2() {
-    init_tabs('reports.key_lengths', []);
-
-    var data = #{ hist.to_json };
-
-    var w=900, h=400, bar_width=6;
-
-    var vis = new pv.Panel()
-        .canvas('canvas')
-        .fillStyle('#ffffff')
-        .strokeStyle('#d0d0c8')
-        .width(w)
-        .height(h+4)
-        .top(10)
-        .right(15)
-        .bottom(40)
-        .left(60)
-        .lineWidth(1);
-
-    vis.add(pv.Label)
-        .data(['Key length'])
-        .font('12px Arial,sans-serif')
-        .bottom(-36)
-        .left(w/2)
-        .textAlign('center');
-
-    vis.add(pv.Label)
-        .data(['Number of keys'])
-        .font('12px Arial,sans-serif')
-        .left(-48)
-        .bottom(h/2)
-        .textAlign('center')
-        .textAngle(-Math.PI/2);
-
-    var x = pv.Scale.linear(0, #{ hist.size }).range(bar_width, w - bar_width);
-    var y = pv.Scale.linear(0, #{ hist.max }).range(0, h);
-
-    var bar = vis.add(pv.Bar)
-        .data(data)
-        .bottom(1)
-        .fillStyle('#083e76')
-        .left(function() { return x(this.index) - bar_width/2; })
-        .height(y)
-        .title(function(d) { return '' + d + ' keys of length ' + this.index; })
-        .width(bar_width);
-
-    vis.add(pv.Rule)
-        .data(y.ticks(10))
-        .bottom(y)
-        .left(-5)
-        .width(-5)
-    .anchor("left").add(pv.Label)
-        .font('10px Arial,sans-serif')
-        .textMargin(8)
-        .text(x.tickFormat);
-
-    vis.add(pv.Rule)
-        .data(x.ticks(10))
-        .left(x)
-        .bottom(-2)
-        .height(-5)
-    .anchor("bottom").add(pv.Label)
-        .font('10px Arial,sans-serif')
-        .textMargin(8)
-        .text(x.tickFormat);
-        
-    vis.render();
-}
-JAVASCRIPT
-end
-%>
 <% javascript "#{ r18n.locale.code }/reports/key_lengths" %>
diff --git a/web/views/search.erb b/web/views/search.erb
index bfb03d8..b4eee41 100644
--- a/web/views/search.erb
+++ b/web/views/search.erb
@@ -21,7 +21,7 @@
 <% javascript do
     JS.raw(%Q{
 function page_init2() {
-    init_tabs('search', [#{ @query.to_json }]);
+    init_tabs([#{ @query.to_json }]);
 }
     })
 end
diff --git a/web/views/search_tags.erb b/web/views/search_tags.erb
index 0f09179..79597da 100644
--- a/web/views/search_tags.erb
+++ b/web/views/search_tags.erb
@@ -15,7 +15,7 @@
 <% javascript do
     JS.raw(%Q{
 function page_init2() {
-    init_tabs('search', [#{ @query.to_json }]);
+    init_tabs([#{ @query.to_json }]);
 }
     })
 end
diff --git a/web/views/tag.erb b/web/views/tag.erb
index 048907c..c34428f 100644
--- a/web/views/tag.erb
+++ b/web/views/tag.erb
@@ -65,7 +65,7 @@
 <% javascript do
     JS.raw(<<"JAVASCRIPT")
 function page_init2() {
-    init_tabs('tag', [#{ @key.to_json }, #{ @value.to_json }, #{ @filter_type.to_json }]);
+    init_tabs([#{ @key.to_json }, #{ @value.to_json }, #{ @filter_type.to_json }]);
 }
 JAVASCRIPT
 end
diff --git a/web/viewsjs/key.js.erb b/web/viewsjs/key.js.erb
index 718e70a..adf8339 100644
--- a/web/viewsjs/key.js.erb
+++ b/web/viewsjs/key.js.erb
@@ -1,145 +1,143 @@
 var create_flexigrid_for = {
-    key: {
-        overview: function(key, filter_type) {
-            create_flexigrid('grid-overview', {
-                url: '/api/3/db/keys/overview?key=' + encodeURIComponent(key),
-                colModel: [
-                    { display: 'Type', name: 'type', width: 100, sortable: true },
-                    { display: 'Number of objects', name: 'count', width: 260, sortable: true, align: 'center' },
-                    { display: 'Number of values', name: 'value', width: 140, sortable: true, align: 'right' }
-                ],
-                usepager: false,
-                useRp: false,
-                preProcess: function(data) {
-                    return {
-                        total: 4,
-                        page: 1,
-                        rows: jQuery.map(data, function(row, i) {
-                            return { 'cell': [
-                                print_image(row.type) + ' ' + texts.osm[row.type],
-                                print_value_with_percent(row.count, row.count_fraction),
-                                print_with_ts(row.values)
-                            ]};
-                        })
-                    };
-                }
-            });
-        },
-        values: function(key, filter_type, lang) {
-            create_flexigrid('grid-values', {
-                url: '/api/2/db/keys/values?key=' + encodeURIComponent(key) + '&filter=' + encodeURIComponent(filter_type) + '&lang=' + encodeURIComponent(lang),
-                colModel: [
-                    { display: texts.osm.value, name: 'value', width: 200, sortable: true },
-                    { display: texts.misc.count, name: 'count', width: 240, sortable: true, align: 'center' },
-                    { display: 'Description', name: 'description', width: 600, sortable: false, align: 'left' }
-                ],
-                searchitems: [
-                    { display: texts.osm.value, name: 'value' }
-                ],
-                sortname: 'count',
-                sortorder: 'desc',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
+    overview: function(key, filter_type) {
+        create_flexigrid('grid-overview', {
+            url: '/api/3/db/keys/overview?key=' + encodeURIComponent(key),
+            colModel: [
+                { display: 'Type', name: 'type', width: 100, sortable: true },
+                { display: 'Number of objects', name: 'count', width: 260, sortable: true, align: 'center' },
+                { display: 'Number of values', name: 'value', width: 140, sortable: true, align: 'right' }
+            ],
+            usepager: false,
+            useRp: false,
+            preProcess: function(data) {
+                return {
+                    total: 4,
+                    page: 1,
+                    rows: jQuery.map(data, function(row, i) {
                         return { 'cell': [
-                            hover_expand(link_to_value(key, row.value)),
-                            print_value_with_percent(row.count, row.fraction),
-                            row.description
-                        ] };
-                    });
-                    delete data.data;
-                    return data;
-                }
-            });
-        },
-        keys: function(key, filter_type) {
-            create_flexigrid('grid-keys', {
-                url: '/api/2/db/keys/keys?key=' + encodeURIComponent(key) + '&filter=' + encodeURIComponent(filter_type),
-                colModel: [
-                    { display: '<span title="Number of objects with this key that also have the other key">' + texts.misc.count + ' &rarr;</span>', name: 'to_count', width: 320, sortable: true, align: 'center' },
-                    { display: '<span title="Key used together with this key">' + texts.pages.key.other_keys_used.other + '</span>', name: 'other_key', width: 340, sortable: true },
-                    { display: '<span title="Number of objects with other key that also have this key">&rarr; ' + texts.misc.count + '</span>', name: 'from_count', width: 320, sortable: true, align: 'center' }
-                ],
-                searchitems: [
-                    { display: 'Other key', name: 'other_key' }
-                ],
-                sortname: 'to_count',
-                sortorder: 'desc',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
-                        return { 'cell': [
-                            print_value_with_percent(row.together_count, row.to_fraction),
-                            link_to_key(row.other_key),
-                            print_value_with_percent(row.together_count, row.from_fraction),
-                        ] };
-                    });
-                    return data;
-                }
-            });
-        },
-        josm: function(key, filter_type) {
-            create_flexigrid('grid-josm', {
-                url: '/api/2/josm/styles/standard/keys?key=' + encodeURIComponent(key),
-                colModel: [
-                    { display: texts.osm.value, name: 'v', width: 400, sortable: true },
-                    { display: 'Icon', name: 'icon', width: 30, sortable: false, align: 'center' },
-                    { display: 'Line', name: 'line', width: 30, sortable: false, align: 'center' },
-                    { display: 'Area', name: 'area', width: 30, sortable: false, align: 'center' }
-                ],
-                sortname: 'v',
-                sortorder: 'asc',
-                emptymsg: 'No JOSM styles for this key.',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
-                        return { 'cell': [
-                            row.v ? link_to_value(row.k, row.v) : row.b ? (row.b + ' (Boolean)') : '*',
-                            row.icon ? '<img src="/api/2/josm/styles/images?style=standard&image=' + row.icon + '" title="' + row.icon + '" alt=""/>' : '',
-                            '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (10 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
-                            row.area_color ? '<div title="' + row.area_color + '" style="height: 18px; background-color: ' + row.area_color + '"></div>' : ''
-                        ] };
-                    });
-                    return data;
-                }
-            });
-        },
-        wiki: function(key, filter_type) {
-            create_flexigrid('grid-wiki', {
-                url: '/api/2/wiki/keys?key=' + encodeURIComponent(key),
-                colModel: [
-                    { display: 'Language',      name: 'lang',             width: 150, sortable: false },
-                    { display: 'Wiki page',     name: 'title',            width: 160, sortable: false, align: 'right' },
-                    { display: 'Description',   name: 'description',      width: 400, sortable: false },
-                    { display: 'Image',         name: 'image',            width: 120, sortable: false },
-                    { display: 'Objects',       name: 'objects',          width:  80, sortable: false },
-                    { display: 'Implied Tags',  name: 'tags_implied',     width: 120, sortable: false },
-                    { display: 'Combined Tags', name: 'tags_combination', width: 120, sortable: false },
-                    { display: 'Linked Tags',   name: 'tags_linked',      width: 220, sortable: false }
-                ],
-                usepager: false,
-                useRp: false,
-                preProcess: function(data) {
-                    return {
-                        total: data.size,
-                        page: 1,
-                        rows: jQuery.map(data, function(row, i) {
-                            return { 'cell': [
-                                print_language(row.lang, row.language, row.language_en),
-                                print_wiki_link(row.title),
-                                row.description,
-                                row.image == ''   ? empty(texts.misc.no_image) : hover_expand(print_wiki_link(row.image)),
-                                (row.on_node      ? '<img src="/img/types/node.16.png"     alt="yes" width="16" height="16"/>' : '<img src="/img/types/none.16.png" alt="no" width="16" height="16"/>') + ' ' +
-                                (row.on_way       ? '<img src="/img/types/way.16.png"      alt="yes" width="16" height="16"/>' : '<img src="/img/types/none.16.png" alt="no" width="16" height="16"/>') + ' ' +
-                                (row.on_area      ? '<img src="/img/types/area.16.png"     alt="yes" width="16" height="16"/>' : '<img src="/img/types/none.16.png" alt="no" width="16" height="16"/>') + ' ' +
-                                (row.on_relation  ? '<img src="/img/types/relation.16.png" alt="yes" width="16" height="16"/>' : '<img src="/img/types/none.16.png" alt="no" width="16" height="16"/>'),
-                                print_key_or_tag_list(row.tags_implies),
-                                print_key_or_tag_list(row.tags_combination),
-                                print_key_or_tag_list(row.tags_linked)
-                            ]};
-                        })
-                    };
-                }
-            });
-        }
+                            print_image(row.type) + ' ' + texts.osm[row.type],
+                            print_value_with_percent(row.count, row.count_fraction),
+                            print_with_ts(row.values)
+                        ]};
+                    })
+                };
+            }
+        });
+    },
+    values: function(key, filter_type, lang) {
+        create_flexigrid('grid-values', {
+            url: '/api/2/db/keys/values?key=' + encodeURIComponent(key) + '&filter=' + encodeURIComponent(filter_type) + '&lang=' + encodeURIComponent(lang),
+            colModel: [
+                { display: texts.osm.value, name: 'value', width: 200, sortable: true },
+                { display: texts.misc.count, name: 'count', width: 240, sortable: true, align: 'center' },
+                { display: 'Description', name: 'description', width: 600, sortable: false, align: 'left' }
+            ],
+            searchitems: [
+                { display: texts.osm.value, name: 'value' }
+            ],
+            sortname: 'count',
+            sortorder: 'desc',
+            preProcess: function(data) {
+                data.rows = jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        hover_expand(link_to_value(key, row.value)),
+                        print_value_with_percent(row.count, row.fraction),
+                        row.description
+                    ] };
+                });
+                delete data.data;
+                return data;
+            }
+        });
     },
+    keys: function(key, filter_type) {
+        create_flexigrid('grid-keys', {
+            url: '/api/2/db/keys/keys?key=' + encodeURIComponent(key) + '&filter=' + encodeURIComponent(filter_type),
+            colModel: [
+                { display: '<span title="Number of objects with this key that also have the other key">' + texts.misc.count + ' &rarr;</span>', name: 'to_count', width: 320, sortable: true, align: 'center' },
+                { display: '<span title="Key used together with this key">' + texts.pages.key.other_keys_used.other + '</span>', name: 'other_key', width: 340, sortable: true },
+                { display: '<span title="Number of objects with other key that also have this key">&rarr; ' + texts.misc.count + '</span>', name: 'from_count', width: 320, sortable: true, align: 'center' }
+            ],
+            searchitems: [
+                { display: 'Other key', name: 'other_key' }
+            ],
+            sortname: 'to_count',
+            sortorder: 'desc',
+            preProcess: function(data) {
+                data.rows = jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        print_value_with_percent(row.together_count, row.to_fraction),
+                        link_to_key(row.other_key),
+                        print_value_with_percent(row.together_count, row.from_fraction),
+                    ] };
+                });
+                return data;
+            }
+        });
+    },
+    josm: function(key, filter_type) {
+        create_flexigrid('grid-josm', {
+            url: '/api/2/josm/styles/standard/keys?key=' + encodeURIComponent(key),
+            colModel: [
+                { display: texts.osm.value, name: 'v', width: 400, sortable: true },
+                { display: 'Icon', name: 'icon', width: 30, sortable: false, align: 'center' },
+                { display: 'Line', name: 'line', width: 30, sortable: false, align: 'center' },
+                { display: 'Area', name: 'area', width: 30, sortable: false, align: 'center' }
+            ],
+            sortname: 'v',
+            sortorder: 'asc',
+            emptymsg: 'No JOSM styles for this key.',
+            preProcess: function(data) {
+                data.rows = jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        row.v ? link_to_value(row.k, row.v) : row.b ? (row.b + ' (Boolean)') : '*',
+                        row.icon ? '<img src="/api/2/josm/styles/images?style=standard&image=' + row.icon + '" title="' + row.icon + '" alt=""/>' : '',
+                        '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (10 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
+                        row.area_color ? '<div title="' + row.area_color + '" style="height: 18px; background-color: ' + row.area_color + '"></div>' : ''
+                    ] };
+                });
+                return data;
+            }
+        });
+    },
+    wiki: function(key, filter_type) {
+        create_flexigrid('grid-wiki', {
+            url: '/api/2/wiki/keys?key=' + encodeURIComponent(key),
+            colModel: [
+                { display: 'Language',      name: 'lang',             width: 150, sortable: false },
+                { display: 'Wiki page',     name: 'title',            width: 160, sortable: false, align: 'right' },
+                { display: 'Description',   name: 'description',      width: 400, sortable: false },
+                { display: 'Image',         name: 'image',            width: 120, sortable: false },
+                { display: 'Objects',       name: 'objects',          width:  80, sortable: false },
+                { display: 'Implied Tags',  name: 'tags_implied',     width: 120, sortable: false },
+                { display: 'Combined Tags', name: 'tags_combination', width: 120, sortable: false },
+                { display: 'Linked Tags',   name: 'tags_linked',      width: 220, sortable: false }
+            ],
+            usepager: false,
+            useRp: false,
+            preProcess: function(data) {
+                return {
+                    total: data.size,
+                    page: 1,
+                    rows: jQuery.map(data, function(row, i) {
+                        return { 'cell': [
+                            print_language(row.lang, row.language, row.language_en),
+                            print_wiki_link(row.title),
+                            row.description,
+                            row.image == ''   ? empty(texts.misc.no_image) : hover_expand(print_wiki_link(row.image)),
+                            (row.on_node      ? '<img src="/img/types/node.16.png"     alt="yes" width="16" height="16"/>' : '<img src="/img/types/none.16.png" alt="no" width="16" height="16"/>') + ' ' +
+                            (row.on_way       ? '<img src="/img/types/way.16.png"      alt="yes" width="16" height="16"/>' : '<img src="/img/types/none.16.png" alt="no" width="16" height="16"/>') + ' ' +
+                            (row.on_area      ? '<img src="/img/types/area.16.png"     alt="yes" width="16" height="16"/>' : '<img src="/img/types/none.16.png" alt="no" width="16" height="16"/>') + ' ' +
+                            (row.on_relation  ? '<img src="/img/types/relation.16.png" alt="yes" width="16" height="16"/>' : '<img src="/img/types/none.16.png" alt="no" width="16" height="16"/>'),
+                            print_key_or_tag_list(row.tags_implies),
+                            print_key_or_tag_list(row.tags_combination),
+                            print_key_or_tag_list(row.tags_linked)
+                        ]};
+                    })
+                };
+            }
+        });
+    }
 };
 
 function page_init() {
diff --git a/web/viewsjs/reports/characters_in_keys.js.erb b/web/viewsjs/reports/characters_in_keys.js.erb
index ce48a0c..48235dd 100644
--- a/web/viewsjs/reports/characters_in_keys.js.erb
+++ b/web/viewsjs/reports/characters_in_keys.js.erb
@@ -1,84 +1,110 @@
 var create_flexigrid_for = {
-    reports: {
-        characters_in_keys: {
-            whitespace: function() {
-                create_flexigrid('grid-whitespace', {
-                    url: '/api/2/db/keys?filters=characters_space&include=prevalent_values',
-                    colModel: [
-                        { display: texts.osm.key, name: 'key', width: 250, sortable: true },
-                        { display: '<span title="Number of objects with this key"><img src="/img/types/all.16.png" alt=""/> Total</span>',           name: 'count_all',        width: 250, sortable: true, align: 'center' },
-                        { display: 'Users', name: 'users_all', width: 44, sortable: true, align: 'right' },
-                        { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" title="Wiki"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
-                        { display: '<img src="/img/sources/josm.16.png" alt="JOSM" title="JOSM"/>', name: 'in_josm', width: 20, sortable: true, align: 'center' },
-                        //   { display: '<img src="/img/sources/potlatch.16.png" alt="Potlatch 2" title="Potlatch 2"/>', name: 'in_potlatch', width: 20, sortable: true, align: 'center' },
-                        //   { display: '<img src="/img/sources/merkaartor.16.png" alt="Merkaartor" title="Merkaartor"/>', name: 'in_merkaartor', width: 20, sortable: true, align: 'center' },
-                        { display: '<span title="Number of different values for this key">Values</span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
-                        { display: 'Prevalent Values', name: 'prevalent_values', width: 500, sortable: true }
-                    ],
-                    searchitems: [
-                        { display: texts.osm.key, name: 'key' }
-                    ],
-                    sortname: 'count_all',
-                    sortorder: 'desc',
-                    preProcess: function(data) {
-                        data.rows = jQuery.map(data.data, function(row, i) {
-                            return { 'cell': [
-                                link_to_key(row.key),
-                                print_value_with_percent(row.count_all,       row.count_all_fraction),
-                                print_with_ts(row.users_all),
-                                row.in_wiki       ? '&#x2714;' : '-',
-                                row.in_josm       ? '&#x2714;' : '-',
-                            //       row.in_potlatch   ? '&#x2714;' : '-',
-                            //       row.in_merkaartor ? '&#x2714;' : '-',
-                                print_with_ts(row.values_all),
-                                print_prevalent_value_list(row.key, row.prevalent_values)
-                            ] };
-                        });
-                        return data;
-                    }
+    whitespace: function() {
+        create_flexigrid('grid-whitespace', {
+            url: '/api/2/db/keys?filters=characters_space&include=prevalent_values',
+            colModel: [
+                { display: texts.osm.key, name: 'key', width: 250, sortable: true },
+                { display: '<span title="Number of objects with this key"><img src="/img/types/all.16.png" alt=""/> Total</span>',           name: 'count_all',        width: 250, sortable: true, align: 'center' },
+                { display: 'Users', name: 'users_all', width: 44, sortable: true, align: 'right' },
+                { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" title="Wiki"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
+                { display: '<img src="/img/sources/josm.16.png" alt="JOSM" title="JOSM"/>', name: 'in_josm', width: 20, sortable: true, align: 'center' },
+                //   { display: '<img src="/img/sources/potlatch.16.png" alt="Potlatch 2" title="Potlatch 2"/>', name: 'in_potlatch', width: 20, sortable: true, align: 'center' },
+                //   { display: '<img src="/img/sources/merkaartor.16.png" alt="Merkaartor" title="Merkaartor"/>', name: 'in_merkaartor', width: 20, sortable: true, align: 'center' },
+                { display: '<span title="Number of different values for this key">Values</span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
+                { display: 'Prevalent Values', name: 'prevalent_values', width: 500, sortable: true }
+            ],
+            searchitems: [
+                { display: texts.osm.key, name: 'key' }
+            ],
+            sortname: 'count_all',
+            sortorder: 'desc',
+            preProcess: function(data) {
+                data.rows = jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        link_to_key(row.key),
+                        print_value_with_percent(row.count_all,       row.count_all_fraction),
+                        print_with_ts(row.users_all),
+                        row.in_wiki       ? '&#x2714;' : '-',
+                        row.in_josm       ? '&#x2714;' : '-',
+                    //       row.in_potlatch   ? '&#x2714;' : '-',
+                    //       row.in_merkaartor ? '&#x2714;' : '-',
+                        print_with_ts(row.values_all),
+                        print_prevalent_value_list(row.key, row.prevalent_values)
+                    ] };
                 });
-            },
-            problematic: function() {
-                create_flexigrid('grid-problematic', {
-                    url: '/api/2/db/keys?filters=characters_problematic&include=prevalent_values',
-                    colModel: [
-                        { display: texts.osm.key, name: 'key', width: 250, sortable: true },
-                        { display: '<span title="Number of objects with this key"><img src="/img/types/all.16.png" alt=""/> Total</span>',           name: 'count_all',        width: 250, sortable: true, align: 'center' },
-                        { display: 'Users', name: 'users_all', width: 44, sortable: true, align: 'right' },
-                        { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" title="Wiki"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
-                        { display: '<img src="/img/sources/josm.16.png" alt="JOSM" title="JOSM"/>', name: 'in_josm', width: 20, sortable: true, align: 'center' },
-                        //   { display: '<img src="/img/sources/potlatch.16.png" alt="Potlatch 2" title="Potlatch 2"/>', name: 'in_potlatch', width: 20, sortable: true, align: 'center' },
-                        //   { display: '<img src="/img/sources/merkaartor.16.png" alt="Merkaartor" title="Merkaartor"/>', name: 'in_merkaartor', width: 20, sortable: true, align: 'center' },
-                        { display: '<span title="Number of different values for this key">Values</span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
-                        { display: 'Prevalent Values', name: 'prevalent_values', width: 500, sortable: true }
-                    ],
-                    searchitems: [
-                        { display: texts.osm.key, name: 'key' }
-                    ],
-                    sortname: 'count_all',
-                    sortorder: 'desc',
-                    preProcess: function(data) {
-                        data.rows = jQuery.map(data.data, function(row, i) {
-                            return { 'cell': [
-                                link_to_key(row.key),
-                                print_value_with_percent(row.count_all,       row.count_all_fraction),
-                                print_with_ts(row.users_all),
-                                row.in_wiki       ? '&#x2714;' : '-',
-                                row.in_josm       ? '&#x2714;' : '-',
-                            //       row.in_potlatch   ? '&#x2714;' : '-',
-                            //       row.in_merkaartor ? '&#x2714;' : '-',
-                                print_with_ts(row.values_all),
-                                print_prevalent_value_list(row.key, row.prevalent_values)
-                            ] };
-                        });
-                        return data;
-                    }
+                return data;
+            }
+        });
+    },
+    problematic: function() {
+        create_flexigrid('grid-problematic', {
+            url: '/api/2/db/keys?filters=characters_problematic&include=prevalent_values',
+            colModel: [
+                { display: texts.osm.key, name: 'key', width: 250, sortable: true },
+                { display: '<span title="Number of objects with this key"><img src="/img/types/all.16.png" alt=""/> Total</span>',           name: 'count_all',        width: 250, sortable: true, align: 'center' },
+                { display: 'Users', name: 'users_all', width: 44, sortable: true, align: 'right' },
+                { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" title="Wiki"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
+                { display: '<img src="/img/sources/josm.16.png" alt="JOSM" title="JOSM"/>', name: 'in_josm', width: 20, sortable: true, align: 'center' },
+                //   { display: '<img src="/img/sources/potlatch.16.png" alt="Potlatch 2" title="Potlatch 2"/>', name: 'in_potlatch', width: 20, sortable: true, align: 'center' },
+                //   { display: '<img src="/img/sources/merkaartor.16.png" alt="Merkaartor" title="Merkaartor"/>', name: 'in_merkaartor', width: 20, sortable: true, align: 'center' },
+                { display: '<span title="Number of different values for this key">Values</span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
+                { display: 'Prevalent Values', name: 'prevalent_values', width: 500, sortable: true }
+            ],
+            searchitems: [
+                { display: texts.osm.key, name: 'key' }
+            ],
+            sortname: 'count_all',
+            sortorder: 'desc',
+            preProcess: function(data) {
+                data.rows = jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        link_to_key(row.key),
+                        print_value_with_percent(row.count_all,       row.count_all_fraction),
+                        print_with_ts(row.users_all),
+                        row.in_wiki       ? '&#x2714;' : '-',
+                        row.in_josm       ? '&#x2714;' : '-',
+                    //       row.in_potlatch   ? '&#x2714;' : '-',
+                    //       row.in_merkaartor ? '&#x2714;' : '-',
+                        print_with_ts(row.values_all),
+                        print_prevalent_value_list(row.key, row.prevalent_values)
+                    ] };
                 });
+                return data;
             }
-        }
+        });
     }
 };
 
 function page_init() {
-    page_init2();
+    init_tabs([]);
+
+    var data = <%= i = '@'; %w(plain colon letters space problem rest).map{ |type| i=i.next; [ { :label => i, :value => @db.stats('characters_in_keys_' + type) } ] }.to_json %>;
+
+    var w=968, h=50;
+
+    var vis = new pv.Panel()
+        .canvas('canvas')
+        .width(w + 20)
+        .height(h);
+
+    var colors = <%= { :A => '#2ca02c', :B => '#98df8a', :C => '#dbdb8d', :D => '#d62728', :E => '#ff9896', :F => '#aec7e8' }.to_json %>;
+
+    var scale = pv.Scale.linear(0, <%= @db.stats('num_keys') %>).range(0, w);
+
+    vis.add(pv.Layout.Stack)
+        .orient('left-top')
+        .left(10)
+        .layers(data)
+        .x(10)
+        .y(function(d) { return scale(d.value); })
+    .layer.add(pv.Bar)
+        .fillStyle(function(d) { return colors[d.label]; })
+        .height(20)
+    .anchor('bottom')
+        .add(pv.Label)
+        .font('12px Arial,sans-serif')
+        .top(46)
+        .text(function(d) { return d.label; });
+
+    vis.render();
 }
diff --git a/web/viewsjs/reports/frequently_used_keys_without_wiki_page.js.erb b/web/viewsjs/reports/frequently_used_keys_without_wiki_page.js.erb
index 465059f..cf3a846 100644
--- a/web/viewsjs/reports/frequently_used_keys_without_wiki_page.js.erb
+++ b/web/viewsjs/reports/frequently_used_keys_without_wiki_page.js.erb
@@ -1,38 +1,34 @@
-var create_flexigrid_for = {
-    reports: {
-        frequently_used_keys_without_wiki_page: function(english) {
-            create_flexigrid('grid-keys', {
-                url: '/api/2/reports/frequently_used_keys_without_wiki_page?english=' + english,
-                colModel: [
-                    { display: 'Create Wiki Page...', name: 'create_wiki_page', width: 200, sortable: false },
-                    { display: texts.osm.key, name: 'key', width: 180, sortable: true },
-                    { display: '<span title="Number of objects with this key">Total</span>', name: 'count_all', width: 70, sortable: true, align: 'right' },
-                    { display: 'Users', name: 'users_all', width: 44, sortable: true, align: 'right' },
-                    { display: '<span title="Number of different values for this key">Values</span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
-                    { display: 'Prevalent Values', name: 'prevalent_values', width: 500, sortable: true }
-                ],
-                searchitems: [
-                    { display: texts.osm.key, name: 'key' }
-                ],
-                sortname: 'count_all',
-                sortorder: 'desc',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
-                        return { 'cell': [
-                            print_wiki_link('Key:' + row.key, { edit: true }),
-                            link_to_key(row.key),
-                            print_with_ts(row.count_all),
-                            print_with_ts(row.users_all),
-                            print_with_ts(row.values_all),
-                            print_prevalent_value_list(row.key, row.prevalent_values)
-                        ] };
-                    });
-                    return data;
-                }
+function create_flexigrid_with_option(english) {
+    create_flexigrid('grid-keys', {
+        url: '/api/2/reports/frequently_used_keys_without_wiki_page?english=' + english,
+        colModel: [
+            { display: 'Create Wiki Page...', name: 'create_wiki_page', width: 200, sortable: false },
+            { display: texts.osm.key, name: 'key', width: 180, sortable: true },
+            { display: '<span title="Number of objects with this key">Total</span>', name: 'count_all', width: 70, sortable: true, align: 'right' },
+            { display: 'Users', name: 'users_all', width: 44, sortable: true, align: 'right' },
+            { display: '<span title="Number of different values for this key">Values</span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
+            { display: 'Prevalent Values', name: 'prevalent_values', width: 500, sortable: true }
+        ],
+        searchitems: [
+            { display: texts.osm.key, name: 'key' }
+        ],
+        sortname: 'count_all',
+        sortorder: 'desc',
+        preProcess: function(data) {
+            data.rows = jQuery.map(data.data, function(row, i) {
+                return { 'cell': [
+                    print_wiki_link('Key:' + row.key, { edit: true }),
+                    link_to_key(row.key),
+                    print_with_ts(row.count_all),
+                    print_with_ts(row.users_all),
+                    print_with_ts(row.values_all),
+                    print_prevalent_value_list(row.key, row.prevalent_values)
+                ] };
             });
+            return data;
         }
-    }
-};
+    });
+}
 
 function page_init() {
     page_init2();
diff --git a/web/viewsjs/reports/josm_styles.js.erb b/web/viewsjs/reports/josm_styles.js.erb
index 075ff02..4e4ec13 100644
--- a/web/viewsjs/reports/josm_styles.js.erb
+++ b/web/viewsjs/reports/josm_styles.js.erb
@@ -1,36 +1,32 @@
-var create_flexigrid_for = {
-    reports: {
-        josm_styles: function(stylename) {
-            create_flexigrid('grid-rules', {
-                url: '/api/2/josm/styles/' + stylename,
-                colModel: [
-                    { display: texts.osm.key,   name: 'k', width: 300, sortable: true },
-                    { display: texts.osm.value, name: 'v', width: 300, sortable: true },
-                    { display: 'Icon', name: 'icon', width: 30, sortable: false, align: 'center' },
-                    { display: 'Line', name: 'line', width: 30, sortable: false, align: 'center' },
-                    { display: 'Area', name: 'area', width: 30, sortable: false, align: 'center' }
-                ],
-                searchitems: [
-                    { display: 'Key/Value', name: 'k' }
-                ],
-                sortname: 'k',
-                sortorder: 'asc',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
-                        return { 'cell': [
-                            link_to_key(row.k),
-                            row.v ? link_to_value(row.k, row.v) : row.b ? (row.b + ' (Boolean)') : '*',
-                            row.icon ? '<img src="/api/2/josm/styles/images?style=standard&image=' + row.icon + '" title="' + row.icon + '" alt=""/>' : '',
-                            '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (10 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
-                            row.area_color ? '<div title="' + row.area_color + '" style="height: 18px; background-color: ' + row.area_color + '"></div>' : ''
-                        ] };
-                    });
-                    return data;
-                }
+function create_flexigrid_with_option(stylename) {
+    create_flexigrid('grid-rules', {
+        url: '/api/2/josm/styles/' + stylename,
+        colModel: [
+            { display: texts.osm.key,   name: 'k', width: 300, sortable: true },
+            { display: texts.osm.value, name: 'v', width: 300, sortable: true },
+            { display: 'Icon', name: 'icon', width: 30, sortable: false, align: 'center' },
+            { display: 'Line', name: 'line', width: 30, sortable: false, align: 'center' },
+            { display: 'Area', name: 'area', width: 30, sortable: false, align: 'center' }
+        ],
+        searchitems: [
+            { display: 'Key/Value', name: 'k' }
+        ],
+        sortname: 'k',
+        sortorder: 'asc',
+        preProcess: function(data) {
+            data.rows = jQuery.map(data.data, function(row, i) {
+                return { 'cell': [
+                    link_to_key(row.k),
+                    row.v ? link_to_value(row.k, row.v) : row.b ? (row.b + ' (Boolean)') : '*',
+                    row.icon ? '<img src="/api/2/josm/styles/images?style=standard&image=' + row.icon + '" title="' + row.icon + '" alt=""/>' : '',
+                    '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (10 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
+                    row.area_color ? '<div title="' + row.area_color + '" style="height: 18px; background-color: ' + row.area_color + '"></div>' : ''
+                ] };
             });
+            return data;
         }
-    }
-};
+    });
+}
 
 function page_init() {
     page_init2();
diff --git a/web/viewsjs/reports/key_lengths.js.erb b/web/viewsjs/reports/key_lengths.js.erb
index 897df68..65ff8ce 100644
--- a/web/viewsjs/reports/key_lengths.js.erb
+++ b/web/viewsjs/reports/key_lengths.js.erb
@@ -1,49 +1,115 @@
 var create_flexigrid_for = {
-    reports: {
-        key_lengths: {
-            keys: function() {
-                create_flexigrid('grid-keys', {
-                    url: '/api/2/db/keys?include=prevalent_values',
-                    colModel: [
-                        { display: 'Length', name: 'length', width: 60, sortable: true, align: 'right' },
-                        { display: texts.osm.key, name: 'key', width: 180, sortable: true },
-                        { display: 'Number of Objects', name: 'count_all', width: 250, sortable: true, align: 'center' },
-                        { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" title="Wiki"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
-                        { display: '<img src="/img/sources/josm.16.png" alt="JOSM" title="JOSM"/>', name: 'in_josm', width: 20, sortable: true, align: 'center' },
-                        //   { display: '<img src="/img/sources/potlatch.16.png" alt="Potlatch 2" title="Potlatch 2"/>', name: 'in_potlatch', width: 20, sortable: true, align: 'center' },
-                        //   { display: '<img src="/img/sources/merkaartor.16.png" alt="Merkaartor" title="Merkaartor"/>', name: 'in_merkaartor', width: 20, sortable: true, align: 'center' },
-                        { display: '<span title="Number of different values for this key">Values</span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
-                        { display: 'Prevalent Values', name: 'prevalent_values', width: 500, sortable: true }
-                    ],
-                    searchitems: [
-                        { display: texts.osm.key, name: 'key' }
-                    ],
-                    sortname: 'length',
-                    sortorder: 'asc',
-                    preProcess: function(data) {
-                        data.rows = jQuery.map(data.data, function(row, i) {
-                            return { 'cell': [
-                                row.key.length,
-                                link_to_key(row.key),
-                                print_value_with_percent(row.count_all,       row.count_all_fraction),
-                                row.in_wiki       ? '&#x2714;' : '-',
-                                row.in_josm       ? '&#x2714;' : '-',
-                            //       row.in_potlatch   ? '&#x2714;' : '-',
-                            //       row.in_merkaartor ? '&#x2714;' : '-',
-                                print_with_ts(row.values_all),
-                                print_prevalent_value_list(row.key, row.prevalent_values)
-                            ] };
-                        });
-                        return data;
-                    }
+    keys: function() {
+        create_flexigrid('grid-keys', {
+            url: '/api/2/db/keys?include=prevalent_values',
+            colModel: [
+                { display: 'Length', name: 'length', width: 60, sortable: true, align: 'right' },
+                { display: texts.osm.key, name: 'key', width: 180, sortable: true },
+                { display: 'Number of Objects', name: 'count_all', width: 250, sortable: true, align: 'center' },
+                { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" title="Wiki"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
+                { display: '<img src="/img/sources/josm.16.png" alt="JOSM" title="JOSM"/>', name: 'in_josm', width: 20, sortable: true, align: 'center' },
+                //   { display: '<img src="/img/sources/potlatch.16.png" alt="Potlatch 2" title="Potlatch 2"/>', name: 'in_potlatch', width: 20, sortable: true, align: 'center' },
+                //   { display: '<img src="/img/sources/merkaartor.16.png" alt="Merkaartor" title="Merkaartor"/>', name: 'in_merkaartor', width: 20, sortable: true, align: 'center' },
+                { display: '<span title="Number of different values for this key">Values</span>', name: 'values_all', width: 70, sortable: true, align: 'right' },
+                { display: 'Prevalent Values', name: 'prevalent_values', width: 500, sortable: true }
+            ],
+            searchitems: [
+                { display: texts.osm.key, name: 'key' }
+            ],
+            sortname: 'length',
+            sortorder: 'asc',
+            preProcess: function(data) {
+                data.rows = jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        row.key.length,
+                        link_to_key(row.key),
+                        print_value_with_percent(row.count_all,       row.count_all_fraction),
+                        row.in_wiki       ? '&#x2714;' : '-',
+                        row.in_josm       ? '&#x2714;' : '-',
+                    //       row.in_potlatch   ? '&#x2714;' : '-',
+                    //       row.in_merkaartor ? '&#x2714;' : '-',
+                        print_with_ts(row.values_all),
+                        print_prevalent_value_list(row.key, row.prevalent_values)
+                    ] };
                 });
-            },
-            histogram: function() {
+                return data;
             }
-        }
+        });
     }
 };
 
+<%
+hist = Array.new
+@db.execute('SELECT length(key) AS length, count(*) AS count FROM db.keys GROUP BY length(key) ORDER BY length(key)') do |row|
+    hist[row['length'].to_i] = row['count'].to_i
+end
+hist = hist.map{ |item| item.nil? ? 0 : item } %>
+
 function page_init() {
-    page_init2();
+    init_tabs([]);
+
+    var data = <%= hist.to_json %>;
+
+    var w=900, h=400, bar_width=6;
+
+    var vis = new pv.Panel()
+        .canvas('canvas')
+        .fillStyle('#ffffff')
+        .strokeStyle('#d0d0c8')
+        .width(w)
+        .height(h+4)
+        .top(10)
+        .right(15)
+        .bottom(40)
+        .left(60)
+        .lineWidth(1);
+
+    vis.add(pv.Label)
+        .data(['Key length'])
+        .font('12px Arial,sans-serif')
+        .bottom(-36)
+        .left(w/2)
+        .textAlign('center');
+
+    vis.add(pv.Label)
+        .data(['Number of keys'])
+        .font('12px Arial,sans-serif')
+        .left(-48)
+        .bottom(h/2)
+        .textAlign('center')
+        .textAngle(-Math.PI/2);
+
+    var x = pv.Scale.linear(0, <%= hist.size %>).range(bar_width, w - bar_width);
+    var y = pv.Scale.linear(0, <%= hist.max %>).range(0, h);
+
+    var bar = vis.add(pv.Bar)
+        .data(data)
+        .bottom(1)
+        .fillStyle('#083e76')
+        .left(function() { return x(this.index) - bar_width/2; })
+        .height(y)
+        .title(function(d) { return '' + d + ' keys of length ' + this.index; })
+        .width(bar_width);
+
+    vis.add(pv.Rule)
+        .data(y.ticks(10))
+        .bottom(y)
+        .left(-5)
+        .width(-5)
+    .anchor("left").add(pv.Label)
+        .font('10px Arial,sans-serif')
+        .textMargin(8)
+        .text(x.tickFormat);
+
+    vis.add(pv.Rule)
+        .data(x.ticks(10))
+        .left(x)
+        .bottom(-2)
+        .height(-5)
+    .anchor("bottom").add(pv.Label)
+        .font('10px Arial,sans-serif')
+        .textMargin(8)
+        .text(x.tickFormat);
+        
+    vis.render();
 }
diff --git a/web/viewsjs/search.js.erb b/web/viewsjs/search.js.erb
index 8c2efcc..07c3cdf 100644
--- a/web/viewsjs/search.js.erb
+++ b/web/viewsjs/search.js.erb
@@ -1,73 +1,71 @@
 var create_flexigrid_for = {
-    search: {
-        keys: function(query) {
-            create_flexigrid('grid-keys', {
-                url: '/api/2/db/keys?query=' + encodeURIComponent(query),
-                colModel: [
-                    { display: texts.misc.count, name: 'count_all', width: 80, sortable: true, align: 'right' },
-                    { display: texts.osm.key, name: 'key', width: 500, sortable: true }
-                ],
-                sortname: 'count_all',
-                sortorder: 'desc',
-                emptymsg: 'No keys found.',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
-                        return { 'cell': [
-                            print_with_ts(row.count_all),
-                            link_to_key_with_highlight(row.key, query)
-                        ] };
-                    });
-                    return data;
-                }
-            });
-        },
-        values: function(query) {
-            create_flexigrid('grid-values', {
-                url: '/api/2/search/values?q=' + encodeURIComponent(query),
-                colModel: [
-                    { display: texts.misc.count, name: 'count_all', width: 80, sortable: true, align: 'right' },
-                    { display: texts.osm.key, name: 'key', width: 250, sortable: true },
-                    { display: texts.osm.value, name: 'value', width: 500, sortable: true }
-                ],
-                sortname: 'count_all',
-                sortorder: 'desc',
-                emptymsg: 'No values found.',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
-                        return { 'cell': [
-                            print_with_ts(row.count_all),
-                            link_to_key(row.key),
-                            link_to_value_with_highlight(row.key, row.value, query)
-                        ] };
-                    });
-                    return data;
-                }
-            });
-        },
-        tags: function(query) {
-            var q = query.split('=', 2);
-            create_flexigrid('grid-tags', {
-                url: '/api/2/search/tags?q=' + encodeURIComponent(query),
-                colModel: [
-                    { display: texts.misc.count, name: 'count_all', width: 80, sortable: true, align: 'right' },
-                    { display: texts.osm.key, name: 'key', width: 300, sortable: true },
-                    { display: texts.osm.value, name: 'value', width: 500, sortable: true }
-                ],
-                sortname: 'count_all',
-                sortorder: 'desc',
-                emptymsg: 'No tags found.',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
-                        return { 'cell': [
-                            print_with_ts(row.count_all),
-                            link_to_key_with_highlight(row.key, q[0]),
-                            link_to_value_with_highlight(row.key, row.value, q[1])
-                        ] };
-                    });
-                    return data;
-                }
-            });
-        }
+    keys: function(query) {
+        create_flexigrid('grid-keys', {
+            url: '/api/2/db/keys?query=' + encodeURIComponent(query),
+            colModel: [
+                { display: texts.misc.count, name: 'count_all', width: 80, sortable: true, align: 'right' },
+                { display: texts.osm.key, name: 'key', width: 500, sortable: true }
+            ],
+            sortname: 'count_all',
+            sortorder: 'desc',
+            emptymsg: 'No keys found.',
+            preProcess: function(data) {
+                data.rows = jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        print_with_ts(row.count_all),
+                        link_to_key_with_highlight(row.key, query)
+                    ] };
+                });
+                return data;
+            }
+        });
+    },
+    values: function(query) {
+        create_flexigrid('grid-values', {
+            url: '/api/2/search/values?q=' + encodeURIComponent(query),
+            colModel: [
+                { display: texts.misc.count, name: 'count_all', width: 80, sortable: true, align: 'right' },
+                { display: texts.osm.key, name: 'key', width: 250, sortable: true },
+                { display: texts.osm.value, name: 'value', width: 500, sortable: true }
+            ],
+            sortname: 'count_all',
+            sortorder: 'desc',
+            emptymsg: 'No values found.',
+            preProcess: function(data) {
+                data.rows = jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        print_with_ts(row.count_all),
+                        link_to_key(row.key),
+                        link_to_value_with_highlight(row.key, row.value, query)
+                    ] };
+                });
+                return data;
+            }
+        });
+    },
+    tags: function(query) {
+        var q = query.split('=', 2);
+        create_flexigrid('grid-tags', {
+            url: '/api/2/search/tags?q=' + encodeURIComponent(query),
+            colModel: [
+                { display: texts.misc.count, name: 'count_all', width: 80, sortable: true, align: 'right' },
+                { display: texts.osm.key, name: 'key', width: 300, sortable: true },
+                { display: texts.osm.value, name: 'value', width: 500, sortable: true }
+            ],
+            sortname: 'count_all',
+            sortorder: 'desc',
+            emptymsg: 'No tags found.',
+            preProcess: function(data) {
+                data.rows = jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        print_with_ts(row.count_all),
+                        link_to_key_with_highlight(row.key, q[0]),
+                        link_to_value_with_highlight(row.key, row.value, q[1])
+                    ] };
+                });
+                return data;
+            }
+        });
     }
 };
 
diff --git a/web/viewsjs/tag.js.erb b/web/viewsjs/tag.js.erb
index 0fd4023..070912e 100644
--- a/web/viewsjs/tag.js.erb
+++ b/web/viewsjs/tag.js.erb
@@ -1,117 +1,115 @@
 var create_flexigrid_for = {
-    tag: {
-        overview: function(key, value, filter_type) {
-            create_flexigrid('grid-overview', {
-                url: '/api/3/db/tags/overview?key=' + encodeURIComponent(key) + '&value=' + encodeURIComponent(value),
-                colModel: [
-                    { display: 'Type', name: 'type', width: 100, sortable: true },
-                    { display: 'Number of objects', name: 'count', width: 260, sortable: true, align: 'center' }
-                ],
-                usepager: false,
-                useRp: false,
-                preProcess: function(data) {
-                    return {
-                        total: 4,
-                        page: 1,
-                        rows: jQuery.map(data, function(row, i) {
-                            return { 'cell': [
-                                print_image(row.type) + ' ' + texts.osm[row.type],
-                                print_value_with_percent(row.count, row.count_fraction)
-                            ]};
-                        })
-                    };
-                }
-            });
-        },
-        combinations: function(key, value, filter_type) {
-            create_flexigrid('grid-combinations', {
-                url: '/api/2/db/tags/combinations?key=' + encodeURIComponent(key) + '&value=' + encodeURIComponent(value) + '&filter=' + encodeURIComponent(filter_type),
-                colModel: [
-                    { display: '<span title="Number of objects with this tag that also have the other tag">' + texts.misc.count + ' &rarr;</span>', name: 'to_count', width: 320, sortable: true, align: 'center' },
-                    { display: '<span title="Tag used together with this tag">' + texts.pages.tag.other_tags_used.other + '</span>', name: 'other_tag', width: 340, sortable: true },
-                    { display: '<span title="Number of objects with other tag that also have this tag">&rarr; ' + texts.misc.count + '</span>', name: 'from_count', width: 320, sortable: true, align: 'center' }
-                ],
-                searchitems: [
-                    { display: 'Other tag', name: 'other_tag' }
-                ],
-                sortname: 'to_count',
-                sortorder: 'desc',
-                emptymsg: 'No combinations found (only checked the most common ones).',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
+    overview: function(key, value, filter_type) {
+        create_flexigrid('grid-overview', {
+            url: '/api/3/db/tags/overview?key=' + encodeURIComponent(key) + '&value=' + encodeURIComponent(value),
+            colModel: [
+                { display: 'Type', name: 'type', width: 100, sortable: true },
+                { display: 'Number of objects', name: 'count', width: 260, sortable: true, align: 'center' }
+            ],
+            usepager: false,
+            useRp: false,
+            preProcess: function(data) {
+                return {
+                    total: 4,
+                    page: 1,
+                    rows: jQuery.map(data, function(row, i) {
                         return { 'cell': [
-                            print_value_with_percent(row.together_count, row.to_fraction),
-                            link_to_key_or_tag(row.other_key, row.other_value),
-                            print_value_with_percent(row.together_count, row.from_fraction),
-                        ] };
-                    });
-                    return data;
-                }
-            });
-        },
-        wiki: function(key, value) {
-            create_flexigrid('grid-wiki', {
-                url: '/api/2/wiki/tags?key=' + encodeURIComponent(key) + '&value=' + encodeURIComponent(value),
-                colModel: [
-                    { display: 'Language',      name: 'lang',             width: 150, sortable: false },
-                    { display: 'Wiki page',     name: 'title',            width: 200, sortable: false, align: 'right' },
-                    { display: 'Description',   name: 'description',      width: 400, sortable: false },
-                    { display: 'Image',         name: 'image',            width: 120, sortable: false },
-                    { display: 'Objects',       name: 'objects',          width:  80, sortable: false },
-                    { display: 'Implied Tags',  name: 'tags_implied',     width: 120, sortable: false },
-                    { display: 'Combined Tags', name: 'tags_combination', width: 120, sortable: false },
-                    { display: 'Linked Tags',   name: 'tags_linked',      width: 220, sortable: false }
-                ],
-                usepager: false,
-                useRp: false,
-                preProcess: function(data) {
-                    return {
-                        total: data.size,
-                        page: 1,
-                        rows: jQuery.map(data, function(row, i) {
-                            return { 'cell': [
-                                print_language(row.lang, row.language, row.language_en),
-                                print_wiki_link(row.title),
-                                row.description,
-                                row.image == ''   ? empty(texts.misc.no_image) : hover_expand(print_wiki_link(row.image)),
-                                (row.on_node      ? '<img src="/img/types/node.16.png"     alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
-                                (row.on_way       ? '<img src="/img/types/way.16.png"      alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
-                                (row.on_area      ? '<img src="/img/types/area.16.png"     alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
-                                (row.on_relation  ? '<img src="/img/types/relation.16.png" alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>'),
-                                print_key_or_tag_list(row.tags_implies),
-                                print_key_or_tag_list(row.tags_combination),
-                                print_key_or_tag_list(row.tags_linked)
-                            ]};
-                        })
-                    };
-                }
-            });
-        },
-        josm: function(key, value) {
-            create_flexigrid('grid-josm', {
-                url: '/api/2/josm/styles/standard/tags?key=' + encodeURIComponent(key) + '&value=' + encodeURIComponent(value),
-                colModel: [
-                    { display: texts.osm.value, name: 'v',    width: 400, sortable: false },
-                    { display: 'Icon', name: 'icon', width: 30, sortable: false, align: 'center' },
-                    { display: 'Line', name: 'line', width: 30, sortable: false, align: 'center' },
-                    { display: 'Area', name: 'area', width: 30, sortable: false, align: 'center' }
-                ],
-                sortname: 'v',
-                sortorder: 'asc',
-                emptymsg: 'No JOSM styles for this tag.',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
+                            print_image(row.type) + ' ' + texts.osm[row.type],
+                            print_value_with_percent(row.count, row.count_fraction)
+                        ]};
+                    })
+                };
+            }
+        });
+    },
+    combinations: function(key, value, filter_type) {
+        create_flexigrid('grid-combinations', {
+            url: '/api/2/db/tags/combinations?key=' + encodeURIComponent(key) + '&value=' + encodeURIComponent(value) + '&filter=' + encodeURIComponent(filter_type),
+            colModel: [
+                { display: '<span title="Number of objects with this tag that also have the other tag">' + texts.misc.count + ' &rarr;</span>', name: 'to_count', width: 320, sortable: true, align: 'center' },
+                { display: '<span title="Tag used together with this tag">' + texts.pages.tag.other_tags_used.other + '</span>', name: 'other_tag', width: 340, sortable: true },
+                { display: '<span title="Number of objects with other tag that also have this tag">&rarr; ' + texts.misc.count + '</span>', name: 'from_count', width: 320, sortable: true, align: 'center' }
+            ],
+            searchitems: [
+                { display: 'Other tag', name: 'other_tag' }
+            ],
+            sortname: 'to_count',
+            sortorder: 'desc',
+            emptymsg: 'No combinations found (only checked the most common ones).',
+            preProcess: function(data) {
+                data.rows = jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        print_value_with_percent(row.together_count, row.to_fraction),
+                        link_to_key_or_tag(row.other_key, row.other_value),
+                        print_value_with_percent(row.together_count, row.from_fraction),
+                    ] };
+                });
+                return data;
+            }
+        });
+    },
+    wiki: function(key, value) {
+        create_flexigrid('grid-wiki', {
+            url: '/api/2/wiki/tags?key=' + encodeURIComponent(key) + '&value=' + encodeURIComponent(value),
+            colModel: [
+                { display: 'Language',      name: 'lang',             width: 150, sortable: false },
+                { display: 'Wiki page',     name: 'title',            width: 200, sortable: false, align: 'right' },
+                { display: 'Description',   name: 'description',      width: 400, sortable: false },
+                { display: 'Image',         name: 'image',            width: 120, sortable: false },
+                { display: 'Objects',       name: 'objects',          width:  80, sortable: false },
+                { display: 'Implied Tags',  name: 'tags_implied',     width: 120, sortable: false },
+                { display: 'Combined Tags', name: 'tags_combination', width: 120, sortable: false },
+                { display: 'Linked Tags',   name: 'tags_linked',      width: 220, sortable: false }
+            ],
+            usepager: false,
+            useRp: false,
+            preProcess: function(data) {
+                return {
+                    total: data.size,
+                    page: 1,
+                    rows: jQuery.map(data, function(row, i) {
                         return { 'cell': [
-                            row.v ? link_to_value(row.k, row.v) : row.b ? (row.b + ' (Boolean)') : '*',
-                            row.icon ? '<img src="/api/2/josm/styles/images?style=standard&image=' + row.icon + '" title="' + row.icon + '" alt=""/>' : '',
-                            '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (10 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
-                            row.area_color ? '<div title="' + row.area_color + '" style="height: 18px; background-color: ' + row.area_color + '"></div>' : ''
-                        ] };
-                    });
-                    return data;
-                }
-            });
-        }
+                            print_language(row.lang, row.language, row.language_en),
+                            print_wiki_link(row.title),
+                            row.description,
+                            row.image == ''   ? empty(texts.misc.no_image) : hover_expand(print_wiki_link(row.image)),
+                            (row.on_node      ? '<img src="/img/types/node.16.png"     alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
+                            (row.on_way       ? '<img src="/img/types/way.16.png"      alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
+                            (row.on_area      ? '<img src="/img/types/area.16.png"     alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>') + ' ' +
+                            (row.on_relation  ? '<img src="/img/types/relation.16.png" alt="yes"/>' : '<img src="/img/types/none.16.png" alt="no"/>'),
+                            print_key_or_tag_list(row.tags_implies),
+                            print_key_or_tag_list(row.tags_combination),
+                            print_key_or_tag_list(row.tags_linked)
+                        ]};
+                    })
+                };
+            }
+        });
+    },
+    josm: function(key, value) {
+        create_flexigrid('grid-josm', {
+            url: '/api/2/josm/styles/standard/tags?key=' + encodeURIComponent(key) + '&value=' + encodeURIComponent(value),
+            colModel: [
+                { display: texts.osm.value, name: 'v',    width: 400, sortable: false },
+                { display: 'Icon', name: 'icon', width: 30, sortable: false, align: 'center' },
+                { display: 'Line', name: 'line', width: 30, sortable: false, align: 'center' },
+                { display: 'Area', name: 'area', width: 30, sortable: false, align: 'center' }
+            ],
+            sortname: 'v',
+            sortorder: 'asc',
+            emptymsg: 'No JOSM styles for this tag.',
+            preProcess: function(data) {
+                data.rows = jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        row.v ? link_to_value(row.k, row.v) : row.b ? (row.b + ' (Boolean)') : '*',
+                        row.icon ? '<img src="/api/2/josm/styles/images?style=standard&image=' + row.icon + '" title="' + row.icon + '" alt=""/>' : '',
+                        '<div>' + (row.line_width > 0 ? '<div title="' + row.line_color + '" style="height: ' + row.line_width + 'px; margin-top: ' + (10 - Math.round(row.line_width/2)) + 'px; padding: 0; background-color: ' + row.line_color + '"></div>' : '') + '</div>',
+                        row.area_color ? '<div title="' + row.area_color + '" style="height: 18px; background-color: ' + row.area_color + '"></div>' : ''
+                    ] };
+                });
+                return data;
+            }
+        });
     }
 };