diff --git a/js/index.js b/js/index.js
index 7173eaf..3e989c9 100644
--- a/js/index.js
+++ b/js/index.js
@@ -33,79 +33,35 @@ Ox.load('UI', function() {
                         + '/timeline' + type + '16p' + i + '.jpg';
                 },
                 height: window.innerHeight - 24,
-                layers: [{
-                    id: 'shape',
-                    item: 'Shape Hash',
-                    items: data['json/hashes.json'].filter(function(value) {
-                        return value.type == 'shape';
-                    }).map(function(value) {
-                        return {
-                            'in': value['in'],
-                            out: value.out,
-                            value: '<img src="' + value.composite + '"><br>' + value.hash + '<br>'
-                            + value.similar.map(function(value) {
-                                var position = Ox.formatDuration(value.position, 3);
-                                return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
-                            }).join('<br>')
-                        };
-                    }),
-                    title: 'Shape Hashes',
-                    type: 'text'
-                }, {
-                    id: 'color',
-                    item: 'Color Hash',
-                    items: data['json/hashes.json'].filter(function(value) {
-                        return value.type == 'color';
-                    }).map(function(value) {
-                        return {
-                            'in': value['in'],
-                            out: value.out,
-                            value: value.hash + '<br>' + value.similar.map(function(value) {
-                                var position = Ox.formatDuration(value.position, 3);
-                                return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
-                            }).join('<br>')
-                        };
-                    }),
-                    title: 'Color Hashes',
-                    type: 'text'
-                },{
-                    id: 'p',
-                    item: 'P Hash',
-                    items: data['json/hashes.json'].filter(function(value) {
-                        return value.type == 'pHash';
-                    }).map(function(value) {
-                        return {
-                            'in': value['in'],
-                            out: value.out,
-                            value: value.hash + '<br>' + value.similar.map(function(value) {
-                                var position = Ox.formatDuration(value.position, 3);
-                                return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
-                            }).join('<br>')
-                        };
-                    }),
-                    title: 'P Hashes',
-                    type: 'text'
-                }, {
-                    id: 'dct',
-                    item: 'DCT Hash',
-                    items: data['json/hashes.json'].filter(function(value) {
-                        return value.type == 'dct';
-                    }).map(function(value) {
-                        return {
-                            'in': value['in'],
-                            out: value.out,
-                            value: value.hash + '<br>' + value.similar.map(function(value) {
-                                var position = Ox.formatDuration(value.position, 3);
-                                return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
-                            }).join('<br>')
-                        };
-                    }),
-                    title: 'DCT Hashes',
-                    type: 'text'
-                }],
+                layers: [
+                    {id: 'shape', item: 'Shape Hash', title: 'Shape Hashes'},
+                    {id: 'color', item: 'Color Hash', title: 'Color Hashes'},
+                    {id: 'pHash', item: 'P Hash', title: 'P Hashes'},
+                    {id: 'dct', item: '3D DCT Hash', title: '3D DCT Hashes'},
+                ].map(function(layer) {
+                    return {
+                        id: layer.id,
+                        item: layer.item,
+                        items: data['json/hashes.json'].filter(function(value) {
+                            return value.type == layer.id;
+                        }).map(function(value) {
+                            return {
+                                'in': value['in'],
+                                out: value.out,
+                                value: '<img src="' + value.composite + '"><br>' + value.hash + '<br>'
+                                + value.similar.map(function(value) {
+                                    var position = Ox.formatDuration(value.position, 3);
+                                    return '<a href="#' + position + '">' + position +'</a> ' + value.distance;
+                                }).join('<br>')
+                            };
+                        }),
+                        title: layer.title,
+                        type: 'text'
+                    }
+                }),
                 resolution: video.resolution,
                 showAnnotations: true,
-                showLayers: {shape: true, color: true, dct: true},
+                showLayers: {shape: true, color: true, p: true, dct: true},
                 subtitles: data['json/cuts1.json'].map(function(position) {
                     return {'in': position - 0.08, out: position - 0.04, text: ''};
                 }),