{% macro media(file, documentCollection, token, streamlikeSubtitles, subtitlesLang) %}
    {% import "macro_video.html.twig" as macro_video %}
    <script src="/js/jquery.smoothZoom.min.js"></script>
    <script src="/js/pdf.js"></script>

    <div id='media_doc_{{ indexMedia }}'>
        {% if file.type is constant('TYPE_FILE', file) %}
            {% if file.mediaType is constant('TYPE_FILE_VIDEO', file) %}
                {{ macro_video.video(file) }}
            {% elseif file.mediaType is constant('TYPE_FILE_PDF', file) %}
                <!--<object type="application/x-shockwave-flash" id="preview-page-swf" data="/images/flash/zviewer.swf" width="400" height="500" style="visibility: visible;">
                    <param name="menu" value="false"><param name="bgcolor" value="#ffffff">
                    <param name="allowFullScreen" value="true"><param name="wmode" value="transparent">
                    <param name="flashvars" value="doc_url={{ file.pdfPreviewSwfUrl }}&amp;allow_search=0&amp;allow_print=0&amp;allow_pager=1&amp;allow_clipboard=0&amp;zoomtype=2">
                </object>-->
                <!--version html-->
                <div id="html5Div" style="display:block">
                    <br/>

                    <iframe src="{{ file.url }}" id="input" name="input" width='396px' height='500px' style="text-align:center;"></iframe>
                    <br/><br/>
                </div>
                    {% if file.primaryFile %}
                    <span onclick="getText('{{ file.url }}')" id="getPdfText" style="display:none"></span>
                    {% endif %}

                    
            {% elseif file.mediaType is constant('TYPE_FILE_SWF', file) %}
                {% set dimensions=file.metadata.Composite.ImageSize|split('x') %}
                <div id="file-swf-{{ file.id }}" style="width: {{ dimensions[0] }}px; height: {{ dimensions[1] }}px; background-color: #D4D4D4;">
                    <img src="{{ file.getThumbnailUrl('mini') }}" />
                </div>
                <br>
                <a href="#" onclick='swfobject.embedSWF("{{ file.url }}", "file-swf-{{ file.id }}", "{{ dimensions[0] }}", "{{ dimensions[1] }}", "9.0.0"); return false' class="btn">
                    <i class="icon-play"></i>
                </a>
            {% elseif file.mediaType is constant('TYPE_FILE_AUDIO', file) %}
                <img src="{{ file.getThumbnailUrl('mini') }}" />
                <audio src="{{ file.url }}" controls></audio>
            {% else %}
                <div id="fancy-zoom-{{ file.id }}" class="fancybox-preview" href="{{ file.getThumbnailUrl('900x900') }}" rel="tooltip"
                     data-original-title="{{ file.label }}">
                    <img id="{{ file.id }}" class="template" src="{{ file.getThumbnailUrl('400x400') }}"
                         alt="{{ file.label }}" style="display: block;margin:0 auto;"/>
                </div>
            {% endif %}
        {% else %}
            {% if file.type is constant('TYPE_YOUTUBE', file) %}
                <iframe width="100%" height="315" src="//www.youtube.com/embed/{{ file.data }}" frameborder="0" allowfullscreen></iframe>
                {% trans %}Thumbnail{% endtrans %}<br/>
                {% if file.getPopinPath() != false %}
                    <img id="youtubeThumb" src="{{ file.getThumbnailUrl('200x200') }}" />
                {% endif %}
                
            {% elseif file.type is constant('TYPE_LIMELIGHT', file) %}
                {% if file.data.id is defined %}
                {% set limeligthId = file.data.id %}
                {%else%}
                {% set limeligthId = file.data %}
                {%endif%}
                <span class="LimelightEmbeddedPlayer">
                    <object type="application/x-shockwave-flash" id="limelight_player_{{ file.id }}"
                            name="limelight_player" class="LimelightEmbeddedPlayerFlash" width="100%" height="315"
                            data="//video.limelight.com/player/loader.swf">
                        <param name="movie" value="//video.limelight.com/player/loader.swf"/>
                        <param name="wmode" value="window"/>
                        <param name="allowScriptAccess" value="always"/>
                        <param name="allowFullScreen" value="true"/>
                        <param name="flashVars" value="playerForm=Player&amp;mediaId={{ limeligthId }}"/>
                    </object>
                </span>
                {% if file.data.manifest is defined %}
                    {% for i in 0.. (file.data.manifest | length -1)%}
                        {% set v = file.data.manifest[i] %}
                <a target="_blank" href="{{ v.file_url | default(v.url)}}" class="btn btn-primary" title="{{v.width ~"x"~ v.height ~" ; Video:"~ v.video_bitrate~" Kbit/s, Audio:"~v.audio_bitrate~" Kbit/s"}}"><i class="icon-download icon-white"></i> {{v.width ~"x"~ v.height }}</a>
                    {% endfor %}
                {% else %}    
                    <a target="_blank" href="/limelight/callback?id={{file.libraryDocumentId}}" class="btn btn-primary">callback</a>
                {% endif %}
                
            {% elseif file.type is constant('TYPE_STREAMLIKE', file) %}
                {% if file.data.id is defined %}
                {% set streamlikeId = file.data.id %}
                {%else%}
                {% set streamlikeId = file.data %}
                {%endif%}
                <span class="LimelightEmbeddedPlayer">
                    {% if token is defined %}
                        {% if token != "" %}
                            <iframe src="//cdn.streamlike.com/play?swfskin=20&colorskin=552&player=3&code=1&controlbar=bottom&object=1&width=800&height=540&bw_mode=1&subtitle=true&med_id={{ streamlikeId }}&pid=88719ed28221e9b6&sltoken={{ token }}" style="border:0px;width:100%" name="media-{{ streamlikeId }}" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" align="top" width="100%" height="350"></iframe>
                        {% else %}
                            <iframe src="//cdn.streamlike.com/play?swfskin=20&colorskin=552&player=3&code=1&controlbar=bottom&object=1&width=800&height=540&bw_mode=1&subtitle=true&med_id={{ streamlikeId }}&pid=88719ed28221e9b6" style="border:0px;width:100%" name="media-{{ streamlikeId }}" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" align="top" width="100%" height="350"></iframe>
                        {% endif %}
                    {% else %}
                        <iframe src="//cdn.streamlike.com/play?swfskin=20&colorskin=552&player=3&code=1&controlbar=bottom&object=1&width=800&height=540&bw_mode=1&subtitle=true&med_id={{ streamlikeId }}&pid=88719ed28221e9b6" style="border:0px;width:100%" name="media-{{ streamlikeId }}" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" align="top" width="100%" height="350"></iframe>
                    {% endif %}
                </span>
                
                <br/><br/>

            {#http://cdn.streamlike.com/uc/getCode?swfskin=20&colorskin=552&player=3&code=1&controlbar=bottom&object=1&width=400&height=270&bw_mode=1&subtitle=false&med_id={{ streamlikeId }}&pid=88719ed28221e9b6#}
                {% set dl = 0 %}
                {% if token is defined %}
                    {% if token != "" %}

                    {% else %}
                        {% set dl = 1 %}
                    {% endif %}
                {% else %}
                    {% set dl = 1 %}
                {% endif %}
                
                {% if dl == 1 %}
                    {% if file.data.manifest is defined %}
                        {% for i in 0.. (file.data.manifest.mp4 | length -1)%}
                            {% set v = file.data.manifest.mp4[i] %}
                            {% if v.width %}
    <a target="_blank" href="{{v.url}}" class="btn btn-primary"><i class="icon-download icon-white"></i> {{"mp4 " ~ v.width ~"x"~ v.height }}</a>
                            {% endif %}
                        {% endfor %}<br/><br/>
                        {% for i in 0.. (file.data.manifest.hls | length -1)%}
                            {% set v = file.data.manifest.hls[i] %}
                            {% if v.width %}
    <a target="_blank" href="{{v.url}}" class="btn btn-primary"><i class="icon-download icon-white"></i> {{"hls " ~ v.width ~"x"~ v.height }}</a>
                            {% endif %}
                        {% endfor %}
                        {% for i in 0.. (file.data.manifest.mp4low | length -1)%}
                            {% set v = file.data.manifest.mp4low[i] %}
                            {% if v.width %}
    <a target="_blank" href="{{v.url}}" class="btn btn-primary"><i class="icon-download icon-white"></i> {{"mp4low " ~ v.width ~"x"~ v.height }}</a>
                            {% endif %}
                        {% endfor %}
                        {% for i in 0.. (file.data.manifest.idevicev1 | length -1)%}
                            {% set v = file.data.manifest.idevicev1[i] %}
                            {% if v.width %}
    <a target="_blank" href="{{v.url}}" class="btn btn-primary"><i class="icon-download icon-white"></i> {{"idevicev1 " ~ v.width ~"x"~ v.height }}</a>
                            {% endif %}
                        {% endfor %}
                        {% for i in 0.. (file.data.manifest.idevicev2 | length -1)%}
                            {% set v = file.data.manifest.idevicev2[i] %}
                            {% if v.width %}
    <a target="_blank" href="{{v.url}}" class="btn btn-primary"><i class="icon-download icon-white"></i> {{"idevicev2 " ~ v.width ~"x"~ v.height }}</a>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                {% endif %}
                
                {# if file.data.manifest is not defined #}    
                    <br/><br/>
                    <a target="_blank" href="/streamlike/callback?id={{file.libraryDocumentId}}" class="btn btn-primary">Callback</a>
                {# endif #}
                
                <!--<br/><br/>-->
                <a target="_blank" href="/streamlike/informations?id={{file.libraryDocumentId}}" class="btn btn-primary">Maj. Streamlike</a>
                
                <br/><br/>
                <table width="100%">
                    <tr style="">
                        <td><h4>Modifier la miniature</h4></td>
                        <td style="text-align:right"><span class="btn btn-areva" onclick="$('#streamlikeThumbForm').toggle();" style="cursor:pointer">Modifier</span></td>
                    </tr>
                </table>
                <table id="streamlikeThumbForm" width="100%" style="border: 1px solid black;border-radius:25px;display:none">
                    <tr style="">
                        <td style="padding-top: 10px;padding-left: 10px;">Pour modifier la miniature précisez le timecode</td>
                    </tr>
                    <tr>
                        <td style="padding-top: 10px;padding-left: 10px;">
                            <input type="number" step="0.01" id="streamlikeTimecode" style="width: 80px;" value="3"/>
                            <button class="btn btn-primary" onclick="changeStreamlikeMiniature({{ file.libraryDocumentId }})" style="margin-bottom: 8px;">OK</button>
                            <span id="changeStreamlikeMiniatureReturn"></span>
                        </td>
                    </tr>
                    
                    <tr style="">
                        <td style="padding-top: 10px;padding-left: 10px;">Sélectionner un fichier sur votre poste pour changer la miniature</td>
                    </tr>
                    <tr>
                        <td style="padding-top: 10px;padding-left: 10px;">
                            <form enctype="multipart/form-data" method="post" name="fileinfo2" id="fileinfo2">
                                <input type="file" id="cover" name="cover"/>
                                <input type="hidden" id="hiddenStreamlikeId" name="hiddenStreamlikeId" value="{{ streamlikeId }}"/>
                                <input type="hidden" id="mediaId" name="mediaId" value="{{ file.libraryDocumentId }}"/>
                                <button type="submit" class="btn btn-primary">Envoyer</button>
                                <span id="changeStreamlikeMiniatureThumbReturn"></span>
                            </form>
                        </td>
                    </tr>
                </table>
                
                <!--GESTION DES SOUS TITRE-->
                {% if subtitlesLang != "" %}
                    <br/>
                    <table width="100%">
                        <tr style="">
                            <td><h4>Sous-titres</h4></td>
                            <td style="text-align:right"><span class="btn btn-areva" onclick="$('#streamlikeSubtitleForm').toggle();" style="cursor:pointer">Ajouter</span></td>
                        </tr>
                    </table>
                    
                    <form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo">
                    <table id="streamlikeSubtitleForm" width="100%" style="border: 1px solid black;border-radius:25px;display:none">
                        <tr style="">
                            <td style="padding-top: 10px;padding-left: 10px;"><input type="file" id="subtitleFile" name="subtitleFile"/></td>
                        </tr>
                        <tr>
                            <td style="padding-top: 10px;padding-left: 10px;">
                                <select id="subtitlesLang" name="subtitlesLang">
                                    {% for lang in subtitlesLang %}
                                        <option value="{{ lang.id }}">{{ lang.name }}</option>
                                    {% endfor %}
                                </select>
                            </td>
                        </tr>
                        <tr style="">
                            <td style="padding-top: 10px;padding-left: 10px;">Générer une transcription à partir du fichier (.SRT uniquement) : <input type="checkbox" id="withTranscription" name="withTranscription" style=""/></td>
                        </tr>
                        <tr>
                            <td style="padding-top: 10px;padding-bottom: 10px;padding-left: 10px;">
                                <input type="hidden" id="hiddenStreamlikeId" name="hiddenStreamlikeId" value="{{ streamlikeId }}"/>
                                <input type="hidden" id="mediaId" name="mediaId" value="{{ file.libraryDocumentId }}"/>
                                <button type="submit" class="btn btn-primary">Envoyer</button>
                            </td>
                        </tr>
                    </table>
                    </form>
                {% endif %}
                {% if streamlikeSubtitles != "" %}
                    <table width="100%">
                    {% for sub in streamlikeSubtitles %}
                        <tr>
                            <td style="text-align:center">
                                {% for lang in subtitlesLang %}
                                    {% if lang.id == sub["lang"] %}
                                        {{ lang.name }}
                                    {% endif %}
                                {% endfor %}
                            </td>
                            <td>
                                {% for subFiles in sub["urls"] %}
                                    {% set extTab = subFiles|split('.') %}
                                    <a target="_blank" href="{{ subFiles }}" style="padding-right: 10px;">{{ extTab[3] }}</a>
                                {% endfor %}
                            </td>
                            <td>
                                <button class="btn btn-default" onclick="removeStreamlikeSubtitle('{{ streamlikeId }}', '{{ sub["lang"] }}')" style="background: #cc0033;color:white">X</button>
                            </td>
                        </tr>
                    {% endfor %}
                    </table>
                {% endif %}
                
            {% endif %}
        {% endif %}
        

        
        
        <div data-type="document_label_read">{{ file.label }}</div>
        <div data-type="document_label_write" class="hide" style="margin-top: 5px;">
            {# dump(documentCollection.versionable) #}
            {%  if documentCollection.versionable == true %}
                {{ file.label }}
            {% else %}
            <form action="{{ url_for('assets/updateLabel?id=' ~ file.id ~ '&type=file') }}" method="post">
                <input name="label" value="{{ file.label }}"/>
                <input type="submit">
            </form>
            {% endif %}
        </div>
                
        <div data-type="document_buttons_write" class="hide">
            <br>
            {%  if documentCollection.versionable == true %}
                <!--<a class="btn btn-danger" data-role="removeFile" data-file="{{ file.id }}">
                    <i class="icon-eraser"></i>
                </a>-->
            {% else %}
                {# if file.type is constant('TYPE_FILE', file) and file.mediaType is not constant('TYPE_FILE_VIDEO', file) %}
                    <a class="btn"><i class="icon-rotate-left"></i></a>
                    <a class="btn"><i class="icon-rotate-right"></i></a>
                    <a class="btn"><i class="icon-picture"></i></a>
                    <a class="btn"><i class="icon-picture icon-flip-horizontal"></i></a>
                {% endif #}
                {#{% if file.type is not constant('TYPE_FILE', file) %}#}
                {% if file.primaryFile and file.mediaType is constant('TYPE_FILE_VIDEO', file) %}
                    <a class="btn" id="videoCut" data-id="{{ file.libraryDocumentId }}" data-navigation="true" href="#" title="Plus d'info"><i class="icon-cut"></i></a>
                {% endif %}
                {% if file.primaryFile and file.mediaType is constant('TYPE_FILE_IMAGE', file) %}
                    <a class="btn" id="imageCrop" data-id="{{ file.libraryDocumentId }}" data-navigation="true" href="#" title="Plus d'info"><i class="icon-cut"></i></a>
                {% endif %}
                    <a class="btn btn-primary" data-role="addThumb" data-file="{{ file.id }}"
                       title="{% trans %}Modifier la capture{% endtrans %}">
                        <i class="icon-picture ui-icon-image"></i>
                    </a>
                    {% if file.type == "youtube" and file.getPopinPath() != false %}
                        <a class="btn btn-danger" data-role="removeThumb" data-file="{{ file.id }}" title="{% trans %}Supprimer la capture{% endtrans %}">
                            <i class="icon-picture ui-icon-image"></i>
                        </a>
                    {% endif %}
                {#{% endif %}#}
                <a class="btn btn-warning  {% if file.primaryFile or not file.reference %}hide{% endif %}"
                   data-role="primaryFile" data-file="{{ file.id }}"
                   title="{% trans %}Define as primary file{% endtrans %}">
                    <i class="icon-picture icon-ok-circle"></i>
                </a>
                <a class="btn btn-danger" data-role="removeFile" data-file="{{ file.id }}" title="{% trans %}Supprimer le médias{% endtrans %}">
                    <i class="icon-eraser"></i>
                </a>
            {% endif %}
            <br><br>
        </div>
        {% if file.type is constant('TYPE_FILE', file) %}
            <div data-type="document_buttons_read">
                <!--<br>-->
                <input type='hidden' id='isPdf' value='false'/>
                <table width="100%">
                <tr>
                {% if has_credential('downloadLowRes') or has_credential('downloadOriginal') %}
                <td><a class="btn btn-primary" data-role="downloadFile" data-file="{{ file.id }}" id="dlAction">
                    <i class="icon-download"></i>
                </a></td>
                {% endif %}
                    
                {% if file.mediaType is constant('TYPE_FILE_PDF', file) %}
                    <td style="text-align:right">Flipbook : 
                    <button id='pdfToJpg_{{ file.id }}' onclick='generatePdfToImages({{ file.id }})' class="btn btn-primary">Générer</button>
                    <input type='hidden' id='idToFlipbook' value='{{ file.id }}'/>
                    <span id='viewFlipbookButton' onclick='generateFlipbookGetOrientation({{ file.id }})'><a href="javascript:void(0)" class="btn"><i title="Stats" class="icon-eye-open"></i></a></span>
                    </td>
                <script>$("#isPdf").val("true");</script>
                {% endif %}
                
                {% if file.mediaType is constant('TYPE_FILE_IMAGE', file) %}
                    <td style="text-align:right"><a id="smoothZoom-{{ file.id }}" class="btn" rel="tooltip"
                       data-original-title="{{ file.label }}" data-zoom-active="false" data-file-id="{{ file.id }}">
                        <i class="icon-zoom-in"></i>
                    </a></td>
                {% endif %}
                </tr></table>
                <br><br>
            </div>
        {% endif %}
    </div>

    
    
    
    
    
    <script>        
        function getText(myUrl) {
            //var urlPDF = '/uploads/library/5bb/475/ba7/3bd/5bb475ba73bd7';
            $("#pdfContentUrl").html(myUrl);
            
            var urlPDF = myUrl;
            PDFJS.workerSrc = '/js/pdf.worker.js';

            PDFJS.getDocument(urlPDF).then(function (pdf) {
                var pdfDocument = pdf;
                var pagesPromises = [];

                for (var i = 0; i < pdf.pdfInfo.numPages; i++) {
                    // Required to prevent that i is always the total of pages
                    (function (pageNumber) {
                        pagesPromises.push(getPageText(pageNumber, pdfDocument, i));
                    })(i + 1);
                }

                Promise.all(pagesPromises).then(function (pagesText) {

                    // Display text of all the pages in the console
                    console.log(pagesText);
                    
                    //$("#pdfContent").append(pagesText+"<br/>");
                    
                });

            }, function (reason) {
                // PDF loading error
                console.error(reason);
            });
        }

        /**
         * Retrieves the text of a specif page within a PDF Document obtained through pdf.js 
         * 
         * @param {Integer} pageNum Specifies the number of the page 
         * @param {PDFDocument} PDFDocumentInstance The PDF document obtained 
         **/
        function getPageText(pageNum, PDFDocumentInstance, pageNb) {
            // Return a Promise that is solved once the text of the page is retrieven
            return new Promise(function (resolve, reject) {
                PDFDocumentInstance.getPage(pageNum).then(function (pdfPage) {
                    // The main trick to obtain the text of the PDF page, use the getTextContent method
                    pdfPage.getTextContent().then(function (textContent) {
                        var textItems = textContent.items;
                        var finalString = "";

                        // Concatenate the string of the item to the final string
                        for (var i = 0; i < textItems.length; i++) {
                            var item = textItems[i];

                            finalString += item.str + " ";
                        }

                        // Solve promise with the text retrieven from the page
                        $("#pdfContent").append("<br/>---Page : "+parseInt(pageNb + 1)+"----------------------------------<br/>"+finalString);
                        
                        
                        
                        resolve(finalString);
                    });
                });
            });
        }
    </script>

    <script>

        $(document).ready(function () {

            if($("#isPdf").val() == "true") {
                var id = $("#idToFlipbook").val();
                $.ajax({
                    type: "POST",
                    data: {
                        file: $("#idToFlipbook").val()
                    },
                    url: "{{ url_for('assets/isGeneratedFlipbook') }}",
                    error: function (msg) {
                    },
                    success: function (data) {
                        if(data == "false") {
                            $("#viewFlipbookButton").hide();
                        } else {
                            $("#pdfToJpg_"+id).html("Regénérer");
                        }
                    }
                });
            }
            
            var form = document.forms.namedItem("fileinfo");
            if(form != null) {
            form.addEventListener('submit', function(ev) {
                var i = 0;
                var _this = $(this);
                $(".error").empty();
                console.log($("#dateProd").val());
                $('#fileinfo input[type="text"], #fileinfo input[type="email"], #fileinfo input[type="date"], #fileinfo input[type="file"]').each(function() {
                    if ($(this).val() == "") {
                        //alert($(this).attr('id'));
                        $(this).parent().addClass("has-error");
                        //$(this).addClass("has-error");
                        i++;
                    } else {
                        $(this).parent().removeClass("has-error");
                    }
                });

                $("#fileinfo").removeClass();

                if (i > 0) {
                    ev.preventDefault();
                } else {
                    $('body').modalmanager('loading').find('.modal-scrollable').off('click.modalmanager');
                    //if(confirm('{% trans %}confirm.add.video{% endtrans %}')) {
                        //$("#returnVal").html('<img src="/images/ajax-loader.gif" style="width:25px"/>');
                        $("#returnVal").html('<div class="spinner-border" role="status" style="width:25px;height:25px"><span class="sr-only">Loading...</span></div>');
                        $("#returnVal").show();
                        var
                            oOutput = document.getElementById("output"),
                            oData = new FormData(document.forms.namedItem("fileinfo"));

                        oData.append("CustomField", "This is some extra data");

                        var oReq = new XMLHttpRequest();
                        oReq.open("POST", "{{ url_for('assets/addStreamlikeSubtitle') }}", true);
                        oReq.onload = function(oEvent) {
                          if (oReq.status == 200) {
                            //$("#returnVal").html('{% trans %}video.create.ok{% endtrans %}');
                            //document.location.reload();
                            //console.log(ret);
                            ev.preventDefault();
                           
                            var id = $(this).data('id');
                            var containerElt = $('#modal_info');
                            //Performs an AJAX request
                            $.ajax({
                                url: '{{ url_for('assets/ajaxSingleModalInfoRo') }}',
                                data: {
                                    document: $("#mediaId").val()
                                },
                                type: 'POST',
                                success: function (data) {
                                    //Updates the container of the modal
                                    containerElt.html(data);
                                    //Shows the modal
                                    containerElt.modal();
                                    var modalManager = $("body").data("modalmanager");
                                    modalManager.removeLoading();
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    //Displays the error message
                                    containerElt.html(textStatus + ' ' + errorThrown);
                                }
                            });
                          } else {
                          }
                        };
                        oReq.send(oData);
                        ev.preventDefault();
                    /*} else {
                        ev.preventDefault();
                    }*/
                }
            });
            }
            
            var form = document.forms.namedItem("fileinfo2");
            if(form != null) {
            form.addEventListener('submit', function(ev) {
                var i = 0;
                var _this = $(this);
                $(".error").empty();
                console.log($("#dateProd").val());
                $('#fileinfo2 input[type="text"], #fileinfo2 input[type="email"], #fileinfo2 input[type="date"], #fileinfo2 input[type="file"]').each(function() {
                    if ($(this).val() == "") {
                        //alert($(this).attr('id'));
                        $(this).parent().addClass("has-error");
                        //$(this).addClass("has-error");
                        i++;
                    } else {
                        $(this).parent().removeClass("has-error");
                    }
                });

                $("#fileinfo2").removeClass();

                if (i > 0) {
                    ev.preventDefault();
                } else {
                    $("#changeStreamlikeMiniatureThumbReturn").html('<div class="spinner-border" role="status" style=""><span class="sr-only">Loading...</span></div>');
                    //$('body').modalmanager('loading').find('.modal-scrollable').off('click.modalmanager');
                    //if(confirm('{% trans %}confirm.add.video{% endtrans %}')) {
                        //$("#returnVal").html('<img src="/images/ajax-loader.gif" style="width:25px"/>');
                        //$("#returnVal").html('<div class="spinner-border" role="status" style="width:25px;height:25px"><span class="sr-only">Loading...</span></div>');
                        //$("#returnVal").show();
                        var
                            oOutput = document.getElementById("output"),
                            oData = new FormData(document.forms.namedItem("fileinfo2"));

                        oData.append("CustomField", "This is some extra data");

                        var oReq = new XMLHttpRequest();
                        oReq.open("POST", "{{ url_for('assets/addStreamlikeThumb') }}", true);
                        oReq.onload = function(oEvent) {
                          if (oReq.status == 200) {
                              $("#changeStreamlikeMiniatureThumbReturn").html('<div>La vignette est en cours de génération côté Streamlike. Vous devez patienter environ 60 secondes avant de cliquer <a href="/streamlike/callback?id={{file.libraryDocumentId}}" target="_blank">ici</a> pour la récupérer.</div>');
                            //$("#returnVal").html('{% trans %}video.create.ok{% endtrans %}');
                            //document.location.reload();
                            //console.log(ret);
                            /*ev.preventDefault();
                           
                            var id = $(this).data('id');
                            var containerElt = $('#modal_info');
                            //Performs an AJAX request
                            $.ajax({
                                url: '{{ url_for('assets/ajaxSingleModalInfoRo') }}',
                                data: {
                                    document: $("#mediaId").val()
                                },
                                type: 'POST',
                                success: function (data) {
                                    //Updates the container of the modal
                                    containerElt.html(data);
                                    //Shows the modal
                                    containerElt.modal();
                                    var modalManager = $("body").data("modalmanager");
                                    modalManager.removeLoading();
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    //Displays the error message
                                    containerElt.html(textStatus + ' ' + errorThrown);
                                }
                            });*/
    
    
    
                          } else {
                          }
                        };
                        oReq.send(oData);
                        ev.preventDefault();
                    /*} else {
                        ev.preventDefault();
                    }*/
                }
            });
            }
            
            
            
            
            
            
            
        });
        
        function generatePdfToImages(id) {
            $("#pdfToJpg_"+id).html("<img src='/images/ajax-loader-gray.gif'/>");
            $.ajax({
                type: "POST",
                data: {
                    file: id
                },
                url: "{{ url_for('assets/pdfToImages') }}",
                error: function (msg) {
                },
                success: function (data) {
                    $("#pdfToJpg_"+id).html("Générer");
                    $("#viewFlipbookButton").show();
                }
            });
        }
        
        function generateFlipbookGetOrientation(id) {
            $.ajax({
                type: "POST",
                data: {
                    file: id
                },
                url: "{{ url_for('assets/generateFlipbookGetOrientation') }}",
                error: function (msg) {
                },
                success: function (data) {
                    console.log(data);
                    data = data.replace('"', '');
                    data = data.replace('"', '');
                    var tab = data.split('_');
                    console.log(tab[0]);
                    console.log(tab[1]);
                    
                    if((tab[0] / 2) <= tab[1]) {
                        generateFlipbook(id, 1);
                    } else {
                        generateFlipbook(id, 2);
                    }
                    
                    //$("#modal_flipbook").css("width", tab[0]);
                    //$("#modal_flipbook").css("height", tab[1]);
                    
                    
                }
            });
        }
        
        function generateFlipbook(id, type) {
            $.ajax({
                type: "POST",
                data: {
                    file: id
                },
                url: "{{ url_for('assets/generateFlipbook') }}",
                error: function (msg) {
                },
                success: function (data) {
                    //console.log(data);
                    if(type == 1) {
                        $('#modal_flipbook_V').modal().html(data);
                    } else {
                        $('#modal_flipbook_H').modal().html(data);
                    }
                }
            });
        }
        
        $('#modal_info_body a[data-role="downloadFile"]').unbind().click(function (event) {
            $.ajax({
                type: "POST",
                data: {
                    file: $(this).data('file')
                },
                url: "{{ url_for('assets/ajaxSingleModalDownloadFile') }}",
                error: function (msg) {
                },
                success: function (data) {
                    $('#modal_download').modal().html(data);
                }
            });

            event.preventDefault();
        });

        $('#modal_info_body a[data-role="removeThumb"]').unbind().click(function (event) {
            if (!confirm(t("Are you sure you want to remove this thumb"))) {
                return false;
            }

            $.ajax({
                url: '{{ url_for('libraryDocument/removeThumb') }}',
                data: {
                    'file': $(this).data('file')
                },
                type: 'POST',
                context: $(this),
                success: function (data) {
                    $(this).remove();
                    var image_x = document.getElementById('youtubeThumb');
                    image_x.parentNode.removeChild(image_x);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            });

            event.preventDefault();
        });
        
        $('#modal_info_body a[data-role="removeFile"]').unbind().click(function (event) {
            if (!confirm(t("Are you sure you want to remove this file from document"))) {
                return false;
            }

            $.ajax({
                url: '{{ url_for('libraryDocument/removeFile') }}',
                data: {
                    'file': $(this).data('file')
                },
                type: 'POST',
                context: $(this),
                success: function (data) {
                    $(this).parent().parent().remove();
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            });

            event.preventDefault();
        });

        $('#modal_info_body a[data-role="addThumb"]').unbind().click(function (event) {
            $('#modal_add_thumb input[name="documentFile"]').val($(this).data('file'));
            $('#modal_add_thumb #addThumbReturn').html("");
            $('#modal_add_thumb').modal();

            event.preventDefault();
        });

        $('#modal_info_body a[data-role="primaryFile"]').unbind().click(function (event) {
            $.ajax({
                url: '{{ url_for('assets/primaryFile') }}',
                data: {
                    'file': $(this).data('file')
                },
                type: 'POST',
                context: $(this),
                success: function (data) {
                    $('#media_files').html(data);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            });

            event.preventDefault();
        });

        $('#modal_info_body div[data-type="document_label_write"] form').unbind().submit(function (event) {
            $.ajax({
                url: $(this).attr('action'),
                data: $(this).serialize(),
                type: 'POST',
                context: $(this),
                success: function (data) {
                    $(this).parent().parent().children('div[data-type="document_label_read"]').html($(this).children('input[name="label"]').val());
                },
                error: function (jqXHR, textStatus, errorThrown) {
                }
            });

            event.preventDefault();
        });

        $('#smoothZoom-'+'{{ file.id }}').click((function () {
                    var id = $(this).data('file-id');
                    var zoomActive = $(this).data('zoom-active');
                    if(zoomActive == false) {
                        $('#fancy-zoom-' + id).attr("class", "smooth_zoom");
                        $("#"+id).attr("src", "{{ file.originalJpgUrl }}");
                        $("#"+id).unbind().smoothZoom({
                            width: 400,
                            height: 400
                        });
                        $(this).addClass('btn-inverse');
                        $('#smoothZoom-'+'{{ file.id }} i').addClass('icon-zoom-out');
                        $(this).data('zoom-active', true);
                    }else{
                        $('#smoothZoom-'+'{{ file.id }} i').removeClass('icon-zoom-out');
                        $(this).data('zoom-active', false);
                        $(this).removeClass('btn-inverse');
                        $('#fancy-zoom-' + id).attr("class", "fancybox-preview");
                        $("#" + id).attr("src", "{{ file.getThumbnailUrl('400x400') }}");
                        $("#fancy-zoom"+id).find('div').first().remove();
                        $('#fancy-zoom-' + '{{ file.id }}').html('<img id="{{ file.id }}" class="template" src="{{ file.getThumbnailUrl('popin') }}"/>');
                }
        }));
        
        $('#videoCut').unbind().on('click', function(event) {
            $('body').modalmanager('loading').find('.modal-scrollable').off('click.modalmanager');
            $.ajax({
                type: "POST",
                data: {
                    document : $(this).data('id'),
                    index      : $(this).data('index'),
                    navigation : $(this).data('navigation')
                },
                url: "{{ url_for('assets/ajaxSingleModalVideoCut') }}",
                error: function(msg){
                },
                success: function(data){
                    $('#modal_info').css("width", "900px");
                    $('#modal_info').css("height", "750px");
                    $('#modal_info').css("margin-left", "-450px");
                    $('#modal_info').html(data);
                    $('#modal_info').modal()
                    var modalManager = $("body").data("modalmanager");
                    modalManager.removeLoading();
                }
            });

            //Cancels the default action
            event.preventDefault();
        });
        
        $('#imageCrop').unbind().on('click', function(event) {
            $('body').modalmanager('loading').find('.modal-scrollable').off('click.modalmanager');
            $.ajax({
                type: "POST",
                data: {
                    document : $(this).data('id'),
                    index      : $(this).data('index'),
                    navigation : $(this).data('navigation')
                },
                url: "{{ url_for('assets/ajaxSingleModalImageCrop') }}",
                error: function(msg){
                },
                success: function(data){
                    $('#modal_info').css("width", "1100px");
                    $('#modal_info').css("height", "850px");
                    $('#modal_info').css("margin-left", "-550px");
                    $('#modal_info').html(data);
                    $('#modal_info').modal()
                    var modalManager = $("body").data("modalmanager");
                    modalManager.removeLoading();
                }
            });

            //Cancels the default action
            event.preventDefault();
        });

        function removeStreamlikeSubtitle(id, lang) {
        $('body').modalmanager('loading').find('.modal-scrollable').off('click.modalmanager');
            $.ajax({
                type: "POST",
                data: {
                    Sid : id,
                    lang : lang
                },
                url: "{{ url_for('assets/removeStreamlikeSubtitle') }}",
                error: function (msg) {
                },
                success: function (data) {  
                    var id = $(this).data('id');
                    var containerElt = $('#modal_info');
                    //Performs an AJAX request
                    $.ajax({
                        url: '{{ url_for('assets/ajaxSingleModalInfoRo') }}',
                        data: {
                            document: $("#mediaId").val()
                        },
                        type: 'POST',
                        success: function (data) {
                            //Updates the container of the modal
                            containerElt.html(data);
                            //Shows the modal
                            containerElt.modal();
                            var modalManager = $("body").data("modalmanager");
                            modalManager.removeLoading();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            //Displays the error message
                            containerElt.html(textStatus + ' ' + errorThrown);
                        }
                    });
                }
            });
        }
        
        function changeStreamlikeMiniature(id) {
            $("#changeStreamlikeMiniatureReturn").html('<div class="spinner-border" role="status" style=""><span class="sr-only">Loading...</span></div>');
            var url = '{{ url_for('assets/sendStreamlikeThumbCommand') }}';
            $.ajax({
                type: 'post',
                url: url,
                data: {
                    timecode: $("#streamlikeTimecode").val(),
                    hiddenStreamlikeId: $("#hiddenStreamlikeId").val(),
                    id: id
                },
                dataType: 'json',
                success: function (data) {
                    //setTimeout(reloadPage, 1000);
                    $("#changeStreamlikeMiniatureReturn").html('<div>La vignette est en cours de génération côté Streamlike. Vous devez patienter environ 60 secondes avant de cliquer <a href="/streamlike/callback?id={{file.libraryDocumentId}}" target="_blank">ici</a> pour la récupérer.</div>');
                }
            });
        }

    </script>

{% endmacro %}