{% spaceless %}
{% load i18n %}
<div>
<div style="height: 80px">&nbsp;</div>
<div id="{{ player_id }}_embed" class="iri_player_embed">
</div>
<script type="text/javascript">
  /* Redefine a few variables */  
  IriSP.jwplayer_swf_path = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}swf/player.swf";
  IriSP.libdir = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}js/";
  
  IriSP.lib = { 
    jQuery : IriSP.libdir + "jquery.min.js",
    jQueryUI : IriSP.libdir + "jquery-ui.min.js",
    jQueryToolTip : IriSP.libdir + "jquery.tools.min.js",
    swfObject : IriSP.libdir + "swfobject.js",
    cssjQueryUI : "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css",
    popcorn : IriSP.libdir + "popcorn.js",
    jwplayer : IriSP.libdir + "jwplayer.js",
    popcornReplacement: IriSP.libdir + "pop.js",
    raphael: IriSP.libdir + "raphael.js",
    jquery_sparkline: IriSP.libdir + "jquery.sparkline.js",
    "popcorn.mediafragment" : IriSP.libdir + "popcorn.mediafragment.js",
    "popcorn.code" : IriSP.libdir + "popcorn.code.js",
    "popcorn.jwplayer": IriSP.libdir + "popcorn.jwplayer.js",
    "popcorn.youtube": IriSP.libdir + "popcorn.youtube.js",    
  };
  
  IriSP.paths["imgs"] = "{{WEB_URL}}{{LDT_MEDIA_PREFIX}}css/imgs";
  IriSP.default_templates_vars["img_dir"] = IriSP.paths.imgs;
  IriSP.widgetsDefaults["createAnnotationWidget"].cinecast_version = false;
  
    var config = {            
        gui:{
            width:{{ player_width }},             
            container:'{{ player_id }}_embed',
            css:'{{WEB_URL}}{{LDT_MEDIA_PREFIX}}css/LdtPlayer.css',
            widgets: [
            {type: "SparklineWidget",
             width: {{ player_width }}, /* required for this widget */
             height: 50,
             metadata:{
              format:'cinelab',
              src:'{{ json_url }}',
              type:'json'}
            },
            {type: "SliderWidget",
             metadata:{
              format:'cinelab',
              src:'{{ json_url }}',
              type:'json'}
            },
            {type: "AnnotationsListWidget",
             container: "annot_media",             
             metadata:{
              format:'cinelab',
              src:'{{ json_url }}',
              type:'json'}
            },
            {type: "PlayerWidget", // please note that type refers directly to the constructor of the widget.
             mode: "radio",
             metadata:{
              format:'cinelab',
              src:'{{ json_url }}',
              type:'json'}
            },
            {type: "SegmentsWidget",
             metadata:{
              format:'cinelab',
              src:'{{ json_url }}',
              type:'json'},
             requires: [{
              type: "TooltipWidget",
              width: 180,
              heigh: 160,
              metadata : {
                type:'empty'
              }
             }],
            },
            {type: "SliceWidget", // please note that type refers directly to the constructor of the widget.
             mode: "radio",
             metadata:{
              format:'cinelab',
              src:'{{ json_url }}',
              type:'json'}
            },            
            {type: "ArrowWidget",
             metadata:{
              format:'cinelab',
              src:'{{ json_url }}',
              type:'json'}
            },


            {type: "AnnotationsWidget",
             metadata:{
              format:'cinelab',
              src:'{{ json_url }}',
              type:'json'}
            },
            {type: "TweetsWidget",
             metadata:{
              format:'cinelab',
              src:'{{ json_url }}',
              type:'json'}
            },
            {type: "createAnnotationWidget",
             metadata:{
              format:'cinelab',
              src:'{{ json_url }}',
              type:'json'}
            }      
            ]
        },
      {% if youtube_url %}
      player:{
    	  type:'youtube', // player type
          height: 300, 
          width: {{ player_width }}, 
          video: '{{ youtube_url }}'
      },
      {% else %}
      player:{
          type:'jwplayer', // player type
          live: true, 
          height: 300, 
          width: {{ player_width }}, 
          provider: "rtmp" 
      },
      {% endif %}
      modules: [
               { type: "MediaFragment",
                  metadata:{
                 format:'cinelab',
                 src:'{{ json_url }}',
                 type:'json'}
            }]

    };
    
    IriSP.loadLibs(IriSP.lib, config, "{{ json_url }}",
      function() {   
              var layoutManager = new IriSP.LayoutManager(config.gui);
              var pop = IriSP.configurePopcorn(layoutManager, config.player);
              
              var widgets = IriSP.configureWidgets(pop, layoutManager, config.gui); 
              var modules = IriSP.configureModules(pop, config.modules); 
      });    
</script>
</div>
{% endspaceless %}
