<!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"] ?>
<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">
    <div id="banner">
      <img src="../crea/imgs/enmi_logo.png" style="margin-left: 45px; float: left;"></img>
      <img src="../crea/imgs/iri.png" style="margin-right: 32px; float: right;"></img>
      <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="content">
        <tr>
        <td id="left_pane"></td>
        <td id="right_pane">
          <img src="imgs/technos.png" style="margin-top: 5px; margin-left: -3px;"></img>
          <div id="caption_text">
            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).
            Cette interface sera prochainement utilisée pour le festival cinecast.
            <br><br>
            <b>Application</b>
            Visualisation et navigation dans les annotations polémiques sur le film "entre les murs" de Laurent Cantet.
            <br>
            1500 annotations ont été produites par un groupe d'enseignants, de chercheurs, d'élèves et d'amateurs de cinéma sur
            la plateforme lignes de temps.
          </div>
        </td>
      </table>
  
      <div id="partners">
          <h4 style="padding: 5px; margin: 0px;">Partenaires</h4>
          <img src="../crea/imgs/partners.png"></img>
      </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:640,
            height:480,              
            container:'left_pane',
            css:'LdtPlayer.css',
            widgets: [
              {type: "PolemicWidget",
             width: 640, /* 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: 640, 
              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>
