{% load staticfiles %}
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="{% static 'remie/css/markers.css' %}" />
<script type="text/javascript" src="{% static 'remie/js/jquery-1.11.2.min.js' %}"></script>
</head>
<body>
<div id="remie_player_container">
  <div id="media_panel">  
    <div id="player_container"></div>
  </div>
  <div id="info_panel">
    <div id="CurrentSegmentInfobox_container"></div>
    <div id="LatestAnnotation_container"></div>
    <div id="AnnotationsController_container"></div>
    <div id="CreateAnnotation_container"></div>
    <div id="AnnotationsList_container"></div>
  </div>
  <script type="text/javascript" src='{% static "remie/metadataplayer/LdtPlayer-core.js" %}'></script>
  <script type="text/javascript">
    
    if (typeof jQuery == "undefined") {
        jQuery = IriSP.jQuery;
    }
    var metadatas = {metadata: {url: "{% url 'projectjson_id' id=project_id %}?from_display=false"}};
    var metadata_key = "metadata"; 
    
    IriSP.libFiles.defaultDir = '{% static "remie/js/" %}';
    IriSP.libFiles.locations.jwPlayerSWF = '{% static "remie/swf/player.swf" %}';
    IriSP.libFiles.locations.recordMicSwf = '{% static "remie/swf/record_mic.swf" %}';
    IriSP.libFiles.locations.zeroClipboardSwf = '{% static "remie/swf/ZeroClipboard10.swf" %}';
    IriSP.libFiles.locations.cssjQueryUI = '{% static "remie/css/jq-css/themes/base/jquery-ui.css" %}';
    IriSP.language = 'fr-fr';
   
    IriSP.widgetsDir = '{% static "remie/metadataplayer" %}';
    var _metadata = {
        url: metadatas[metadata_key].url,
        format: 'ldt'
    };
    var _config = {
      container: 'player_container',
      css: '{% static "remie/metadataplayer/LdtPlayer-core.css" %}',
      default_options: {
          metadata: _metadata
      },
      widgets: 
      [
        {
            type: "AutoPlayer",
            streamer: function(_url) {
                var _matches = _url.match(/^[^\/]+\/\/[^\/]+\/[^\/]+\//);
                if (_matches) {
                  return _matches[0];
                } else {
                  return _url;
                }
            },
            url_transform: function(url) {
                // Adaptation to jwplayer 6
                if(url.substr(url.length - 4).toLowerCase()=='.flv'){
                    return url.replace('/ddc_player/video/','/ddc_player/flv:video/');
                }
                return url.replace('/ddc_player/video/','/ddc_player/mp4:video/');
            },
            default_type: "AdaptivePlayer",
            autostart: false
        },{
           type: "Slider"
        },{
            type: "Controller",
            disable_annotate_btn: true,
            disable_search_btn: true,
            disable_ctrl_f: true
        },{
            type: "Markers",
            annotation_type: "markers_{{current_user}}",
            line_height: 24,
            api_endpoint_template_create: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}",
            api_endpoint_template_edit: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}{% templatetag openvariable %}annotation_id{% templatetag closevariable %}/",
            api_endpoint_template_delete: "{% url 'api_dispatch_list' resource_name='annotations' api_name='1.0' %}{% templatetag openvariable %}annotation_id{% templatetag closevariable %}/",
            creator_name : "{{current_user}}",
            project_id: "{{project_id}}"
        }
      ]
    }
    
    _myPlayer = new IriSP.Metadataplayer(_config);
  
  </script>
</div>
</body>
</html>