diff --git a/test/import.html b/test/import.html
index 83199e5..25036b5 100644
--- a/test/import.html
+++ b/test/import.html
@@ -4,6 +4,8 @@
 <script src="http://oxjs.org/js/jquery-1.4.2.min.js"></script>
 <script>
 
+var _ids = new Array();
+
 var ox = new OxFF();
 ox.access(true);
 ox.login('username');
@@ -11,27 +13,72 @@ ox.login('username');
 //ox.get('b2c8f0aa3a447d09', 'stills', function(result) { console.log(result);});
 //ox.files(function(result) { console.log(result);});
 
+function safe_id(id) {
+    var _id = _ids.indexOf(id);
+    if(_id < 0) {
+        _ids.push(id);
+        _id = _ids.indexOf(id);
+    }
+    return _id;
+}
+
+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 update() {
     var updating = true;
-    ox.update(function(result) {
-        console.log('updating done', result);
-        updating = false });
+    ox.update(function(result) { updating = false });
     var getFiles = function() {
         ox.volumes(function(result) {
             var volumes = JSON.parse(result);
             for(volume in volumes) {
                 (function(volume) {
-                    var volumeId = volume.replace(/[ \/]/g, '_');
+                    var volumeId = "volume_"+safe_id(volume);
                     var $volume = $('#'+volumeId);
-                    if($volume.length==0)
-                        $volume = $('<div>').attr('id', volumeId);
-                    $volume.html('<h1>'+volume+'</h1>');
+                    if($volume.length==0) {
+                        $volume = $('<div>').attr('id', volumeId).html('<h2>'+volume+'</h2>');
+                        $volume.find('h2').click(function() { $(this).parent().find('div').toggle();});
+                    }
                     $('#files').append($volume);
                     ox.files(volume, function(result) {
-                        var files = JSON.parse(result);
-                        $.each(files, function(folder, f) {
-                            $file = $('<div>').html(folder);
-                            $volume.append($file);
+                        var data = JSON.parse(result);
+                        $.each(data, function(folder, files) {
+                            if(!folder) folder = "rootfolder";
+                            var folderId = 'folder_'+safe_id(folder);
+                            var $folder = $('#'+folderId);
+                            if($folder.length==0) {
+                                $folder = $('<div>').attr('id', folderId).html('<h3>'+folder+'</h3>');
+                                $folder.find('h3').click(function() { $(this).parent().find('div').toggle();});
+                                $volume.append($folder);
+                            }
+                            for_each_sorted(files, function(f, info) {
+                                var fileId = "file_"+safe_id(f);
+                                var $file = $('#'+fileId);
+                                if($file.length==0) {
+                                    $file = $('<div>').attr('id', fileId).html(f).hide();
+                                    $folder.append($file);
+                                }
+                            });
                         });
                     });
                 }(volume));