Move flexigrid table definitions into javascript files for each page which are created dynamically according to the language.

25 files changed, 836 insertions, 804 deletions

diff --git a/web/public/js/taginfo.js b/web/public/js/taginfo.js
index 5e713cd..29c7969 100644
--- a/web/public/js/taginfo.js
+++ b/web/public/js/taginfo.js
@@ -395,652 +395,3 @@ function init_tabs(page, params) {
     });
 }
 
-var create_flexigrid_for = {
-    keys: {
-        keys: function() {
-            create_flexigrid('grid-keys', {
-                url: '/api/2/db/keys?include=prevalent_values',
-                colModel: [
-                    { display: texts.osm.key, name: 'key', width: 160, sortable: true },
-                    { display: '<span title="Number of objects with this key (as absolute value and as percentage of all nodes, ways, and relations)"><img src="/img/types/all.16.png" alt=""/> Total</span>', name: 'count_all', width: 200, sortable: true, align: 'center' },
-                    { display: '<span title="Number of nodes with this key (as absolute value and as percentage of tagged nodes, ie. nodes without any tags are ignored)"><img src="/img/types/node.16.png" alt=""/> Nodes</span>', name: 'count_nodes', width: 220, sortable: true, align: 'center' },
-                    { display: '<span title="Number of ways with this key (as absolute value and as percentage of all ways)"><img src="/img/types/way.16.png" alt=""/> Ways</span>', name: 'count_ways', width: 220, sortable: true, align: 'center' },
-                    { display: '<span title="Number of relations with this key (as absolute value and as percentage of all relations)"><img src="/img/types/relation.16.png" alt=""/> Relation</span>', name: 'count_relations',  width: 220, sortable: true, align: 'center' },
-                    { display: '<span title="Number of different users who last changed objects with this key">Users</span>', name: 'users_all', width: 44, sortable: true, align: 'right' },
-                    { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" title="Key has a wiki page"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
-                    { display: '<img src="/img/sources/josm.16.png" alt="JOSM" title="Key appears in JOSM config"/>', name: 'in_josm', 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: '<span title="Up to ten of the most common values for this key (only if more than 1% of tags with this key have this value)">Prevalent Values</span>', 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_value_with_percent(row.count_nodes,     row.count_nodes_fraction),
-                            print_value_with_percent(row.count_ways,      row.count_ways_fraction),
-                            print_value_with_percent(row.count_relations, row.count_relations_fraction),
-                            print_with_ts(row.users_all),
-                            row.in_wiki ? '&#x2714;' : '-',
-                            row.in_josm ? '&#x2714;' : '-',
-                            print_with_ts(row.values_all),
-                            print_prevalent_value_list(row.key, row.prevalent_values)
-                        ] };
-                    });
-                    return data;
-                }
-            });
-        }
-    },
-    tags: {
-        tags: function() {
-            create_flexigrid('grid-tags', {
-                url: '/api/2/db/tags',
-                colModel: [
-                    { display: texts.osm.tag, name: 'tag', width: 300, sortable: true },
-                    { display: '<span title="Number of objects with this tag (as absolute value and as percentage of all nodes, ways, and relations)"><img src="/img/types/all.16.png" alt=""/> Total</span>', name: 'count_all', width: 260, sortable: true, align: 'center' },
-                    { display: '<span title="Number of nodes with this tag (as absolute value and as percentage of tagged nodes, ie. nodes without any tags are ignored)"><img src="/img/types/node.16.png" alt=""/> Nodes</span>', name: 'count_nodes', width: 220, sortable: true, align: 'center' },
-                    { display: '<span title="Number of ways with this tag (as absolute value and as percentage of all ways)"><img src="/img/types/way.16.png" alt=""/> Ways</span>', name: 'count_ways', width: 220, sortable: true, align: 'center' },
-                    { display: '<span title="Number of relations with this tag (as absolute value and as percentage of all relations)"><img src="/img/types/relation.16.png" alt=""/> Relation</span>', name: 'count_relations',  width: 220, sortable: true, align: 'center' }
-                ],
-                searchitems: [
-                    { display: texts.osm.tag, name: 'tag' }
-                ],
-                sortname: 'count_all',
-                sortorder: 'desc',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
-                        return { 'cell': [
-                            '<span class="overflow">' + link_to_tag(row.key, row.value) + '</span>',
-                            print_value_with_percent(row.count_all,       row.count_all_fraction),
-                            print_value_with_percent(row.count_nodes,     row.count_nodes_fraction),
-                            print_value_with_percent(row.count_ways,      row.count_ways_fraction),
-                            print_value_with_percent(row.count_relations, row.count_relations_fraction)
-                        ] };
-                    });
-                    return data;
-                }
-            });
-        }
-    },
-    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) {
-                        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) {
-                        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;
-                }
-            });
-        }
-    },
-    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) {
-                        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)
-                            ]};
-                        })
-                    };
-                }
-            });
-        }
-    },
-    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;
-                }
-            });
-        },
-        wiki: function(query) {
-            // TODO
-        }
-    },
-    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;
-                }
-            });
-        },
-        wiki_pages_about_non_existing_keys: function() {
-            create_flexigrid('grid-keys', {
-                url: '/api/2/db/keys?filters=in_wiki,not_in_db&include=wikipages',
-                colModel: [
-                    { 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: texts.osm.key, name: 'key', width: 260, sortable: true, align: 'left' },
-                    { display: 'Wiki Pages', name: 'wikipages', width: 400, sortable: false, align: 'left' }
-                ],
-                searchitems: [
-                    { display: texts.osm.key, name: 'key' }
-                ],
-                sortname: 'count_all',
-                sortorder: 'desc',
-                preProcess: function(data) {
-                    data.rows = jQuery.map(data.data, function(row, i) {
-                        var wikilinks = [];
-                        jQuery(row.wikipages).each(function(i, wikipage) {
-                            wikilinks.push(print_wiki_link(wikipage.title));
-                        });
-                        return { 'cell': [
-                            row.in_wiki       ? '&#x2714;' : '-',
-                            row.in_josm       ? '&#x2714;' : '-',
-                    //       row.in_potlatch   ? '&#x2714;' : '-',
-                    //       row.in_merkaartor ? '&#x2714;' : '-',
-                            link_to_key(row.key),
-                            wikilinks.join(' &nbsp;&bull;&nbsp; ')
-                        ] };
-                    });
-                    return data;
-                }
-            });
-        },
-        languages: function() {
-            create_flexigrid('grid-langs', {
-                url: '/api/2/reports/languages',
-                colModel: [
-                    { display: 'Code', name: 'code', width: 60, sortable: true },
-                    { display: 'Native Name', name: 'native_name', width: 150, sortable: true },
-                    { display: 'English Name', name: 'english_name', width: 150, sortable: true },
-                    { display: 'Wiki Key Pages', name: 'wiki_key_pages', width: 260, sortable: true, align: 'center' },
-                    { display: 'Wiki Tag Pages', name: 'wiki_tag_pages', width: 260, sortable: true, align: 'center' }
-                ],
-                sortname: 'code',
-                sortorder: 'asc',
-                showToggleBtn: false,
-                usepager: false,
-                useRp: false,
-                preProcess: function(data) {
-                    return {
-                        total: data.total,
-                        page: 1,
-                        rows: jQuery.map(data.data, function(row, i) {
-                            return { 'cell': [
-                                '<span class="lang">' + row.code + '</span"',
-                                row.native_name,
-                                row.english_name,
-                                print_value_with_percent(row.wiki_key_pages, row.wiki_key_pages_fraction),
-                                print_value_with_percent(row.wiki_tag_pages, row.wiki_tag_pages_fraction)
-                            ]};
-                        })
-                    };
-                }
-            });
-        },
-        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;
-                }
-            });
-        },
-        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;
-                    }
-                });
-            },
-            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;
-                    }
-                });
-            }
-        },
-        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;
-                    }
-                });
-            },
-            histogram: function() {
-            }
-        }
-    }
-};
-
diff --git a/web/taginfo.rb b/web/taginfo.rb
index 27fdb6f..3ca5e23 100755
--- a/web/taginfo.rb
+++ b/web/taginfo.rb
@@ -169,6 +169,13 @@ class Taginfo < Sinatra::Base
 
     #-------------------------------------
 
+    get %r{^/js/([a-z][a-z])/(.*).js$} do |lang, js|
+        expires next_update
+        @lang = lang
+        @trans = R18n::I18n.new(lang, 'i18n')
+        erb :"#{js}.js", :layout => false, :content_type => 'text/javascript', :views => 'viewsjs'
+    end
+
     get '/js/lang/:lang.js' do
         expires next_update
         trans = R18n::I18n.new(params[:lang], 'i18n')
diff --git a/web/views/key.erb b/web/views/key.erb
index d13d7ae..ac4ec22 100644
--- a/web/views/key.erb
+++ b/web/views/key.erb
@@ -111,21 +111,7 @@
 <iframe id="josmiframe" name="josmiframe"></iframe>
 <% javascript do
     JS.raw(<<"JAVASCRIPT")
-function page_init() {
-    jQuery('#josm_button').bind('click', function() {
-        jQuery('#josmiframe')[0].src = jQuery('#josm_button')[0].href;
-        return false;
-    });
-
-    jQuery('#filter').bind('change', function() {
-        var value = this.value;
-
-        var qs = jQuery.getQueryString;
-        qs['filter'] = value;
-
-        window.location.search = jQuery.param(qs);
-    });
-
+function page_init2() {
     init_tabs('key', [#{ @key.to_json }, #{ @filter_type.to_json }, #{ r18n.locale.code.to_json }]);
 
     var data = #{ @prevalent_values.to_json() };
@@ -166,3 +152,4 @@ function page_init() {
 JAVASCRIPT
 end
 %>
+<% javascript "#{ r18n.locale.code }/key" %>
diff --git a/web/views/keys.erb b/web/views/keys.erb
index a0a0180..b383b88 100644
--- a/web/views/keys.erb
+++ b/web/views/keys.erb
@@ -6,9 +6,4 @@
     <table id="grid-keys">
     </table>
 </div>
-<% javascript do
-    JQuery.ready do
-        JS.raw(%Q{ create_flexigrid_for.keys.keys(); })
-    end
-end
-%>
+<% javascript "#{ r18n.locale.code }/keys" %>
diff --git a/web/views/reports/characters_in_keys.erb b/web/views/reports/characters_in_keys.erb
index 8cc4998..23db20c 100644
--- a/web/views/reports/characters_in_keys.erb
+++ b/web/views/reports/characters_in_keys.erb
@@ -55,41 +55,41 @@
 </div>
 
 <% javascript do
-    JQuery.ready do
-        JS.raw(<<"JAVASCRIPT")
+    JS.raw(<<"JAVASCRIPT")
+function page_init2() {
+    init_tabs('reports.characters_in_keys', []);
 
-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 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 w=968, h=50;
+    var vis = new pv.Panel()
+        .canvas('canvas')
+        .width(w + 20)
+        .height(h);
 
-var vis = new pv.Panel()
-    .canvas('canvas')
-    .width(w + 20)
-    .height(h);
+    var colors = #{ colors.to_json };
 
-var colors = #{ colors.to_json };
+    var scale = pv.Scale.linear(0, #{ @db.stats('num_keys') }).range(0, w);
 
-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.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();
+    vis.render();
+}
 JAVASCRIPT
-    end
 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 d0331f7..95780b6 100644
--- a/web/views/reports/frequently_used_keys_without_wiki_page.erb
+++ b/web/views/reports/frequently_used_keys_without_wiki_page.erb
@@ -18,16 +18,17 @@
     </table>
 </div>
 <% javascript do
-    JQuery.ready do
-        JS.raw(<<"JAVASCRIPT")
-            create_flexigrid_for.reports.frequently_used_keys_without_wiki_page(#{ 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')
-                });
-                jQuery('#grid-keys').flexReload();
-            });
+    JS.raw(<<"JAVASCRIPT")
+function page_init2() {
+    create_flexigrid_for.reports.frequently_used_keys_without_wiki_page(#{ 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')
+        });
+        jQuery('#grid-keys').flexReload();
+    });
+}
 JAVASCRIPT
-    end
 end
 %>
+<% javascript "#{ r18n.locale.code }/reports/frequently_used_keys_without_wiki_page" %>
diff --git a/web/views/reports/josm_styles.erb b/web/views/reports/josm_styles.erb
index 95cc93b..b3a9981 100644
--- a/web/views/reports/josm_styles.erb
+++ b/web/views/reports/josm_styles.erb
@@ -13,8 +13,11 @@
     </table>
 </div>
 <% javascript do
-    JQuery.ready do
-        JS.raw(%Q{ create_flexigrid_for.reports.josm_styles('standard'); })
-    end
+    JS.raw(<<"JAVASCRIPT")
+function page_init2() {
+    create_flexigrid_for.reports.josm_styles('standard');
+}
+JAVASCRIPT
 end
 %>
+<% javascript "#{ r18n.locale.code }/reports/josm_styles" %>
diff --git a/web/views/reports/key_lengths.erb b/web/views/reports/key_lengths.erb
index 1f5e891..1f3bc2f 100644
--- a/web/views/reports/key_lengths.erb
+++ b/web/views/reports/key_lengths.erb
@@ -26,77 +26,76 @@
     </div>
 </div>
 <% javascript do
-    JQuery.ready do
-        JS.raw(<<"JAVASCRIPT")
+    JS.raw(<<"JAVASCRIPT")
+function page_init2() {
+    init_tabs('reports.key_lengths', []);
 
-init_tabs('reports.key_lengths', []);
+    var data = #{ hist.to_json };
 
-var data = #{ hist.to_json };
+    var w=900, h=400, bar_width=6;
 
-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);
 
-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(['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);
 
-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 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);
 
-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();
+    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
 end
 %>
+<% javascript "#{ r18n.locale.code }/reports/key_lengths" %>
diff --git a/web/views/reports/languages.erb b/web/views/reports/languages.erb
index baae73b..bb90542 100644
--- a/web/views/reports/languages.erb
+++ b/web/views/reports/languages.erb
@@ -6,9 +6,4 @@
     <table id="grid-langs">
     </table>
 </div>
-<% javascript do
-    JQuery.ready do
-        JS.raw(%Q{ create_flexigrid_for.reports.languages(); })
-    end
-end
-%>
+<% javascript "#{ r18n.locale.code }/reports/languages" %>
diff --git a/web/views/reports/wiki_pages_about_non_existing_keys.erb b/web/views/reports/wiki_pages_about_non_existing_keys.erb
index 569304a..48f25e4 100644
--- a/web/views/reports/wiki_pages_about_non_existing_keys.erb
+++ b/web/views/reports/wiki_pages_about_non_existing_keys.erb
@@ -6,9 +6,4 @@
     <table id="grid-keys">
     </table>
 </div>
-<% javascript do
-    JQuery.ready do
-        JS.raw(%Q{ create_flexigrid_for.reports.wiki_pages_about_non_existing_keys(); })
-    end
-end
-%>
+<% javascript "#{ r18n.locale.code }/reports/wiki_pages_about_non_existing_keys" %>
diff --git a/web/views/search.erb b/web/views/search.erb
index 66a37de..bfb03d8 100644
--- a/web/views/search.erb
+++ b/web/views/search.erb
@@ -20,9 +20,10 @@
 </div>
 <% javascript do
     JS.raw(%Q{
-function page_init() {
+function page_init2() {
     init_tabs('search', [#{ @query.to_json }]);
 }
     })
 end
 %>
+<% javascript "#{ r18n.locale.code }/search" %>
diff --git a/web/views/search_tags.erb b/web/views/search_tags.erb
index 099261f..0f09179 100644
--- a/web/views/search_tags.erb
+++ b/web/views/search_tags.erb
@@ -14,9 +14,10 @@
 </div>
 <% javascript do
     JS.raw(%Q{
-function page_init() {
+function page_init2() {
     init_tabs('search', [#{ @query.to_json }]);
 }
     })
 end
 %>
+<% javascript "#{ r18n.locale.code }/search" %>
diff --git a/web/views/tag.erb b/web/views/tag.erb
index e862d0a..048907c 100644
--- a/web/views/tag.erb
+++ b/web/views/tag.erb
@@ -64,19 +64,10 @@
 <iframe id="josmiframe" name="josmiframe"></iframe>
 <% javascript do
     JS.raw(<<"JAVASCRIPT")
-function page_init() {
-    jQuery('#josm_button').bind('click', function() {
-        jQuery('#josmiframe')[0].src = jQuery('#josm_button')[0].href;
-        return false;
-    });
-
-    jQuery('#filter').bind('change', function() {
-        var value = this.value;
-        window.location.search = 'filter=' + value;
-    });
-
+function page_init2() {
     init_tabs('tag', [#{ @key.to_json }, #{ @value.to_json }, #{ @filter_type.to_json }]);
 }
 JAVASCRIPT
 end
 %>
+<% javascript "#{ r18n.locale.code }/tag" %>
diff --git a/web/views/tags.erb b/web/views/tags.erb
index 60d3928..71d462d 100644
--- a/web/views/tags.erb
+++ b/web/views/tags.erb
@@ -6,9 +6,4 @@
     <table id="grid-tags">
     </table>
 </div>
-<% javascript do
-    JQuery.ready do
-        JS.raw(%Q{ create_flexigrid_for.tags.tags(); })
-    end
-end
-%>
+<% javascript "#{ r18n.locale.code }/tags" %>
diff --git a/web/viewsjs/key.js.erb b/web/viewsjs/key.js.erb
new file mode 100644
index 0000000..718e70a
--- /dev/null
+++ b/web/viewsjs/key.js.erb
@@ -0,0 +1,161 @@
+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) {
+                        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() {
+    jQuery('#josm_button').bind('click', function() {
+        jQuery('#josmiframe')[0].src = jQuery('#josm_button')[0].href;
+        return false;
+    });
+
+    jQuery('#filter').bind('change', function() {
+        var value = this.value;
+
+        var qs = jQuery.getQueryString;
+        qs['filter'] = value;
+
+        window.location.search = jQuery.param(qs);
+    });
+
+    page_init2();
+}
diff --git a/web/viewsjs/keys.js.erb b/web/viewsjs/keys.js.erb
new file mode 100644
index 0000000..b1aebe4
--- /dev/null
+++ b/web/viewsjs/keys.js.erb
@@ -0,0 +1,39 @@
+function page_init() {
+    create_flexigrid('grid-keys', {
+        url: '/api/2/db/keys?include=prevalent_values',
+        colModel: [
+            { display: '<%= @trans.t.osm.key %>', name: 'key', width: 160, sortable: true },
+            { display: '<span title="Number of objects with this key (as absolute value and as percentage of all nodes, ways, and relations)"><img src="/img/types/all.16.png" alt=""/> Total</span>', name: 'count_all', width: 200, sortable: true, align: 'center' },
+            { display: '<span title="Number of nodes with this key (as absolute value and as percentage of tagged nodes, ie. nodes without any tags are ignored)"><img src="/img/types/node.16.png" alt=""/> Nodes</span>', name: 'count_nodes', width: 220, sortable: true, align: 'center' },
+            { display: '<span title="Number of ways with this key (as absolute value and as percentage of all ways)"><img src="/img/types/way.16.png" alt=""/> Ways</span>', name: 'count_ways', width: 220, sortable: true, align: 'center' },
+            { display: '<span title="Number of relations with this key (as absolute value and as percentage of all relations)"><img src="/img/types/relation.16.png" alt=""/> Relation</span>', name: 'count_relations',  width: 220, sortable: true, align: 'center' },
+            { display: '<span title="Number of different users who last changed objects with this key">Users</span>', name: 'users_all', width: 44, sortable: true, align: 'right' },
+            { display: '<img src="/img/sources/wiki.16.png" alt="Wiki" title="Key has a wiki page"/>', name: 'in_wiki', width: 20, sortable: true, align: 'center' },
+            { display: '<img src="/img/sources/josm.16.png" alt="JOSM" title="Key appears in JOSM config"/>', name: 'in_josm', 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: '<span title="Up to ten of the most common values for this key (only if more than 1% of tags with this key have this value)">Prevalent Values</span>', name: 'prevalent_values', width: 500, sortable: true }
+        ],
+        searchitems: [
+            { display: '<%= @trans.t.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_value_with_percent(row.count_nodes,     row.count_nodes_fraction),
+                    print_value_with_percent(row.count_ways,      row.count_ways_fraction),
+                    print_value_with_percent(row.count_relations, row.count_relations_fraction),
+                    print_with_ts(row.users_all),
+                    row.in_wiki ? '&#x2714;' : '-',
+                    row.in_josm ? '&#x2714;' : '-',
+                    print_with_ts(row.values_all),
+                    print_prevalent_value_list(row.key, row.prevalent_values)
+                ] };
+            });
+            return data;
+        }
+    });
+}
diff --git a/web/viewsjs/reports/characters_in_keys.js.erb b/web/viewsjs/reports/characters_in_keys.js.erb
new file mode 100644
index 0000000..ce48a0c
--- /dev/null
+++ b/web/viewsjs/reports/characters_in_keys.js.erb
@@ -0,0 +1,84 @@
+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;
+                    }
+                });
+            },
+            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();
+}
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
new file mode 100644
index 0000000..465059f
--- /dev/null
+++ b/web/viewsjs/reports/frequently_used_keys_without_wiki_page.js.erb
@@ -0,0 +1,39 @@
+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 page_init() {
+    page_init2();
+}
diff --git a/web/viewsjs/reports/josm_styles.js.erb b/web/viewsjs/reports/josm_styles.js.erb
new file mode 100644
index 0000000..075ff02
--- /dev/null
+++ b/web/viewsjs/reports/josm_styles.js.erb
@@ -0,0 +1,37 @@
+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 page_init() {
+    page_init2();
+}
diff --git a/web/viewsjs/reports/key_lengths.js.erb b/web/viewsjs/reports/key_lengths.js.erb
new file mode 100644
index 0000000..897df68
--- /dev/null
+++ b/web/viewsjs/reports/key_lengths.js.erb
@@ -0,0 +1,49 @@
+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;
+                    }
+                });
+            },
+            histogram: function() {
+            }
+        }
+    }
+};
+
+function page_init() {
+    page_init2();
+}
diff --git a/web/viewsjs/reports/languages.js.erb b/web/viewsjs/reports/languages.js.erb
new file mode 100644
index 0000000..5be1b0c
--- /dev/null
+++ b/web/viewsjs/reports/languages.js.erb
@@ -0,0 +1,32 @@
+function page_init() {
+    create_flexigrid('grid-langs', {
+        url: '/api/2/reports/languages',
+        colModel: [
+            { display: 'Code', name: 'code', width: 60, sortable: true },
+            { display: 'Native Name', name: 'native_name', width: 150, sortable: true },
+            { display: 'English Name', name: 'english_name', width: 150, sortable: true },
+            { display: 'Wiki Key Pages', name: 'wiki_key_pages', width: 260, sortable: true, align: 'center' },
+            { display: 'Wiki Tag Pages', name: 'wiki_tag_pages', width: 260, sortable: true, align: 'center' }
+        ],
+        sortname: 'code',
+        sortorder: 'asc',
+        showToggleBtn: false,
+        usepager: false,
+        useRp: false,
+        preProcess: function(data) {
+            return {
+                total: data.total,
+                page: 1,
+                rows: jQuery.map(data.data, function(row, i) {
+                    return { 'cell': [
+                        '<span class="lang">' + row.code + '</span>',
+                        row.native_name,
+                        row.english_name,
+                        print_value_with_percent(row.wiki_key_pages, row.wiki_key_pages_fraction),
+                        print_value_with_percent(row.wiki_tag_pages, row.wiki_tag_pages_fraction)
+                    ]};
+                })
+            };
+        }
+    });
+}
diff --git a/web/viewsjs/reports/wiki_pages_about_non_existing_keys.js.erb b/web/viewsjs/reports/wiki_pages_about_non_existing_keys.js.erb
new file mode 100644
index 0000000..9de24a6
--- /dev/null
+++ b/web/viewsjs/reports/wiki_pages_about_non_existing_keys.js.erb
@@ -0,0 +1,35 @@
+function page_init() {
+    create_flexigrid('grid-keys', {
+        url: '/api/2/db/keys?filters=in_wiki,not_in_db&include=wikipages',
+        colModel: [
+            { 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: texts.osm.key, name: 'key', width: 260, sortable: true, align: 'left' },
+            { display: 'Wiki Pages', name: 'wikipages', width: 400, sortable: false, align: 'left' }
+        ],
+        searchitems: [
+            { display: texts.osm.key, name: 'key' }
+        ],
+        sortname: 'count_all',
+        sortorder: 'desc',
+        preProcess: function(data) {
+            data.rows = jQuery.map(data.data, function(row, i) {
+                var wikilinks = [];
+                jQuery(row.wikipages).each(function(i, wikipage) {
+                    wikilinks.push(print_wiki_link(wikipage.title));
+                });
+                return { 'cell': [
+                    row.in_wiki       ? '&#x2714;' : '-',
+                    row.in_josm       ? '&#x2714;' : '-',
+            //       row.in_potlatch   ? '&#x2714;' : '-',
+            //       row.in_merkaartor ? '&#x2714;' : '-',
+                    link_to_key(row.key),
+                    wikilinks.join(' &nbsp;&bull;&nbsp; ')
+                ] };
+            });
+            return data;
+        }
+    });
+}
diff --git a/web/viewsjs/search.js.erb b/web/viewsjs/search.js.erb
new file mode 100644
index 0000000..8c2efcc
--- /dev/null
+++ b/web/viewsjs/search.js.erb
@@ -0,0 +1,76 @@
+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;
+                }
+            });
+        }
+    }
+};
+
+function page_init() {
+    page_init2();
+}
diff --git a/web/viewsjs/tag.js.erb b/web/viewsjs/tag.js.erb
new file mode 100644
index 0000000..0fd4023
--- /dev/null
+++ b/web/viewsjs/tag.js.erb
@@ -0,0 +1,130 @@
+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) {
+                        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) {
+                        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;
+                }
+            });
+        }
+    }
+};
+
+function page_init() {
+    jQuery('#josm_button').bind('click', function() {
+        jQuery('#josmiframe')[0].src = jQuery('#josm_button')[0].href;
+        return false;
+    });
+
+    jQuery('#filter').bind('change', function() {
+        var value = this.value;
+        window.location.search = 'filter=' + value;
+    });
+    
+    page_init2();
+}
diff --git a/web/viewsjs/tags.js.erb b/web/viewsjs/tags.js.erb
new file mode 100644
index 0000000..07133c5
--- /dev/null
+++ b/web/viewsjs/tags.js.erb
@@ -0,0 +1,29 @@
+function page_init() {
+    create_flexigrid('grid-tags', {
+        url: '/api/2/db/tags',
+        colModel: [
+            { display: texts.osm.tag, name: 'tag', width: 300, sortable: true },
+            { display: '<span title="Number of objects with this tag (as absolute value and as percentage of all nodes, ways, and relations)"><img src="/img/types/all.16.png" alt=""/> Total</span>', name: 'count_all', width: 260, sortable: true, align: 'center' },
+            { display: '<span title="Number of nodes with this tag (as absolute value and as percentage of tagged nodes, ie. nodes without any tags are ignored)"><img src="/img/types/node.16.png" alt=""/> Nodes</span>', name: 'count_nodes', width: 220, sortable: true, align: 'center' },
+            { display: '<span title="Number of ways with this tag (as absolute value and as percentage of all ways)"><img src="/img/types/way.16.png" alt=""/> Ways</span>', name: 'count_ways', width: 220, sortable: true, align: 'center' },
+            { display: '<span title="Number of relations with this tag (as absolute value and as percentage of all relations)"><img src="/img/types/relation.16.png" alt=""/> Relation</span>', name: 'count_relations',  width: 220, sortable: true, align: 'center' }
+        ],
+        searchitems: [
+            { display: texts.osm.tag, name: 'tag' }
+        ],
+        sortname: 'count_all',
+        sortorder: 'desc',
+        preProcess: function(data) {
+            data.rows = jQuery.map(data.data, function(row, i) {
+                return { 'cell': [
+                    '<span class="overflow">' + link_to_tag(row.key, row.value) + '</span>',
+                    print_value_with_percent(row.count_all,       row.count_all_fraction),
+                    print_value_with_percent(row.count_nodes,     row.count_nodes_fraction),
+                    print_value_with_percent(row.count_ways,      row.count_ways_fraction),
+                    print_value_with_percent(row.count_relations, row.count_relations_fraction)
+                ] };
+            });
+            return data;
+        }
+    });
+}