diff -r d824146a9589 -r 0a2505c3b547 web/polemicaltimeline.php
--- a/web/polemicaltimeline.php	Sun Mar 04 14:13:39 2012 +0100
+++ b/web/polemicaltimeline.php	Mon Mar 05 18:41:11 2012 +0100
@@ -20,6 +20,10 @@
 	$tweet_explain_background = URL_ROOT.$rep.'/images/tweetExplainBgd.gif';
 }
 
+$head_logo = URL_ROOT."$rep/images/head_logo.gif";
+if($translate->_('config__head_logo') != 'config__head_logo' && $translate->_('config__head_logo') != null ) {
+    $head_logo = URL_ROOT."$rep/".$translate->_('config__head_logo');
+}
 
 $url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] : "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
 
@@ -41,65 +45,26 @@
 	<script type="text/javascript">
 		$.noConflict();
 	</script>
-	<script type="text/javascript" src="<?php echo(registry_url('raphael','js'));?>"></script>
 	<script type="text/javascript" src="<?php echo(registry_url('fancybox','js'));?>"></script>
 	<script type="text/javascript" src="<?php echo(registry_url('jquery-url','js'));?>"></script>
-	<script type="text/javascript" src="<?php echo(registry_url('ldtplayer','js'));?>"></script>
+	<script type="text/javascript" src="<?php echo(registry_url('metadataplayer','js'));?>"></script>
 		
 	<!-- Framework CSS -->
-    <link rel="stylesheet" href="<?php echo(registry_url('blueprint-screen','css'));?>" type="text/css" media="screen, projection"/>
-    <link rel="stylesheet" href="<?php echo(registry_url('blueprint-print','css'));?>" type="text/css" media="print"/>
-    <!--[if lt IE 8]><link rel="stylesheet" href="<?php echo(registry_url('blueprint-ie','css'));?>" type="text/css" media="screen, projection"><![endif]-->
-	<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('tweetcast','css'));?>" type="text/css" media="screen, projection"/>
 	<link rel="stylesheet" href="<?php echo(registry_url('fancybox','css'));?>" media="screen"/>
 	
 	<!-- FONT -->
 	<link href='<?php echo(registry_url('PT-Sans_Narrow','font'));?>' rel='stylesheet' type='text/css'/>
 	<link href='<?php echo(registry_url('PT-Sans','font'));?>' rel='stylesheet' type='text/css'/>
-	<link href='<?php echo(registry_url('Geo','font'));?>' rel='stylesheet' type='text/css'/>
 	
-	<style type="text/css">
-		.tweetButton{float:left;margin-right:5px;}
-		.videoLivePlayer{border:1px solid #c3c3c3;width:650px;height:<?php echo($div_height-2);?>px;}
-		.videoLive{width:650px;height:<?php echo($div_height); ?>px;background:#fff;float:right;margin-top:20px;padding:5px;}
-		.tweetExplain{background-image:url(<?php echo($tweet_explain_background);?>);width:250px;height:<?php echo($div_height)?>px;padding:10px;position:absolute; margin-top:70px;}
-		.footer{margin-top:<?php echo($div_height+100);?>px;width:960px;height:20px;position:absolute;text-align:center;}
-		.tooltip{
-			 z-index: 10000000000;
-		}
-		#tip{
-			 position : absolute;
-			 padding : 3px;
-			 z-index: 10000000000;
-			 max-width: 200px;
-		}
-		#tip {
-				display: none;
-				background: transparent url("<?php echo($baseurl);?>images/white_arrow_long.png");
-				font-size: 12px;
-				height: 125px;
-				width: 180px;
-				padding: 10px;
-				padding-left: 15px;
-				padding-top: 15px;
-				padding-right: 15px;
-				color: black;
-				z-index: 10000000000;
-				font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
-				overflow:hidden;
-		}
-		#chartTimeline{
-			padding-top: 0px;
-			z-index: 9;
-			position : absolute;
-		}
-
-	</style>
+	
 	<script type="text/javascript">
   		// Configuration Polemical Timeline
+  		if (typeof jQuery == "undefined") {
+  		    jQuery = IriSP.jQuery;
+  		}
   		<?php
-  		if(is_array($translate->_('config__metadata'))):
+      		if(is_array($translate->_('config__metadata'))):
   			reset($translate->_('config__metadata'));
   		    $first_key = key($translate->_('config__metadata'));
   		?>
@@ -113,26 +78,74 @@
   		var metadatas = { metadata: {url: "<?php echo($translate->_('config__metadata'));?>", duration: <?php echo($translate->_('config__duration'))?>} };
   		var metadata_key = "metadata";
   		<?php endif;?>
-  		
-		var config = {
-					target:"chartTimeline",
-					x:8,
-					y:418,
-					width:<?php echo($translate->_('config__player_width')); ?>,
-					height:<?php echo($translate->_('config__player_height')); ?>,
-					heightmax:<?php echo($translate->_('config__player_height')); ?>,
-					duration:metadatas[metadata_key].duration,
-					metadata:metadatas[metadata_key].url
-					};
-  	</script>
-	<script type='text/javascript' src='<?php echo(URL_ROOT);?>res/metadataplayer.polemic/src/js/polemic.js'></script>
-	<script type="text/javascript">
-		jQuery.extend(__IriSP.lib,{
-			jQueryToolTip:"<?php echo(registry_url('jquery-tools','js'));?>",
-			jQueryUI:"<?php echo(registry_url('jquery-ui','js'));?>",
-			swfObject:"<?php echo(registry_url('swfobject','js'));?>",
-			cssjQueryUI:"<?php echo(registry_url('jquery-ui','css'));?>"
-		});
+    IriSP.libdir = "<?php echo(registry_url('libdir','js'));?>";
+    IriSP.jwplayer_swf_path = "<?php echo(URL_ROOT); ?>res/mediaplayer/player.swf";
+    IriSP.platform_url = "http://ldt.iri.centrepompidou.fr/";
+    var json_url = metadatas[metadata_key].url;
+
+    var config = {            
+        gui:{
+            width:650,
+            height:800,              
+            container:'LdtPlayer',
+            css:'<?php echo(registry_url('metadataplayer','css'));?>',
+            default_options : {
+                metadata:{
+                format:'cinelab',
+                src: json_url,
+                type:'json'},
+                width: 650
+            },
+            widgets: [
+            {type: "PolemicWidget",
+               requires: [{
+                type: "TooltipWidget",
+                width: 180,
+                height: 160,
+                metadata : {type:'empty'
+                }
+               }],
+               height: 75
+            },
+            {type: "SliderWidget"},        
+            {type: "PlayerWidget", // please note that type refers directly to the constructor of the widget.
+             mode: "radio"},
+            {type: "SegmentsWidget",
+             requires: [{
+              type: "TooltipWidget",
+              width: 180,
+              height: 160,
+              }],
+                width: 650
+            },                      
+            {type: "ArrowWidget"},
+            {type: "TweetsWidget"},
+            {type: "AnnotationsWidget"},
+            {type: "AnnotationsListWidget",
+             container: "AnnotationsListContainer"},
+            {type: "TagCloudWidget",
+             container: "TagcloudContainer",
+        <?php if (isset($config['hashtag'])) echo "excludeWords: ".json_encode(array($config['hashtag'])); ?>
+            }
+            ]
+        },
+      player:{
+          type:'jwplayer',
+          live: true, 
+          height: 400, 
+          width: 650, 
+          provider: "rtmp" 
+      },
+      modules: [
+               { type: "MediaFragment",
+                         metadata:{
+                       format:'cinelab',
+                           src:json_url,
+                             type:'json'}
+                        }]
+
+    };
+
 		jQuery(document).ready(function() {
 			
 			jQuery("#mdselect_"+metadata_key).attr("selected","selected");
@@ -154,6 +167,9 @@
 				'transitionOut'		: 'none',
 				'type'				: 'iframe'
 			});
+			jQuery(".acctitre").click(function() {
+			    jQuery(this).next().slideToggle();
+			})
 			
 		});
 	</script>
@@ -174,54 +190,86 @@
   <div id="sendUsFeedBack"><a href="<?php echo($C_feedback_form_url); ?>" target="_blank"><img src="<?php echo(URL_ROOT); ?>images/sendusfeedback.png"></a></div>
 
   <!-- tooltip -->
-  <div id="tip">
-  <div id="tipcolor" style="height:10px;width:10px"></div>
-  <div id="tiptext"></div>
   </div>
 
-    <div class="container">
-      <img src="<?php echo(URL_ROOT."$rep/$config[head_logo]");?>" class="logo">
-      <div id="minilogo" style="margin-left:85px;height:5px;top:5px;"></div>
-	  <ul class="menu">
-		  <li class="menuUnderline"><a href="<?php echo(URL_ROOT)?>" class="menuLink" id="Accueil">
-		   <?php print $translate->_("Accueil"); ?></a></li>
-		  <li class="menuUnderline"><a href="<?php echo(URL_ROOT.$rep)?>/embed_form.php" class="menuLink" id="Embeded">
-		    <?php print $translate->_("Partager"); ?></a></li>
-		  <li >&nbsp;</li>
-	  </ul>
-	  <ul class="menu">
-	  <li class="menuUnderline"><a href="<?php echo(URL_ROOT); ?>archives.php" class="menuLink">
-	  <?php print $translate->_("Archives"); ?></a></li>
-	  </ul>
-	  	  
-	<?php if(is_array($translate->_('config__metadata'))): ?>
-	<ul id="content_select_ul" class="menu mdselect">
-	    <span><?php print $translate->_("changer de contenu"); ?></span><br/>
-	    <select id="mdselect">
-	    	<?php foreach ($translate->_('config__metadata') as $key => $value):?>
-	    	<option value="<?php echo($key); ?>" id="mdselect_<?php echo($key); ?>" ><?php echo($value['display']); ?></option>
-	    	<?php endforeach;?>
-	    </select>
-	</ul>
-	<ul class="menu shortlang" >
-	<?php else: ?>
-	<ul class="menu lang" >
-	<?php endif;?>
-	  <li class="menuUnderline"><a href="<?php echo(URL_ROOT.$rep);?>/polemicaltimeline.php?lang=ja_JP" class="menuLink" >
-	       <img src="<?php echo(URL_ROOT)?>images/flag_jp.gif"<?php if($actual!="ja_JP"){echo("style='opacity: .5;'"); } ?> />
-	        <?php print $translate->_("Japonais"); ?></a></li>
-	  <li class="menuUnderline"><a href="<?php echo(URL_ROOT.$rep) ?>/polemicaltimeline.php?lang=fr" class="menuLink">
-	       <img src="<?php echo(URL_ROOT)?>images/flag_fr.gif" <?php if($actual!="fr"){echo("style='opacity: .5;'"); } ?> />
-	       <?php print $translate->_("Français"); ?></a></li>
-	  <li ><a href="<?php echo(URL_ROOT.$rep) ?>/polemicaltimeline.php?lang=en" class="menuLink">
-	       <img src="<?php echo(URL_ROOT)?>images/flag_en.gif" <?php if($actual!="en"){echo("style='opacity: .5;'"); } ?> />
-	       <?php print $translate->_("Anglais"); ?></a></li>
-	  </ul>
+    <div id="container">
+                <div class="barre">
+                    <img id="headlogo" src="<?php echo($head_logo); ?>" width="171" height="63" />
+                    <div id="minilogo"></div>
+                    <ul class="menu">
+                        <li>
+                            <a href="<?php echo(URL_ROOT); ?>" class="menuLink">
+                                <?php print $translate->_("Accueil"); ?>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="<?php echo($translate->_('config__link')); ?>" class="menuLink" target="_blank" id='Program'>
+                                <?php print $translate->_("Programme"); ?>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="../about.php" class="menuLink" >
+                                <?php print $translate->_("A propos"); ?>
+                            </a>
+                        </li>
+                    </ul>
+                    <ul class="menu">
+                        <li>
+                            <a href="<?php URL_ROOT ?>client.php?lang=ja_JP" class="menuLink" >
+                                <img src='<?php echo(URL_ROOT); ?>images/flag_jp.gif'<?php if($actual!="ja_JP"){echo("style='opacity: .5;'"); } ?> />
+                                <?php print $translate->_("Japonais"); ?>
+                            </a></li>
+                        <li>
+                            <a href="<?php URL_ROOT ?>client.php?lang=fr" class="menuLink">
+                                <img src='<?php echo(URL_ROOT); ?>images/flag_fr.gif' <?php if($actual!="fr"){echo("style='opacity: .5;'"); } ?> />
+                                <?php print $translate->_("Français"); ?>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="<?php URL_ROOT ?>client.php?lang=en" class="menuLink">
+                                <img src='<?php echo(URL_ROOT); ?>images/flag_en.gif' <?php if($actual!="en"){echo("style='opacity: .5;'"); } ?> />
+                                <?php print $translate->_("Anglais"); ?>
+                            </a>
+                        </li>
+                    </ul>
+                    
+    <?php if(is_array($translate->_('config__metadata'))): ?>
+    <ul id="content_select_ul" class="menu mdselect">
+        <span><?php print $translate->_("changer de contenu"); ?></span><br/>
+        <select id="mdselect">
+            <?php foreach ($translate->_('config__metadata') as $key => $value):?>
+            <option value="<?php echo($key); ?>" id="mdselect_<?php echo($key); ?>" ><?php echo($value['display']); ?></option>
+            <?php endforeach;?>
+        </select>
+    </ul>
+    <?php endif;?>
+                </div>
 	
 	<!-- EXPLICATION  -->
-	  <div class="tweetExplain"  >
-		<h3 class="tweetWriterTitle"><?php print $translate->_("ClientTitle1 :"); ?> </h3><br/>
-		<?php print $translate->_("ExplicationPT"); ?>
+	<div id="mdpgauche">
+       <div id="out_fleche"></div>
+        <ul id="accordeon">
+            <li class="acctitre">
+                <h3>Liste des Annotations</h3>
+            </li>
+            <li class="acctexte">
+                <div id="AnnotationsListContainer"></div>
+            </li>
+            <li class="acctitre">
+                <h3>Mots-clés</h3>
+            </li>
+            <li class="acctexte">
+                <div class="tagcloud" id="TagcloudContainer"></div>
+            </li>
+            <li class="acctitre">
+                <h3><?php print $translate->_("AboutPT"); ?></h3>
+            </li>
+            <li class="acctexte" style="display: none;">
+                <p><?php print $translate->_("ExplicationPT"); ?></p>
+            </li>
+        </ul>
+		
+	  </div>
 	  </div>
 	 
 	  
@@ -235,38 +283,15 @@
 
 
 
-	  <div class="videoLive" >
-		<div class="videoLivePlayer">
-			<div id="chartTimeline"> </div>
-			<script type="text/javascript">
-				var paper = Raphael(document.getElementById("chartTimeline"),config.width, config.height);
-			</script>
-			<div id="player_project_embed" class="iri_player_embed"></div>
-			<script type="text/javascript">
-				var configMP = {
-						metadata:{
-							format:'cinelab',
-							src:config.metadata,
-							load:'jsonp'},
-						gui:{
-							width:config.width,
-							height:config.height,
-							mode:'video',
-							container:'player_project_embed',
-							debug:false,
-							css:'../res/css/LdtPlayer.css'},
-			
-						player:{
-							type:'jwplayer',
-							src:'../res/metadataplayer/res/swf/player.swf'}
-					};
-				__IriSP.init(configMP);
-			</script>
-		</div>
+	  <div id="mdpdroite" >
+		<div id="LdtPlayer"></div>
 	  </div>
-
+<script type="text/javascript">
+    IriSP.initPlayer(config, json_url);
+</script>
  
       <div class="footer">
+          
 		<hr>
 			<?php echo($translate->_('config__partenaires')); ?>
 	  </div>