Index: py-tcpmultiplexer/htdocs/browser-embedded.html
===================================================================
--- py-tcpmultiplexer/htdocs/browser-embedded.html	(revision 336)
+++ py-tcpmultiplexer/htdocs/browser-embedded.html	(revision 336)
@@ -0,0 +1,77 @@
+<html>
+<head>
+<title>py-tcpmultiplexer Webcam Control </title>
+<link href="css/style.css" type="text/css" rel="stylesheet"/> 
+<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
+<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
+<script type="text/javascript">
+function changeAudio(wav_uri)
+{
+   $("#jplayer").jPlayer({
+      ready: function () {
+         $(this).jPlayer("stop");
+         $(this).jPlayer("setMedia", { wav: wav_uri }).jPlayer("play");
+      },
+      ended: function (event) {
+         $(this).jPlayer("play");
+      },
+      swfPath: "",
+      supplied: "wav"
+    });
+}
+
+function changeVideo(mjeg_uri)
+{
+   $("#player").attr("src",mjeg_uri);
+   $("#player").attr("alt","Video Feed: " + mjeg_uri);
+}
+
+$(document).ready(function(){
+   if ( $.browser.msie ) {
+     $("#messagebox").html('Live webcam does not support MSIE, please use alternative browser, <a href="http://www.browserchoice.eu">http://www.browserchoice.eu</a>');
+   }
+  
+  $("select[name='cam']").change(function () {
+      changeVideo($("select[name='cam']").val());
+  });
+  $("select[name='sound']").change(function () {
+      changeAudio($("select[name='sound']").val());
+  });
+});
+</script>
+
+<style type="text/css">
+#messagebox { background-color: red }
+#container { text-align: center }
+</style>
+
+</head>
+<body>
+<div id="container">
+  <div id="messagebox"></div>
+  <div>
+    <label for="cam">Webcam:</label>
+    <select name="cam"> 
+      <option value="img/logo.png" checked="checked">None</option>
+      <option value="/cam1/video">RepRap</option>
+      <option value="/cam2/video">RoomA</option>
+      <option value="/cam3/video">Kitchen</option>
+      <option value="/cam4/video">RepRap</option>
+      <option value="/cam5/video">RickCam</option>
+      <option value="/cam6/video">EdCam</option>
+      <option value="/cam7/video">MobileCam</option>
+    </select>
+    <label for="sound">Audio:</label>
+    <select name="sound">
+      <option value="none" checked="checked" >None</option>
+      <option value="/cam1/audio">RepRap</option>
+      <option value="/cam7/audio">MobileCam</option>
+    </select>
+  </div>
+  <div>
+    <img id="player" src="img/logo.png" height="95%" alt="Video feeds"/><br/>
+    <div id="jplayer" />
+  </div>
+</div>
+</body>
+</html>
Index: py-tcpmultiplexer/htdocs/browser.html
===================================================================
--- py-tcpmultiplexer/htdocs/browser.html	(revision 333)
+++ py-tcpmultiplexer/htdocs/browser.html	(revision 336)
@@ -26,35 +26,40 @@
    $("#player").attr("alt","Video Feed: " + mjeg_uri);
 }
+
+$(document).ready(function(){
+   if ( $.browser.msie ) {
+     $("#messagebox").html('Live webcam does not support MSIE, please use alternative browser, <a href="http://www.browserchoice.eu">http://www.browserchoice.eu</a>');
+   }
+});
 </script>
 
 </head>
 <body>
-<h1>py-tcpmultiplexer webcam server</h1>
-
+<div id="messagebox" style="background-color: red"></div>
 <div>
-<table>
-<tr><td>Select WebCam:</td><td>
-<input type="radio" name="cam" value="img/logo.png" checked="checked">None</input>
-<input type="radio" name="cam" value="/cam1/video">RepRap</input>
-<input type="radio" name="cam" value="/cam2/video">RoomA</input>
-<input type="radio" name="cam" value="/cam3/video">Kitchen</input>
-<input type="radio" name="cam" value="/cam4/video">OccTelex</input>
-<input type="radio" name="cam" value="/cam5/video">RickCam</input>
-<input type="radio" name="cam" value="/cam6/video">EdCam</input>
-<input type="radio" name="cam" value="/cam7/video">MobileCam</input>
-</td></tr>
-<tr><td>Select Audio:</td><td>
-<input type="radio" name="sound" value="none" checked="checked" >None</input>
-<input type="radio" name="sound" value="/cam1/audio">RepRap</input>
-<input type="radio" name="sound" value="/cam7/audio">MobileCam</input>
-</td></tr>
-</table>
+<label for="cam">Webcam:</label>
+<select name="cam"> 
+  <option value="img/logo.png" checked="checked">None</option>
+  <option value="/cam1/video">RepRap</option>
+  <option value="/cam2/video">RoomA</option>
+  <option value="/cam3/video">Kitchen</option>
+  <option value="/cam4/video">RepRap</option>
+  <option value="/cam5/video">RickCam</option>
+  <option value="/cam6/video">EdCam</option>
+  <option value="/cam7/video">MobileCam</option>
+</select>
+<label for="sound">Audio:</label>
+<select name="sound">
+  <option value="none" checked="checked" >None</option>
+  <option value="/cam1/audio">RepRap</option>
+  <option value="/cam7/audio">MobileCam</option>
+</select>
 
 <script type="text/javascript">
-  $("input[name='cam']").change(function () {
-      changeVideo($("input[name='cam']:checked").val());
+  $("select[name='cam']").change(function () {
+      changeVideo($("select[name='cam']").val());
   });
-  $("input[name='sound']").change(function () {
-      changeAudio($("input[name='sound']:checked").val());
+  $("select[name='sound']").change(function () {
+      changeAudio($("select[name='sound']").val());
   });
 </script>
Index: py-tcpmultiplexer/htdocs/room1.html
===================================================================
--- py-tcpmultiplexer/htdocs/room1.html	(revision 333)
+++ py-tcpmultiplexer/htdocs/room1.html	(revision 336)
@@ -29,8 +29,8 @@
   function flipImages()
   {
-     player_uri = $("#player").attr("src");
-     screen_uri = $("#screen").attr("src");
-     $("#player").attr("src", screen_uri);
-     $("#screen").attr("src", player_uri);
+     player_uri = $("#mainCam").attr("src");
+     screen_uri = $("#smallCam").attr("src");
+     $("#mainCam").attr("src", screen_uri);
+     $("#smallCam").attr("src", player_uri);
  
   }
@@ -40,12 +40,12 @@
   {
     if (runningPresentation) {
-      $("#player").attr("src", '/img/logo.png');
-      $("#screen").attr("src", '/img/logo.png');
+      $("#mainCam").attr("src", '/img/logo.png');
+      $("#smallCam").attr("src", '/img/logo.png');
       changeAudio('');
       runningPresentation = false;
       $("#togglePresentation").attr('value',"Start Presentation");
     } else {
-      $("#player").attr("src", '/cam6/video');
-      $("#screen").attr("src", '/cam7/video');
+      $("#mainCam").attr("src", '/cam6/video');
+      $("#smallCam").attr("src", '/cam7/video');
       changeAudio('/cam7/audio');
       runningPresentation = true;
@@ -54,33 +54,39 @@
   }
 
+  $(document).ready(function(){
+     if ( $.browser.msie ) {
+       $("#messagebox").html('Live webcam does not support MSIE, please use alternative browser, <a href="http://www.browserchoice.eu">http://www.browserchoice.eu</a>');
+     }
+  });
+
 </script>
 
+<style type="text/css">
+#mainCam {
+ position: relative;
+ height: 95%;
+}
+
+#smallCam { 
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 25%;
+ border: 1px solid;
+ background-color: lightgrey;
+}
+</style>
 </head>
 <body>
-<table border="2" width="100%" height="100%">
-<tr>
-  <td height="200px" width="450px" style="background: url(http://wifisoft.org/svn/logo/WifiSoft_logo.jpg);">
-    <img id="player" width="200px" src="/img/logo.png"  alt="Video feeds" border="1"/><br />
+<div id="messagebox" style="background-color: red"></div>
+<div>
     <input type="button" id="togglePresentation" OnClick="changePresentation()" value="Start Presentation" />
     <input type="button" id="toggleCamera" OnClick="flipImages()" value="Switch Camera's" />
-  </td>
-  <td rowspan="2" style="background: url(http://wifisoft.org/svn/logo/WifiSoft_logo.jpg) no-repeat;">
-    <img id="screen" height="100%" src="/img/logo.png" alt="Presentation" border="1"/>
-  </td>
-</tr>
-<tr>
-  <td>
-  <iframe src="http://webchat.freenode.net?&channels=occ&uio=d4" width="100%" height="100%"></iframe>
-  </td>
-</tr>
-<tr>
-  <td colspan="2">
-<p>Tested browsers: <a href="http://www.firefox.com">Mozilla Firefox</a>, <a href="http://www.google.com/chrome">Google Chrome</a> (<em>If no video appear below, you are using unsupported browser</em>)<br />
-<small>Source Code at: <a href="http://rickvanderzwet.nl/svn/personal/py-tcpmultiplexer/">http://rickvanderzwet.nl/svn/personal/py-tcpmultiplexer/</a> build @ <a href="http://opencommunitycamp.org">#occ2011</a> - feedback/comments at <a href="irc://irc.freenode.net/#occ">#occ</a></small>
-  </td>
-</tr>
-</table>
+</div>
+<img id="mainCam" src='/img/logo.png' />
+<img id="smallCam" src='/img/logo.png' />
+</div>
 
-<div id="jplayer" />
+    <div id="jplayer"></div>
 </body>
 </html>
Index: py-tcpmultiplexer/htdocs/telex.html
===================================================================
--- py-tcpmultiplexer/htdocs/telex.html	(revision 336)
+++ py-tcpmultiplexer/htdocs/telex.html	(revision 336)
@@ -0,0 +1,13 @@
+<html>
+<head></head>
+<body>
+<div style="with: 100%; height: 100%">
+  <div style="float:left; background-color: red; width:50%">
+      <iframe src="http://live.occ2011.org:9090?channels=occ" width="100%%" height="100%"></iframe>
+  </div>
+  <div style="float:right; background-color: green; width:50%; height:100%;">
+    <img width="100%"  height="100%" src="http://live.occ2011.org:9999/cam4/video" alt="Cam4" />
+  </div>
+</div>
+</body>
+</html>
