From f6cae4160cfe6b66223bab65e03fa104fdb56cd1 Mon Sep 17 00:00:00 2001
From: Eric Bollengier <eric@eb.homelinux.org>
Date: Wed, 23 Aug 2006 17:19:39 +0000
Subject: [PATCH]  - Add client/media search box (with regexp)  - Add menubar
 instead of plain menu  - Drop all <button> element  - Fix big div

git-svn-id: https://bacula.svn.sourceforge.net/svnroot/bacula/trunk@3348 91ce42f0-d328-0410-95d8-f526ca767f89
---
 gui/bweb/INSTALL                      | 59 ++++++++++++------
 gui/bweb/ReleaseNotes                 |  7 +++
 gui/bweb/cgi/bweb.pl                  | 28 +++------
 gui/bweb/html/bweb.css                | 90 +++++++++++++++++++++++++--
 gui/bweb/html/bweb.js                 | 33 ++++++++++
 gui/bweb/html/kaiska.css              |  2 +-
 gui/bweb/lib/Bweb.pm                  | 35 ++++++++---
 gui/bweb/tpl/ach_add.tpl              |  6 +-
 gui/bweb/tpl/ach_content.tpl          | 60 ++++++++++--------
 gui/bweb/tpl/begin.tpl                | 78 +++++++++++++++--------
 gui/bweb/tpl/client_job_status.tpl    | 12 ++--
 gui/bweb/tpl/client_list.tpl          | 15 +++--
 gui/bweb/tpl/client_status.tpl        | 12 ++--
 gui/bweb/tpl/config_edit.tpl          |  4 +-
 gui/bweb/tpl/config_view.tpl          | 31 +++++----
 gui/bweb/tpl/display_client_job.tpl   |  2 +-
 gui/bweb/tpl/display_client_stats.tpl |  9 +--
 gui/bweb/tpl/display_form_job.tpl     |  9 +--
 gui/bweb/tpl/display_job.tpl          |  3 +-
 gui/bweb/tpl/display_job_zoom.tpl     | 32 +++++-----
 gui/bweb/tpl/display_location.tpl     | 19 ++----
 gui/bweb/tpl/display_media.tpl        | 14 ++---
 gui/bweb/tpl/display_media_zoom.tpl   | 14 ++---
 gui/bweb/tpl/display_pool.tpl         |  6 +-
 gui/bweb/tpl/end.tpl                  |  3 +
 gui/bweb/tpl/general.tpl              |  3 +-
 gui/bweb/tpl/graph.tpl                |  2 +-
 gui/bweb/tpl/help_extern.tpl          |  3 +-
 gui/bweb/tpl/help_extern_compute.tpl  | 10 +--
 gui/bweb/tpl/help_intern.tpl          |  5 +-
 gui/bweb/tpl/help_intern_compute.tpl  | 11 ++--
 gui/bweb/tpl/job_select.tpl           | 77 -----------------------
 gui/bweb/tpl/location_add.tpl         |  5 +-
 gui/bweb/tpl/location_edit.tpl        |  5 +-
 gui/bweb/tpl/move_media.tpl           |  8 +--
 gui/bweb/tpl/run_job.tpl              | 23 +++----
 gui/bweb/tpl/run_job_mod.tpl          |  9 +--
 gui/bweb/tpl/running_job.tpl          | 18 +++---
 gui/bweb/tpl/scheduled_job.tpl        | 23 +++----
 gui/bweb/tpl/update_location.tpl      |  6 +-
 gui/bweb/tpl/update_media.tpl         | 23 +++----
 41 files changed, 452 insertions(+), 362 deletions(-)
 delete mode 100644 gui/bweb/tpl/job_select.tpl

diff --git a/gui/bweb/INSTALL b/gui/bweb/INSTALL
index 983e98349a..3d8687941a 100644
--- a/gui/bweb/INSTALL
+++ b/gui/bweb/INSTALL
@@ -25,7 +25,7 @@ Bweb works well with 1.39 release.
  # get a config file
  mkdir -m 750 /etc/bweb
  chown root:www-data /etc/bweb
- echo "template_dir = /usr/share/bweb/tpl" > /etc/bweb/config
+ echo '$VAR1 = { template_dir => "/usr/share/bweb/tpl" };' > /etc/bweb/config
  chown www-data /etc/bweb/config
 
  # copy bweb template file
@@ -74,14 +74,43 @@ Put this in you httpd.conf, and add user with htpasswd
 ################ CONFIGURATION #################################
 
 /etc/bweb/config looks like : (you can edit it inside bweb)
+$VAR1 = bless( {
+  'graph_font' => '/usr/share/fonts/truetype/ttf-bitstream-vera/Vera.ttf',
+  'name' => undef,
+  'config_file' => '/etc/bweb/config',
+  'bconsole' => '/usr/sbin/bconsole -n -c /etc/bacula/bconsole.conf',
+  'ach_list' => {
+     'S1_L80' => bless( {
+         'info' => {
+                     'drive' => 0,
+                     'io' => 0,
+                     'slot' => 0
+                   },
+         'name' => 'S1_L80',
+         'bweb' => undef,
+         'device' => '/dev/changer',
+         'drive' => [],
+         'debug' => 0,
+         'label' => {},
+         'precmd' => 'sudo',
+         'io' => [],
+         'mtxcmd' => '/usr/sbin/mtx',
+         'drive_name' => [
+                           'S1_L80_SDLT0',
+                           'S1_L80_SDLT1'
+                         ],
+         'slot' => []
+       }, 'Bweb::Autochanger' )
+   },
+  'password' => 'xxx',
+  'template_dir' => '/usr/share/bweb/tpl',
+  'dbi' => 'DBI:mysql:database=bacula',
+  'error' => '',
+  'debug' => 0,
+  'user' => 'bacula',
+  'email_media' => 'eric@localhost'
+}, 'Bweb::Config' );
 
-dbi = DBI:Pg:database=bacula;host=192.168.1.2
-user = bacula
-password = test
-template_dir = /usr/share/bweb/tpl
-graph_font = /usr/share/fonts/truetype/msttcorefonts/Arial.ttf
-email_media = eric@localhost
-bconsole = /usr/local/bacula/sbin/bconsole -c /usr/local/bacula/etc/bconsole.conf
 
 ################ BRESTORE ######################################
 
@@ -97,16 +126,8 @@ psql -u bacula bacula < script/bweb-postgresql.sql
 
 ################ BCONSOLE NOTES ################################
 
-You must use bconsole without conio/readline support ! You can have 2 bconsole
-binary at the same time.
-
-./configure <your-other-options> --disable-conio
-cd src/lib
-make
-cd ..
-cd console
-make
-cp bconsole <your_destination>
+You must use bconsole without conio/readline support. For that, use
+bconsole -n option.
 
 ################ BACULA LOG ####################################
 
@@ -151,8 +172,6 @@ To get bweb working, you must follow these rules
 
 ################ SUDO CONFIGURATION ############################
 
-*** At this time, autochanger module works only at home :)
-
 If you use sudo, put this on you /etc/sudoers
 
 www-data ALL = (root) NOPASSWD: /usr/sbin/mtx -f /dev/changer transfer *
diff --git a/gui/bweb/ReleaseNotes b/gui/bweb/ReleaseNotes
index 9125b65034..b857734803 100644
--- a/gui/bweb/ReleaseNotes
+++ b/gui/bweb/ReleaseNotes
@@ -1,5 +1,12 @@
           Release Notes for bweb 1.39.20
 
+
+2006/08/23:
+ - Add client/media search box (with regexp)
+ - Add menubar instead of plain menu
+ - Drop all <button> element (work now with IE)
+ - Fix big div
+
 2006/08/22:
  - Add autochanger module (add/del/mod)
  - Add copyright notice
diff --git a/gui/bweb/cgi/bweb.pl b/gui/bweb/cgi/bweb.pl
index 68cc309478..2ca7f820e8 100755
--- a/gui/bweb/cgi/bweb.pl
+++ b/gui/bweb/cgi/bweb.pl
@@ -64,7 +64,7 @@ if ($action ne 'apply_conf' and !$bweb->{info}->{dbi}) {
 }
 
 if ($action eq 'begin') {		# main display
-    print "<table border='0'><td valign='top' width='100%'>\n";
+    print "<div style='left=0;'><table border='0'><tr><td valign='top' width='100%'>\n";
     $bweb->display_general(age => $arg->{age});
     $bweb->display_running_jobs(0);
     print "</td><td valign='top'>";
@@ -74,10 +74,10 @@ if ($action eq 'begin') {		# main display
 </div>
 <div class='bodydiv'>
 <a href='?action=job;age=172800;jobtype=B'>
-<img src='bgraph.pl?age=172800;width=450;height=250;graph=job_size;limit=100;action=graph;legend=off' alt='Nothing to display'>
+<img src='bgraph.pl?age=172800;width=600;height=250;graph=job_size;limit=100;action=graph;legend=off' alt='Nothing to display'>
 </a>
 </div>";
-    print "</td></table>";
+    print "</td></tr></table></div>";
     $bweb->display_job(limit => 10); 
 
 } elsif ($action eq 'view_conf') {
@@ -104,9 +104,9 @@ if ($action eq 'begin') {		# main display
 } elsif ($action eq 'location_add') {
     $bweb->location_add();
 
-#} elsif ($action eq 'del_location') {
-#    $bweb->del_location();
-#
+} elsif ($action eq 'location_del') {
+    $bweb->del_location();
+
 } elsif ($action eq 'media') {
     $bweb->display_media();
 
@@ -259,7 +259,7 @@ if ($action eq 'begin') {		# main display
 
 } elsif ($action eq 'job') {
 
-    print "<table border='0'><td valign='top'>\n";
+    print "<div><table border='0'><tr><td valign='top'>\n";
     my $fields = $bweb->get_form(qw/status level db_clients db_filesets
 				    limit age offset qclients qfilesets
 				    jobtype/);
@@ -269,7 +269,7 @@ if ($action eq 'begin') {		# main display
     $bweb->display_job(age => $arg->{age},  # last 7 days
 		       offset => $arg->{offset},
 		       limit => $arg->{limit});
-    print "</td></table>";
+    print "</td></tr></table></div>";
 } elsif ($action eq 'client_stats') {
 
     foreach my $client (CGI::param('client')) {
@@ -389,14 +389,4 @@ TODO :
  o update d'un volume
  o update d'un pool
 
- - Configuration des autochanger a la main dans un hash dumper
-
- {
-   L10 => {
-     name => 'L10',
-     drive_name => ['SDLT-1', 'STLD-2'],
-     login => 'bacula',
-     host  => 'storehost',
-     device => '/dev/changer',
-   },
- }
+ o Configuration des autochanger a la main dans un hash dumper
diff --git a/gui/bweb/html/bweb.css b/gui/bweb/html/bweb.css
index 3864a62b81..5323cfdc12 100644
--- a/gui/bweb/html/bweb.css
+++ b/gui/bweb/html/bweb.css
@@ -4,12 +4,11 @@ a { text-decoration: none;}
                         border: 1px solid #9d9d94;
 }
 
-abutton.formulaire { font-size: 9; height: 48px; width: 80px; background-color: transparent; }
+abutton.formulaire { font-size: 9pt; height: 48px; width: 80px; background-color: transparent; }
 
-button.formulaire { border: 0px; font-size: 9;  background-color: transparent; }
-
-td.joberr { background-color: red; font-color: white;}
+button.formulaire { border: 0px; font-size: 9pt;  background-color: transparent; }
 
+td.joberr { background-color: red; color: white;}
 
 .pSlice, .pSliceFull, .pSliceError, .pSliceAppend, .pSlicePurged, .pSliceRecycle, 
 .pSliceArchive, .pSliceUsed, .pSliceRead_Only, .pSliceDisabled,
@@ -43,3 +42,86 @@ td.joberr { background-color: red; font-color: white;}
  border: solid 1px #009900;
  background-color: #00FF00;
 }
+
+input.button {
+  border: 0px;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+#menu, #menu ul {
+	float: left;
+	list-style: none;
+	line-height: 1;
+	background:#eeeae6 ;
+	font-weight: bold;
+	padding: 0;
+	border: solid #999;
+	border-width: 1px 0;
+	margin: 0 0 1em 0;
+        width: 100%;
+	color: #7C6240;
+}
+
+#menu a {
+	display: block;
+	color: #7C6240;
+	text-decoration: none;
+	padding: 0.25em 2em;
+}
+
+#menu a.daddy {
+	background: url(right.gif) center right no-repeat;
+}
+
+#menu li {
+	float: left;
+	padding: 0;
+	width: 10em;
+}
+
+#menu li ul {
+	position: absolute;
+	left: -999em;
+	height: auto;
+	width: 14.4em;
+	font-weight: normal;
+	border-width: 1px;
+	margin: 0;
+}
+
+#logged {
+	padding: 0.25em 2em;
+	float: right;
+	clear: left;
+	text-align: right;
+
+}
+
+#menu li li {
+	padding-right: 1em;
+	width: 13em
+}
+
+#menu li ul a {
+	width: 13em;
+}
+
+#menu li ul ul {
+	margin: -1.75em 0 0 14em;
+}
+
+#menu li:hover ul ul, #menu li:hover ul ul ul, 
+#menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
+	left: -999em;
+}
+
+#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul,
+#menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
+	left: auto;
+}
+
+#menu li:hover, #menu li.sfhover {
+	background: #eeeae6;
+}
+
diff --git a/gui/bweb/html/bweb.js b/gui/bweb/html/bweb.js
index 5d5d6de915..091eb991d0 100644
--- a/gui/bweb/html/bweb.js
+++ b/gui/bweb/html/bweb.js
@@ -196,3 +196,36 @@ function percent_usage(value, parent)
    return parent;
 }
 
+function search_media()
+{
+ var what = document.getElementById('searchbox').value;
+ if (what) {
+   document.search.action.value='media';
+   document.search.re_media.value=what;
+   document.search.submit();
+ }
+}
+
+function search_client()
+{
+ var what = document.getElementById('searchbox').value;
+ if (what) {
+   document.search.action.value='client';
+   document.search.re_client.value=what;
+   document.search.submit();
+ }
+}
+
+sfHover = function() {
+ var sfEls = document.getElementById("menu").getElementsByTagName("LI");
+ for (var i=0; i<sfEls.length; i++) {
+    sfEls[i].onmouseover=function() {
+       this.className+=" sfhover";
+    }
+    sfEls[i].onmouseout=function() {
+       this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
+    }
+ }
+}
+
+if (window.attachEvent) window.attachEvent("onload", sfHover);
diff --git a/gui/bweb/html/kaiska.css b/gui/bweb/html/kaiska.css
index 00d51a03bb..a05d89ceae 100644
--- a/gui/bweb/html/kaiska.css
+++ b/gui/bweb/html/kaiska.css
@@ -151,7 +151,7 @@ div.menusearch {
   text-align: left;
 	padding: 0;
 	width: auto;
-	background: transparent url('/images/search.png') 2px no-repeat;
+	background: transparent url('/bweb/add.png') 2px no-repeat;
 	padding-left:25px;
 }
 div.menusearch p {
diff --git a/gui/bweb/lib/Bweb.pm b/gui/bweb/lib/Bweb.pm
index ecae608849..b812b1d938 100644
--- a/gui/bweb/lib/Bweb.pm
+++ b/gui/bweb/lib/Bweb.pm
@@ -287,6 +287,13 @@ sub save
 {
     my ($self) = @_ ;
 
+    if ($self->{ach_list}) {
+	# shortcut for display_begin
+	$self->{achs} = [ map {{ name => $_ }} 
+			  keys %{$self->{ach_list}}
+			];
+    }
+
     unless (open(FP, ">$self->{config_file}"))
     {
 	return $self->error("$self->{config_file} : $!\n" .
@@ -316,9 +323,7 @@ sub edit
 sub view
 {
     my ($self) = @_ ;
-    $self->{achs} = [ map { { name => $_ } } keys %{$self->{ach_list}} ];
     $self->display($self, "config_view.tpl");
-    delete $self->{achs};
 }
 
 sub modify
@@ -1020,6 +1025,7 @@ our %sql_func = (
 		      TO_SEC => " interval '1 second' * ",
 		      SEC_TO_INT => "SEC_TO_INT",
 		      SEC_TO_TIME => '',
+		      MATCH => " ~ ",
 		  },
 		  mysql => {
 		      UNIX_TIMESTAMP => 'UNIX_TIMESTAMP',
@@ -1027,6 +1033,7 @@ our %sql_func = (
 		      SEC_TO_INT => '',
 		      TO_SEC => '',
 		      SEC_TO_TIME => 'SEC_TO_TIME',
+		      MATCH => " REGEXP ",
 		  },
 		 );
 
@@ -1202,14 +1209,23 @@ sub display_clients
 {
     my ($self) = @_;
 
+    my $where='';
+    my $arg = $self->get_form("client", "qre_client");
+
+    if ($arg->{qre_client}) {
+	$where = "WHERE Name $self->{sql}->{MATCH} $arg->{qre_client} ";
+    } elsif ($arg->{client}) {
+	$where = "WHERE Name = '$arg->{client}' ";
+    }
+
     my $query = "
 SELECT Name   AS name,
        Uname  AS uname,
        AutoPrune AS autoprune,
        FileRetention AS fileretention,
        JobRetention  AS jobretention
-
 FROM Client
+$where
 ";
 
     my $all = $self->dbh_selectall_hashref($query, 'name') ;
@@ -1219,10 +1235,10 @@ FROM Client
 	$_->{jobretention} = human_sec($_->{jobretention});
     }
 
-    my $arg = { ID => $cur_id++,
+    my $dsp = { ID => $cur_id++,
 		clients => [ values %$all] };
 
-    $self->display($arg, "client_list.tpl") ;
+    $self->display($dsp, "client_list.tpl") ;
 }
 
 sub get_limit
@@ -1323,7 +1339,7 @@ sub get_form
 		 precmd => 1,
 		 device => 1,
 		 );
-    
+
     foreach my $i (@what) {
 	if (exists $opt_i{$i}) {# integer param
 	    my $value = CGI::param($i) || $opt_i{$i} ;
@@ -1335,6 +1351,7 @@ sub get_form
 	    if ($value =~ /^([\w\d\.-]+)$/) {
 		$ret{$i} = $1;
 	    }
+
 	} elsif ($i =~ /^j(\w+)s$/) { # quote join args
 	    my @value = CGI::param($1) ;
 	    if (@value) {
@@ -1956,11 +1973,14 @@ sub display_media
     my ($where, %elt) = $self->get_param('pool',
 					 'location');
 
-    my $arg = $self->get_form('jmedias');
+    my $arg = $self->get_form('jmedias', 'qre_media');
 
     if ($arg->{jmedias}) {
 	$where = "AND Media.VolumeName IN ($arg->{jmedias}) $where"; 
     }
+    if ($arg->{qre_media}) {
+	$where = "AND Media.VolumeName $self->{sql}->{MATCH} $arg->{qre_media} $where"; 
+    }
 
     my $query="
 SELECT Media.VolumeName  AS volumename, 
@@ -2662,6 +2682,7 @@ sub ach_register
     my ($self, $ach) = @_;
 
     $self->{info}->{ach_list}->{$ach->{name}} = $ach;
+
     $self->{info}->save();
     
     return 1;
diff --git a/gui/bweb/tpl/ach_add.tpl b/gui/bweb/tpl/ach_add.tpl
index d5c7394598..066f078c87 100644
--- a/gui/bweb/tpl/ach_add.tpl
+++ b/gui/bweb/tpl/ach_add.tpl
@@ -40,13 +40,11 @@
     </tr>
     </TMPL_LOOP>
     </table>
-    <button name='action' value='ach_add' class='formulaire'>
-     <img src='/bweb/save.png'>
-    </button>
+    <input type="image" name='action' value='ach_add' src='/bweb/save.png'>
    </form>
 </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
   <TMPL_IF name>
   for (var i=0; i < document.form1.ach.length; ++i) {
      if (document.form1.ach[i].value == '<TMPL_VAR name>') {
diff --git a/gui/bweb/tpl/ach_content.tpl b/gui/bweb/tpl/ach_content.tpl
index 8a28f05160..689f71548c 100644
--- a/gui/bweb/tpl/ach_content.tpl
+++ b/gui/bweb/tpl/ach_content.tpl
@@ -18,32 +18,38 @@ Autochanger : <TMPL_VAR NAME=Name> (<TMPL_VAR NAME=nb_drive> Drives
      Tools
     </div>
     <div class='otherbox'>
-<button type='submit' name='action' value='label_barcodes' class='formulaire'
-        title='run label barcodes'>Label<br/><img src='/bweb/label.png'>
-</button>
+<label>
+<input type="image" name='action' value='label_barcodes'
+        title='run label barcodes' src='/bweb/label.png'>Label
+</label>
 <TMPL_IF NAME=nb_io>
-<button type='submit' name='action' value='eject' class='formulaire'
-        title='put selected media on i/o'>Eject<br/>
-  <img src='/bweb/extern.png'>
-</button>
-<button type='submit' name='action' value='clear_io' class='formulaire'
-        title='Clear i/o'>Clear I/O<br/>
-  <img src='/bweb/intern.png'>
-</button>
+<label>
+<input type="image" name='action' value='eject'
+        title='put selected media on i/o' src='/bweb/extern.png'>
+Eject
+</label>
+<label>
+<input type="image" name='action' value='clear_io'
+        title='Clear i/o' src='/bweb/intern.png'>
+Clear I/O
+</label>
 </TMPL_IF>
-<button type='submit' name='action' value='update_slots' class='formulaire'
-        title='run update slots'>Update<br/>
-  <img src='/bweb/update.png'>
-</button>
+<label>
+<input type="image" name='action' value='update_slots'
+        title='run update slots' src='/bweb/update.png'>
+Update
+</label>
 <br/><br/>
-<button type='submit' name='action' value='ach_load' class='formulaire'
-	title='mount drive'>Mount<br/>
-  <img src='/bweb/load.png'>
-</button>
-<button type='submit' name='action' value='ach_unload' class='formulaire'
-	title='umount drive'>Umount<br/>
-  <img src='/bweb/unload.png'>
-</button>
+<label>
+<input type="image" name='action' value='ach_load'
+	title='mount drive' src='/bweb/load.png'>
+Mount
+</label>
+<label>
+<input type="image" name='action' value='ach_unload'
+	title='umount drive' src='/bweb/unload.png'>
+Umount
+</label>
 
    </div>
     <td width='200'/>
@@ -58,7 +64,7 @@ Autochanger : <TMPL_VAR NAME=Name> (<TMPL_VAR NAME=nb_drive> Drives
    </form>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 
 var header = new Array("Real Slot", "Slot", "Volume Name","Vol Bytes","Vol Status",
 	               "Media Type","Pool Name","Last Written", 
@@ -104,9 +110,9 @@ nrsTable.setup(
  odd_cell_color: odd_cell_color, 
  header_color: header_color,
 // page_nav: true,
- padding: 3,
 // rows_per_page: rows_per_page,
 // disable_sorting: new Array(5,6)
+ padding: 3
 }
 );
 
@@ -146,9 +152,9 @@ nrsTable.setup(
  odd_cell_color: odd_cell_color, 
  header_color: header_color,
 // page_nav: true,
- padding: 3,
 // rows_per_page: rows_per_page,
-// disable_sorting: new Array(5,6)
+// disable_sorting: new Array(5,6),
+ padding: 3
 }
 );
 
diff --git a/gui/bweb/tpl/begin.tpl b/gui/bweb/tpl/begin.tpl
index a78da9dd5d..630c9f4298 100644
--- a/gui/bweb/tpl/begin.tpl
+++ b/gui/bweb/tpl/begin.tpl
@@ -1,39 +1,65 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
 <html>
 <head>
-<title>Bweb</title>
-<script language="JavaScript" src="/bweb/natcompare.js"></script>
-<script language="JavaScript" src="/bweb/nrs_table.js"></script>
-<script language="JavaScript" src="/bweb/bweb.js"></script>
+<title>Bweb - Bacula Web Interface</title>
+<script type="text/javascript" language="JavaScript" src="/bweb/natcompare.js"></script>
+<script type="text/javascript" language="JavaScript" src="/bweb/nrs_table.js"></script>
+<script type="text/javascript" language="JavaScript" src="/bweb/bweb.js"></script>
 <link type="text/css" rel="stylesheet" href="/bweb/style.css"/>
 <link type="text/css" rel="stylesheet" href="/bweb/kaiska.css"/>
 <link type="text/css" rel="stylesheet" href="/bweb/bweb.css"/>
 </head>
 <body>
 
-    <div class="menubar">
-<a href="?"> Main </a>[
-<a href="?action=client"> Clients </a>|	      
-<a href="?action=run_job"> Jobs </a>|
-<a href="?action=running"> Running jobs </a>|
-<a href="?action=job"> Old Jobs </a>|
-<a href="?action=next_job"> Next jobs </a|>|
-<a href="?action=restore" title="Launch brestore"> Restore </a>|
-<a href="?action=graph"> Statistics </a>] [
-<a href="?action=pool"> Pools </a>|
-<a href="?action=location"> Locations </a>|
-<a href="?action=media"> Medias </a>|
-<a href="?action=extern_media"> Eject media </a>| 
-<a href="?action=intern_media"> Load media </a>
-<!--| <a href="?action=ach_view"> View Autochanger </a> -->
-] [
-<a href="?action=view_conf"> Configuration </a>|
-<a href="?action=about"> About </a>]
-Logged as <TMPL_VAR NAME=loginname>
-    </div>
-
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 if (navigator.appName == 'Konqueror') {
 	alert("Sorry at this moment, bweb works only with mozilla.");
 }
 </script>
 
+<ul id="menu">
+ <li><a href="?">Main</a> </li>
+ <li><a href="?action=client">Clients</a></li>
+ <li><a href="?action=run_job">Jobs</a>
+   <ul> 
+     <li><a href="?action=next_job">Next Jobs</a> </li>
+     <li><a href="?action=job">Old Jobs</a> </li>
+     <li><a href="?action=restore" title="Launch brestore">Restore</a> </li>
+     <li><a href="?action=run_job">Defined Jobs</a>
+   </ul>
+ </li>
+ <li style="padding: 0.25em 2em;">Media
+  <ul>
+     <li><a href="?action=pool">Pools</a> </li>
+     <li><a href="?action=location">Locations</a> </li>
+     <li><a href="?action=media">All Medias</a> </li>
+     <li><hr></li>
+     <li><a href="?action=extern_media">Eject Medias</a> </li>
+     <li><a href="?action=intern_media">Load Medias</a> </li>
+  </ul>
+ </li>
+<TMPL_IF achs>
+ <li style="padding: 0.25em 2em;">Autochanger
+  <ul>
+<TMPL_LOOP achs>
+   <li><a href="?action=ach_view;ach=<TMPL_VAR name>"><TMPL_VAR name></a></li>
+</TMPL_LOOP>
+  </ul>
+ </li>
+</TMPL_IF> 
+ <li><a href="?action=graph"> Statistics </a></li>
+ <li> <a href="?action=view_conf"> Configuration </a> </li>
+ <li> <a href="?action=about"> About </a> </li>
+ <li style="padding: 0.25em 2em;float: right;">&nbsp;Logged as <TMPL_VAR NAME=loginname> </li>
+ <li style="float: right;padding-right: 1em;white-space: nowrap;">
+<input type="image" class="button" title="search media" onclick="search_media();" src="/bweb/tape.png"><input type="image" title="search client" onclick="search_client();" src="/bweb/client.png">&nbsp;<input class='formulaire' id='searchbox' type='text' size='8' value="search..." onclick="this.value='';" title="search media or client"></li>
+</ul>
+
+<form name="search" action="?" method='GET'>
+ <input type="hidden" name="action" value="">
+ <input type="hidden" name="re_media" value="">
+ <input type="hidden" name="re_client" value="">
+</form>
+
+<div style="clear: left;">
+<div style="float: left;">
diff --git a/gui/bweb/tpl/client_job_status.tpl b/gui/bweb/tpl/client_job_status.tpl
index 0d3939232a..a650464082 100644
--- a/gui/bweb/tpl/client_job_status.tpl
+++ b/gui/bweb/tpl/client_job_status.tpl
@@ -27,18 +27,16 @@
  </div>
 
 <form name='form1' action='?' method='GET'>
-<button name='action' value='dsp_cur_job' class='formulaire'>
-<img src='/bweb/update.png' title='refresh'>
-</button>
+<input type="image" name='action' value='dsp_cur_job' 
+ src='/bweb/update.png' title='refresh'>&nbsp;
 <input type='hidden' name='client' value='<TMPL_VAR Client>'>
 <input type='hidden' name='jobid' value='<TMPL_VAR JobId>'>
-<button type='submit' name='action' value='cancel_job'  class='formulaire'
-        title='Cancel job'><img src='/bweb/cancel.png'>
-</button>
+<input type="image" name='action' value='cancel_job'
+        title='Cancel job' src='/bweb/cancel.png'>&nbsp;
 </form>
 
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
   bweb_add_refresh();
 </script>
 
diff --git a/gui/bweb/tpl/client_list.tpl b/gui/bweb/tpl/client_list.tpl
index 4db687ba75..8f5a344429 100644
--- a/gui/bweb/tpl/client_list.tpl
+++ b/gui/bweb/tpl/client_list.tpl
@@ -10,16 +10,21 @@
         </div>
         <div class="otherbox">
 <!--        <h1>Actions</h1> -->	
-       <button class='formulaire' name='action' value='job' title='Show last job'><img src='/bweb/zoom.png'>Last jobs</button> &nbsp;
-       <button class='formulaire' name='action' value='dsp_cur_job' title='Show current job'><img src='/bweb/zoom.png'>Current jobs</button> &nbsp;
-       <button class='formulaire' name='action' value='client_status' title='Show client status'><img src='/bweb/zoom.png'>Status</button> &nbsp;
-       <button class='formulaire' name='action' value='client_stats' title='Client stats'><img src='/bweb/chart.png'>Stats</button> &nbsp;
+       <label>
+       <input type="image" name='action' value='job' title='Show last job' src='/bweb/zoom.png'>Last jobs</label> &nbsp;
+       <label>
+       <input type="image" name='action' value='dsp_cur_job' title='Show current job' src='/bweb/zoom.png'>Current jobs</label> &nbsp;
+       <label>
+       <input type="image" name='action' value='client_status' title='Show client status' src='/bweb/zoom.png'>Status</label> &nbsp;
+       <label>
+       <input type="image" name='action' value='client_stats' title='Client stats' src='/bweb/chart.png'>Stats</label> &nbsp;
+       </label>
         </div>
 
 </form>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 var header = new Array("Name", "Select", "Desc", "Auto Prune", "File Retention", "Job Retention");
 
 var data = new Array();
diff --git a/gui/bweb/tpl/client_status.tpl b/gui/bweb/tpl/client_status.tpl
index 04a5ba296c..d141d15bd4 100644
--- a/gui/bweb/tpl/client_status.tpl
+++ b/gui/bweb/tpl/client_status.tpl
@@ -27,18 +27,16 @@
  </div>
 
 <form name='form1' action='?' method='GET'>
-<button name='action' value='dsp_cur_job' class='formulaire'>
-<img src='/bweb/update.png' title='refresh'>
-</button>
+<input type="image" name='action' value='dsp_cur_job'
+ src='/bweb/update.png' title='refresh'>&nbsp;
 <input type='hidden' name='client' value='<TMPL_VAR Client>'>
 <input type='hidden' name='jobid' value='<TMPL_VAR JobId>'>
-<button type='submit' name='action' value='cancel_job' class='formulaire' 
-        title='Cancel job'><img src='/bweb/cancel.png'>
-</button>
+<input type="image" name='action' value='cancel_job'
+        title='Cancel job' src='/bweb/cancel.png'>&nbsp;
 </form>
 
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 bweb_add_refresh();
 </script>
 
diff --git a/gui/bweb/tpl/config_edit.tpl b/gui/bweb/tpl/config_edit.tpl
index 8d2e33bdfc..9c69b958b5 100644
--- a/gui/bweb/tpl/config_edit.tpl
+++ b/gui/bweb/tpl/config_edit.tpl
@@ -42,8 +42,6 @@
          <td> <input class="formulaire" type='checkbox' name='debug'> 
          </td></tr>
     </table>
-    <button name='action' value='apply_conf' class='formulaire'>
-     <img src='/bweb/save.png'>
-    </button>
+    <input type="image" name='action' value='apply_conf' src='/bweb/save.png'>
    </form>
 </div>
diff --git a/gui/bweb/tpl/config_view.tpl b/gui/bweb/tpl/config_view.tpl
index 18dce91530..63b5318c91 100644
--- a/gui/bweb/tpl/config_view.tpl
+++ b/gui/bweb/tpl/config_view.tpl
@@ -23,29 +23,38 @@
      <table border='0'>
     <TMPL_LOOP achs>
       <tr> 
-       <td><input type='radio' name='ach' value='<TMPL_VAR name>'><TMPL_VAR name></td>
+       <td>
+<label>
+ <input type='radio' name='ach' value='<TMPL_VAR name>'><TMPL_VAR name>
+</label>
+       </td>
       </tr>
     </TMPL_LOOP>
     </table>
    <td>
-    <button class='formulaire' type='submit' name='action' value='ach_edit' title='edit'><img src='/bweb/edit.png'></button>
-    <button class='formulaire' type='submit' name='action' value='ach_del' title='delete'><img src='/bweb/remove.png'></button>
-    <button class='formulaire' type='submit' name='action' value='ach_view' title='view'><img src='/bweb/zoom.png'></button>
+  
+   <input type="image" name="action" value="ach_edit" title="edit" src='/bweb/edit.png'> 
+   <input type="image" name='action' value='ach_del' title='delete' src='/bweb/remove.png'>
+   <input type='image' name='action' value='ach_view' title='view' src='/bweb/zoom.png'>
     </form>
     </td>
    </tr>
    </TMPL_IF achs>
+   <tr>
+   <td><hr></td><td></td>
+   </tr>
   </table>
 
   <form action='?' method='GET'>
-   <button name='action' value='edit_conf' class='formulaire'>
-      Edit<br/><img title='Edit' src='/bweb/edit.png'>
-   </button>
-   <button name='action' value='ach_add' class='formulaire'>
-      Add autochanger<br/><img title='Add an autochanger' src='/bweb/add.png'>
-   </button>
+   <label>
+   <input name='action' value='edit_conf' type="image" title='Edit' src='/bweb/edit.png'> Edit
+   </label>
+   <label>
+   <input name='action' value='ach_add' type="image" title='Add an autochanger' src='/bweb/add.png'> Add autochanger
+   </label>
   </form>
 
+  <TMPL_IF error>
   info :  <TMPL_VAR error> </br>
-
+  </TMPL_IF>
 </div>
diff --git a/gui/bweb/tpl/display_client_job.tpl b/gui/bweb/tpl/display_client_job.tpl
index f5a6bef96d..fbdc04b6fb 100644
--- a/gui/bweb/tpl/display_client_job.tpl
+++ b/gui/bweb/tpl/display_client_job.tpl
@@ -19,7 +19,7 @@
  </div>
 
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 var header = new Array("JobId", "Job Name", "File Set", "Level", "Start Time", 
                   "Job Files", "Job Bytes", "Errors");
 
diff --git a/gui/bweb/tpl/display_client_stats.tpl b/gui/bweb/tpl/display_client_stats.tpl
index 536cf88a7a..17b0fe76a2 100644
--- a/gui/bweb/tpl/display_client_stats.tpl
+++ b/gui/bweb/tpl/display_client_stats.tpl
@@ -13,15 +13,16 @@
         </div>
         <div class="otherbox">
        <h1>Actions</h1> 
-       <button name='action' value='job' title='Show last job'><img src='/bweb/zoom.png'></button> &nbsp;
-       <button name='action' value='dsp_cur_job' title='Show current job'><img src='/bweb/zoom.png'></button> &nbsp;
-       <button name='action' value='client_stat' title='Client stats'><img src='/bweb/zoom.png'></button> &nbsp;
+       <input type="image" name='action' value='job' title='Show last job'
+        src='/bweb/zoom.png'> &nbsp;
+       <input type="image" name='action' value='dsp_cur_job' title='Show current job' src='/bweb/zoom.png'> &nbsp;
+       <input type="image" name='action' value='client_stat' title='Client stats' src='/bweb/zoom.png'> &nbsp;
         </div>
 -->
 </form>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 var header = new Array("Name", "Nb Jobs", "Nb Bytes", "Nb Files", "Nb Errors");
 
 var data = new Array();
diff --git a/gui/bweb/tpl/display_form_job.tpl b/gui/bweb/tpl/display_form_job.tpl
index 3901fbf152..9945460190 100644
--- a/gui/bweb/tpl/display_form_job.tpl
+++ b/gui/bweb/tpl/display_form_job.tpl
@@ -1,5 +1,4 @@
 <br/>
-
 <div class="otherboxtitle">
   Filter &nbsp;
 </div>
@@ -78,13 +77,11 @@
 </tr>
 -->
 </table>
-  <button name='action' value='job' class='formulaire'>
-   <img src='/bweb/update.png'>
-  </button>
+  <input type="image" name='action' value='job' src='/bweb/update.png'>
 
-</div>
 </form>
-<script language="JavaScript">
+</div>
+<script type="text/javascript" language="JavaScript">
 
   <TMPL_LOOP qclients>
      document.getElementById('client_' + <TMPL_VAR name>).selected = true;
diff --git a/gui/bweb/tpl/display_job.tpl b/gui/bweb/tpl/display_job.tpl
index dc3021b91e..49955b0d57 100644
--- a/gui/bweb/tpl/display_job.tpl
+++ b/gui/bweb/tpl/display_job.tpl
@@ -1,4 +1,3 @@
-<br/>
  <div class='titlediv'>
   <h1 class='newstitle'> Last Jobs (<TMPL_VAR Filter>)</h1>
  </div>
@@ -6,7 +5,7 @@
     <table id='id<TMPL_VAR ID>'></table>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 <TMPL_IF status>
 document.getElementById('status_<TMPL_VAR status>').checked = true;
 </TMPL_IF>
diff --git a/gui/bweb/tpl/display_job_zoom.tpl b/gui/bweb/tpl/display_job_zoom.tpl
index 4349fc155f..0e11d747f8 100644
--- a/gui/bweb/tpl/display_job_zoom.tpl
+++ b/gui/bweb/tpl/display_job_zoom.tpl
@@ -6,28 +6,28 @@
  <table><td>
  <form action='?'>
   <input type='hidden' name='jobid' value='<TMPL_VAR jobid>'>
-  <button class='formulaire' name='action' value='delete' title='delete this job'>   Delete<br/>
-     <img src='/bweb/purge.png'>
-  </button>
+  <label>
+  <input type="image" name='action' value='delete' title='delete this job'
+   src='/bweb/purge.png'> Delete
+  </label>
  </form>
  </td><td>
  <form action='?'>
   <TMPL_LOOP volumes>
    <input type='hidden' name='media' value='<TMPL_VAR VolumeName>'>
   </TMPL_LOOP>   
-  <button class='formulaire' name='action' value='media' title='view media'>
-     View media<br/>
-     <img src='/bweb/zoom.png'>
-  </button>
+  <label>
+  <input type="image" name='action' value='media' title='view media' 
+   src='/bweb/zoom.png'>View media
+  </label>
  </form>
  </td>
  <td>
  <form action='?'>
   <input type='hidden' name='client' value='<TMPL_VAR Client>'>
-  <button class='formulaire' name='action' value='job' title='view <TMPL_VAR Client> jobs'>
-     View jobs<br/>
-     <img src='/bweb/zoom.png'>
-  </button>
+  <label>
+  <input type="image" name='action' value='job' title='view <TMPL_VAR Client> jobs' src='/bweb/zoom.png'>View jobs
+  </label>
  </form>
  </td>
  <td>
@@ -35,16 +35,16 @@
   <input type='hidden' name='age' value='2678400'>
   <input type='hidden' name='client' value='<TMPL_VAR Client>'>
   <input type='hidden' name='jobname' value='<TMPL_VAR jobname>'>
-  <button class='formulaire' name='action' value='graph' title='view trends'>
-     View stats<br/>
-     <img src='/bweb/chart.png'>
-  </button>
+  <label>
+  <input type="image" name='action' value='graph' title='view trends'
+   src='/bweb/chart.png'> View stats
+  </label>
  </form>
  </td>
  </table>
 </div>
 
-<script language='JavaScript'>
+<script type="text/javascript" language='JavaScript'>
 var header = new Array("JobId",
 	               "Client",
 	               "Job Name", 
diff --git a/gui/bweb/tpl/display_location.tpl b/gui/bweb/tpl/display_location.tpl
index f26fb3372a..b00075877b 100644
--- a/gui/bweb/tpl/display_location.tpl
+++ b/gui/bweb/tpl/display_location.tpl
@@ -5,23 +5,16 @@
  <div class="bodydiv">
    <form action='?' method='get'>
     <table id='id<TMPL_VAR ID>'></table>
-    <button class='formulaire' type='submit' name='action' value='location_add' title='Add a location'>
-     <img src='/bweb/add.png'>
-    </button>
-    <button class='formulaire' type='submit' name='action' value='location_del' title='Remove a location'>
-     <img src='/bweb/remove.png'>
-    </button>
-    <button class='formulaire' type='submit' name='action' value='location_edit' title='Edit a location'>
-     <img src='/bweb/edit.png'>
-    </button>
+    <input type="image" name='action' value='location_add' title='Add a location' src='/bweb/add.png'>&nbsp;
+    <input type="image" name='action' value='location_del' title='Remove a location' src='/bweb/remove.png'>&nbsp;
+    <input type="image" name='action' value='location_edit' title='Edit a location' src='/bweb/edit.png'>&nbsp;
 
-    <button class='formulaire' type='submit' name='action' value='media' title='Show content'>
-     <img src='/bweb/zoom.png'>
-    </button>
+    <input type="image" name='action' value='media' title='Show content'
+     src='/bweb/zoom.png'>
    </form>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 
 var header = new Array("Name","Enabled", "Cost", "Nb volumes", "Select");
 
diff --git a/gui/bweb/tpl/display_media.tpl b/gui/bweb/tpl/display_media.tpl
index 16aca4ff9a..dfa9e2bb06 100644
--- a/gui/bweb/tpl/display_media.tpl
+++ b/gui/bweb/tpl/display_media.tpl
@@ -21,18 +21,18 @@ Location : <TMPL_VAR location>
 
    <form action='?action=test' method='get'>
     <table id='id_pool_<TMPL_VAR ID>'></table>
-      <button class='formulaire' type='submit' name='action' value='extern' title='Move out'><img src='/bweb/extern.png'></button>
-      <button class='formulaire' type='submit' name='action' value='intern' title='Move in'><img src='/bweb/intern.png'></button> 
-      <button class='formulaire' type='submit' name='action' value='update_media' title='Update media'><img src='/bweb/edit.png'></button> 
-      <button class='formulaire' type='submit' name='action' value='media_zoom' title='Informations'><img src='/bweb/zoom.png'></button>
+      <input type="image" name='action' value='extern' title='Move out' src='/bweb/extern.png'>&nbsp;
+      <input type="image" name='action' value='intern' title='Move in' src='/bweb/intern.png'>&nbsp;
+      <input type="image" name='action' value='update_media' title='Update media' src='/bweb/edit.png'>&nbsp;
+      <input type="image" name='action' value='media_zoom' title='Informations' src='/bweb/zoom.png'>&nbsp;
 <!--
-      <button class='formulaire' type='submit' name='action' value='purge' title='Purge'><img src='/bweb/purge.png'></button>
+      <input type="image" name='action' value='purge' title='Purge' src='/bweb/purge.png'>&nbsp;
 -->
-      <button class='formulaire' type='submit' name='action' value='prune' title='Prune'><img src='/bweb/prune.png'></button>
+      <input type="image" name='action' value='prune' title='Prune' src='/bweb/prune.png'>
    </form>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 
 var header = new Array("Volume Name","Online","Vol Bytes", "Vol Usage", "Vol Status",
 		       "Pool", "Media Type",
diff --git a/gui/bweb/tpl/display_media_zoom.tpl b/gui/bweb/tpl/display_media_zoom.tpl
index e6b77aaf85..765954fa43 100644
--- a/gui/bweb/tpl/display_media_zoom.tpl
+++ b/gui/bweb/tpl/display_media_zoom.tpl
@@ -12,20 +12,20 @@
     <b> Actions </b></br>
    <form action='?' method='get'>
       <input type='hidden' name='media' value='<TMPL_VAR volumename>'>
-<TMPL_IF online>
-      <button class='formulaire' type='submit' name='action' value='extern' title='move out'><img src='/bweb/extern.png'></button>      
+<TMPL_IF online>&nbsp;
+      <input type="image" name='action' value='extern' title='move out' src='/bweb/extern.png'>&nbsp;
 <TMPL_ELSE>
-      <button class='formulaire' type='submit' name='action' value='intern' title='move in'><img src='/bweb/intern.png'></button> 
+      <input type="image" name='action' value='intern' title='move in' src='/bweb/intern.png'>&nbsp;
 </TMPL_IF>
-      <button class='formulaire' type='submit' name='action' value='update_media' title='Update'><img src='/bweb/edit.png'></button> 
-      <button class='formulaire' type='submit' name='action' value='purge' title='Purge'><img src='/bweb/purge.png'></button>
-      <button class='formulaire' type='submit' name='action' value='prune' title='Prune'><img src='/bweb/prune.png'></button>
+      <input type="image" name='action' value='update_media' title='Update' src='/bweb/edit.png'>&nbsp;
+      <input type="image" name='action' value='purge' title='Purge' src='/bweb/purge.png'>&nbsp;
+      <input type="image" name='action' value='prune' title='Prune' src='/bweb/prune.png'>
    </form>
  </div>
 
 
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 
 var header = new Array("Pool","Online","Location","Vol Status", "Vol Bytes", "Expire",
 	               "Retention","Max use duration", "Max jobs" );
diff --git a/gui/bweb/tpl/display_pool.tpl b/gui/bweb/tpl/display_pool.tpl
index 6085028591..37eae35bbe 100644
--- a/gui/bweb/tpl/display_pool.tpl
+++ b/gui/bweb/tpl/display_pool.tpl
@@ -5,16 +5,14 @@
  <div class="bodydiv">
    <form action='?' method='get'>
     <table id='id<TMPL_VAR ID>'></table>
-    <button class='formulaire' type='submit' name='action' value='media' title='Show content'>
-     <img src='/bweb/zoom.png'>
-    </button>
+    <input type="image" type='submit' name='action' value='media' title='Show content' src='/bweb/zoom.png'>
    </form>
    <br/>
    Tips: To modify pool properties, you have to edit your bacula configuration
    and reload it. After, you have to run "update pool=mypool" on bconsole.
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 
 var header = new Array("Name","Recycle","Retention","Use Duration",
 	               "Max job per volume","Max file per volume", 
diff --git a/gui/bweb/tpl/end.tpl b/gui/bweb/tpl/end.tpl
index 308b1d01b6..072a52b2bb 100644
--- a/gui/bweb/tpl/end.tpl
+++ b/gui/bweb/tpl/end.tpl
@@ -1,2 +1,5 @@
+</div>
+<div style="float: right;"></div>
+</div>
 </body>
 </html>
diff --git a/gui/bweb/tpl/general.tpl b/gui/bweb/tpl/general.tpl
index c4d63ef808..3f3f467fce 100644
--- a/gui/bweb/tpl/general.tpl
+++ b/gui/bweb/tpl/general.tpl
@@ -1,4 +1,5 @@
-<script language="JavaScript">
+
+<script type="text/javascript" language="JavaScript">
 bweb_add_refresh();
 </script>
 <div class='titlediv'>
diff --git a/gui/bweb/tpl/graph.tpl b/gui/bweb/tpl/graph.tpl
index 8455e244e7..ffab0f3976 100644
--- a/gui/bweb/tpl/graph.tpl
+++ b/gui/bweb/tpl/graph.tpl
@@ -110,7 +110,7 @@
 </table>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 
   <TMPL_LOOP qclients>
      document.getElementById('client_' + <TMPL_VAR name>).selected = true;
diff --git a/gui/bweb/tpl/help_extern.tpl b/gui/bweb/tpl/help_extern.tpl
index 87174108a4..0c15d2c271 100644
--- a/gui/bweb/tpl/help_extern.tpl
+++ b/gui/bweb/tpl/help_extern.tpl
@@ -37,8 +37,7 @@ be asked for choose inside the selection in the next screen.
               value='10'> </td>
     </tr>
     <tr>
-        <td><button class='formulaire' name='action' value='compute_extern_media' title='Next'>
-            <img src='/bweb/next.png'>
+        <td><input type="image" name='action' value='compute_extern_media' title='Next' src='/bweb/next.png'>
         </td><td/>
     </tr>
    </table>
diff --git a/gui/bweb/tpl/help_extern_compute.tpl b/gui/bweb/tpl/help_extern_compute.tpl
index 02847883af..41c1409706 100644
--- a/gui/bweb/tpl/help_extern_compute.tpl
+++ b/gui/bweb/tpl/help_extern_compute.tpl
@@ -8,18 +8,14 @@
     <table id='compute'></table>
     <table><tr>
     <td style='align: left;'>
-    <button onclick='javascript:window.history.go(-2);' class='formulaire' title='Back'>
-      <img src='/bweb/prev.png'> &nbsp;
-    </button>
+    <input type="image" onclick='javascript:window.history.go(-2);' title='Back' src='/bweb/prev.png'>
     </td><td style='align: right;'>
-    <button name='action' value='extern' class='formulaire'>
-      <img src='/bweb/extern.png'>
-    </button>
+    <input type="image" name='action' value='extern' src='/bweb/extern.png'>
    </td></tr>
    </form>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 
 var header = new Array("Volume Name","Vol Status",
 	               "Media Type","Pool Name","Last Written", 
diff --git a/gui/bweb/tpl/help_intern.tpl b/gui/bweb/tpl/help_intern.tpl
index 3c780194c7..357895506b 100644
--- a/gui/bweb/tpl/help_intern.tpl
+++ b/gui/bweb/tpl/help_intern.tpl
@@ -43,9 +43,8 @@ be asked for choose inside the selection in the next screen.
 		size='3' value='10'> </td>
     </tr>
     <tr>
-        <td><button name='action' value='compute_intern_media' 
-		class='formulaire' title='Next'>
-            <img src='/bweb/next.png'>
+        <td><input type="image" name='action' value='compute_intern_media' 
+		title='Next' src='/bweb/next.png'>
         </td><td/>
     </tr>
    </table>
diff --git a/gui/bweb/tpl/help_intern_compute.tpl b/gui/bweb/tpl/help_intern_compute.tpl
index a60241e98b..20e5ee91f1 100644
--- a/gui/bweb/tpl/help_intern_compute.tpl
+++ b/gui/bweb/tpl/help_intern_compute.tpl
@@ -8,18 +8,15 @@
     <table id='compute'></table>
     <table><tr>
     <td style='align: left;'>
-    <button onclick='javascript:window.history.go(-2);' class='formulaire' title='Back'>
-      <img src='/bweb/prev.png'> &nbsp;
-    </button>
+    <input type="image" onclick='javascript:window.history.go(-2);' title='Back' src='/bweb/prev.png'>
     </td><td style='align: right;'>
-    <button name='action' value='move_media' class='formulaire'>
-      <img src='/bweb/intern.png'>
-    </button>
+    <input type="image" name='action' value='move_media'
+     src='/bweb/intern.png'>
    </td></tr>
    </form>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 
 var header = new Array("Volume Name","Vol Status",
 	               "Media Type","Pool Name","Last Written", 
diff --git a/gui/bweb/tpl/job_select.tpl b/gui/bweb/tpl/job_select.tpl
deleted file mode 100644
index 8a32a27441..0000000000
--- a/gui/bweb/tpl/job_select.tpl
+++ /dev/null
@@ -1,77 +0,0 @@
-    <div class='otherboxtitle'>
-      Find
-    </div>
-    <div class='otherbox'>
-      <form action='?' method='GET' id='form1'>
-      <table border='0'>
-        <tr>
-         <td>
-          Clients:
-         </td>
-         <td>
-           <select name='client'>
-<TMPL_LOOP NAME=db_clients>
-<option value='<TMPL_VAR NAME=clientname>'><TMPL_VAR NAME=clientname></option>
-</TMPL_LOOP>
-           </select>
-         </td>
-         <td>
-          Level:
-         </td>
-         <td>
-           <select name='level'>
-		<option id='level_any' value='Any'>Any</option>
-		<option id='level_F' value='F'>Full</option>
-		<option id='level_F' value='D'>Diff</option>
-		<option id='level_I' value='I'>Incr</option>
-           </select>
-         </td>
-        </tr>
-        <tr>
-         <td>
-          Status:
-         </td>
-         <td>
-           <select name='status'>
-		<option id='status_any' value='Any'>Any</option>
-		<option id='status_A' value='T'>Ok</option>
-           </select>
-         </td>
-        </tr>
-        <tr>
-         <td>
-          JobId:
-         </td>
-         <td>
-	  <input type='text' name='jobid' size='4' 
-           value='<TMPL_VAR NAME=jobid>'>
-         </td>
-         <td>
-          Start Time:
-         </td>
-         <td>
- 	   <input type='text' name='jobid' title='DD/MM/YYYY' size='7'>
-         </td>
-        </tr>
-	<tr>
-         <td>
-          Limit:
-         </td>
-         <td>
-	  <input type='text' name='limit' title='number of result' size='2' 
-	   value='<TMPL_VAR NAME=limit>'>
-         </td>
-        </tr>
-        <tr>
-         <td>
-          <button name='action' value='job'>Search</button>
-         </td>
-         <td>
-         </td>
-         <td>
-         </td>
-        </tr>
-
-       </table> 
-      </form>
-    </div>
diff --git a/gui/bweb/tpl/location_add.tpl b/gui/bweb/tpl/location_add.tpl
index feba84fb8a..50a868189e 100644
--- a/gui/bweb/tpl/location_add.tpl
+++ b/gui/bweb/tpl/location_add.tpl
@@ -19,8 +19,7 @@
          </td>
      </tr>
     </table>
-    <button name='action' value='location_add' class='formulaire'>
-     <img src='/bweb/save.png'>
-    </button>
+    <input type="image" name='action' value='location_add' title="save"
+      src='/bweb/save.png'>
    </form>
 </div>
diff --git a/gui/bweb/tpl/location_edit.tpl b/gui/bweb/tpl/location_edit.tpl
index 482041b97f..75ad5b6e12 100644
--- a/gui/bweb/tpl/location_edit.tpl
+++ b/gui/bweb/tpl/location_edit.tpl
@@ -20,8 +20,7 @@
          </td>
      </tr>
     </table>
-    <button name='action' value='location_save' class='formulaire'>
-     <img src='/bweb/save.png'>
-    </button>
+    <input type="image" name='action' value='location_save'
+     src='/bweb/save.png'>
    </form>
 </div>
diff --git a/gui/bweb/tpl/move_media.tpl b/gui/bweb/tpl/move_media.tpl
index 30f096cf40..eb411e652b 100644
--- a/gui/bweb/tpl/move_media.tpl
+++ b/gui/bweb/tpl/move_media.tpl
@@ -33,13 +33,13 @@
 <textarea name="comment" class='formulaire'> </textarea>
     </td></tr>
     </table>
-    <button class='formulaire' type='submit' name='action' value='change_location'> 
-	<img src='/bweb/apply.png'> Move
-    </button>
+    <label>
+    <input type="image" class='formulaire' type='submit' name='action' value='change_location' src='/bweb/apply.png'> Move
+    </label>
    </form>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 
 var header = new Array("Volume Name", "Location", "Select");
 
diff --git a/gui/bweb/tpl/run_job.tpl b/gui/bweb/tpl/run_job.tpl
index cbc8ed6c8e..85eb1f79eb 100644
--- a/gui/bweb/tpl/run_job.tpl
+++ b/gui/bweb/tpl/run_job.tpl
@@ -17,16 +17,17 @@
    </td></tr>
    </table>
    <br/>
-   <button class='formulaire' name='action' value='enable_job' title='Enable'>
-      Enable<br/>
-      <img src='/bweb/inflag1.png'>
-   </button>
-   <button class='formulaire' name='action' value='disable_job' title='Disable'>
-      Disable<br/>
-      <img src='/bweb/inflag0.png'>
-   </button>
-   <button name='action' value='run_job_mod' title='Run now' class='formulaire'>
-    Run now <br/><img src='/bweb/R.png'>
-   </button>
+   <label>
+   <input type="image" name='action' value='enable_job' title='Enable'
+    src='/bweb/inflag1.png'> Enable
+   </label>
+   <label>
+   <input type="image" name='action' value='disable_job' title='Disable'
+    src='/bweb/inflag0.png'> Disable
+   </label>
+   <label>
+   <input type="image" name='action' value='run_job_mod' title='Run now'
+    src='/bweb/R.png'> Run now 
+   </label>
   </form>
  </div>
diff --git a/gui/bweb/tpl/run_job_mod.tpl b/gui/bweb/tpl/run_job_mod.tpl
index 5a35398765..1bff294946 100644
--- a/gui/bweb/tpl/run_job_mod.tpl
+++ b/gui/bweb/tpl/run_job_mod.tpl
@@ -66,13 +66,14 @@
    </td></tr>
    </table>
    <br/>
-  <button name='action' value='run_job_now' title='Run job' class='formulaire'>
-   <img src='/bweb/R.png'>
-   </button>
+  <label>
+  <input type="image" name='action' value='run_job_now' title='Run job'
+   src='/bweb/R.png'>Run now
+  </label>
   </form>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
   <TMPL_IF job>
      ok=1;
      for(var i=0; ok && i < document.form1.job.length; i++) {
diff --git a/gui/bweb/tpl/running_job.tpl b/gui/bweb/tpl/running_job.tpl
index 451fd402c8..c3121c57f0 100644
--- a/gui/bweb/tpl/running_job.tpl
+++ b/gui/bweb/tpl/running_job.tpl
@@ -6,19 +6,19 @@
    <form action='?' method='GET'>
    <table id='id<TMPL_VAR NAME=ID>'></table>
    <br/>
-<button type='submit' name='action' value='cancel_job'
-        class='formulaire'
-        title='Cancel job'><img src='/bweb/cancel.png'>
-</button>
-<button type='submit' name='action' value='dsp_cur_job' 
-        class='formulaire'
-        title='View job'><img src='/bweb/zoom.png'>
-</button>
+<label>
+<input type="image" type='submit' name='action' value='cancel_job'
+ title='Cancel job' src='/bweb/cancel.png'>
+</label>
+<label>
+<input type='image' name='action' value='dsp_cur_job' 
+ title='View job' src='/bweb/zoom.png'>
+</label>
    </form>
 
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 var header = new Array("JobId",
 	               "Client",
 	               "Job Name", 
diff --git a/gui/bweb/tpl/scheduled_job.tpl b/gui/bweb/tpl/scheduled_job.tpl
index 3d47cdea8b..3657f056cd 100644
--- a/gui/bweb/tpl/scheduled_job.tpl
+++ b/gui/bweb/tpl/scheduled_job.tpl
@@ -5,23 +5,18 @@
  <div class='bodydiv'>
     <form action='?' method='GET'>
      <table id='id<TMPL_VAR ID>'></table>
-     <button class='formulaire' name='action' value='run_job_mod'>
-      Run now<br/>
-      <img src='/bweb/R.png' title='Run now'>
-     </button>
-<!-- <button class='formulaire' name='action' value='enable_job'>
-      Enable<br/>
-      <img src='/bweb/inflag1.png' title='Enable'>
-     </button>
--->
-     <button class='formulaire' name='action' value='disable_job'>
-      Disable<br/>
-      <img src='/bweb/inflag0.png' title='Disable'>
-     </button>
+     <label>
+     <input type="image" name='action' value='run_job_mod'
+      src='/bweb/R.png' title='Run now'>  Run now
+     </label>
+     <label>
+      <input type="image" name='action' value='disable_job'
+       src='/bweb/inflag0.png' title='Disable'> Disable
+      </label>
     </form>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 
 var header = new Array("Scheduled",
                        "Level",
diff --git a/gui/bweb/tpl/update_location.tpl b/gui/bweb/tpl/update_location.tpl
index 8b7fd5cddb..2ddcc850b5 100644
--- a/gui/bweb/tpl/update_location.tpl
+++ b/gui/bweb/tpl/update_location.tpl
@@ -10,13 +10,11 @@
       <option id='loc_<TMPL_VAR NAME=location>' value='<TMPL_VAR NAME=location>'><TMPL_VAR NAME=location></option>
    </TMPL_LOOP>
   </select>
-  <button class='formulaire' type='submit' name='action' value='save_location'>
-     <img src='/bweb/apply.png'>
-    </button>
+  <input type="image" name='action' value='save_location' src='/bweb/apply.png'>
    </form>
  </div>
 
-<script language="JavaScript">
+<script type="text/javascript" language="JavaScript">
 
 var header = new Array("Volume Name", "Location", "Select");
 
diff --git a/gui/bweb/tpl/update_media.tpl b/gui/bweb/tpl/update_media.tpl
index fa1dd32858..a7e16df753 100644
--- a/gui/bweb/tpl/update_media.tpl
+++ b/gui/bweb/tpl/update_media.tpl
@@ -88,27 +88,28 @@
     </table>
 <table>
  <td>
-  <button class='formulaire' name='action' value='do_update_media'>Apply<br/>
-   <img src='/bweb/apply.png'>
-  </button>
-  <button class='formulaire' name='action' title='Update from pool'
-    value='update_from_pool'>Update<br/>
-   <img src='/bweb/update.png' title='Update from pool'>
-  </button>
+ <label>
+  <input type="image" name='action' value='do_update_media' src='/bweb/apply.png'> Apply
+  </label>
+  <label>
+  <input type="image" name='action' title='Update from pool'
+    value='update_from_pool' src='/bweb/update.png'> Update
+  </label>
  </form>
  </td>
  <td>
   <form action='?' method='GET'>
    <input type='hidden' name='pool' value='<TMPL_VAR poolname>'>
-    <button class='formulaire' name='action' value='media'>View Pool<br/>
-     <img src='/bweb/zoom.png'>
-    </button>
+   <label>
+    <input type="image" name='action' value='media'
+     src='/bweb/zoom.png'>View Pool
+   </label>
   </form>
  </td>
 </table>
 </div>
 
-<script language='JavaScript'>
+<script type="text/javascript" language='JavaScript'>
 var ok=1;
 for (var i=0; ok && i < document.form1.pool.length; ++i) {
    if (document.form1.pool[i].value == '<TMPL_VAR poolname>') {
-- 
2.39.5