From 526b77611744cfd6739501b96d96c07914f44185 Mon Sep 17 00:00:00 2001
From: Antoine Cellerier <dionoea@videolan.org>
Date: Sun, 22 Jan 2006 01:38:28 +0000
Subject: [PATCH] begining of a VLM interface and some code organisations
 changes. The vlm interface should be done pretty soon (i'll try to finish it
 tomorrow)

 vlm.html : vlm web interface. What works: sending broadcast and vod creation
            commands

 js/vlm.js : add code to handle sending vlm commands.

 requests/vlm_cmd.xml : used to send a vlm command and get the resulting
                        error message

 requests/vlm.xml : export the full vlm media/schedules "tree". I still need
                    to parse that in js/vlm.js in order to display it in
                    dialogs/vlm .

 dialogs/* : dialogs' code which is used as building blocks for the
             main pages. (in order to avoid code duplication)

 mosaic.html, js/mosaic.js, dialogs/mosaic : start of a mosaic help
            page. nothing works and it's almost empty but i didn't feel like
            sorting through the commited files.
---
 share/http/dialogs/.hosts        |   0
 share/http/dialogs/browse        |  43 +++
 share/http/dialogs/footer        |  35 ++
 share/http/dialogs/input         | 205 +++++++++++
 share/http/dialogs/main          |  98 ++++++
 share/http/dialogs/mosaic        |  47 +++
 share/http/dialogs/playlist      |  63 ++++
 share/http/dialogs/sout          | 289 ++++++++++++++++
 share/http/dialogs/vlm           | 117 +++++++
 share/http/index.html            | 564 +------------------------------
 share/http/{ => js}/functions.js |  30 +-
 share/http/js/mosaic.js          |  85 +++++
 share/http/js/vlm.js             | 148 ++++++++
 share/http/mosaic.html           |  58 ++++
 share/http/requests/browse.xml   |   2 +-
 share/http/requests/playlist.xml |   2 +-
 share/http/requests/status.xml   |   2 +-
 share/http/requests/vlm.xml      |  79 +++++
 share/http/requests/vlm_cmd.xml  |  33 ++
 share/http/style.css             |  42 ++-
 share/http/vlm.html              |  50 +++
 21 files changed, 1410 insertions(+), 582 deletions(-)
 create mode 100644 share/http/dialogs/.hosts
 create mode 100644 share/http/dialogs/browse
 create mode 100644 share/http/dialogs/footer
 create mode 100644 share/http/dialogs/input
 create mode 100644 share/http/dialogs/main
 create mode 100644 share/http/dialogs/mosaic
 create mode 100644 share/http/dialogs/playlist
 create mode 100644 share/http/dialogs/sout
 create mode 100644 share/http/dialogs/vlm
 rename share/http/{ => js}/functions.js (96%)
 create mode 100644 share/http/js/mosaic.js
 create mode 100644 share/http/js/vlm.js
 create mode 100644 share/http/mosaic.html
 create mode 100644 share/http/requests/vlm.xml
 create mode 100644 share/http/requests/vlm_cmd.xml
 create mode 100644 share/http/vlm.html

diff --git a/share/http/dialogs/.hosts b/share/http/dialogs/.hosts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/share/http/dialogs/browse b/share/http/dialogs/browse
new file mode 100644
index 0000000000..f67ab86137
--- /dev/null
+++ b/share/http/dialogs/browse
@@ -0,0 +1,43 @@
+<vlc id="if" param1="0" />
+vim:syntax=html
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  browse: VLC media player web interface - remote file browse dialog
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+This dialog needs the following dialogs to be fully functional: <none>
+<vlc id="end" />
+
+<div id="browse" class="popup" style="display: none;">
+  <div class="title">
+    Browse
+  </div>
+  <div id="browser">
+    <a href="javascript:browse_dir(document.getElementById( 'browse_lastdir' ).value);">Click here to browse</a>
+  </div>
+  <div class="controls">
+    <button id="btn_browse_close" onclick="hide('browse');">
+      Close
+    </button>
+    <input type="hidden" id="browse_lastdir" value="~" />
+    <input type="hidden" id="browse_dest" value="" />
+  </div>
+</div>
diff --git a/share/http/dialogs/footer b/share/http/dialogs/footer
new file mode 100644
index 0000000000..a3e450f3ad
--- /dev/null
+++ b/share/http/dialogs/footer
@@ -0,0 +1,35 @@
+<vlc id="if" param1="0" />
+vim:syntax=html
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  footer: VLC media player web interface - VLC copyright footer
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+This dialog needs the following dialogs to be fully functional: <none>
+<vlc id="end" />
+
+<div id="footer" class="dialog" >
+  <a href="/">main VLC interface</a> -
+  <a href="/vlm.html">VLM interface</a> -
+  <a href="http://www.videolan.org">videolan.org</a>
+  <br />
+  <vlc id="value" param1="copyright" />
+</div>
diff --git a/share/http/dialogs/input b/share/http/dialogs/input
new file mode 100644
index 0000000000..51e28daf6b
--- /dev/null
+++ b/share/http/dialogs/input
@@ -0,0 +1,205 @@
+<vlc id="if" param1="0" />
+vim:syntax=html
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  input: VLC media player web interface - input selection dialog
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+This dialog needs the following dialogs to be fully functional: browse
+<vlc id="end" />
+
+<div id="input" class="dialog" style="display: none">
+  <div class="title">
+    Input
+  </div>
+  <div class="controls">
+    <label for="input_mrl">Input (MRL)</label>
+    <vlc id="if" param1="page value 'vlm' strcmp 0 =" />
+      <input type="text" name="input_mrl" id="input_mrl" size="60" onkeypress="if( event.keyCode == 13 ) vlm_input_change();"/>
+      <input type="button" value="Ok" onclick="vlm_input_change();" />
+      <input type="hidden" id="input_dest" value="" />
+    <vlc id="else" />
+      <input type="text" name="input_mrl" id="input_mrl" size="60" onkeypress="if( event.keyCode == 13 ) in_play();"/>
+      <input type="button" value="Play" onclick="in_play();" />
+      <input type="button" value="Enqueue" onclick="in_enqueue();" />
+    <vlc id="end" />
+    <br/>
+    <!--<button id="btn_inhide" onclick="hide_input();">
+      Hide
+    </button>-->
+    <button id="btn_file" onclick="hide_input();show('input_file');update_input_file();">
+      File
+    </button>
+    <button id="btn_disc" onclick="hide_input();show('input_disc');update_input_disc();">
+      Disc
+    </button>
+    <button id="btn_network" onclick="hide_input();show('input_network');update_input_net();">
+      Network
+    </button>
+  </div>
+  <div id="input" class="helper" >
+    <div id="input_file" style="display: block">
+      Open File
+      <hr/>
+      <label for="input_file_filename">File name</label>
+      <input type="text" id="input_file_filename" size="60" onchange="update_input_file();" onfocus="update_input_file();"/>
+      <input type="button" id="input_file_browse" value="Browse" onclick="browse( 'input_file_filename' );" />
+      <hr/>
+      <input type="checkbox" id="input_sub_options" />
+      <label for="input_sub_options">Subtitle options *TODO/FIXME/FIXHTTPD*</label>
+      <br/>
+      <label for="input_sub_file">Subtitles file</label>
+      <input type="text" id="input_sub_file" size="60" />
+      <br/><!-- TODO -->
+      <label for="input_sub_enc">Subtitles encoding</label>
+      <select id="input_sub_enc">
+        <option></option>
+      </select>
+      <br/>
+      <label for="input_sub_size">Font size</label>
+      <select id="input_sub_size">
+        <option></option>
+      </select>
+      <label for="input_sub_justification">Justification</label>
+      <select id="input_sub_justification">
+        <option></option>
+      </select>
+      <br/>
+      <label for="input_sub_fps">Frames per second</label>
+      <input type="text" id="input_sub_fps" />
+      <label for="input_sub_delay">Delay</label>
+      <input type="text" id="input_sub_delay" />
+    </div>
+    <div id="input_disc" style="display: none">
+      Open Disc
+      <hr/>
+      Disc type :
+      <input type="radio" name="input_disc_type" id="input_disc_dvdmenu" value="dvd" onchange="update_input_disc();" />
+      <label for="input_disc_dvdmenu">DVD (menus)</label>
+      <input type="radio" name="input_disc_type" id="input_disc_dvd" value="dvdsimple" onchange="update_input_disc();" />
+      <label for="input_disc_dvd">DVD</label>
+      <input type="radio" name="input_disc_type" id="input_disc_vcd" value="vcd" onchange="update_input_disc();" />
+      <label for="input_disc_vcd">VCD</label>
+      <input type="radio" name="input_disc_type" id="input_disc_cdda" value="cdda" onchange="update_input_disc();" />
+      <label for="input_disc_cdda">Audio CD</label>
+      <hr/>
+      <table>
+        <tr>
+          <td>
+            <label for="input_disc_dev">Device name</label>
+          </td>
+          <td>
+            <input type="text" id="input_disc_dev" onchange="update_input_disc();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="input_disc_title">Title</label>
+          </td>
+          <td>
+            <input type="text" id="input_disc_title" onchange="update_input_disc();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="input_disc_chapter">Chapter</label>
+          </td>
+          <td>
+            <input type="text" id="input_disc_chapter" onchange="update_input_disc();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="input_disc_subtrack">Subtitles track</label>
+          </td>
+          <td>
+             <input type="text" id="input_disc_subtrack" onchange="update_input_disc();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label for="input_disc_audiotrack">Audio track</label>
+          </td>
+          <td>
+            <input type="text" id="input_disc_audiotrack" onchange="update_input_disc();" />
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div id="input_network" style="display: none">
+      Open Network
+      <hr/>
+      <table>
+        <tr>
+          <td>
+            <input type="radio" name="input_net_type" id="input_net_udp" value="udp" onchange="update_input_net();" />
+            <label for="input_net_udp">UDP/RTP</label>
+          </td>
+          <td>
+            <label for="input_net_udp_port">Port</label>
+            <input type="text" id="input_net_udp_port" size="6" onchange="update_input_net();" />
+            <input type="checkbox" id="input_net_udp_forceipv6" onchange="update_input_net();" />
+            <label for="input_net_udp_forceipv6">Force IPv6</label>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="radio" name="input_net_type" id="input_net_udpmcast" value="udpmcast" onchange="update_input_net();" />
+            <label for="input_net_udpmcast">UDP/RTP Multicast</label>
+          </td>
+          <td>
+            <label for="input_net_udpmcast_address">Address</label>
+            <input type="text" id="input_net_udpmcast_address" onchange="update_input_net();" />
+            <label for="input_net_udpmcast_port">Port</label>
+            <input type="text" id="input_net_udpmcast_port" size="6" onchange="update_input_net();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="radio" name="input_net_type" id="input_net_http" value="http" onchange="update_input_net();" />
+            <label for="input_net_http">HTTP/HTTPS/FTP/MMS</label>
+          </td>
+          <td>
+            <label for="input_net_http_url">URL</label>
+            <input type="text" id="input_net_http_url" onchange="update_input_net();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="radio" name="input_net_type" id="input_net_rtsp" value="rtsp" onchange="update_input_net();" />
+            <label for="input_net_rtsp">RTSP</label>
+          </td>
+          <td>
+            <label for="input_net_rtsp_url">URL</label>
+            <input type="text" id="input_net_rtsp_url" value="rtsp://" onchange="update_input_net();" />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="input_net_timeshift" onchange="update_input_net();" />
+            <label for="input_net_timeshift">Allow timeshifting</label>
+          </td>
+          <td></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</div>
diff --git a/share/http/dialogs/main b/share/http/dialogs/main
new file mode 100644
index 0000000000..427d696502
--- /dev/null
+++ b/share/http/dialogs/main
@@ -0,0 +1,98 @@
+<vlc id="if" param1="0" />
+vim:syntax=html
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  main: VLC media player web interface - main VLC controler
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+This dialog needs the following dialogs to be fully functional: input,
+sout and playlist .
+<vlc id="end" />
+
+<div id="main" class="dialog" >
+  <div class="title">
+    VLC media player
+    <button id="btn_toggle_text" onclick="toggle_btn_text();">
+      <img src="images/help.png" alt="Help" />
+      Help
+    </button>
+  </div>
+  <div class="controls">
+    <button id="btn_open" onclick="toggle_show('input');" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/eject.png" alt="Open" />
+      <span class="btn_text">Open</span>
+    </button>
+    &nbsp;
+    <button id="btn_stop" onclick="pl_stop();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/stop.png" alt="Stop" />
+      <span class="btn_text">Stop</span>
+    </button>
+    <!--<button id="btn_play" onclick="alert('FIXME');" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/play.png" alt="Play" />
+      <span class="btn_text">Play</span>
+    </button>-->
+    <button id="btn_pause" onclick="pl_pause();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/pause.png" alt="Pause" id="btn_pause_img" />
+      <span class="btn_text">Pause</span>
+    </button>
+    &nbsp;
+    <button id="btn_previous" onclick="pl_previous();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/prev.png" alt="Previous" />
+      <span class="btn_text">Previous</span>
+    </button>
+    <button id="btn_next" onclick="pl_next();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/next.png" alt="Next" />
+      <span class="btn_text">Next</span>
+    </button>
+    &nbsp;
+    <button id="btn_sout" onclick="toggle_show('sout');" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/sout.png" alt="Stream Output" />
+      <span class="btn_text">Stream Output</span>
+    </button>
+    <button id="btn_playlist" onclick="toggle_show('playlist');" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/playlist.png" alt="Playlist" />
+      <span class="btn_text">Playlist</span>
+    </button>
+    &nbsp;
+    <button id="btn_fullscreen" onclick="fullscreen();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/fullscreen.png" alt="Fullscreen" />
+      <span class="btn_text">Fullscreen</span>
+    </button>
+    &nbsp;
+    <button id="btn_volume_down" onclick="volume_down();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/volume_down.png" alt="Decrease Volume" />
+      <span class="btn_text">Decrease Volume</span>
+    </button>
+    <button id="btn_volume_up" onclick="volume_up();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/volume_up.png" alt="Increase Volume" />
+      <span class="btn_text">Increase Volume</span>
+    </button>
+  </div>
+  <div id="status">
+    <span id="state">(?)</span>
+    -
+    Time : <span id="time">(?)</span>/<span id="length">(?)</span>
+    -
+    Volume : <span id="volume">(?)</span>
+    <br/>
+    <span id="nowplaying">(?)</span>
+  </div>
+</div>
diff --git a/share/http/dialogs/mosaic b/share/http/dialogs/mosaic
new file mode 100644
index 0000000000..9debb928f0
--- /dev/null
+++ b/share/http/dialogs/mosaic
@@ -0,0 +1,47 @@
+<vlc id="if" param1="0" />
+vim:syntax=html
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  mosaic: VLC media player web interface - mosaic wizard
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+This dialog needs the following dialogs to be fully functional: input and
+sout.
+<vlc id="end" />
+
+<div id="mosaic" class="dialog" >
+  <div class="title">
+    VLC media player - Mosaic wizard
+    <button id="btn_toggle_text" onclick="toggle_btn_text();">
+      <img src="images/help.png" alt="Help" />
+      Help
+    </button>
+  </div>
+  <div class="controls">
+    <label for="mosaic_rows">Rows:</label> <input type="text" id="mosaic_rows" value="" onchange="mosaic_size_change();" />
+    <label for="mosaic_cols">Columns:</label> <input type="text" id="mosaic_cols" value="" onchange="mosaic_size_change();" />
+    <br/>
+    <label for="mosaic_input_name">Name:</label> <input type="text" id="mosaic_input_name" value="" />
+    <label for="mosaic_input">Input:</label> <input type="text" id="mosaic_input" value="" /> <input type="button" value="Add to input list" onclick="mosaic_add_input();" />
+  </div>
+  <div  id="mosaic_list" class="popup" style="display: none">Select a stream:<br/></div>
+  <div id="mosaic_layout"></div>
+</div>
diff --git a/share/http/dialogs/playlist b/share/http/dialogs/playlist
new file mode 100644
index 0000000000..486a1afdf5
--- /dev/null
+++ b/share/http/dialogs/playlist
@@ -0,0 +1,63 @@
+<vlc id="if" param1="0" />
+vim:syntax=html
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  playlist: VLC media player web interface - playlist dialog
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+This dialog needs the following dialogs to be fully functional: <none>
+<vlc id="end" />
+
+<div id="playlist" class="dialog" >
+  <div class="title">
+    Playlist
+  </div>
+  <div class="controls">
+    <!--<button id="btn_delete" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/delete.png" alt="Delete" />
+      <span class="btn_text">Delete</span>
+    </button>-->
+    <button id="btn_empty" onclick="pl_empty();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/empty.png" alt="Empty" />
+      <span class="btn_text">Empty</span>
+    </button>
+    &nbsp;
+    <button id="btn_sort" onclick="pl_sort();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/sort.png" alt="Sort" />
+      <span class="btn_text">Sort</span>
+    </button>
+    &nbsp;
+    <button id="btn_shuffle" onclick="pl_shuffle();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/shuffle.png" alt="Shuffle" />
+      <span class="btn_text">Shuffle</span>
+    </button>
+    <button id="btn_loop" onclick="pl_loop();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/loop.png" alt="Loop" />
+      <span class="btn_text">Loop</span>
+    </button>
+    <button id="btn_repeat" onclick="pl_repeat();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      <img src="images/repeat.png" alt="Repeat" />
+      <span class="btn_text">Repeat</span>
+    </button>
+  </div>
+  <div id="playtree">
+    (?)
+  </div>
+</div>
diff --git a/share/http/dialogs/sout b/share/http/dialogs/sout
new file mode 100644
index 0000000000..7f921667c1
--- /dev/null
+++ b/share/http/dialogs/sout
@@ -0,0 +1,289 @@
+<vlc id="if" param1="0" />
+vim:syntax=html
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  sout: VLC media player web interface - stream output dialog
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+This dialog needs the following dialogs to be fully functional: <none>
+Note that the sout chain is used and sent to VLC by the input dialog
+<vlc id="end" />
+
+<div id="sout" class="dialog" style="display: none">
+  <div class="title">
+    Stream Output
+  </div>
+  <div class="controls">
+    <label for="sout_mrl">Destination (MRL)</label>
+    <input type="text" name="sout_mrl" id="sout_mrl" size="60" />
+    <br/>
+    <vlc id="if" param1="page value 'vlm' strcmp 0 =" />
+      <input type="submit" value="Ok" onclick="vlm_output_change();" />
+      <input type="hidden" id="sout_dest" />
+    <vlc id="else" />
+      <input type="submit" value="Save" onclick="save_sout();" />
+    <vlc id="end" />
+    <input type="button" value="Cancel" onclick="reset_sout();"/>
+    <input type="hidden" id="sout_old_mrl" value="" /> <!-- FIXME -->
+    <input type="button" id="sout_helper_toggle" onclick="toggle_show_sout_helper()" value="Full sout interface" />
+  </div>
+  <div id="sout_helper" class="helper" style="display: none;" >
+    Stream Output Helper
+    <hr/>
+    <div id="sout_method">
+      <table>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_display" onchange="update_sout()"/>
+            <label for="sout_display">Display</label>
+          </td>
+          <td></td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_file" onchange="update_sout()"/>
+            <label for="sout_file">File</label>
+          </td>
+          <td>
+            <label for="sout_file_filename">File name</label>
+            <input type="text" id="sout_file_filename" onchange="update_sout()"/>
+          </td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_http" onchange="update_sout()"/>
+            <label for="sout_http">HTTP</label>
+          </td>
+          <td>
+            <label for="sout_http_addr">Address</label>
+            <input type="text" id="sout_http_addr" onchange="update_sout()"/>
+          </td>
+          <td>
+            <label for="sout_http_port">Port</label>
+            <input type="text" id="sout_http_port" onchange="update_sout()"/>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_mmsh" onchange="update_sout()"/>
+            <label for="sout_mmsh">MMSH</label>
+          </td>
+          <td>
+            <label for="sout_mmsh_addr">Address</label>
+            <input type="text" id="sout_mmsh_addr" onchange="update_sout()"/>
+          </td>
+          <td>
+            <label for="sout_mmsh_port">Port</label>
+            <input type="text" id="sout_mmsh_port" onchange="update_sout()"/>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_rtp" onchange="update_sout()"/>
+            <label for="sout_rtp">RTP</label>
+          </td>
+          <td>
+            <label for="sout_rtp_addr">Address</label>
+            <input type="text" id="sout_rtp_addr" onchange="update_sout()"/>
+          </td>
+          <td>
+            <label for="sout_rtp_port">Port</label>
+            <input type="text" id="sout_rtp_port" onchange="update_sout()"/>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_udp" onchange="update_sout()"/>
+            <label for="sout_udp">UDP</label>
+          </td>
+          <td>
+            <label for="sout_udp_addr">Address</label>
+            <input type="text" id="sout_udp_addr" onchange="update_sout()"/>
+          </td>
+          <td>
+            <label for="sout_udp_port">Port</label>
+            <input type="text" id="sout_udp_port" onchange="update_sout()"/>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <hr/>
+    <div id="sout_muxh">
+      <input type="radio" name="sout_mux" id="sout_mux_default" value="" onchange="update_sout()" />
+      <label for="sout_mux_default">Default</label>
+      <input type="radio" name="sout_mux" id="sout_mux_ts" value="ts" onchange="update_sout()"/>
+      <label for="sout_mux_ts">MPEG TS</label>
+      <input type="radio" name="sout_mux" id="sout_mux_ps" value="ps" onchange="update_sout()"/>
+      <label for="sout_mux_ps">MPEG PS</label>
+      <input type="radio" name="sout_mux" id="sout_mux_mpeg1" value="mpeg1" onchange="update_sout()"/>
+      <label for="sout_mux_ts">MPEG 1</label>
+      <input type="radio" name="sout_mux" id="sout_mux_ogg" value="ogg" onchange="update_sout()"/>
+      <label for="sout_mux_ts">OGG</label>
+      <br/>
+      <input type="radio" name="sout_mux" id="sout_mux_asf" value="asf" onchange="update_sout()"/>
+      <label for="sout_mux_ts">ASF</label>
+      <input type="radio" name="sout_mux" id="sout_mux_mp4" value="mp4" onchange="update_sout()"/>
+      <label for="sout_mux_ts">MP4</label>
+      <input type="radio" name="sout_mux" id="sout_mux_mov" value="mov" onchange="update_sout()"/>
+      <label for="sout_mux_ts">MOV</label>
+      <input type="radio" name="sout_mux" id="sout_mux_wav" value="wav" onchange="update_sout()"/>
+      <label for="sout_mux_ts">WAV</label>
+      <input type="radio" name="sout_mux" id="sout_mux_raw" value="raw" onchange="update_sout()"/>
+      <label for="sout_mux_ts">Raw</label>
+    </div>
+    <hr/>
+    <div id="sout_transcode">
+      <table>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_vcodec_s" onchange="update_sout()"/>
+            <label for="sout_vcodec_s">Video Codec</label>
+          </td>
+          <td>
+            <select id="sout_vcodec" onchange="update_sout()">
+              <option value="mp1v">mp1v</option>
+              <option value="mp2v">mp2v</option>
+              <option value="mp4v">mp4v</option>
+              <option value="DIV1">DIV1</option>
+              <option value="DIV2">DIV2</option>
+              <option value="DIV3">DIV3</option>
+              <option value="H263">H263</option>
+              <option value="H264">H264</option>
+              <option value="WMV1">WMV1</option>
+              <option value="WMV2">WMV2</option>
+              <option value="MJPG">MJPG</option>
+              <option value="theo">theo</option>
+            </select>
+          </td>
+          <td>
+            <label for="sout_vb">Bitrate (kb/s)</label>
+            <select id="sout_vb" onchange="update_sout()">
+              <option value="4096">4096</option>
+              <option value="3072">3072</option>
+              <option value="2048">2048</option>
+              <option value="1024">1024</option>
+              <option value="768">768</option>
+              <option value="512">512</option>
+              <option value="384">384</option>
+              <option value="256">256</option>
+              <option value="192">192</option>
+              <option value="128">128</option>
+              <option value="96">96</option>
+              <option value="64">64</option>
+              <option value="32">32</option>
+              <option value="16">16</option>
+            </select>
+          </td>
+          <td>
+            <label for="sout_scale">Scale</label>
+            <select id="sout_scale" onchange="update_sout()">
+              <option value="0.25">0.25</option>
+              <option value="0.5">0.5</option>
+              <option value="0.75">0.75</option>
+              <option value="1" selected="selected">1</option>
+              <option value="1.25">1.25</option>
+              <option value="1.5">1.5</option>
+              <option value="1.75">1.75</option>
+              <option value="2">2</option>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_acodec_s" onchange="update_sout()"/>
+            <label for="sout_acodec_s">Audio Codec</label>
+          </td>
+          <td>
+            <select id="sout_acodec" onchange="update_sout()">
+              <option value="mpga">mpga</option>
+              <option value="mp2a">mp2a</option>
+              <option value="mp3">mp3</option>
+              <option value="mp4a">mp4a</option>
+              <option value="a42">a52</option>
+              <option value="vorb">vorb</option>
+              <option value="flac">flac</option>
+              <option value="spx">spx</option>
+              <option value="s16l">s16l</option>
+              <option value="fl32">fl32</option>
+            </select>
+          </td>
+          <td>
+            <label for="sout_ab">Bitrate (kb/s)</label>
+            <select id="sout_ab" onchange="update_sout()">
+              <option value="512">512</option>
+              <option value="384">384</option>
+              <option value="256">256</option>
+              <option value="192">192</option>
+              <option value="128">128</option>
+              <option value="96">96</option>
+              <option value="64">64</option>
+              <option value="32">32</option>
+              <option value="16">16</option>
+            </select>
+          </td>
+          <td>
+            <label for="sout_channels">Channels</label>
+            <select id="sout_channels" onchange="update_sout()">
+              <option value="">default</option>
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="4">4</option>
+              <option value="6">6</option>
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="checkbox" id="sout_sub" onchange="update_sout()"/>
+            <label for="sout_sub">Subtitles Codec</label>
+          </td>
+          <td>
+            <select id="sout_scodec" onchange="update_sout()">
+              <option value="dvbs">dvbs</option>
+            </select>
+          </td>
+          <td colspan="2">
+            <input type="checkbox" id="sout_soverlay" onchange="update_sout()"/>
+            <label for="sout_soverlay">Subtitles overlay</label>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <hr/>
+    <div id="sout_misc">
+      <input type="checkbox" id="sout_sap" onchange="update_sout()"/>
+      <label for="sout_sap">SAP announce</label>
+      <br/>
+      <label for="sout_sap_group">Group name</label>
+      <input type="text" id="sout_sap_group" onchange="update_sout()"/>
+      <label for="sout_sap_name">Channel name</label>
+      <input type="text" id="sout_sap_name" onchange="update_sout()"/>
+      <hr/>
+      <input type="checkbox" id="sout_all" onchange="update_sout()"/>
+      <label for="sout_all">Select all elementary streams</label>
+      <hr/>
+      <label for="sout_ttl">Time-To-Live (TTL)</label>
+      <input type="text" id="sout_ttl" onchange="update_sout()"/>
+    </div>
+  </div>
+</div>
diff --git a/share/http/dialogs/vlm b/share/http/dialogs/vlm
new file mode 100644
index 0000000000..f219aeb0ee
--- /dev/null
+++ b/share/http/dialogs/vlm
@@ -0,0 +1,117 @@
+<vlc id="if" param1="0" />
+vim:syntax=html
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  vlm: VLC media player web interface - VLM controler
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+This dialog needs the following dialogs to be fully functional: input,
+sout and vlmelements .
+<vlc id="end" />
+
+<div id="vlm" class="dialog" >
+  <div class="title">
+    VLC media player - VLM interface
+    <button id="btn_toggle_text" onclick="toggle_btn_text();">
+      <img src="images/help.png" alt="Help" />
+      Help
+    </button>
+  </div>
+  <div class="controls">
+    <label for="vlm_command">VLM command:</label>
+    <input type="text" id="vlm_command" size="60" />
+    <input type="button" value="Send" onclick="vlm_send();" />
+    <br />
+    <button id="btn_broadcast" onclick="hide_vlm_add();show('vlm_add_broadcast');update_vlm_add_broadcast();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      Broadcast
+    </button>
+    <button id="btn_vod" onclick="hide_vlm_add();show('vlm_add_vod');update_vlm_add_vod();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      Video on Demand
+    </button>
+    <button id="btn_schedule" onclick="hide_vlm_add();show('vlm_add_schedule');update_vlm_add_schedule();" onmouseover="button_over(this);" onmouseout="button_out(this);">
+      Schedule
+    </button>
+  </div>
+  <div id="vlm_helper" class="helper" >
+    <div id="vlm_add_broadcast" style="display: block">
+      New broadcast element
+      <hr />
+      <label for="vlm_broadcast_name">Name</label>
+      <input type="text" id="vlm_broadcast_name" size="20" onchange="update_vlm_add_broadcast();" />
+      <input type="checkbox" id="vlm_broadcast_enabled" onchange="update_vlm_add_broadcast();" />
+      <label for="vlm_broadcast_enabled">Enable</label>
+      <input type="checkbox" id="vlm_broadcast_loop" onchange="update_vlm_add_broadcast();" />
+      <label for="vlm_broadcast_loop">Loop</label>
+      <br/>
+      <label for="vlm_broadcast_input">Input</label>
+      <input type="text" id="vlm_broadcast_input" size="60" onchange="update_vlm_add_broadcast();" />
+      <input type="button" value="Edit" onclick="vlm_input_edit('vlm_broadcast_input');" />
+      <br/>
+      <label for="vlm_broadcast_output">Output</label>
+      <input type="text" id="vlm_broadcast_output" size="60" onchange="update_vlm_add_broadcast();" />
+      <input type="button" value="Edit" onclick="vlm_output_edit('vlm_broadcast_output');" />
+      <br/>
+    </div>
+    <div id="vlm_add_vod" style="display: none">
+      New video on demand element
+      <hr />
+      <label for="vlm_vod_name">Name</label>
+      <input type="text" id="vlm_vod_name" size="20" onchange="update_vlm_add_vod();" />
+      <input type="checkbox" id="vlm_vod_enabled" onchange="update_vlm_add_vod();" />
+      <label for="vlm_vod_enabled">Enable</label>
+      <br/>
+      <label for="vlm_vod_input">Input</label>
+      <input type="text" id="vlm_vod_input" size="60" onchange="update_vlm_add_vod();" />
+      <input type="button" value="Edit" onclick="vlm_input_edit('vlm_vod_input');" />
+      <br/>
+      <label for="vlm_vod_output">Output (leave empty unless you want to transcode)</label>
+      <input type="text" id="vlm_vod_output" size="60" onchange="update_vlm_add_vod();" />
+      <input type="button" value="Edit" onclick="vlm_output_edit('vlm_vod_output');" />
+      <br/>
+    </div>
+    <div id="vlm_add_schedule" style="display: none">
+      New schedule
+      <hr />
+      TODO
+    </div>
+  </div>
+</div>
+
+<div id="vlm_broadcast" class="dialog" >
+  <div class="title">
+    Broadcast Elements
+  </div>
+  <div class="vlm_broadcast_list"></div>
+</div>
+
+<div id="vlm_vod" class="dialog" >
+  <div class="title">
+    Video on Demand Elements
+  </div>
+  <div class="vlm_vod_list"></div>
+</div>
+
+<div id="vlm_schedule" class="dialog" >
+  <div class="title">
+    Schedule Elements
+  </div>
+  <div class="vlm_schedule_list"></div>
+</div>
diff --git a/share/http/index.html b/share/http/index.html
index 31e27ec4d4..0dd58562f2 100644
--- a/share/http/index.html
+++ b/share/http/index.html
@@ -3,7 +3,7 @@
 <!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
 <  index.html: VLC media player web interface
 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
-<  Copyright (C) 2005 the VideoLAN team
+<  Copyright (C) 2005-2006 the VideoLAN team
 <  $Id$
 < 
 <  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
@@ -30,7 +30,7 @@
   <title>VLC media player - Web Interface</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link href="style.css" rel="stylesheet" type="text/css" />
-  <script type="text/javascript" src="functions.js"></script>
+  <script type="text/javascript" src="js/functions.js"></script>
 
   <!-- in case people had scripts that sent commands to the default
        index.html page -->
@@ -40,560 +40,12 @@
 
 <body onload="loop_refresh();">
 
-<div id="browse" style="display: none;">
-  <div class="title">
-    Browse
-  </div>
-  <div id="browser">
-    <a href="javascript:browse_dir(document.getElementById( 'browse_lastdir' ).value);">Lets browse !</a>
-  </div>
-  <div class="controls">
-    <button id="btn_browse_close" onclick="hide('browse');">
-      Close
-    </button>
-    <input type="hidden" id="browse_lastdir" value="~" />
-    <input type="hidden" id="browse_dest" value="" />
-  </div>
-</div>
-
-<div id="main">
-  <div class="title">
-    VLC media player
-    <button id="btn_toggle_text" onclick="toggle_btn_text();">
-      <img src="images/help.png" alt="Help" />
-      Help
-    </button>
-  </div>
-  <div class="controls">
-    <button id="btn_open" onclick="toggle_show('input');" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/eject.png" alt="Open" />
-      <span class="btn_text">Open</span>
-    </button>
-    &nbsp;
-    <button id="btn_stop" onclick="pl_stop();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/stop.png" alt="Stop" />
-      <span class="btn_text">Stop</span>
-    </button>
-    <!--<button id="btn_play" onclick="alert('FIXME');" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/play.png" alt="Play" />
-      <span class="btn_text">Play</span>
-    </button>-->
-    <button id="btn_pause" onclick="pl_pause();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/pause.png" alt="Pause" id="btn_pause_img" />
-      <span class="btn_text">Pause</span>
-    </button>
-    &nbsp;
-    <button id="btn_previous" onclick="pl_previous();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/prev.png" alt="Previous" />
-      <span class="btn_text">Previous</span>
-    </button>
-    <button id="btn_next" onclick="pl_next();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/next.png" alt="Next" />
-      <span class="btn_text">Next</span>
-    </button>
-    &nbsp;
-    <button id="btn_sout" onclick="toggle_show('sout');" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/sout.png" alt="Stream Output" />
-      <span class="btn_text">Stream Output</span>
-    </button>
-    <button id="btn_playlist" onclick="toggle_show('playlist');" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/playlist.png" alt="Playlist" />
-      <span class="btn_text">Playlist</span>
-    </button>
-    &nbsp;
-    <button id="btn_fullscreen" onclick="fullscreen();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/fullscreen.png" alt="Fullscreen" />
-      <span class="btn_text">Fullscreen</span>
-    </button>
-    &nbsp;
-    <button id="btn_volume_down" onclick="volume_down();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/volume_down.png" alt="Decrease Volume" />
-      <span class="btn_text">Decrease Volume</span>
-    </button>
-    <button id="btn_volume_up" onclick="volume_up();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/volume_up.png" alt="Increase Volume" />
-      <span class="btn_text">Increase Volume</span>
-    </button>
-  </div>
-  <div id="status">
-    <span id="state">(?)</span>
-    -
-    Time : <span id="time">(?)</span>/<span id="length">(?)</span>
-    -
-    Volume : <span id="volume">(?)</span>
-    <br/>
-    <span id="nowplaying">(?)</span>
-  </div>
-</div>
-
-<div id="input" style="display: none">
-  <div class="title">
-    Input
-  </div>
-  <div class="controls">
-    <label for="input_mrl">Input (MRL)</label>
-    <input type="text" name="input_mrl" id="input_mrl" size="60" onkeypress="if( event.keyCode == 13 ) in_play();"/>
-    <input type="button" value="Play" onclick="in_play();" />
-    <input type="button" value="Enqueue" onclick="in_enqueue();" />
-    <br/>
-    <!--<button id="btn_inhide" onclick="hide_input();">
-      Hide
-    </button>-->
-    <button id="btn_file" onclick="hide_input();show('input_file');update_input_file();">
-      File
-    </button>
-    <button id="btn_disc" onclick="hide_input();show('input_disc');update_input_disc();">
-      Disc
-    </button>
-    <button id="btn_network" onclick="hide_input();show('input_network');update_input_net();">
-      Network
-    </button>
-  </div>
-  <div id="input_helper">
-    <div id="input_file" style="display: block">
-      Open File
-      <hr/>
-      <label for="input_file_filename">File name</label>
-      <input type="text" id="input_file_filename" size="60" onchange="update_input_file();" onfocus="update_input_file();"/>
-      <input type="button" id="input_file_browse" value="Browse" onclick="browse( 'input_file_filename' );" />
-      <hr/>
-      <input type="checkbox" id="input_sub_options" />
-      <label for="input_sub_options">Subtitle options *TODO/FIXME/FIXHTTPD*</label>
-      <br/>
-      <label for="input_sub_file">Subtitles file</label>
-      <input type="text" id="input_sub_file" size="60" />
-      <br/><!-- TODO -->
-      <label for="input_sub_enc">Subtitles encoding</label>
-      <select id="input_sub_enc">
-        <option></option>
-      </select>
-      <br/>
-      <label for="input_sub_size">Font size</label>
-      <select id="input_sub_size">
-        <option></option>
-      </select>
-      <label for="input_sub_justification">Justification</label>
-      <select id="input_sub_justification">
-        <option></option>
-      </select>
-      <br/>
-      <label for="input_sub_fps">Frames per second</label>
-      <input type="text" id="input_sub_fps" />
-      <label for="input_sub_delay">Delay</label>
-      <input type="text" id="input_sub_delay" />
-    </div>
-    <div id="input_disc" style="display: none">
-      Open Disc
-      <hr/>
-      Disc type :
-      <input type="radio" name="input_disc_type" id="input_disc_dvdmenu" value="dvd" onchange="update_input_disc();" />
-      <label for="input_disc_dvdmenu">DVD (menus)</label>
-      <input type="radio" name="input_disc_type" id="input_disc_dvd" value="dvdsimple" onchange="update_input_disc();" />
-      <label for="input_disc_dvd">DVD</label>
-      <input type="radio" name="input_disc_type" id="input_disc_vcd" value="vcd" onchange="update_input_disc();" />
-      <label for="input_disc_vcd">VCD</label>
-      <input type="radio" name="input_disc_type" id="input_disc_cdda" value="cdda" onchange="update_input_disc();" />
-      <label for="input_disc_cdda">Audio CD</label>
-      <hr/>
-      <table>
-        <tr>
-          <td>
-            <label for="input_disc_dev">Device name</label>
-          </td>
-          <td>
-            <input type="text" id="input_disc_dev" onchange="update_input_disc();" />
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="input_disc_title">Title</label>
-          </td>
-          <td>
-            <input type="text" id="input_disc_title" onchange="update_input_disc();" />
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="input_disc_chapter">Chapter</label>
-          </td>
-          <td>
-            <input type="text" id="input_disc_chapter" onchange="update_input_disc();" />
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="input_disc_subtrack">Subtitles track</label>
-          </td>
-          <td>
-             <input type="text" id="input_disc_subtrack" onchange="update_input_disc();" />
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label for="input_disc_audiotrack">Audio track</label>
-          </td>
-          <td>
-            <input type="text" id="input_disc_audiotrack" onchange="update_input_disc();" />
-          </td>
-        </tr>
-      </table>
-    </div>
-    <div id="input_network" style="display: none">
-      Open Network
-      <hr/>
-      <table>
-        <tr>
-          <td>
-            <input type="radio" name="input_net_type" id="input_net_udp" value="udp" onchange="update_input_net();" />
-            <label for="input_net_udp">UDP/RTP</label>
-          </td>
-          <td>
-            <label for="input_net_udp_port">Port</label>
-            <input type="text" id="input_net_udp_port" size="6" onchange="update_input_net();" />
-            <input type="checkbox" id="input_net_udp_forceipv6" onchange="update_input_net();" />
-            <label for="input_net_udp_forceipv6">Force IPv6</label>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <input type="radio" name="input_net_type" id="input_net_udpmcast" value="udpmcast" onchange="update_input_net();" />
-            <label for="input_net_udpmcast">UDP/RTP Multicast</label>
-          </td>
-          <td>
-            <label for="input_net_udpmcast_address">Address</label>
-            <input type="text" id="input_net_udpmcast_address" onchange="update_input_net();" />
-            <label for="input_net_udpmcast_port">Port</label>
-            <input type="text" id="input_net_udpmcast_port" size="6" onchange="update_input_net();" />
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <input type="radio" name="input_net_type" id="input_net_http" value="http" onchange="update_input_net();" />
-            <label for="input_net_http">HTTP/HTTPS/FTP/MMS</label>
-          </td>
-          <td>
-            <label for="input_net_http_url">URL</label>
-            <input type="text" id="input_net_http_url" onchange="update_input_net();" />
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <input type="radio" name="input_net_type" id="input_net_rtsp" value="rtsp" onchange="update_input_net();" />
-            <label for="input_net_rtsp">RTSP</label>
-          </td>
-          <td>
-            <label for="input_net_rtsp_url">URL</label>
-            <input type="text" id="input_net_rtsp_url" value="rtsp://" onchange="update_input_net();" />
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <input type="checkbox" id="input_net_timeshift" onchange="update_input_net();" />
-            <label for="input_net_timeshift">Allow timeshifting</label>
-          </td>
-          <td></td>
-        </tr>
-      </table>
-    </div>
-  </div>
-</div>
-
-<div id="sout" style="display: none">
-  <div class="title">
-    Stream Output
-  </div>
-  <div class="controls">
-    <label for="sout_mrl">Destination (MRL)</label>
-    <input type="text" name="sout_mrl" id="sout_mrl" size="60" />
-    <br/>
-    <input type="submit" value="Save" onclick="save_sout();" />
-    <input type="button" value="Cancel" onclick="reset_sout();"/>
-    <input type="hidden" id="sout_old_mrl" value="" /> <!-- FIXME -->
-    <input type="button" id="sout_helper_toggle" onclick="toggle_show_sout_helper()" value="Full sout interface" />
-  </div>
-  <div id="sout_helper" style="display: none;" >
-    Stream Output Helper
-    <hr/>
-    <div id="sout_method">
-      <table>
-        <tr>
-          <td>
-            <input type="checkbox" id="sout_display" onchange="update_sout()"/>
-            <label for="sout_display">Display</label>
-          </td>
-          <td></td>
-          <td></td>
-        </tr>
-        <tr>
-          <td>
-            <input type="checkbox" id="sout_file" onchange="update_sout()"/>
-            <label for="sout_file">File</label>
-          </td>
-          <td>
-            <label for="sout_file_filename">File name</label>
-            <input type="text" id="sout_file_filename" onchange="update_sout()"/>
-          </td>
-          <td></td>
-        </tr>
-        <tr>
-          <td>
-            <input type="checkbox" id="sout_http" onchange="update_sout()"/>
-            <label for="sout_http">HTTP</label>
-          </td>
-          <td>
-            <label for="sout_http_addr">Address</label>
-            <input type="text" id="sout_http_addr" onchange="update_sout()"/>
-          </td>
-          <td>
-            <label for="sout_http_port">Port</label>
-            <input type="text" id="sout_http_port" onchange="update_sout()"/>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <input type="checkbox" id="sout_mmsh" onchange="update_sout()"/>
-            <label for="sout_mmsh">MMSH</label>
-          </td>
-          <td>
-            <label for="sout_mmsh_addr">Address</label>
-            <input type="text" id="sout_mmsh_addr" onchange="update_sout()"/>
-          </td>
-          <td>
-            <label for="sout_mmsh_port">Port</label>
-            <input type="text" id="sout_mmsh_port" onchange="update_sout()"/>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <input type="checkbox" id="sout_rtp" onchange="update_sout()"/>
-            <label for="sout_rtp">RTP</label>
-          </td>
-          <td>
-            <label for="sout_rtp_addr">Address</label>
-            <input type="text" id="sout_rtp_addr" onchange="update_sout()"/>
-          </td>
-          <td>
-            <label for="sout_rtp_port">Port</label>
-            <input type="text" id="sout_rtp_port" onchange="update_sout()"/>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <input type="checkbox" id="sout_udp" onchange="update_sout()"/>
-            <label for="sout_udp">UDP</label>
-          </td>
-          <td>
-            <label for="sout_udp_addr">Address</label>
-            <input type="text" id="sout_udp_addr" onchange="update_sout()"/>
-          </td>
-          <td>
-            <label for="sout_udp_port">Port</label>
-            <input type="text" id="sout_udp_port" onchange="update_sout()"/>
-          </td>
-        </tr>
-      </table>
-    </div>
-    <hr/>
-    <div id="sout_muxh">
-      <input type="radio" name="sout_mux" id="sout_mux_default" value="" onchange="update_sout()" />
-      <label for="sout_mux_default">Default</label>
-      <input type="radio" name="sout_mux" id="sout_mux_ts" value="ts" onchange="update_sout()"/>
-      <label for="sout_mux_ts">MPEG TS</label>
-      <input type="radio" name="sout_mux" id="sout_mux_ps" value="ps" onchange="update_sout()"/>
-      <label for="sout_mux_ps">MPEG PS</label>
-      <input type="radio" name="sout_mux" id="sout_mux_mpeg1" value="mpeg1" onchange="update_sout()"/>
-      <label for="sout_mux_ts">MPEG 1</label>
-      <input type="radio" name="sout_mux" id="sout_mux_ogg" value="ogg" onchange="update_sout()"/>
-      <label for="sout_mux_ts">OGG</label>
-      <br/>
-      <input type="radio" name="sout_mux" id="sout_mux_asf" value="asf" onchange="update_sout()"/>
-      <label for="sout_mux_ts">ASF</label>
-      <input type="radio" name="sout_mux" id="sout_mux_mp4" value="mp4" onchange="update_sout()"/>
-      <label for="sout_mux_ts">MP4</label>
-      <input type="radio" name="sout_mux" id="sout_mux_mov" value="mov" onchange="update_sout()"/>
-      <label for="sout_mux_ts">MOV</label>
-      <input type="radio" name="sout_mux" id="sout_mux_wav" value="wav" onchange="update_sout()"/>
-      <label for="sout_mux_ts">WAV</label>
-      <input type="radio" name="sout_mux" id="sout_mux_raw" value="raw" onchange="update_sout()"/>
-      <label for="sout_mux_ts">Raw</label>
-    </div>
-    <hr/>
-    <div id="sout_transcode">
-      <table>
-        <tr>
-          <td>
-            <input type="checkbox" id="sout_vcodec_s" onchange="update_sout()"/>
-            <label for="sout_vcodec_s">Video Codec</label>
-          </td>
-          <td>
-            <select id="sout_vcodec" onchange="update_sout()">
-              <option value="mp1v">mp1v</option>
-              <option value="mp2v">mp2v</option>
-              <option value="mp4v">mp4v</option>
-              <option value="DIV1">DIV1</option>
-              <option value="DIV2">DIV2</option>
-              <option value="DIV3">DIV3</option>
-              <option value="H263">H263</option>
-              <option value="H264">H264</option>
-              <option value="WMV1">WMV1</option>
-              <option value="WMV2">WMV2</option>
-              <option value="MJPG">MJPG</option>
-              <option value="theo">theo</option>
-            </select>
-          </td>
-          <td>
-            <label for="sout_vb">Bitrate (kb/s)</label>
-            <select id="sout_vb" onchange="update_sout()">
-              <option value="4096">4096</option>
-              <option value="3072">3072</option>
-              <option value="2048">2048</option>
-              <option value="1024">1024</option>
-              <option value="768">768</option>
-              <option value="512">512</option>
-              <option value="384">384</option>
-              <option value="256">256</option>
-              <option value="192">192</option>
-              <option value="128">128</option>
-              <option value="96">96</option>
-              <option value="64">64</option>
-              <option value="32">32</option>
-              <option value="16">16</option>
-            </select>
-          </td>
-          <td>
-            <label for="sout_scale">Scale</label>
-            <select id="sout_scale" onchange="update_sout()">
-              <option value="0.25">0.25</option>
-              <option value="0.5">0.5</option>
-              <option value="0.75">0.75</option>
-              <option value="1" selected="selected">1</option>
-              <option value="1.25">1.25</option>
-              <option value="1.5">1.5</option>
-              <option value="1.75">1.75</option>
-              <option value="2">2</option>
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <input type="checkbox" id="sout_acodec_s" onchange="update_sout()"/>
-            <label for="sout_acodec_s">Audio Codec</label>
-          </td>
-          <td>
-            <select id="sout_acodec" onchange="update_sout()">
-              <option value="mpga">mpga</option>
-              <option value="mp2a">mp2a</option>
-              <option value="mp3">mp3</option>
-              <option value="mp4a">mp4a</option>
-              <option value="a42">a52</option>
-              <option value="vorb">vorb</option>
-              <option value="flac">flac</option>
-              <option value="spx">spx</option>
-              <option value="s16l">s16l</option>
-              <option value="fl32">fl32</option>
-            </select>
-          </td>
-          <td>
-            <label for="sout_ab">Bitrate (kb/s)</label>
-            <select id="sout_ab" onchange="update_sout()">
-              <option value="512">512</option>
-              <option value="384">384</option>
-              <option value="256">256</option>
-              <option value="192">192</option>
-              <option value="128">128</option>
-              <option value="96">96</option>
-              <option value="64">64</option>
-              <option value="32">32</option>
-              <option value="16">16</option>
-            </select>
-          </td>
-          <td>
-            <label for="sout_channels">Channels</label>
-            <select id="sout_channels" onchange="update_sout()">
-              <option value="">default</option>
-              <option value="1">1</option>
-              <option value="2">2</option>
-              <option value="4">4</option>
-              <option value="6">6</option>
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <input type="checkbox" id="sout_sub" onchange="update_sout()"/>
-            <label for="sout_sub">Subtitles Codec</label>
-          </td>
-          <td>
-            <select id="sout_scodec" onchange="update_sout()">
-              <option value="dvbs">dvbs</option>
-            </select>
-          </td>
-          <td colspan="2">
-            <input type="checkbox" id="sout_soverlay" onchange="update_sout()"/>
-            <label for="sout_soverlay">Subtitles overlay</label>
-          </td>
-        </tr>
-      </table>
-    </div>
-    <hr/>
-    <div id="sout_misc">
-      <input type="checkbox" id="sout_sap" onchange="update_sout()"/>
-      <label for="sout_sap">SAP announce</label>
-      <br/>
-      <label for="sout_sap_group">Group name</label>
-      <input type="text" id="sout_sap_group" onchange="update_sout()"/>
-      <label for="sout_sap_name">Channel name</label>
-      <input type="text" id="sout_sap_name" onchange="update_sout()"/>
-      <hr/>
-      <input type="checkbox" id="sout_all" onchange="update_sout()"/>
-      <label for="sout_all">Select all elementary streams</label>
-      <hr/>
-      <label for="sout_ttl">Time-To-Live (TTL)</label>
-      <input type="text" id="sout_ttl" onchange="update_sout()"/>
-    </div>
-  </div>
-</div>
-
-<div id="playlist">
-  <div class="title">
-    Playlist
-  </div>
-  <div class="controls">
-    <!--<button id="btn_delete" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/delete.png" alt="Delete" />
-      <span class="btn_text">Delete</span>
-    </button>-->
-    <button id="btn_empty" onclick="pl_empty();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/empty.png" alt="Empty" />
-      <span class="btn_text">Empty</span>
-    </button>
-    &nbsp;
-    <button id="btn_sort" onclick="pl_sort();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/sort.png" alt="Sort" />
-      <span class="btn_text">Sort</span>
-    </button>
-    &nbsp;
-    <button id="btn_shuffle" onclick="pl_shuffle();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/shuffle.png" alt="Shuffle" />
-      <span class="btn_text">Shuffle</span>
-    </button>
-    <button id="btn_loop" onclick="pl_loop();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/loop.png" alt="Loop" />
-      <span class="btn_text">Loop</span>
-    </button>
-    <button id="btn_repeat" onclick="pl_repeat();" onmouseover="button_over(this);" onmouseout="button_out(this);">
-      <img src="images/repeat.png" alt="Repeat" />
-      <span class="btn_text">Repeat</span>
-    </button>
-  </div>
-  <div id="playtree">
-    (?)
-  </div>
-</div>
-
-<div id="footer">
-  <vlc id="value" param1="copyright" />
-</div>
+<vlc id="include" param1="dialogs/browse" />
+<vlc id="include" param1="dialogs/main" />
+<vlc id="include" param1="dialogs/input" />
+<vlc id="include" param1="dialogs/sout" />
+<vlc id="include" param1="dialogs/playlist" />
+<vlc id="include" param1="dialogs/footer" />
 
 </body>
 
diff --git a/share/http/functions.js b/share/http/js/functions.js
similarity index 96%
rename from share/http/functions.js
rename to share/http/js/functions.js
index afab5b28c1..ce4d932829 100644
--- a/share/http/functions.js
+++ b/share/http/js/functions.js
@@ -1,7 +1,7 @@
 /*****************************************************************************
  * functions.js: VLC media player web interface
  *****************************************************************************
- * Copyright (C) 2005 the VideoLAN team
+ * Copyright (C) 2005-2006 the VideoLAN team
  * $Id$
  *
  * Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
@@ -18,7 +18,7 @@
  *
  * You should have received a copy of the GNU General Public License
  * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
  *****************************************************************************/
 
 /* global variables */
@@ -167,15 +167,15 @@ function check_and_replace_int( id, val )
         document.getElementById( id ).value = val;
 }
 
-function addslashes( str ){ return str.replace(/\'/, '\\\''); }
+function addslashes( str ){ return str.replace(/\'/g, '\\\''); }
 
 function disable( id ){ document.getElementById( id ).disabled = true; }
 
 function enable( id ){ document.getElementById( id ).disabled = false; }
 
-function button_over( element ){ element.style.border = "1px solid black"; }
+function button_over( element ){ element.style.border = "1px solid #000"; }
 
-function button_out( element ){ element.style.border = "1px none black"; }
+function button_out( element ){ element.style.border = "1px solid #fff"; }
 
 /* toggle show help under the buttons */
 function toggle_btn_text()
@@ -344,17 +344,17 @@ function parse_playlist()
                 {
                     if( pos.hasChildNodes() )
                         pos.appendChild( document.createElement( "br" ) );
-                    pos.appendChild( document.createElement( 'a' ) );
-                    nda = pos.lastChild;
+                    nda = document.createElement( 'a' );
+                    pos.appendChild( nda );
                     nda.setAttribute( 'href', 'javascript:toggle_show_node(\''+elt.getAttribute( 'id' )+'\');' );
-                    nda.appendChild( document.createElement( 'img' ) );
-                    ndai = nda.lastChild;
+                    ndai = document.createElement( 'img' );
+                    nda.appendChild( ndai );
                     ndai.setAttribute( 'src', 'images/minus.png' );
                     ndai.setAttribute( 'alt', '[-]' );
                     ndai.setAttribute( 'id', 'pl_img_'+elt.getAttribute( 'id' ) );
                     pos.appendChild( document.createTextNode( ' ' + elt.getAttribute( 'name' ) ) );
-                    pos.appendChild( document.createElement( "div" ) );
-                    nd = pos.lastChild;
+                    nd = document.createElement( "div" );
+                    pos.appendChild( nd );
                     nd.setAttribute( 'class', 'pl_node' );
                     nd.setAttribute( 'id', 'pl_'+elt.getAttribute( 'id' ) );
                 }
@@ -362,8 +362,8 @@ function parse_playlist()
                 {
                     if( pos.hasChildNodes() )
                     pos.appendChild( document.createElement( "br" ) );
-                    pos.appendChild( document.createElement( "a" ) );
-                    pl = pos.lastChild;
+                    pl = document.createElement( "a" );
+                    pos.appendChild( pl );
                     pl.setAttribute( 'class', 'pl_leaf' );
                     pl.setAttribute( 'href', 'javascript:pl_play('+elt.getAttribute( 'id' )+');' );
                     pl.setAttribute( 'id', 'pl_'+elt.getAttribute( 'id' ) );
@@ -376,8 +376,8 @@ function parse_playlist()
                     pl.setAttribute( 'title', elt.getAttribute( 'uri' ));
                     pl.appendChild( document.createTextNode( elt.getAttribute( 'name' ) ) );
                     pos.appendChild( document.createTextNode( ' ' ) );
-                    pos.appendChild( document.createElement( "a" ) );
-                    del = pos.lastChild;
+                    del = document.createElement( "a" );
+                    pos.appendChild( del );
                     del.setAttribute( 'href', 'javascript:pl_delete('+elt.getAttribute( 'id' )+')' );
                     del.appendChild( document.createElement( "img" ) );
                     del = del.lastChild;
diff --git a/share/http/js/mosaic.js b/share/http/js/mosaic.js
new file mode 100644
index 0000000000..c073dc9dd6
--- /dev/null
+++ b/share/http/js/mosaic.js
@@ -0,0 +1,85 @@
+/*****************************************************************************
+ * mosaic.js: VLC media player web interface - Mosaic specific functions
+ *****************************************************************************
+ * Copyright (C) 2005-2006 the VideoLAN team
+ * $Id$
+ *
+ * Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+ *****************************************************************************/
+
+/**********************************************************************
+ * 
+ *********************************************************************/
+
+function mosaic_size_change()
+{
+    check_and_replace_int( "mosaic_rows", "1" );
+    mr = value( "mosaic_rows" );
+    check_and_replace_int( "mosaic_cols", "1" );
+    mc = value( "mosaic_cols" );
+    
+    mlayout = document.getElementById( "mosaic_layout" );
+    while( mlayout.hasChildNodes() )
+        mlayout.removeChild( mlayout.firstChild );
+
+    if( mc && mr )
+    {
+        for( y = 0; y < mr; y++ )
+        {
+            mrow = document.createElement( 'div' );
+            mrow.setAttribute( 'class', 'mosaic_row' );
+            for( x = 0; x < mc; x++ )
+            {
+                melt = document.createElement( 'input' );
+                melt.setAttribute( 'type', 'button' );
+                melt.setAttribute( 'id', 'mosaic_'+x+'_'+y );
+                melt.setAttribute( 'class', 'mosaic_element' );
+                melt.setAttribute( 'onclick', 'mosaic_elt_choose(\'mosaic_'+x+'_'+y+'\');' );
+                melt.setAttribute( 'value', '(click)' );
+                mrow.appendChild( melt );
+            }
+            mlayout.appendChild( mrow );
+        }
+    }
+}
+
+function mosaic_add_input()
+{
+    mlist = document.getElementById( "mosaic_list" );
+    minput = document.createElement( 'a' );
+    minput.setAttribute( 'href', 'javascript:mosaic_elt_select(\'mosaic_'+value('mosaic_input_name')+'\');');
+    minput.setAttribute( 'id', 'mosaic_'+value('mosaic_input_name') );
+    minput.setAttribute( 'value', value('mosaic_input') );
+    minput.setAttribute( 'title', value('mosaic_input') );
+    minputtxt = document.createTextNode( value('mosaic_input_name') );
+    minput.appendChild( minputtxt );
+    mlist.appendChild( minput );
+    mlist.appendChild( document.createElement( 'br' ) );
+}
+
+function mosaic_elt_select( id )
+{
+    hide( 'mosaic_list' );
+    document.getElementById( document.getElementById( 'mosaic_list' ).value ).value =
+        document.getElementById( id ).getAttribute( 'value' );
+}
+
+function mosaic_elt_choose( id )
+{
+    document.getElementById( 'mosaic_list' ).value = id;
+    show( 'mosaic_list' );
+}
diff --git a/share/http/js/vlm.js b/share/http/js/vlm.js
new file mode 100644
index 0000000000..90d503f978
--- /dev/null
+++ b/share/http/js/vlm.js
@@ -0,0 +1,148 @@
+/*****************************************************************************
+ * vlm.js: VLC media player web interface
+ *****************************************************************************
+ * Copyright (C) 2005-2006 the VideoLAN team
+ * $Id$
+ *
+ * Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+ *****************************************************************************/
+
+/* replace quotes and spaces by underscores */
+function addunderscores( str ){ return str.replace(/\'|\"| /g, '_'); }
+
+/**********************************************************************
+ * Input dialog functions
+ *********************************************************************/
+
+function vlm_input_edit( dest )
+{
+    document.getElementById( 'input_dest' ).value = dest;
+    show( 'input' );
+}
+
+function vlm_input_change()
+{
+    hide( 'input' );
+    document.getElementById( value( 'input_dest' ) ).value = value( 'input_mrl' );
+}
+
+function vlm_output_edit( dest )
+{
+    document.getElementById( 'sout_dest' ).value = dest;
+    show( 'sout' );
+}
+
+function vlm_output_change()
+{
+    hide( 'sout' );
+    document.getElementById( value( 'sout_dest' ) ).value = value( 'sout_mrl' ).substr(6); /* substr <-> remove :sout= */
+}
+
+function hide_vlm_add()
+{
+    document.getElementById( 'vlm_add_broadcast' ).style.display = 'none';
+    document.getElementById( 'vlm_add_vod' ).style.display = 'none';
+    document.getElementById( 'vlm_add_schedule' ).style.display = 'none';
+}
+
+function update_vlm_add_broadcast()
+{
+    cmd = document.getElementById( 'vlm_command' );
+
+    if( value( 'vlm_broadcast_name' ) )
+    {
+        cmd.value = "new " + addunderscores( value( 'vlm_broadcast_name' ) )
+                    + " broadcast";
+
+        if( checked( 'vlm_broadcast_enabled' ) )
+        {
+            cmd.value += " enabled";
+        }
+        
+        if( checked( 'vlm_broadcast_loop' ) )
+        {
+            cmd.value += " loop";
+        }
+
+        if( value( 'vlm_broadcast_input' ) )
+        {
+            cmd.value += " input " + value( 'vlm_broadcast_input' );
+        }
+
+        if( value( 'vlm_broadcast_output' ) )
+        {
+            cmd.value += " output " + value( 'vlm_broadcast_output' );
+        }
+    }
+}
+
+function update_vlm_add_vod()
+{
+    cmd = document.getElementById( 'vlm_command' );
+
+    if( value( 'vlm_vod_name' ) )
+    {
+        cmd.value = "new " + addunderscores( value( 'vlm_vod_name' ) )
+                    + " vod";
+
+        if( checked( 'vlm_vod_enabled' ) )
+        {
+            cmd.value += " enabled";
+        }
+        
+        if( value( 'vlm_vod_input' ) )
+        {
+            cmd.value += " input " + value( 'vlm_vod_input' );
+        }
+
+        if( value( 'vlm_vod_output' ) )
+        {
+            cmd.value += " output " + value( 'vlm_vod_output' );
+        }
+    }
+}
+
+function update_vlm_add_schedule()
+{
+}
+
+function parse_vlm_cmd()
+{
+    if( req.readyState == 4 )
+    {
+        if( req.status == 200 )
+        {
+            vlm_answer = req.responseXML.documentElement;
+            error_tag = vlm_answer.getElementsByTagName( 'error' )[0];
+            if( error_tag.hasChildNodes() )
+            {
+                vlm_error = error_tag.firstChild.data;
+                alert( vlm_error );
+            }
+        }
+    }
+}
+
+function vlm_cmd( cmd )
+{
+    loadXMLDoc( 'requests/vlm_cmd.xml?command='+cmd, parse_vlm_cmd );
+}
+
+function vlm_send( )
+{
+    vlm_cmd( value( 'vlm_command' ) );
+}
diff --git a/share/http/mosaic.html b/share/http/mosaic.html
new file mode 100644
index 0000000000..1ecd809a19
--- /dev/null
+++ b/share/http/mosaic.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  vlm.html: VLC media player web interface - VLM
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+
+  <title>VLC media player - Web Interface - Mosaic Wizard</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+  <link href="style.css" rel="stylesheet" type="text/css" />
+  <script type="text/javascript" src="js/functions.js"></script>
+  <script type="text/javascript" src="js/mosaic.js"></script>
+
+</head>
+
+<body onload="mosaic_size_change();">
+
+<h1>TODO : code</h1>
+
+<vlc id="rpn" param1="page vlm store" />
+
+<!-- do we need to browse in order to setup a mosaic ? for the background image maybe ... -->
+<vlc id="include" param1="dialogs/browse" />
+
+<!-- the actual mosaic stuff -->
+<vlc id="include" param1="dialogs/mosaic" />
+<!-- used to select background and sub streams -->
+<vlc id="include" param1="dialogs/input" />
+<!-- select final output -->
+<vlc id="include" param1="dialogs/sout" />
+
+<vlc id="include" param1="dialogs/footer" />
+
+</body>
+
+</html>
diff --git a/share/http/requests/browse.xml b/share/http/requests/browse.xml
index b4b7a8553c..ad4d8b7402 100644
--- a/share/http/requests/browse.xml
+++ b/share/http/requests/browse.xml
@@ -3,7 +3,7 @@
 <!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
 <  status.xml: VLC media player web interface
 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
-<  Copyright (C) 2005 the VideoLAN team
+<  Copyright (C) 2005-2006 the VideoLAN team
 <  $Id$
 < 
 <  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
diff --git a/share/http/requests/playlist.xml b/share/http/requests/playlist.xml
index 71c7ddd376..05f1c577ae 100644
--- a/share/http/requests/playlist.xml
+++ b/share/http/requests/playlist.xml
@@ -3,7 +3,7 @@
 <!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
 <  playlist.xml: VLC media player web interface
 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
-<  Copyright (C) 2005 the VideoLAN team
+<  Copyright (C) 2005-2006 the VideoLAN team
 <  $Id$
 < 
 <  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
diff --git a/share/http/requests/status.xml b/share/http/requests/status.xml
index 696a04749a..7ee7f56e64 100644
--- a/share/http/requests/status.xml
+++ b/share/http/requests/status.xml
@@ -3,7 +3,7 @@
 <!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
 <  status.xml: VLC media player web interface
 < - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
-<  Copyright (C) 2005 the VideoLAN team
+<  Copyright (C) 2005-2006 the VideoLAN team
 <  $Id$
 < 
 <  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
diff --git a/share/http/requests/vlm.xml b/share/http/requests/vlm.xml
new file mode 100644
index 0000000000..7457d18169
--- /dev/null
+++ b/share/http/requests/vlm.xml
@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
+<vlc id="if" param1="0"/>
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  vlm.xml: VLC media player web interface
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+<vlc id="end"/>
+
+<vlm>
+<vlc id="foreach" param1="el" param2="vlm"  />
+  <vlc id="if" param1="el.type value 'broadcast' strcmp 0 =" />
+    <broadcast name="<vlc id="value" param1="el.name"/>" enabled="<vlc id="value" param1="el.enabled" />" loop="<vlc id="value" param1="el.loop"/>">
+      <output><vlc id="value" param1="el.output" /></output>
+      <inputs>
+        <vlc id="foreach" param1="in" param2="el.inputs" />
+          <input><vlc id="value" param1="in" /></input>
+        <vlc id="end" />
+      </inputs>
+      <options>
+        <vlc id="foreach" param1="opt" param2="el.options" />
+          <option><vlc id="value" param1="opt" /></option>
+        <vlc id="end" />
+      </options>
+      <instances>
+        <vlc id="foreach" param1="inst" param2="el.instances" />
+          <option><vlc id="value" param1="inst"/></option>
+        <vlc id="end" />
+      </instances>
+    </broadcast>
+  <vlc id="else" />
+    <vlc id="if" param1="el.type value 'vod' strcmp 0 =" />
+      <vod name="<vlc id="value" param1="el.name"/>" enabled="<vlc id="value" param1="el.enabled" />">
+        <output><vlc id="value" param1="el.output" /></output>
+        <inputs>
+          <vlc id="foreach" param1="in" param2="el.inputs" />
+            <input><vlc id="value" param1="in" /></input>
+          <vlc id="end" />
+        </inputs>
+        <options>
+          <vlc id="foreach" param1="opt" param2="el.options" />
+            <option><vlc id="value" param1="opt" /></option>
+          <vlc id="end" />
+        </options>
+      <instances>
+        <vlc id="foreach" param1="inst" param2="el.instances" />
+          <option><vlc id="value" param1="inst"/></option>
+        <vlc id="end" />
+      </instances>
+      </vod>
+    <vlc id="else" />
+      <schedule name="<vlc id="value" param1="el.name"/>" enabled="<vlc id="value" param1="el.enabled" />" date="<vlc id="value" param1="el.date"/>" period="<vlc id="value" param1="el.period"/>" repeat="<vlc id="value" param1="el.repeat"/>">
+        <commands>
+          <vlc id="foreach" param1="com" param2="el.commands" />
+            <command><vlc id="value" param1="com" /></command>
+          <vlc id="end" />
+        </commands>
+      </schedule>
+    <vlc id="end" />
+  <vlc id="end" />
+<vlc id="end" />
+</vlm>
diff --git a/share/http/requests/vlm_cmd.xml b/share/http/requests/vlm_cmd.xml
new file mode 100644
index 0000000000..080ff91581
--- /dev/null
+++ b/share/http/requests/vlm_cmd.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
+<vlc id="if" param1="0"/>
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  vlm_cmd.xml: VLC media player web interface
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+<vlc id="end"/>
+
+<vlc id="if" param1="url_param 1 =" />
+  <vlc id="rpn" param1="; 'command' url_extract vlm_cmd" />
+<vlc id="end" />
+
+<vlm>
+  <error><vlc id="value" param1="vlm_error" /></error>
+</vlm>
diff --git a/share/http/style.css b/share/http/style.css
index 92d45b8c23..3ea4d1a52d 100644
--- a/share/http/style.css
+++ b/share/http/style.css
@@ -1,7 +1,7 @@
 /*****************************************************************************
  * style.css: VLC media player web interface
  *****************************************************************************
- * Copyright (C) 2005 the VideoLAN team
+ * Copyright (C) 2005-2006 the VideoLAN team
  * $Id$
  *
  * Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
@@ -34,7 +34,7 @@ div {
 	text-align: left;
 }
 
-div#main, div#playlist, div#input, div#sout, div#footer {
+div.dialog {
 	width: 600px;
 	background: #fff;
 	border: solid #000 1px;
@@ -63,11 +63,11 @@ input {
 	background-color: #fff;
 }
 
-div#sout_helper, div#input_helper {
+div.helper {
 	margin: 10px;
 	border: solid #ccc 2px;
 }
-div#sout_helper hr, div#input_helper hr {
+div.helper hr {
 	border: solid #ccc 1px;
 }
 
@@ -91,7 +91,7 @@ div.controls {
 	padding: 3px 5px;
 }
 div.controls button {
-	border: 1px none #000;
+	border: 1px solid #fff;
 	padding: 0px;
 	background-color: #fff;
 }
@@ -117,20 +117,46 @@ img {
 	border: 0px none black;
 }
 
-div#browse {
+div.popup {
 	background-color: #fff;
-	width: 70%;
 	overflow: hidden;
 	border: solid #888 1px;
 	margin: 10px auto; /* Center on page - Firefox */
 	position: absolute;
-	left: 15%;
 	z-index: 1;
 	font-size: 0.8em;
 }
+div#browse {
+	width: 70%;
+	left: 15%;
+}
 div#browse div.title {
 	background-color: #008;
 }
 div#browser {
 	padding: 20px;
 }
+
+div#mosaic_list {
+	width: 50%;
+	left: 25%;
+}
+
+div#mosaic_layout {
+	border: 1px solid #000;
+	background-color: #ddf;
+	display: block;
+	margin: 1em;
+	padding: 0.3em 0.6em;
+}
+div.mosaic_row {
+	padding: 0.6em 0em;
+}
+
+.mosaic_element {
+	display: inline;
+	border: 1px solid #000;
+	margin: 0em 0.3em;
+	padding: 0.3em 0.3em;
+	background-color: #dfd;
+}
diff --git a/share/http/vlm.html b/share/http/vlm.html
new file mode 100644
index 0000000000..c885583e24
--- /dev/null
+++ b/share/http/vlm.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<!--  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  vlm.html: VLC media player web interface - VLM
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
+<  Copyright (C) 2005-2006 the VideoLAN team
+<  $Id$
+< 
+<  Authors: Antoine Cellerier <dionoea -at- videolan -dot- org>
+< 
+<  This program is free software; you can redistribute it and/or modify
+<  it under the terms of the GNU General Public License as published by
+<  the Free Software Foundation; either version 2 of the License, or
+<  (at your option) any later version.
+< 
+<  This program is distributed in the hope that it will be useful,
+<  but WITHOUT ANY WARRANTY; without even the implied warranty of
+<  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+<  GNU General Public License for more details.
+< 
+<  You should have received a copy of the GNU General Public License
+<  along with this program; if not, write to the Free Software
+<  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111, USA.
+< - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+
+  <title>VLC media player - Web Interface - VLM</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
+  <link href="style.css" rel="stylesheet" type="text/css" />
+  <script type="text/javascript" src="js/functions.js"></script>
+  <script type="text/javascript" src="js/vlm.js"></script>
+
+</head>
+
+<body onload=";">
+
+<vlc id="rpn" param1="page vlm store" />
+
+<vlc id="include" param1="dialogs/browse" />
+<vlc id="include" param1="dialogs/input" />
+<vlc id="include" param1="dialogs/sout" />
+<vlc id="include" param1="dialogs/vlm" />
+<vlc id="include" param1="dialogs/footer" />
+
+</body>
+
+</html>
-- 
2.39.2