<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<?php $url = "http://www.iri.centrepompidou.fr/dev/ldt/ldtplatform/ldt/cljson/id/" . $_GET["stream"];     
      $lines = file("entretiens.txt");

      /* thank you php docs */
      foreach ($lines as $line_num => $line) {
        if ($line[0] == "#")
          continue;
        
        list($title, $author, $stream_id, $thumbnail, $date, $descript) = explode(";", $line);
        if ($stream_id == $_GET["stream"])
          break;
          
        if (strlen($title) >= 37) {            
          $title = substr($title, 0, 35) . "...";            
        }
      }
?>
<head>
<title>Metadataplayer - Demo</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="LdtPlayer-release.js" type="text/javascript"></script> 
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.tools.min.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>

</head>

<body>
  <div id="outer_div">
  <img src="site_imgs/edition_2011.png" style="position: absolute; z-index: 3; margin-left: 12px;"></img>
      <div id="banner">      
      <a href="index.php">
        <img src="site_imgs/enmi_logo.png"></img>
      </a>
        <ul class="menu">
          <li class="menuUnderline"><a href="index.php" class="menuText">Accueil</a></li>
          <li class="menuUnderline"><a href="about.php" class="menuText">A propos</a></li>
        </ul>
      <div style="clear: both;"></div>
  </div>

    <div id="inner_div">
      <div id="intro_title">
        Metadataplayer, un outil opensource pour le web
      </div>

      <table border=0 id="player_content">
        <tr>
        <td id="left_pane"></td>
        <td id="right_pane">
          <div id="session_infos" style="padding: 5px; background-color: #bbb; width: 220px; margin-top: 5px; margin-left: -3px;">
            
            <b><?php echo $title ?></b><br>
            par <?php echo $author ?>,<br> <?php echo $date ?>.
          </div>  
          <!-- <img src="site_imgs/technos.png" style="margin-top: 5px; margin-left: -3px;"></img> -->
          <div id="caption_text">
            <p>
              <b>Description : </b>
              <?php echo $descript ?>
            </p>
            <p>
            <b>Technologie :</b> Le MetaData player est une librarie opensource conçue pour afficher, produire et partager
            des métadonnées associées à des segments de contenus audiovisuels diffusés sur le Web. Il tire parti des derniers 
            standards technologiques (html5, W3C mediafragment, popcorn.js de la fondation Mozilla). 
            </p>
          </div>
        </td>
      </table>
  
     <div id="partners">    
        <a href="http://www.iri.centrepompidou.fr" target="_blank"><img src="site_imgs/iri_logo.png"></a>
        <a href="http://www.capdigital.com/" target="_blank"><img src="site_imgs/capd_logo.png"></a>
        <a href="http://www.ensci.com/" target="_blank"><img src="site_imgs/ensci_logo.png"></a>
        <a href="http://www.institut-telecom.fr/" target="_blank"><img src="site_imgs/institut_telecom_logo.png"></a>
        <a href="http://fing.org" target="_blank"><img src="site_imgs/fing_logo.png"></a>
        <a href="http://www.alcatel-lucent.com" target="_blank"><img src="site_imgs/alcatel_logo.png"></a>   
      </div>
     
      <div id="footer">
          <a href="http://www.iri.centrepompidou.fr">iri.centrepompidou.fr</a>
      </div>
   </div>
 
  </div>
   <div id="closing_div"></div>
  <script  type="text/javascript">
    $(document).ready(function() {
    var config = {            
        gui:{
            width:603,
            height:480,              
            container:'left_pane',
            css:'LdtPlayer.css',
            widgets: [
              {type: "PolemicWidget",
             width: 605, /* required for this widget */
             height: 50,
             heightmax: 50,
             metadata:{
              format:'cinelab',
              src:"<?php echo $url ?>",
              type:'json'},
              
             requires: [{
              type: "TooltipWidget",
              width: 180,
              height: 160,
              metadata : {
                format:'cinelab',
                src:"<?php echo $url ?>",
                type:'empty'
              }
             }],
            },
            {type: "SliderWidget",
             width: 640,
             metadata:{
              format:'cinelab',
              src:"<?php echo $url ?>",
              type:'json'}
            },
            {type: "PlayerWidget", // please note that type refers directly to the constructor of the widget.
             mode: "radio",
             width: 640,
             metadata:{
              format:'cinelab',
              src:"<?php echo $url ?>",
              type:'json'}
            },
            {type: "SegmentsWidget",
             width: 640,
             metadata:{
              format:'cinelab',
              src:"<?php echo $url ?>",
              type:'json'},
             requires: [{
              type: "TooltipWidget",
              width: 180,
              height: 160,
              metadata : {
                type:'empty'
              }
             }],
            },
            {type: "ArrowWidget",
             metadata:{
              format:'cinelab',
              src:"<?php echo $url ?>",
              type:'json'}
            },
            {type: "AnnotationsWidget",
						 metadata:{
						  format:'cinelab',
						  src:"<?php echo $url ?>",
						  type:'json'}
						},
            {type: "TweetsWidget",
             metadata:{
              format:'cinelab',
              src:"<?php echo $url ?>",
              type:'json'}
            }      
            ]
        },
      player:{
              type:'jwplayer', // player type
              flashplayer: 'player.swf',
              live: true, 
              "controlbar.position" : "none", 
              height: 300, 
              width: 605, 
              provider: "rtmp" 
            },
    modules: [
               { type: "MediaFragment",
                  metadata:{
                 format:'cinelab',
                 src:"<?php echo $url ?>",
                 type:'json'}
            }]
 
    };
   
    IriSP.lib = { 
    jQuery : "jquery.js",
    jQueryUI : "jquery-ui.js",
    jQueryToolTip : "jquery.tools.min.js",
    swfObject : "swfobject.js",
    cssjQueryUI : "jquery-ui.css",
    };

    IriSP.loadLibs(IriSP.lib, config.gui.css, "<?php echo $url ?>",
      function() {   
              var layoutManager = new IriSP.LayoutManager(config.gui);
              var pop = IriSP.configurePopcorn(layoutManager, config.player);
              
              var modules = IriSP.configureModules(pop, config.modules);
              var widgets = IriSP.configureWidgets(pop, layoutManager, config.gui); });
    
    });
  </script>
  
</body>
</html>
