From 95b451bc621ae202d0229176ad0712b22d14c953 Mon Sep 17 00:00:00 2001
From: Adrian Lang <mail@adrianlang.de>
Date: Sat, 17 Sep 2011 19:36:34 +0200
Subject: [PATCH] Rework media manager HTML (JS and CSS will come)

---
 inc/html.php                     | 155 +++++++++-----
 inc/lang/de-informal/lang.php    |  17 +-
 inc/lang/de/lang.php             |  17 +-
 inc/lang/en/lang.php             |  17 +-
 inc/lang/fr/lang.php             |  12 +-
 inc/lang/pt/lang.php             |  11 +-
 inc/lang/ru/lang.php             |  13 +-
 inc/media.php                    | 339 ++++++++++++++-----------------
 inc/template.php                 |  71 ++++---
 lib/tpl/default/mediamanager.css | 124 ++++++-----
 10 files changed, 394 insertions(+), 382 deletions(-)

diff --git a/inc/html.php b/inc/html.php
index 1c48d6059..66bc83127 100644
--- a/inc/html.php
+++ b/inc/html.php
@@ -982,6 +982,73 @@ function html_backlinks(){
     }
 }
 
+function html_diff_head($l_rev, $r_rev, $id = null, $media = false) {
+    global $lang;
+    if ($id === null) {
+        global $ID;
+        $id = $ID;
+    }
+    $media_or_wikiFN = $media ? 'mediaFN' : 'wikiFN';
+    $ml_or_wl = $media ? 'ml' : 'wl';
+    $l_minor = $r_minor = '';
+
+    if(!$l_rev){
+        $l_head = '&mdash;';
+    }else{
+        $l_info   = getRevisionInfo($id,$l_rev,true, $media);
+        if($l_info['user']){
+            $l_user = editorinfo($l_info['user']);
+            if(auth_ismanager()) $l_user .= ' ('.$l_info['ip'].')';
+        } else {
+            $l_user = $l_info['ip'];
+        }
+        $l_user  = '<span class="user">'.$l_user.'</span>';
+        $l_sum   = ($l_info['sum']) ? '<span class="sum">'.hsc($l_info['sum']).'</span>' : '';
+        if ($l_info['type']===DOKU_CHANGE_TYPE_MINOR_EDIT) $l_minor = 'class="minor"';
+
+        $l_head = '<a class="wikilink1" href="'.$ml_or_wl($id,"rev=$l_rev").'">'.
+        $id.' ['.dformat($l_rev).']</a>'.
+        '<br />'.$l_user.' '.$l_sum;
+    }
+
+    if($r_rev){
+        $r_info   = getRevisionInfo($id,$r_rev,true, $media);
+        if($r_info['user']){
+            $r_user = editorinfo($r_info['user']);
+            if(auth_ismanager()) $r_user .= ' ('.$r_info['ip'].')';
+        } else {
+            $r_user = $r_info['ip'];
+        }
+        $r_user = '<span class="user">'.$r_user.'</span>';
+        $r_sum  = ($r_info['sum']) ? '<span class="sum">'.hsc($r_info['sum']).'</span>' : '';
+        if ($r_info['type']===DOKU_CHANGE_TYPE_MINOR_EDIT) $r_minor = 'class="minor"';
+
+        $r_head = '<a class="wikilink1" href="'.$ml_or_wl($id,"rev=$r_rev").'">'.
+        $id.' ['.dformat($r_rev).']</a>'.
+        '<br />'.$r_user.' '.$r_sum;
+    }elseif($_rev = @filemtime($media_or_wikiFN($id))){
+        $_info   = getRevisionInfo($id,$_rev,true, $media);
+        if($_info['user']){
+            $_user = editorinfo($_info['user']);
+            if(auth_ismanager()) $_user .= ' ('.$_info['ip'].')';
+        } else {
+            $_user = $_info['ip'];
+        }
+        $_user = '<span class="user">'.$_user.'</span>';
+        $_sum  = ($_info['sum']) ? '<span class="sum">'.hsc($_info['sum']).'</span>' : '';
+        if ($_info['type']===DOKU_CHANGE_TYPE_MINOR_EDIT) $r_minor = 'class="minor"';
+
+        $r_head  = '<a class="wikilink1" href="'.$ml_or_wl($id).'">'.
+        $id.' ['.dformat($_rev).']</a> '.
+        '('.$lang['current'].')'.
+        '<br />'.$_user.' '.$_sum;
+    }else{
+        $r_head = '&mdash; ('.$lang['current'].')';
+    }
+
+    return array($l_head, $r_head, $l_minor, $r_minor);
+}
+
 /**
  * show diff
  *
@@ -1056,59 +1123,7 @@ function html_diff($text='',$intro=true,$type=null){
         }
         $r_text = rawWiki($ID,$r_rev);
 
-        if(!$l_rev){
-            $l_head = '&mdash;';
-        }else{
-            $l_info   = getRevisionInfo($ID,$l_rev,true);
-            if($l_info['user']){
-                $l_user = editorinfo($l_info['user']);
-                if(auth_ismanager()) $l_user .= ' ('.$l_info['ip'].')';
-            } else {
-                $l_user = $l_info['ip'];
-            }
-            $l_user  = '<span class="user">'.$l_user.'</span>';
-            $l_sum   = ($l_info['sum']) ? '<span class="sum">'.hsc($l_info['sum']).'</span>' : '';
-            if ($l_info['type']===DOKU_CHANGE_TYPE_MINOR_EDIT) $l_minor = 'class="minor"';
-
-            $l_head = '<a class="wikilink1" href="'.wl($ID,"rev=$l_rev").'">'.
-            $ID.' ['.dformat($l_rev).']</a>'.
-            '<br />'.$l_user.' '.$l_sum;
-        }
-
-        if($r_rev){
-            $r_info   = getRevisionInfo($ID,$r_rev,true);
-            if($r_info['user']){
-                $r_user = editorinfo($r_info['user']);
-                if(auth_ismanager()) $r_user .= ' ('.$r_info['ip'].')';
-            } else {
-                $r_user = $r_info['ip'];
-            }
-            $r_user = '<span class="user">'.$r_user.'</span>';
-            $r_sum  = ($r_info['sum']) ? '<span class="sum">'.hsc($r_info['sum']).'</span>' : '';
-            if ($r_info['type']===DOKU_CHANGE_TYPE_MINOR_EDIT) $r_minor = 'class="minor"';
-
-            $r_head = '<a class="wikilink1" href="'.wl($ID,"rev=$r_rev").'">'.
-            $ID.' ['.dformat($r_rev).']</a>'.
-            '<br />'.$r_user.' '.$r_sum;
-        }elseif($_rev = @filemtime(wikiFN($ID))){
-            $_info   = getRevisionInfo($ID,$_rev,true);
-            if($_info['user']){
-                $_user = editorinfo($_info['user']);
-                if(auth_ismanager()) $_user .= ' ('.$_info['ip'].')';
-            } else {
-                $_user = $_info['ip'];
-            }
-            $_user = '<span class="user">'.$_user.'</span>';
-            $_sum  = ($_info['sum']) ? '<span class="sum">'.hsc($_info['sum']).'</span>' : '';
-            if ($_info['type']===DOKU_CHANGE_TYPE_MINOR_EDIT) $r_minor = 'class="minor"';
-
-            $r_head  = '<a class="wikilink1" href="'.wl($ID).'">'.
-            $ID.' ['.dformat($_rev).']</a> '.
-            '('.$lang['current'].')'.
-            '<br />'.$_user.' '.$_sum;
-        }else{
-            $r_head = '&mdash; ('.$lang['current'].')';
-        }
+        list($l_head, $r_head, $l_minor, $r_minor) = html_diff_head($l_rev, $r_rev);
     }
 
     $df = new Diff(explode("\n",htmlspecialchars($l_text)),
@@ -1811,3 +1826,37 @@ function html_flashobject($swf,$width,$height,$params=null,$flashvars=null,$atts
     return $out;
 }
 
+function html_tabs($tabs, $current_tab = null) {
+    echo '<ul class="tabs">';
+
+    foreach($tabs as $id => $tab) {
+        html_tab($tab['href'], $tab['caption'], $id === $current_tab);
+    }
+
+    echo '</ul>';
+    echo '<div class="clearer"></div>';
+}
+/**
+ * Prints a single tab
+ *
+ * @author Kate Arzamastseva <pshns@ukr.net>
+ * @author Adrian Lang <mail@adrianlang.de>
+ *
+ * @param string $href - tab href
+ * @param string $caption - tab caption
+ * @param boolean $selected - is tab selected
+ */
+
+function html_tab($href, $caption, $selected=false) {
+    $tab = '<li>';
+    if ($selected) {
+        $tab .= '<strong>';
+    } else {
+        $tab .= '<a href="' . hsc($href) . '">';
+    }
+    $tab .= hsc($caption)
+         .  '</' . ($selected ? 'strong' : 'a') . '>'
+         .  '</li>';
+    echo $tab;
+}
+
diff --git a/inc/lang/de-informal/lang.php b/inc/lang/de-informal/lang.php
index 4f762b55d..4d7c26621 100644
--- a/inc/lang/de-informal/lang.php
+++ b/inc/lang/de-informal/lang.php
@@ -345,15 +345,16 @@ $lang['media_searchtab']       = 'Suchen';
 $lang['media_viewtab']         = 'Anzeigen';
 $lang['media_edittab']         = 'Bearbeiten';
 $lang['media_historytab']      = 'Verlauf';
-$lang['media_thumbsview']      = 'Miniaturansicht';
-$lang['media_listview']        = 'Detailansicht';
-$lang['media_sort']            = 'Sortieren';
-$lang['media_sort_name']       = 'nach Name';
-$lang['media_sort_date']       = 'nach Datum';
+$lang['media_list_thumbs']     = '<span>Medien anzeigen als</span> Miniaturansicht';
+$lang['media_list_rows']       = '<span>Medien anzeigen als</span> Listenansicht';
+$lang['media_sort_name']       = '<span>Sortieren nach</span> Name';
+$lang['media_sort_date']       = '<span>Sortieren nach</span> Datum';
+$lang['media_files']           = 'Medien im Namespace <strong>%s</strong>.';
 $lang['media_upload']          = 'In den <strong>%s</strong> Namespace hochladen.';
 $lang['media_search']          = 'Im Namespace <strong>%s</strong> suchen.';
-$lang['media_edit']            = 'Bearbeiten';
-$lang['media_history']         = 'Versionsverlauf der Datei.';
+$lang['media_view']            = '<span class="%s">%s</span>';
+$lang['media_edit']            = '<span class="%s">%s</span> bearbeiten';
+$lang['media_history']         = 'Versionen von <span class="%s">%s</span>';
 $lang['media_meta_edited']     = 'Meta-Informationen bearbeitet';
 $lang['media_perm_read']       = 'Du besitzt nicht die notwendigen Berechtigungen um die Datei anzuzeigen.';
 $lang['media_perm_upload']     = 'Du besitzt nicht die notwendigen Berechtigungen um Dateien hochzuladen.';
@@ -362,4 +363,4 @@ $lang['media_restore']         = 'Diese Version wiederherstellen';
 
 $lang['plugin_install_err']    = "Plugin nicht korrekt installiert. Plugin-Verzeichnis von '%s' nach '%s' umbenennen.";
 
-//Setup VIM: ex: et ts=2 :
\ No newline at end of file
+//Setup VIM: ex: et ts=2 :
diff --git a/inc/lang/de/lang.php b/inc/lang/de/lang.php
index a289f9987..360e6b428 100644
--- a/inc/lang/de/lang.php
+++ b/inc/lang/de/lang.php
@@ -345,15 +345,16 @@ $lang['media_searchtab']       = 'Suchen';
 $lang['media_viewtab']         = 'Anzeigen';
 $lang['media_edittab']         = 'Bearbeiten';
 $lang['media_historytab']      = 'Verlauf';
-$lang['media_thumbsview']      = 'Miniaturansicht';
-$lang['media_listview']        = 'Detailansicht';
-$lang['media_sort']            = 'Sortieren';
-$lang['media_sort_name']       = 'nach Name';
-$lang['media_sort_date']       = 'nach Datum';
+$lang['media_list_thumbs']     = '<span>Medien anzeigen als</span> Miniaturansicht';
+$lang['media_list_rows']       = '<span>Medien anzeigen als</span> Listenansicht';
+$lang['media_sort_name']       = '<span>Sortieren nach</span> Name';
+$lang['media_sort_date']       = '<span>Sortieren nach</span> Datum';
+$lang['media_files']           = 'Medien im Namespace <strong>%s</strong>.';
 $lang['media_upload']          = 'In den <strong>%s</strong> Namespace hochladen.';
 $lang['media_search']          = 'Im Namespace <strong>%s</strong> suchen.';
-$lang['media_edit']            = 'Bearbeiten';
-$lang['media_history']         = 'Versionsverlauf der Datei.';
+$lang['media_view']            = '<span class="%s">%s</span>';
+$lang['media_edit']            = '<span class="%s">%s</span> bearbeiten';
+$lang['media_history']         = 'Versionen von <span class="%s">%s</span>';
 $lang['media_meta_edited']     = 'Meta-Informationen bearbeitet';
 $lang['media_perm_read']       = 'Sie besitzen nicht die notwendigen Berechtigungen um die Datei anzuzeigen.';
 $lang['media_perm_upload']     = 'Sie besitzen nicht die notwendigen Berechtigungen um Dateien hochzuladen.';
@@ -362,4 +363,4 @@ $lang['media_restore']         = 'Diese Version wiederherstellen';
 
 $lang['plugin_install_err']    = "Plugin nicht korrekt installiert. Plugin-Verzeichnis von '%s' nach '%s' umbenennen.";
 
-//Setup VIM: ex: et ts=2 :
\ No newline at end of file
+//Setup VIM: ex: et ts=2 :
diff --git a/inc/lang/en/lang.php b/inc/lang/en/lang.php
index f082c1655..fbfd0e34f 100644
--- a/inc/lang/en/lang.php
+++ b/inc/lang/en/lang.php
@@ -337,15 +337,16 @@ $lang['media_searchtab']       = 'Search';
 $lang['media_viewtab']         = 'View';
 $lang['media_edittab']         = 'Edit';
 $lang['media_historytab']      = 'History';
-$lang['media_thumbsview']      = 'Thumbnails';
-$lang['media_listview']        = 'List';
-$lang['media_sort']            = 'Sort';
-$lang['media_sort_name']       = 'by name';
-$lang['media_sort_date']       = 'by date';
+$lang['media_list_thumbs']     = '<span>Show list as</span> thumbnails';
+$lang['media_list_rows']       = '<span>Show list as</span> list';
+$lang['media_sort_name']       = '<span>Sort by</span> name';
+$lang['media_sort_date']       = '<span>Sort by</span> date';
+$lang['media_files']           = 'Media files in the <strong>%s</strong> namespace.';
 $lang['media_upload']          = 'Upload to the <strong>%s</strong> namespace.';
 $lang['media_search']          = 'Search in the <strong>%s</strong> namespace.';
-$lang['media_edit']            = 'Edit';
-$lang['media_history']         = 'These are the older revisions of the file.';
+$lang['media_view']            = '<span class="%s">%s</span>';
+$lang['media_edit']            = 'Edit <span class="%s">%s</span>';
+$lang['media_history']         = 'History of <span class="%s">%s</span>';
 $lang['media_meta_edited']     = 'metadata edited';
 $lang['media_perm_read']       = 'Sorry, you don\'t have enough rights to read files.';
 $lang['media_perm_upload']     = 'Sorry, you don\'t have enough rights to upload files.';
@@ -354,4 +355,4 @@ $lang['media_restore']         = 'Restore this version';
 
 $lang['plugin_install_err']    = "Plugin installed incorrectly. Rename plugin directory '%s' to '%s'.";
 
-//Setup VIM: ex: et ts=2 :
\ No newline at end of file
+//Setup VIM: ex: et ts=2 :
diff --git a/inc/lang/fr/lang.php b/inc/lang/fr/lang.php
index 53d3b7665..c73febc00 100644
--- a/inc/lang/fr/lang.php
+++ b/inc/lang/fr/lang.php
@@ -351,15 +351,13 @@ $lang['media_searchtab']       = 'Rechercher';
 $lang['media_viewtab']         = 'Voir';
 $lang['media_edittab']         = 'Éditer';
 $lang['media_historytab']      = 'Historique';
-$lang['media_thumbsview']      = 'Miniatures';
-$lang['media_listview']        = 'Liste';
-$lang['media_sort']            = 'Tri';
-$lang['media_sort_name']       = 'par nom';
-$lang['media_sort_date']       = 'par date';
+$lang['media_sort_name']       = '<span>Tri par</span> nom';
+$lang['media_sort_date']       = '<span>Tri par</span> date';
 $lang['media_upload']          = 'Télécharger dans la catégorie <strong>%s</strong>.';
 $lang['media_search']          = 'Chercher dans la catégorie <strong>%s</strong>.';
-$lang['media_edit']            = 'Éditer';
-$lang['media_history']         = 'Anciennes révision du fichier.';
+$lang['media_view']            = '<span class="%s">%s</span>';
+$lang['media_edit']            = 'Éditer <span class="%s">%s</span>';
+$lang['media_history']         = 'Historique du <span class="%s">%s</span>';
 $lang['media_meta_edited']     = 'métadonnées éditées';
 $lang['media_perm_read']       = 'Désolé, vous n\'avez pas les droits pour lire les fichiers.';
 $lang['media_perm_upload']     = 'Désolé, vous n\'avez pas les droits pour télécharger des fichiers.';
diff --git a/inc/lang/pt/lang.php b/inc/lang/pt/lang.php
index ef67a284c..6a2034a95 100644
--- a/inc/lang/pt/lang.php
+++ b/inc/lang/pt/lang.php
@@ -309,15 +309,14 @@ $lang['media_searchtab']  = 'Procurar';
 $lang['media_viewtab']    = 'Ver';
 $lang['media_edittab']    = 'Editar';
 $lang['media_historytab'] = 'Histórico';
-$lang['media_thumbsview'] = 'Miniaturas';
-$lang['media_listview']   = 'Lista';
 $lang['media_sort']       = 'Ordenar';
-$lang['media_sort_name']  = 'por nome';
-$lang['media_sort_date']  = 'por data';
+$lang['media_sort_name']  = '<span>Ordenar por</span> nome';
+$lang['media_sort_date']  = '<span>Ordenar por</span> data';
 $lang['media_upload']     = 'Enviar para o grupo <strong>%s</strong>.';
 $lang['media_search']     = 'Procurar no grupo <strong>%s</strong>.';
-$lang['media_edit']       = 'Editar';
-$lang['media_history']    = 'Estas são as revisões anteriores do ficheiro.';
+$lang['media_view']       = '<span class="%s">%s</span>';
+$lang['media_edit']       = 'Editar <span class="%s">%s</span>';
+$lang['media_history']    = 'Histórico do <span class="%s">%s</span>';
 $lang['media_meta_edited']= 'metadata editada';
 $lang['media_perm_read']  = 'Perdão, não tem permissão para ler ficheiros.';
 $lang['media_perm_upload']= 'Perdão, não tem permissão para enviar ficheiros.';
diff --git a/inc/lang/ru/lang.php b/inc/lang/ru/lang.php
index ef560e3a2..52c1dc20b 100644
--- a/inc/lang/ru/lang.php
+++ b/inc/lang/ru/lang.php
@@ -348,19 +348,16 @@ $lang['media_searchtab']       = 'Поиск';
 $lang['media_viewtab']         = 'Просмотр';
 $lang['media_edittab']         = 'Правка';
 $lang['media_historytab']      = 'История';
-$lang['media_thumbsview']      = 'Иконками';
-$lang['media_listview']        = 'Списком';
-$lang['media_sort']            = 'Сортировка';
-$lang['media_sort_name']       = 'по имени';
-$lang['media_sort_date']       = 'по дате';
+$lang['media_sort_name']       = '<span>Сортировка по</span> имени';
+$lang['media_sort_date']       = '<span>Сортировка по</span> дате';
 $lang['media_upload']          = 'Загрузка в пространство имён <strong>%s</strong>.';
 $lang['media_search']          = 'Поиск в пространстве имён <strong>%s</strong>.';
-$lang['media_edit']            = 'Правка';
-$lang['media_history']         = 'Это предыдущие версии файлов.';
+$lang['media_view']            = '<span class="%s">%s</span>';
+$lang['media_edit']            = 'Правка <span class="%s">%s</span>';
 $lang['media_meta_edited']     = 'метаданные изменены';
 $lang['media_perm_read']       = 'Извините, у Вас недостаточно прав для чтения файлов.';
 $lang['media_perm_upload']     = 'Извините, у Вас недостаточно прав для загрузки файлов.';
 $lang['media_update']          = 'Загрузить новую версию';
 $lang['media_restore']         = 'Восстановить эту версию';
 
-$lang['plugin_install_err']    = "Плагин установлен некорректно. Переименуйте папку плагина из '%s' в '%s'.";
\ No newline at end of file
+$lang['plugin_install_err']    = "Плагин установлен некорректно. Переименуйте папку плагина из '%s' в '%s'.";
diff --git a/inc/media.php b/inc/media.php
index 451a205db..ea612ea3f 100644
--- a/inc/media.php
+++ b/inc/media.php
@@ -108,10 +108,10 @@ function media_metaform($id,$auth){
     $src = mediaFN($id);
 
     // output
-    $action = media_managerURL(array('tab_details' => 'view'));
-    echo '<form action="'.$action.'" id="mediamanager__save_meta" accept-charset="utf-8" method="post" class="meta">'.NL;
-
-    formSecurityToken();
+    $form = new Doku_Form(array('action' => media_managerURL(array('tab_details' => 'view')),
+                                'class' => 'meta'));
+    $form->addHidden('img', $id);
+    $form->addHidden('mediado', 'save');
     foreach($fields as $key => $field){
         // get current value
         if (empty($field[0])) continue;
@@ -126,33 +126,19 @@ function media_metaform($id,$auth){
         $p['id']    = 'meta__'.$key;
         $p['name']  = 'meta['.$field[0].']';
 
-        // put label
-        echo '<div class="metafield">';
-        echo '<label for="meta__'.$key.'">';
-        echo ($lang[$field[1]]) ? $lang[$field[1]] : $field[1];
-        echo ':</label>';
-
-        // put input field
+        $form->addElement('<div class="row">');
         if($field[2] == 'text'){
-            $p['value'] = $value;
-            $p['type']  = 'text';
-            $att = buildAttributes($p);
-            echo "<input $att/>".NL;
+            $form->addElement(form_makeField('text', $p['name'], $value, ($lang[$field[1]]) ? $lang[$field[1]] : $field[1] . ':', $p['id'], $p['class']));
         }else{
             $att = buildAttributes($p);
-            echo "<textarea $att rows=\"6\" cols=\"50\">".formText($value).'</textarea>'.NL;
+            $form->addElement("<textarea $att rows=\"6\" cols=\"50\">".formText($value).'</textarea>');
         }
-        echo '</div>'.NL;
+        $form->addElement('</div>');
     }
-    echo '<div class="buttons">'.NL;
-    echo '<input type="hidden" name="img" value="'.hsc($id).'" />'.NL;
-    echo '<input type="hidden" name="mediado" value="save" />';
-
-    $do = 'mediado';
-    echo '<input name="'.$do.'[save]" type="submit" value="'.$lang['btn_save'].
-        '" title="'.$lang['btn_save'].' [S]" accesskey="s" class="button" />'.NL;
-    echo '</div>'.NL;
-    echo '</form>'.NL;
+    $form->addElement('<div class="buttons">');
+    $form->addElement(form_makeButton('submit', '', $lang['btn_save'], array('accesskey' => 's', 'name' => 'mediado[save]')));
+    $form->addElement('</div>');
+    $form->printForm();
 }
 
 /**
@@ -588,11 +574,11 @@ function media_filelist($ns,$auth=null,$jump='',$fullscreenview=false,$sort=fals
             echo '<div class="nothing">'.$lang['nothingfound'].'</div>'.NL;
         }else {
             if ($fullscreenview) {
-                $view = $_REQUEST['view'];
-                if ($view == 'list') {
-                    echo '<ul class="mediamanager-list" id="mediamanager__file_list">';
+                $view = $_REQUEST['list'];
+                if ($view == 'rows') {
+                    echo '<ul class="rows">';
                 } else {
-                    echo '<ul class="mediamanager-thumbs" id="mediamanager__file_list">';
+                    echo '<ul class="thumbs">';
                 }
             }
             foreach($data as $item){
@@ -608,41 +594,26 @@ function media_filelist($ns,$auth=null,$jump='',$fullscreenview=false,$sort=fals
     if (!$fullscreenview) media_searchform($ns);
 }
 
-/**
- * Prints mediamanager tab
- *
- * @author Kate Arzamastseva <pshns@ukr.net>
- * @param string $link - tab href
- * @param string $class - tab css class
- * @param string $name - tab caption
- * @param boolean $selected - is tab selected
- */
-function media_tab($link, $class, $name, $selected=false) {
-    if ($selected) $class .= ' selected';
-    $tab = '<a href="'.$link.'" class="'.$class.'" >'.$name.'</a>';
-    echo $tab;
-}
-
 /**
  * Prints tabs for files list actions
  *
  * @author Kate Arzamastseva <pshns@ukr.net>
+ * @author Adrian Lang <mail@adrianlang.de>
+ *
  * @param string $selected_tab - opened tab
  */
+
 function media_tabs_files($selected_tab = ''){
     global $lang;
+    $tabs = array();
+    foreach(array('files'  => 'mediaselect',
+                  'upload' => 'media_uploadtab',
+                  'search' => 'media_searchtab') as $tab => $caption) {
+        $tabs[$tab] = array('href'    => media_managerURL(array('tab_files' => $tab), '&'),
+                            'caption' => $lang[$caption]);
+    }
 
-    echo '<div class="mediamanager-tabs" id="mediamanager__tabs_files">';
-
-    media_tab(media_managerURL(array('tab_files' => 'files')),
-        'files', $lang['mediaselect'], ($selected_tab == 'files'));
-    media_tab(media_managerURL(array('tab_files' => 'upload')),
-        'upload', $lang['media_uploadtab'], ($selected_tab == 'upload'));
-    media_tab(media_managerURL(array('tab_files' => 'search')),
-        'search', $lang['media_searchtab'], ($selected_tab == 'search'));
-
-    echo '<div class="clearer"></div>';
-    echo '</div>';
+    html_tabs($tabs, $selected_tab);
 }
 
 /**
@@ -654,23 +625,21 @@ function media_tabs_files($selected_tab = ''){
 function media_tabs_details($image, $selected_tab = ''){
     global $lang, $conf;
 
-    echo '<div class="mediamanager-tabs" id="mediamanager__tabs_details">';
-
-    media_tab(media_managerURL(array('tab_details' => 'view')),
-        'view', $lang['media_viewtab'], ($selected_tab == 'view'));
+    $tabs = array();
+    $tabs['view'] = array('href'    => media_managerURL(array('tab_details' => 'view'), '&'),
+                          'caption' => $lang['media_viewtab']);
 
     list($ext, $mime) = mimetype($image);
     if ($mime == 'image/jpeg' && @file_exists(mediaFN($image))) {
-        media_tab(media_managerURL(array('tab_details' => 'edit')),
-            'edit', $lang['media_edittab'], ($selected_tab == 'edit'));
+        $tabs['edit'] = array('href'    => media_managerURL(array('tab_details' => 'edit'), '&'),
+                              'caption' => $lang['media_edittab']);
     }
     if ($conf['mediarevisions']) {
-        media_tab(media_managerURL(array('tab_details' => 'history')),
-            'history', $lang['media_historytab'], ($selected_tab == 'history'));
+        $tabs['history'] = array('href'    => media_managerURL(array('tab_details' => 'history'), '&'),
+                                 'caption' => $lang['media_historytab']);
     }
 
-    echo '<div class="clearer"></div>';
-    echo '</div>';
+    html_tabs($tabs, $selected_tab);
 }
 
 /**
@@ -678,42 +647,41 @@ function media_tabs_details($image, $selected_tab = ''){
  *
  * @author Kate Arzamastseva <pshns@ukr.net>
  */
-function media_tab_files_options($ns, $sort){
-    global $lang;
-
-    echo '<div class="background-container">';
-
-    echo '<strong class="namespace">';
-    echo $ns ? $ns : '['.$lang['mediaroot'].']';
-    echo '</strong>';
-
-    echo '<div id="mediamanager__tabs_list">';
-
-    echo '<a href="'.media_managerURL(array('view' => 'thumbs')).'" id="mediamanager__link_thumbs" >';
-    echo $lang['media_thumbsview'];
-    echo '</a>';
-
-    echo '<a href="'.media_managerURL(array('view' => 'list')).'" id="mediamanager__link_list" >';
-    echo $lang['media_listview'];
-    echo '</a>';
-
-    echo '</div>';
+function media_tab_files_options(){
+    global $lang, $NS;
+    $sort = _media_get_sort_type();
+    $form = new Doku_Form(array('class' => 'actions', 'method' => 'get'));
+    $form->addHidden('sectok', null);
+    $form->addHidden('ns', $NS);
+    $form->addHidden('do', 'media');
+    $form->addElement('<ul>');
+    foreach(array('list' => array('listType', array('thumbs', 'rows')),
+                  'sort' => array('sortBy', array('name', 'date'), $sort))
+            as $group => $content) {
+        if (count($content) < 3) {
+            $content[2] = isset($_REQUEST[$group])
+                            ? $_REQUEST[$group]
+                            : $content[1][0];
+        }
 
-    echo '<div id="mediamanager__sort">';
-    $form = new Doku_Form(array('action'=>media_managerURL(array(), '&'), 'id' => 'mediamanager__form_sort'));
-    $form->addElement(form_makeListboxField(
-                        'sort',
-                        array(
-                            'name' => $lang['media_sort_name'],
-                            'date' => $lang['media_sort_date']),
-                        $sort,
-                        $lang['media_sort']));
+        $form->addElement('<li class="' . $content[0] . '">');
+        foreach($content[1] as $option) {
+            $attrs = array();
+            if ($content[2] == $option) {
+                $attrs['checked'] = 'checked';
+            }
+            $form->addElement(form_makeRadioField($group, $option,
+                                       $lang['media_' . $group . '_' . $option],
+                                                  $content[0] . '__' . $option,
+                                                  $option, $attrs));
+        }
+        $form->addElement('</li>');
+    }
+    $form->addElement('<li>');
     $form->addElement(form_makeButton('submit', '', $lang['btn_apply']));
+    $form->addElement('</li>');
+    $form->addElement('</ul>');
     $form->printForm();
-    echo '</div>';
-
-    echo '<div class="clearer"></div>';
-    echo '</div>';
 }
 
 /**
@@ -723,12 +691,14 @@ function media_tab_files_options($ns, $sort){
  * @return string - sort type
  */
 function _media_get_sort_type() {
-    $sort = $_REQUEST['sort'];
-    if (!$sort && (strpos($_COOKIE['DOKU_PREFS'], 'sort') >= 0)) {
+    $sort = 'name';
+    if (isset($_REQUEST['sort'])) {
+        $sort = $_REQUEST['sort'];
+    } elseif (strpos($_COOKIE['DOKU_PREFS'], 'sort') >= 0) {
         $parts = explode('#', $_COOKIE['DOKU_PREFS']);
-            for ($i = 0; $i < count($parts); $i+=2){
-                if ($parts[$i] == 'sort') $sort = $parts[$i+1];
-            }
+        for ($i = 0; $i < count($parts); $i+=2){
+            if ($parts[$i] == 'sort') $sort = $parts[$i+1];
+        }
     }
     return $sort;
 }
@@ -742,16 +712,11 @@ function media_tab_files($ns,$auth=null,$jump='') {
     global $lang;
     if(is_null($auth)) $auth = auth_quickaclcheck("$ns:*");
 
-    $sort = _media_get_sort_type();
-    media_tab_files_options($ns, $sort);
-
-    echo '<div class="scroll-container" >';
     if($auth < AUTH_READ){
         echo '<div class="nothing">'.$lang['media_perm_read'].'</div>'.NL;
     }else{
-        media_filelist($ns,$auth,$jump,true,$sort);
+        media_filelist($ns,$auth,$jump,true,_media_get_sort_type());
     }
-    echo '</div>';
 }
 
 /**
@@ -763,12 +728,10 @@ function media_tab_upload($ns,$auth=null,$jump='') {
     global $lang;
     if(is_null($auth)) $auth = auth_quickaclcheck("$ns:*");
 
-    echo '<div class="background-container">';
-    echo sprintf($lang['media_upload'], $ns ? $ns : '['.$lang['mediaroot'].']');
-    echo '</div>';
-
-    echo '<div class="scroll-container">';
-    if ($auth >= AUTH_UPLOAD) echo '<div class="upload">' . $lang['mediaupload'] . '</div>';
+    echo '<div class="upload">';
+    if ($auth >= AUTH_UPLOAD) {
+        echo '<p>' . $lang['mediaupload'] . '</p>';
+    }
     media_uploadform($ns, $auth, true);
     echo '</div>';
 }
@@ -784,13 +747,12 @@ function media_tab_search($ns,$auth=null) {
     $do = $_REQUEST['mediado'];
     $query = $_REQUEST['q'];
     if (!$query) $query = '';
+    echo '<div class="search">';
 
-    $sort = _media_get_sort_type();
-    media_tab_files_options($ns, $sort);
-
-    echo '<div class="scroll-container">';
     media_searchform($ns, $query, true);
-    if ($do == 'searchlist') media_searchlist($query,$ns,$auth,true,$sort);
+    if ($do == 'searchlist') {
+        media_searchlist($query,$ns,$auth,true,_media_get_sort_type());
+    }
     echo '</div>';
 }
 
@@ -803,14 +765,6 @@ function media_tab_view($image, $ns, $auth=null, $rev=false) {
     global $lang, $conf;
     if(is_null($auth)) $auth = auth_quickaclcheck("$ns:*");
 
-    echo '<div class="background-container">';
-    list($ext,$mime,$dl) = mimetype($image,false);
-    $class = preg_replace('/[^_\-a-z0-9]+/i','_',$ext);
-    $class = 'select mediafile mf_'.$class;
-    echo '<span class="'.$class.'" >'.$image.'</span>';
-    echo '</div>';
-
-    echo '<div class="scroll-container">';
     if ($image && $auth >= AUTH_READ) {
         $meta = new JpegMeta(mediaFN($image, $rev));
         media_preview($image, $auth, $rev, $meta);
@@ -820,7 +774,6 @@ function media_tab_view($image, $ns, $auth=null, $rev=false) {
     } else {
         echo '<div class="nothing">'.$lang['media_perm_read'].'</div>';
     }
-    echo '</div>';
 }
 
 /**
@@ -832,16 +785,10 @@ function media_tab_edit($image, $ns, $auth=null) {
     global $lang;
     if(is_null($auth)) $auth = auth_quickaclcheck("$ns:*");
 
-    echo '<div class="background-container">';
-    echo $lang['media_edit'];
-    echo '</div>';
-
-    echo '<div class="scroll-container">';
     if ($image) {
         list($ext, $mime) = mimetype($image);
         if ($mime == 'image/jpeg') media_metaform($image,$auth);
     }
-    echo '</div>';
 }
 
 /**
@@ -854,11 +801,6 @@ function media_tab_history($image, $ns, $auth=null) {
     if(is_null($auth)) $auth = auth_quickaclcheck("$ns:*");
     $do = $_REQUEST['mediado'];
 
-    echo '<div class="background-container">';
-    echo $lang['media_history'];
-    echo '</div>';
-
-    echo '<div class="scroll-container">';
     if ($auth >= AUTH_READ && $image) {
         if ($do == 'diff'){
             media_diff($image, $ns, $auth);
@@ -869,7 +811,6 @@ function media_tab_history($image, $ns, $auth=null) {
     } else {
         echo '<div class="nothing">'.$lang['media_perm_read'].'</div>'.NL;
     }
-    echo '</div>';
 }
 
 /**
@@ -880,7 +821,7 @@ function media_tab_history($image, $ns, $auth=null) {
 function media_preview($image, $auth, $rev=false, $meta=false) {
     global $lang;
 
-    echo '<div class="mediamanager__preview">';
+    echo '<div class="image">';
 
     $size = media_image_preview_size($image, $rev, $meta);
 
@@ -896,7 +837,7 @@ function media_preview($image, $auth, $rev=false, $meta=false) {
         $more['w'] = $size[0];
         $more['h'] = $size[1];
         $src = ml($image, $more);
-        echo '<img src="'.$src.'" alt="'.$image.'" style="max-width: '.$size[0].'px;" />';
+        echo '<img src="'.$src.'" alt="" style="max-width: '.$size[0].'px;" />';
     }
 
     echo '</div>';
@@ -910,7 +851,7 @@ function media_preview($image, $auth, $rev=false, $meta=false) {
 function media_preview_buttons($image, $auth, $rev=false) {
     global $lang, $conf;
 
-    echo '<div class="mediamanager__preview_buttons">';
+    echo '<ul class="actions">';
 
     $more = '';
     if ($rev) {
@@ -924,9 +865,12 @@ function media_preview_buttons($image, $auth, $rev=false) {
     if (@file_exists(mediaFN($image, $rev))) {
 
         // view original file button
-        $form = new Doku_Form(array('action'=>$link, 'target'=>'_blank'));
+        $form = new Doku_Form(array('action'=>$link, 'method'=>'get', 'target' => '_blank'));
+        $form->addHidden('sectok', null);
         $form->addElement(form_makeButton('submit','',$lang['mediaview']));
+        echo '<li>';
         $form->printForm();
+        echo '</li>';
     }
 
     if($auth >= AUTH_DELETE && !$rev && @file_exists(mediaFN($image))){
@@ -935,8 +879,9 @@ function media_preview_buttons($image, $auth, $rev=false) {
         $form = new Doku_Form(array('id' => 'mediamanager__btn_delete',
             'action'=>media_managerURL(array('delete' => $image), '&')));
         $form->addElement(form_makeButton('submit','',$lang['btn_delete']));
+        echo '<li>';
         $form->printForm();
-
+        echo '</li>';
     }
 
     $auth_ow = (($conf['mediarevisions']) ? AUTH_UPLOAD : AUTH_DELETE);
@@ -946,7 +891,9 @@ function media_preview_buttons($image, $auth, $rev=false) {
         $form = new Doku_Form(array('id' => 'mediamanager__btn_update',
             'action'=>media_managerURL(array('image' => $image, 'mediado' => 'update'), '&')));
         $form->addElement(form_makeButton('submit','',$lang['media_update']));
+        echo '<li>';
         $form->printForm();
+        echo '</li>';
     }
 
     if($auth >= AUTH_UPLOAD && $rev && $conf['mediarevisions'] && @file_exists(mediaFN($image, $rev))){
@@ -957,10 +904,12 @@ function media_preview_buttons($image, $auth, $rev=false) {
         $form->addHidden('mediado','restore');
         $form->addHidden('rev',$rev);
         $form->addElement(form_makeButton('submit','',$lang['media_restore']));
+        echo '<li>';
         $form->printForm();
+        echo '</li>';
     }
 
-    echo '</div>';
+    echo '</ul>';
 }
 
 /**
@@ -1046,7 +995,7 @@ function media_details($image, $auth, $rev=false, $meta=false) {
     if (!$meta) $meta = new JpegMeta(mediaFN($image, $rev));
     $tags = media_file_tags($meta);
 
-    echo '<dl class="img_tags">';
+    echo '<dl>';
     foreach($tags as $tag){
         if ($tag['value']) {
             $value = cleanText($tag['value']);
@@ -1150,8 +1099,9 @@ function media_file_diff($image, $l_rev, $r_rev, $ns, $auth, $fromajax){
         $difftype = $_REQUEST['difftype'];
 
         if (!$fromajax) {
-            $form = new Doku_Form(array('action'=>media_managerURL(array(), '&'),
-                'id' => 'mediamanager__form_diffview'));
+            $form = new Doku_Form(array('action'=>media_managerURL(array(), '&'), 'method' => 'get'
+            ));
+            $form->addHidden('sectok', null);
             $form->addElement('<input type="hidden" name="rev2[]" value="'.$l_rev.'" ></input>');
             $form->addElement('<input type="hidden" name="rev2[]" value="'.$r_rev.'" ></input>');
             $form->addHidden('mediado', 'diff');
@@ -1167,57 +1117,76 @@ function media_file_diff($image, $l_rev, $r_rev, $ns, $auth, $fromajax){
         }
     }
 
-    echo '<div class="mediamanager-preview">';
-    echo '<ul id="mediamanager__diff_table">';
+    list($l_head, $r_head) = html_diff_head($l_rev, $r_rev, $image, true);
 
-    echo '<li>';
+    ?>
+    <table>
+      <tr>
+        <th><?php echo $l_head; ?></th>
+        <th><?php echo $r_head; ?></th>
+      </tr>
+    <?php
+
+    echo '<tr class="image">';
+    echo '<td>';
     media_preview($image, $auth, $l_rev, $l_meta);
-    echo '</li>';
+    echo '</td>';
 
-    echo '<li>';
+    echo '<td>';
     media_preview($image, $auth, $r_rev, $r_meta);
-    echo '</li>';
+    echo '</td>';
+    echo '</tr>';
 
-    echo '<li>';
+    echo '<tr class="actions">';
+    echo '<td>';
     media_preview_buttons($image, $auth, $l_rev);
-    echo '</li>';
+    echo '</td>';
 
-    echo '<li>';
+    echo '<td>';
     media_preview_buttons($image, $auth, $r_rev);
-    echo '</li>';
+    echo '</td>';
+    echo '</tr>';
 
     $l_tags = media_file_tags($l_meta);
     $r_tags = media_file_tags($r_meta);
+    // FIXME r_tags-only stuff
     foreach ($l_tags as $key => $l_tag) {
         if ($l_tag['value'] != $r_tags[$key]['value']) {
-            $r_tags[$key]['class'] = 'highlighted';
-            $l_tags[$key]['class'] = 'highlighted';
+            $r_tags[$key]['highlighted'] = true;
+            $l_tags[$key]['highlighted'] = true;
         } else if (!$l_tag['value'] || !$r_tags[$key]['value']) {
             unset($r_tags[$key]);
             unset($l_tags[$key]);
         }
     }
 
+    echo '<tr>';
     foreach(array($l_tags,$r_tags) as $tags){
-        echo '<li><div>';
+        echo '<td>';
 
         echo '<dl class="img_tags">';
         foreach($tags as $tag){
             $value = cleanText($tag['value']);
             if (!$value) $value = '-';
             echo '<dt>'.$lang[$tag['tag'][1]].':</dt>';
-            echo '<dd class="'.$tag['class'].'" >';
+            echo '<dd>';
+            if ($tag['highlighted']) {
+                echo '<strong>';
+            }
             if ($tag['tag'][2] == 'date') echo dformat($value);
             else echo hsc($value);
+            if ($tag['highlighted']) {
+                echo '</strong>';
+            }
             echo '</dd>';
         }
         echo '</dl>';
 
-        echo '</div></li>';
+        echo '</td>';
     }
+    echo '</tr>';
 
-    echo '</ul>';
-    echo '</div>';
+    echo '</table>';
 
     if ($is_img && !$fromajax) echo '</div>';
 }
@@ -1250,14 +1219,14 @@ function media_image_diff($image, $l_rev, $r_rev, $l_size, $r_size, $type) {
     $r_src = ml($image, $r_more);
 
     // slider
-    echo '<div id="mediamanager__'.$type.'_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>';
+    echo '<div id="diff_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>';
 
-    // two image's in div's
-    echo '<div id="mediamanager__diff_layout">';
-    echo '<div id="mediamanager__diff_'.$type.'_image1" style="max-width: '.$l_size[0].'px;">';
+    // two images in divs
+    echo '<div id="diff_' . $type . '">';
+    echo '<div class="image1" style="max-width: '.$l_size[0].'px;">';
     echo '<img src="'.$l_src.'" alt="" />';
     echo '</div>';
-    echo '<div id="mediamanager__diff_'.$type.'_image2" style="max-width: '.$l_size[0].'px;">';
+    echo '<div class="image2" style="max-width: '.$l_size[0].'px;">';
     echo '<img src="'.$r_src.'" alt="" />';
     echo '</div>';
     echo '</div>';
@@ -1447,42 +1416,43 @@ function media_printfile_thumbs($item,$auth,$jump=false,$display_namespace=false
     $file = utf8_decodeFN($item['file']);
 
     // output
-    echo '<li><div>';
+    echo '<li><dl>';
 
+        echo '<dt>';
     if($item['isimg']) {
         media_printimgdetail($item, true);
 
     } else {
         echo '<a name="d_:'.$item['id'].'" class="image" title="'.$item['id'].'" href="'.
             media_managerURL(array('image' => hsc($item['id']), 'ns' => getNS($item['id']),
-            'tab_details' => 'view')).'"><span>';
+            'tab_details' => 'view')).'">';
         echo media_printicon($item['id']);
-        echo '</span></a>';
+        echo '</a>';
     }
+    echo '</dt>';
     //echo '<input type=checkbox />';
     if (!$display_namespace) {
         $name = hsc($file);
     } else {
         $name = hsc($item['id']);
     }
-    echo '<a href="'.media_managerURL(array('image' => hsc($item['id']), 'ns' => getNS($item['id']),
-        'tab_details' => 'view')).'" name="h_:'.$item['id'].'" class="name">'.$name.'</a>';
+    echo '<dd class="name"><a href="'.media_managerURL(array('image' => hsc($item['id']), 'ns' => getNS($item['id']),
+        'tab_details' => 'view')).'" name="h_:'.$item['id'].'">'.$name.'</a></dd>';
 
     if($item['isimg']){
         $size = '';
         $size .= (int) $item['meta']->getField('File.Width');
         $size .= '&#215;';
         $size .= (int) $item['meta']->getField('File.Height');
-        echo '<span class="size">'.$size.'</span>';
+        echo '<dd class="size">'.$size.'</dd>';
     } else {
-        echo '<span class="size">&nbsp;</span>';
+        echo '<dd class="size">&nbsp;</dd>';
     }
     $date = dformat($item['mtime']);
-    echo '<span class="date">'.$date.'</span>';
+    echo '<dd class="date">'.$date.'</dd>';
     $filesize = filesize_h($item['size']);
-    echo '<span class="filesize">'.$filesize.'</span>';
-    echo '<div class="clearer"></div>';
-    echo '</div></li>'.NL;
+    echo '<dd class="filesize">'.$filesize.'</dd>';
+    echo '</dl></li>'.NL;
 }
 
 /**
@@ -1661,7 +1631,6 @@ function media_searchform($ns,$query='',$fullscreen=false){
     else $params['action'] = media_managerURL(array(), '&');
     $form = new Doku_Form($params);
     if (!$fullscreen) $form->addElement('<div class="upload">' . $lang['mediasearch'] . '</div>');
-    $form->addElement(formSecurityToken());
     $form->addHidden('ns', $ns);
     if (!$fullscreen) $form->addHidden('do', 'searchlist');
     else $form->addHidden('mediado', 'searchlist');
diff --git a/inc/template.php b/inc/template.php
index 96e0668c2..58baca111 100644
--- a/inc/template.php
+++ b/inc/template.php
@@ -1136,29 +1136,36 @@ function tpl_mediaFileList(){
     global $AUTH;
     global $NS;
     global $JUMPTO;
+    global $lang;
 
     $opened_tab = $_REQUEST['tab_files'];
     if (!$opened_tab || !in_array($opened_tab, array('files', 'upload', 'search'))) $opened_tab = 'files';
     if ($_REQUEST['mediado'] == 'update') $opened_tab = 'upload';
 
+    // FIXME: define lang
+    echo '<h2 class="a11y">' . sprintf($lang['filelist_desc'], $NS) .  '</h2>';
+
     media_tabs_files($opened_tab);
 
+    echo '<div class="panelHeader">';
+    echo '<h3>';
+    printf($lang['media_' . $opened_tab],
+           hsc($ns ? $ns : '['.$lang['mediaroot'].']'));
+    echo '</h3>';
+    if ($opened_tab === 'search' || $opened_tab === 'files') {
+        media_tab_files_options();
+    }
+    echo '</div>';
+
+    echo '<div class="panelContent">';
     if ($opened_tab == 'files') {
-        echo '<div id="mediamanager__files">';
         media_tab_files($NS,$AUTH,$JUMPTO);
-        echo '</div>';
-
     } elseif ($opened_tab == 'upload') {
-        echo '<div id="mediamanager__files">';
         media_tab_upload($NS,$AUTH,$JUMPTO);
-        echo '</div>';
-
     } elseif ($opened_tab == 'search') {
-        echo '<div id="mediamanager__files">';
         media_tab_search($NS,$AUTH);
-        echo '</div>';
     }
-
+    echo '</div>';
 }
 
 /**
@@ -1170,7 +1177,7 @@ function tpl_mediaFileList(){
  * @author Kate Arzamastseva <pshns@ukr.net>
  */
 function tpl_mediaFileDetails($image, $rev){
-    global $AUTH, $NS, $conf, $DEL;
+    global $AUTH, $NS, $conf, $DEL, $lang;
 
     $removed = (!file_exists(mediaFN($image)) && file_exists(mediaMetaFN($image, '.changes')) && $conf['mediarevisions']);
     if (!$image || (!file_exists(mediaFN($image)) && !$removed) || $DEL) return '';
@@ -1195,21 +1202,26 @@ function tpl_mediaFileDetails($image, $rev){
 
     media_tabs_details($image, $opened_tab);
 
+    echo '<div class="panelHeader"><h3>';
+    list($ext,$mime,$dl) = mimetype($image,false);
+    $class = preg_replace('/[^_\-a-z0-9]+/i','_',$ext);
+    $class = 'select mediafile mf_'.$class;
+    printf($lang['media_' . $opened_tab], $class, $image);
+    echo '</h3></div>';
+
+    echo '<div class="panelContent">';
+
     if ($opened_tab == 'view') {
-        echo '<div id="mediamanager__details">';
         media_tab_view($image, $NS, $AUTH, $rev);
-        echo '</div>';
 
     } elseif ($opened_tab == 'edit' && !$removed) {
-        echo '<div id="mediamanager__details">';
         media_tab_edit($image, $NS, $AUTH);
-        echo '</div>';
 
     } elseif ($opened_tab == 'history' && $conf['mediarevisions']) {
-        echo '<div id="mediamanager__details">';
         media_tab_history($image,$NS,$AUTH);
-        echo '</div>';
     }
+
+    echo '</div>';
 }
 
 /**
@@ -1482,44 +1494,37 @@ function tpl_favicon($types=array('favicon')) {
  * @author Kate Arzamastseva <pshns@ukr.net>
  */
 function tpl_media() {
-    //
     global $DEL, $NS, $IMG, $AUTH, $JUMPTO, $REV, $lang, $fullscreen, $conf;
     $fullscreen = true;
-    require_once(DOKU_INC.'lib/exe/mediamanager.php');
+    require_once DOKU_INC.'lib/exe/mediamanager.php';
 
     if ($_REQUEST['image']) $image = cleanID($_REQUEST['image']);
     if (isset($IMG)) $image = $IMG;
     if (isset($JUMPTO)) $image = $JUMPTO;
     if (isset($REV) && !$JUMPTO) $rev = $REV;
 
-    echo '<div id="mediamanager__page">';
     echo '<h1>'.$lang['btn_media'].'</h1>';
-    echo '<div id="mediamanager__layout">';
+    echo '<div id="mediamanager__page">';
 
-    echo '<div id="mediamanager__layout_namespaces" class="layout-resizable" >';
+    echo '<div class="panel namespaces">';
     html_msgarea();
-    echo '<div class="mediamanager-tabs">';
-    echo '<a href="#" class="selected">'.hsc($lang['namespaces']).'</a>';
-    echo '<div class="clearer"></div>';
-    echo '</div>';
-    echo '<div class="background-container">';
+    echo '<h2>'.hsc($lang['namespaces']).'</h2>';
+    echo '<div class="panelHeader">';
     echo hsc($lang['namespaces']);
     echo '</div>';
-    echo '<div class="scroll-container">';
-    tpl_mediaTree();
+
+    echo '<div class="panelContent">';
+    media_nstree($NS);
     echo '</div>';
     echo '</div>';
 
-    echo '<div id="mediamanager__layout_list" class="layout-resizable" >';
+    echo '<div class="panel filelist">';
     tpl_mediaFileList();
     echo '</div>';
 
-    echo '<div id="mediamanager__layout_detail" class="layout" >';
+    echo '<div class="panel file">';
     tpl_mediaFileDetails($image, $rev);
     echo '</div>';
-
-    echo '<div class="clearer"></div>';
-    echo '</div>';
     echo '</div>';
 }
 
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index ea69dbeb9..b1905f8a0 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -1,29 +1,21 @@
 /* Layout */
 
-#mediamanager__page {
-    width: 100%;
-    overflow-x: auto;
-}
-
 #mediamanager__page h1 {
     margin: 0 0 .5em;
 }
 
-#mediamanager__layout {
+#mediamanager__page {
     min-width: 840px;
+    width: 100%;
+    overflow-x: auto;
 }
 
-#mediamanager__layout .layout,
-#mediamanager__layout .layout-resizable {
+#mediamanager__page .panel {
     float: left;
-}
-
-#mediamanager__layout .layout-resizable {
     margin-right: 10px;
-    float: left;
 }
 
-#mediamanager__layout .scroll-container {
+#mediamanager__page .panelContent {
     overflow-y: auto;
     overflow-x: hidden;
     padding: 0;
@@ -32,7 +24,7 @@
     position: relative;
 }
 
-#mediamanager__layout .background-container {
+#mediamanager__page .panelHeader {
     background-color: __background_alt__;
     margin-bottom: 10px;
     padding: 10px 10px 8px;
@@ -40,21 +32,21 @@
     min-height: 20px;
 }
 
-#mediamanager__layout .background-container .icon {
+#mediamanager__page .panelHeader .icon {
     margin-right: 5px;
 }
 
-#mediamanager__layout_namespaces {
+#mediamanager__page .namespaces {
     width: 15%;
     min-width: 125px;
 }
 
-#mediamanager__layout_list {
+#mediamanager__page .filelist {
     width: 45%;
     min-width: 375px;
 }
 
-#mediamanager__layout_detail {
+#mediamanager__page_detail {
     width: 35%;
     min-width: 290px;
 }
@@ -75,22 +67,22 @@
 
 /* Namespaces tree */
 
-#mediamanager__page ul.idx {
+#mediamanager__page .namespaces ul.idx {
     margin-left: .2em;
 }
 
-#mediamanager__page ul.idx ul {
+#mediamanager__page .namespaces ul.idx ul {
     margin-left: 1em;
 }
 
-.idx .selected {
+#mediamanager__page .namespaces ul.idx .selected {
     background-color: __highlight__;
     font-weight: bold;
 }
 
 /* Tabs */
 
-.mediamanager-tabs a {
+#mediamanager__page div.panel h2.a11y {
     font-weight: bold;
     display: block;
     float: left;
@@ -106,18 +98,18 @@
     border-top-left-radius: 10px;
 }
 
-.mediamanager-tabs .selected {
+#mediamanager__page div.panel h2.a11y .selected {
     background-color: __background_alt__;
 }
 
-.mediamanager-tabs a:hover {
+#mediamanager__page div.panel h2.a11y a:hover {
     background-color: __background_alt__;
     opacity: 0.5;
 }
 
 /* Title links */
 
-#mediamanager__files .namespace {
+#mediamanager__page .filelist .panelHeader h3 {
     float: left;
     font-weight: normal;
 }
@@ -164,18 +156,18 @@
 
 /* File list */
 
-#mediamanager__file_list {
+#mediamanager__page .filelist .list {
     padding: 0;
     margin: 0 !important;
 }
 
-#mediamanager__file_list li:hover {
+#mediamanager__page .filelist .list li:hover {
     background-color: __background_alt__;
 }
 
 /* Files thumbs view */
 
-.mediamanager-thumbs li {
+#mediamanager__page .filelist .thumbs li {
     width: 100px;
     min-height: 130px;
     display: inline-block;
@@ -192,68 +184,68 @@
     line-height: 1.2;
 }
 
-* html .mediamanager-thumbs li {
+* html #mediamanager__page .filelist .thumbs li {
     display: inline;
 }
 
-*+html .mediamanager-thumbs li {
+*+html #mediamanager__page .filelist .thumbs li {
     display: inline;
 }
 
-.mediamanager-thumbs li .image,
-.mediamanager-thumbs li .image0 {
+#mediamanager__page .filelist .thumbs li .image,
+#mediamanager__page .filelist .thumbs li .image0 {
     width: 100%;
     height: 90px;
     display: block;
     overflow: hidden;
 }
 
-.mediamanager-thumbs li .image1 {
+#mediamanager__page .filelist .thumbs li .image1 {
     display: none;
 }
 
-.mediamanager-thumbs li .image span,
-.mediamanager-thumbs li .image0 span {
+#mediamanager__page .filelist .thumbs li .image span,
+#mediamanager__page .filelist .thumbs li .image0 span {
     vertical-align: middle;
     display: table-cell;
     width: 100px;
     height: 90px;
 }
 
-.mediamanager-thumbs li .name,
-.mediamanager-thumbs li .size,
-.mediamanager-thumbs li .filesize,
-.mediamanager-thumbs li .date {
+#mediamanager__page .filelist .thumbs li .name,
+#mediamanager__page .filelist .thumbs li .size,
+#mediamanager__page .filelist .thumbs li .filesize,
+#mediamanager__page .filelist .thumbs li .date {
     display: block;
     overflow: hidden;
     width: 90px;
     white-space: nowrap;
 }
 
-.mediamanager-thumbs li .name {
+#mediamanager__page .filelist .thumbs li .name {
     padding: 5px 0;
     font-weight: bold;
 }
 
-.mediamanager-thumbs li .date {
+#mediamanager__page .filelist .thumbs li .date {
     font-style: italic;
     white-space: normal;
 }
 
-.mediamanager-thumbs li input[type=checkbox] {
+#mediamanager__page .filelist .thumbs li input[type=checkbox] {
     display: none;
     float: left;
     margin: 3px;
 }
 
-.mediamanager-thumbs li:hover input[type=checkbox],
-.mediamanager-thumbs li input[type=checkbox]:checked {
+#mediamanager__page .filelist .thumbs li:hover input[type=checkbox],
+#mediamanager__page .filelist .thumbs li input[type=checkbox]:checked {
     display: block;
 }
 
 /* Files list view */
 
-.mediamanager-list li {
+#mediamanager__page .filelist .list li {
     list-style: none;
     display: block;
     position: relative;
@@ -264,12 +256,12 @@
     color: __text__;
 }
 
-.mediamanager-list li:nth-child(2n+1) {
+#mediamanager__page .filelist .list li:nth-child(2n+1) {
     background-color: __background_neu__;
 }
 
-.mediamanager-list li .image,
-.mediamanager-list li .image1 {
+#mediamanager__page .filelist .list li .image,
+#mediamanager__page .filelist .list li .image1 {
     width: 10%;
     display: block;
     overflow: hidden;
@@ -278,46 +270,46 @@
     text-align: center;
 }
 
-.mediamanager-list li .image0 {
+#mediamanager__page .filelist .list li .image0 {
     display: none;
 }
 
-.mediamanager-list li .name,
-.mediamanager-list li .size,
-.mediamanager-list li .filesize,
-.mediamanager-list li .date {
+#mediamanager__page .filelist .list li .name,
+#mediamanager__page .filelist .list li .size,
+#mediamanager__page .filelist .list li .filesize,
+#mediamanager__page .filelist .list li .date {
     overflow: hidden;
     float: left;
     margin-left: 1%;
     white-space: nowrap;
 }
 
-.mediamanager-list li .name {
+#mediamanager__page .filelist .list li .name {
     width: 30%;
     font-weight: bold;
 }
 
-.mediamanager-list li .size,
-.mediamanager-list li .filesize {
+#mediamanager__page .filelist .list li .size,
+#mediamanager__page .filelist .list li .filesize {
     width: 15%;
 }
 
-.mediamanager-list li .date {
+#mediamanager__page .filelist .list li .date {
     width: 20%;
 }
 
-.mediamanager-list li .date {
+#mediamanager__page .filelist .list li .date {
     font-style: italic;
     white-space: normal;
 }
 
-.mediamanager-list .icon {
+#mediamanager__page .filelist .list .icon {
     max-width: 16px;
     max-height: 16px;
 }
 
-.mediamanager-list li .image span,
-.mediamanager-list li .image1 span {
+#mediamanager__page .filelist .list li .image span,
+#mediamanager__page .filelist .list li .image1 span {
     vertical-align: middle;
     text-align: center;
     display: table-cell;
@@ -325,20 +317,20 @@
     height: 40px;
 }
 
-.mediamanager-list li input[type=checkbox] {
+#mediamanager__page .filelist .list li input[type=checkbox] {
     display: none;
     float: left;
     margin: 3px;
 }
 
-.mediamanager-list li:hover input[type=checkbox],
-.mediamanager-list li input[type=checkbox]:checked {
+#mediamanager__page .filelist .list li:hover input[type=checkbox],
+#mediamanager__page .filelist .list li input[type=checkbox]:checked {
     display: block;
 }
 
 /* Upload panel */
 
-#mediamanager__layout div.upload {
+#mediamanager__page div.upload {
     padding-bottom: 0.5em;
 }
 
@@ -440,7 +432,7 @@
 
 /* Image diff */
 
-#mediamanager__layout dl.img_tags dd.highlighted{
+#mediamanager__page dl.img_tags dd.highlighted{
     background-color: __highlight__;
 }
 
-- 
GitLab