diff --git a/media/test.html b/media/test.html
new file mode 100644
index 0000000..5dcd978
--- /dev/null
+++ b/media/test.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+<head>
+    <script src="http://localhost/js/jquery.js"></script>
+    <script src="test.js"></script>
+</head>
+<body>
+
+<div id="movies">
+</div>
+</body>
+</html>
diff --git a/media/test.js b/media/test.js
new file mode 100644
index 0000000..bee0597
--- /dev/null
+++ b/media/test.js
@@ -0,0 +1,105 @@
+//http://127.0.0.1:2620/media/test.html
+$(function(){
+    backend= {
+        base:'/',
+        profile: '96p.webm',
+        request: function(func, data, callback) {
+            $.getJSON(this.base+func, data, callback);
+        },
+        extractStills: function(oshash, callback) {
+            this.request('extract', {'oshash': oshash, 'media': 'stills'}, callback);
+        },
+        extractVideo: function(oshash, callback) {
+            this.request('extract', {'oshash': oshash, 'media': this.profile}, callback);
+        },
+        info: function(oshash, callback) {
+            this.request('get', {'oshash': oshash}, callback);
+        },
+    };
+
+    function addStill(parent, oshash) {
+        backend.request('get', {'oshash':oshash}, function(result) {
+            //console.log(result);
+            if(result.stills.length>0) {
+                $(parent).append('<img width="128" src="'+result.stills[1]+'">');
+            } else {
+                backend.request('extract', {'oshash':oshash, 'media': 'stills'}, function(result) {
+                    setTimeout(function () {
+                        addStill(parent, oshash);
+                    }, 25000);
+                });
+            }
+        });
+    }
+    function addVideo(parent, oshash) {
+        backend.request('get', {'oshash':oshash}, function(result) {
+            console.log(result);
+            if(result.video.length>0) {
+                $(parent).append('<video width="128" src="'+result.video[0]+'" controls>');
+            } else {
+                backend.request('extract', {'oshash':oshash, 'media': backend.profile}, function(result) {
+                    if(!result.status == 'failed') {
+                        setTimeout(function () {
+                            addVideo(parent, oshash);
+                        }, 25000);
+                    }
+                });
+            }
+        });
+    }
+
+
+    function for_each_sorted(elements, callback) {
+        function pad(str) {
+            var len = 10;
+            while (str.length < len) {
+                str = '0' + str;
+            }
+            return str;
+        };
+        var keys = new Array();
+        $.each(elements, function(k) {
+            keys.push(k);
+        });
+        keys.sort(function(a,b) {
+            a = a.replace(/\d+/, pad);
+            b = b.replace(/\d+/, pad);
+            return a > b;
+        });
+        $.each(keys, function(i, k) {
+            var v = elements[k];
+            callback(k, v);
+        });
+    }
+
+    function addMovie(movie, files) {
+        var $m = $('<div>');
+        $m.css('padding-left', '50px');
+        $m.html(movie);
+        //var oshash = files[0].info.oshash;
+        //$img = $('<img>').attr('src', '/media/' + oshash
+        //$m.append($img);
+        var $files = $('<div>');
+        $files.css('padding-left', '50px');
+        for_each_sorted(files, function(k, v) {
+            if (v.video && v.video.length>0) {
+                addStill($files, v.oshash);
+                addVideo($files, v.oshash);
+            }
+            $files.append(k + '<br />');
+        });
+        $m.append($files);
+        return $m;
+    }
+    backend.request('files', function(result) {
+        for_each_sorted(result, function(archive, movies) {
+            var $archive = $('<div>');
+            $archive.html(archive);
+            $('#movies').append($archive);
+            for_each_sorted(movies, function(movie, files) {
+                $archive.append(addMovie(movie, files));
+            });
+        });
+    });
+});
+
