diff -r c223cae8db5b -r a408065d36e0 web/client_old.php
--- a/web/client_old.php	Mon Dec 19 15:28:23 2011 +0100
+++ b/web/client_old.php	Mon Dec 19 15:46:29 2011 +0100
@@ -14,6 +14,47 @@
 	<link rel="stylesheet" href="<?php echo(registry_url('blueprint-plugins-fancy-type','css'));?>" type="text/css" media="screen, projection"/>
 	<link rel="stylesheet" href="<?php echo(registry_url('custom','css'));?>" type="text/css" media="screen, projection"/>
 	<link rel="stylesheet" href="<?php echo(registry_url('fancybox','css'));?>" type="text/css" media="screen">
+	
+	<style type="text/css">
+	   .hidden {
+	       display: none;
+	   }
+	
+	    #onglets {
+            float: left; width: 441px; margin: 5px 25px 0; list-style: none;
+            border-left: 1px solid #999; padding: 0;
+        }
+        
+        #onglets li {
+            float: left; text-transform: uppercase; background: url(../res/css/twcx-img/bg_onglet.png) repeat-x;
+            line-height: 12px; font-size: 12px; height: 12px; padding: 6px 10px; font-weight: bold;
+            border: 1px #999; border-style: solid solid solid none; margin-top: 1px;
+        }
+        
+        #onglets a {
+            text-decoration: none; color: #666666;
+        }
+        
+        #onglets a:hover {
+            color: #0099ff;
+        }
+        
+        #onglets li.selected {
+            background-position: 0 -22px; padding-bottom: 8px; border-bottom: none; margin-top: 0;
+        }
+        
+        #onglets li.selected a {
+            color: #333333; 
+        }
+        
+        div.ifwrap {
+            float: left; border: 5px solid #ffffff; background: #999999; padding: 1px; width: 500px; height: 375px;
+        }
+        
+        .ifwrap iframe {
+            width: 500px; height: 375px; background: #000000; border: none; padding: 0; margin: 0;
+        }
+	</style>
 
 	<!-- JAVASCRIPT -->
 	<script type="text/javascript" src="<?php echo(registry_url('jquery','js'))?>"></script>
@@ -29,6 +70,20 @@
 	<script type="text/javascript">
 	$(document).ready(function() {
 
+    $("#onglets a").click(function() {
+        $("div.ifwrap").hide();
+        $("#onglets li").removeClass("selected");
+        $(this).parent().addClass("selected");
+        var hr = $(this).attr("href");
+        if (hr[0] == '#') {
+            $(hr).show();
+        } else {
+            $("#iframeWrap").show();
+            $("#graphFrame").attr("src", hr);
+        }
+        return false;
+    });
+
 			doTimer();
 			//$("txt").hide();
 			$(".loginbutton").click(function() {
@@ -219,7 +274,18 @@
 	  </ul>
 
 	  
-	  <div class="videoLive">
+    <ul id="onglets">
+        <li class="selected">
+            <a href="#vlWrap"><?php echo($translate->_('Video')); ?></a>
+        </li>
+        <li>
+            <a href="../sweet-tweet/small.html"><?php echo($translate->_('SemanticBoard')); ?></a>
+        </li>
+        <li>
+            <a href="http://labs.knowtex.com/enmi2011"><?php echo($translate->_('SocialGraph')); ?></a>
+        </li>
+    </ul>
+    <div class="ifwrap" id="vlWrap">
 	  <?php if ($config['islive']):?>
 	  <div class="videoLivePlayer">
 			<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="500" height="375">
@@ -255,6 +321,9 @@
 		<?php endif; ?>
 		
 	  </div>
+	  <div class="ifwrap hidden" id="iframeWrap">
+        <iframe id="graphFrame"></iframe>
+    </div>
 
 	<div class="videoLiveProgram">