{% set selectionLength = records|length %}

{% set nbHdSubstitute = 0 %}
{% set nbSubdefSubstitute = 0 %}

{% for record in records %}
  {% set subdefs = record.get_subdefs() %}
  {% if subdefs|length > 0 %}
    {% for key, subdef in subdefs if subdef.is_substituted() %}
      {% if key == 'document' %}
        {% set nbHdSubstitute = nbHdSubstitute + 1 %}
      {% else %}
        {% set nbSubdefSubstitute = nbSubdefSubstitute + 1 %}
      {% endif%}

    {% endfor %}
  {% endif %}
{% endfor %}

<div id='prod-tool-box' class="PNB10">

    {# jquery Tabs #}
    <div id="tool-tabs"  class="tabs">
        {# jquery menu #}
        <div>
            <ul>
                <li>
                    <a href="#subdefs">
                        {{ "regeneration of sub-definitions" | trans }}
                    </a>
                </li>
                {% if selectionLength == 1%}
                    {% for record in records %}
                        {% if record.get_type() == 'video' %}
                            <li>
                                <a href="#thumbExtractor">
                                    {{ "video tool" | trans }}
                                </a>
                            </li>
                        {% endif %}
                    {% endfor %}
                {% endif %}
                <li>
                    <a href="#image">
                        {{ "image tool" | trans }}
                    </a>
                </li>
                {% if selectionLength == 1 and (app['conf'].get(['registry', 'modules', 'doc-substitution']) or app['conf'].get(['registry', 'modules', 'thumb-substitution'])) %}
                    <li>
                        <a href="#substitution">
                            {{ "substitution" | trans }}
                        </a>
                    </li>
                {% endif %}
                {% if metadatas %}
                    <li>
                        <a href="#exiftool">
                            {{ "meta-datas" | trans }}
                        </a>
                    </li>
                {% endif %}
                {% if selectionLength == 1%}
                    {% if recordSubdefs %}
                        <li>
                            <a href="#tools-sharing">
                                {{ "Document Type Sharing" | trans }}
                            </a>
                        </li>
                    {% endif %}
                {% endif %}
            </ul>
        </div>
        {# subdef section #}
        <div id="subdefs" class="tabBox">
            <form id="new-img-form" action="{{ path('prod_tools_image') }}" method="post">
                <fieldset style='border:1px solid #999; padding:20px;'>
                    <legend>&nbsp;<b>{{ "Reconstruire les sous definitions" | trans }}</b>&nbsp;</legend>
                    {% if nbSubdefSubstitute > 0 %}
                        <div style="color:#A00;">
                            {{ "Attention, certain documents ont des sous-definitions substituees" | trans }}
                        </div>
                        <label for="FTS" class="checkbox">
                            <input type="checkbox" name="force_substitution" value="1" id="FTS" />
                            {{ "Forcer la reconstruction sur les enregistrements ayant des thumbnails substituees" | trans }}
                        </label>
                        <br/>
                    {% else %}
                        <input type="hidden" name="force_substitution" value="1">
                    {% endif %}
                    <div>
                        <p>
                            {{ 'Are you sure you want to rebuild the sub-definitions of selected records?' | trans }}
                        </p>
                    </div>
                    <input type="hidden" name="ACT" value="SEND" />
                    <input type="hidden" name="lst" value="{{records.serializedList()}}" />
                </fieldset>
                <div style='text-align:right;padding-top:10px;'>
                    <button class="action_submiter btn btn-inverse" type="button">{{ "validate" | trans }}</button>
                    <button class="action_cancel btn btn-inverse" type="button">{{ "cancel" | trans }}</button>
                </div>
            </form>
        </div>

     {% if selectionLength == 1 %}
      {% for record in records %}
        {% if record.get_type() == 'video' %}
          <div id="thumbExtractor"  class="tabBox">
            <div class="PNB10 main_title">
              <img src='/assets/prod/images/ThumbExtractor/camera_title.png'/>
              {{ "screenshot video" | trans }}
            </div>
            <hr style='margin-top:25px;'/>
            <div class="PNB part_title_left"></div>

            <div class="PNB frame_video">
              {% set outputFormats = record.getSubdfefByDeviceAndMime(null, ['image/jpeg', 'image/png']) %}
              {% set previewHtml5 = record.getSubdfefByDeviceAndMime(constant('\\databox_subdef::DEVICE_SCREEN'), ['video/ogg', 'video/mp4', 'video/webm']) %}
              {% set dataW = constant('media_subdef::TC_DATA_WIDTH') %}
              {% set dataH = constant('media_subdef::TC_DATA_HEIGHT') %}

              {% set technical_info = record.get_technical_infos %}
              {% set width = technical_info[dataW].value %}
              {% set height = technical_info[dataH].value %}

              {% if width and height %}
                {% set ratio = (width / height)|number_format(2, '.') %}
              {% else %}
                 {% set ratio = '' %}
              {% endif %}

              <video id="thumb_video" controls="" preload="auto" data-ratio="{{ ratio }}">
                {% for subdef in previewHtml5 %}
                <source type="{{ subdef.get_mime() }}" src="{{ subdef.get_url() }}" />
                {% endfor %}
                {{ 'No preview available' | trans }}
              </video>
            </div>

            <div class="PNB action_bar_left">
            </div>

            <div id="thumb_camera_button" class="PNB">
              <img src="/assets/prod/images/ThumbExtractor/camera_button.png" alt="{{ 'take a screenshot' | trans }}" />
            </div>

            <div class="PNB part_title_right">
            </div>

            <div class="PNB frame_canva">
              <div id="thumb_delete_button">
                <img src="/assets/prod/images/ThumbExtractor/delete.png" />
              </div>
              <p id='thumb_info'>{{ 'To take a screenshot click on camera' | trans }}</p>
                <canvas id="thumb_canvas"></canvas>
                <div id="alt_canvas_container" style="position:absolute;overflow:hidden;top:-1200px;visibility: hidden; width:0!important;height:0!important">
                    {% for subdef in outputFormats %}
                        <canvas data-width="{{ subdef.get_width() }}" data-name="{{ subdef.get_name() }}" class="alt_canvas" id="{{ subdef.get_name() }}"></canvas>
                    {% endfor %}
                </div>

            </div>
            <div id="thumb_slider" class="PNB">
              <div id="thumb_wrapper">
              </div>
            </div>
            <div class="thumb_submit_action PNB">
              <input type="hidden" value='{{record.get_sbas_id()}}' name='sbas_id'>
              <input type="hidden" value='{{record.get_record_id()}}' name='record_id'>
                <button  id="thumb_validate_button" class="btn btn-inverse" type="button">{{ "validate" | trans }}</button>

            </div>
          </div>
        {% endif %}
      {% endfor %}
    {% endif %}

    <div id="image" class="tabBox">
      <div class="text-info">
          <i class=" icon-info-sign"></i> {% trans %}Changes for rotation will be applied only on the sub-definitions of "image" type.{% endtrans %}
      </div>
      <form name="formpushdoc" action="{{ path('prod_tools_rotate') }}" method="post">
        <fieldset style='border:1px solid #999;padding:20px;'>
          <legend>&nbsp;<b>{{ "image rotation" | trans  }}</b>&nbsp;</legend>
            <label for="ROTA_90" class="radio">
                <input type="radio" name="rotation" id="ROTA_90" value="90" checked="checked">
                {{ "rotation 90 degres horaire" | trans }}
            </label>
            <br />
            <label for="ROTA_C90" class="radio">
                <input type="radio" name="rotation" id="ROTA_C90" value="-90">
                {{ "rotation 90 degres anti-horaires" | trans }}
            </label>
            <input type="hidden" name="lst" value="{{records.serializedList()}}" />
            <input type="hidden" name="element" value="" />
            <input type="hidden" name="cchd" value="" />
        </fieldset>
        <div style='text-align:right;padding-top:10px;'>
          <button class="action_submiter btn btn-inverse">{{ "validate"|trans }}</button>
          <button class="action_cancel btn btn-inverse">{{ "cancel"|trans }}</button>
        </div>
      </form>
    </div>

    {# hd sub section #}
    {% if selectionLength == 1 and (app['conf'].get(['registry', 'modules', 'doc-substitution']) or app['conf'].get(['registry', 'modules', 'thumb-substitution'])) %}
      {% for record in records %}
        <div id="substitution" class="tabBox">

         {% if "unknown" == record.get_type() %}
            <i class="icon-warning-sign icon-white"></i>{{ "Substitution is not possible for this kind of record" | trans }}
         {% else %}
            {% if app['conf'].get(['registry', 'modules', 'doc-substitution']) %}
                <div id="substitution-hd">
                  <form
                    name ="formchgHD"
                    action="{{ path('prod_tools_hd_substitution') }}"
                    enctype="multipart/form-data"
                    method="post"
                    target="uploadHdsub">

                    <fieldset style='border:1px solid #999;padding:20px;'>
                      <legend>&nbsp;<b>{{ "substitution HD" | trans }}</b>&nbsp;</legend>
                      <div>
                        <input id='new-hd-file' name="newHD" type="file"/>
                        <br />
                        <label for="CCFNALP" class="checkbox">
                            <input type="checkbox" name="ccfilename" id="CCFNALP" value="1">
                            {{ "mettre a jour le nom original de fichier apres substitution" | trans }}
                        </label>
                        <input type="hidden" name="ACT" value="SEND" />
                        <input type="hidden" name="sbas_id" value="{{record.get_sbas_id()}}"/>
                        <input type="hidden" name="record_id" value="{{record.get_record_id()}}" />
                        <div class="load"></div>
                      </div>
                    </fieldset>
                    <div style='text-align:right;padding-top:10px;'>
                      <button class="iframe_submiter btn btn-inverse">{{ "validate" | trans }}</button>
                      <button class="action_cancel btn btn-inverse">{{ "cancel" | trans }}</button>
                    </div>
                  </form>
                  <div class='resultAction'></div>
                </div>
              {% endif %}

              {% if app['conf'].get(['registry', 'modules', 'thumb-substitution']) %}
                <div id="substitution-sd">
                  <form
                    name="formchgHD"
                    action="{{ path('prod_tools_thumbnail_substitution') }}"
                    enctype="multipart/form-data"
                    method="post"
                    target="uploadHdsub">
                    <fieldset style='border:1px solid #999;padding:20px;'>
                      <legend>&nbsp;<b>{{ "substitution SD" | trans }}</b>&nbsp;</legend>
                      <div>
                        <input id='new-sd-file' name="newThumb" type="file" />
                        <input type="hidden" name="sbas_id" value="{{record.get_sbas_id()}}" />
                        <input type="hidden" name="record_id" value="{{record.get_record_id()}}" />
                        <div class="load"></div>
                      </div>
                    </fieldset>
                    <div style='text-align:right;padding-top:10px;'>
                      <button class="iframe_submiter btn btn-inverse">{{ "validate" | trans }}</button>
                      <button class="action_cancel btn btn-inverse">{{ "cancel" | trans }}</button>
                    </div>
                  </form>
                  <div class='resultAction'></div>
                </div>
              {% endif %}
         {% endif %}
        </div>
      {% endfor %}
    {% endif %}

    {# exiftool section #}
    {% if metadatas %}
      {% for record in records %}
        <div id="exiftool"  class="tabBox">
          {% set thumbnail = record.get_thumbnail() %}

          <img style='float:left; margin-right:15px'
            src="{{thumbnail.get_url()}}"
            width="{{thumbnail.get_width()}}"
            height="{{thumbnail.get_height()}}" />

          <div>
            <h1><b>Metadatas</b></h1>
            <hr>
            <table>
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                {% for metadata in metadatas %}
                    <tr>
                        <td>
                            {{ metadata.getTag().getTagname() }}
                        </td>
                        <td>
                            {{ metadata.getValue().asString() }}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
          </div>
        </div>
      {% endfor %}
    {% endif %}
        {% if selectionLength == 1 and recordSubdefs is not empty %}
            <div id="tools-sharing" class="tabBox">
                <div class="well-large">
                    {% for subdef in recordSubdefs %}
                        <div class="row-fluid">
                            <div class="span6">
                                <span class="status-marker {{ subdef.state ? 'status-active' : 'status-inactive' }}"></span>{{ subdef.label }}
                            </div>
                            <div class="span6">
                                <p class="text-right">
                                    <button type="button" class="stateChange_button btn btn-inverse text-right"
                                            data-name="{{ subdef.name }}" data-state="{{ subdef.state }}">
                                        {% if subdef.state %}
                                            {{- "Disable document type sharing"|trans -}}
                                        {% else %}
                                            {{- "Enable document type sharing"|trans -}}
                                        {% endif %}
                                    </button>
                                </p>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
  </div>

  {# hidden iframe to handle upload #}
  <iframe
    id="uploadHdsub"
    name="uploadHdsub"
    height="0"
    width="0"
    border="0"
    >
  </iframe>
</div>

<script type="text/javascript">

$(document).ready(function(){
    var $scope = $("#prod-tool-box");
    var tabs = $("#tool-tabs", $scope).tabs();
    var width = 0;

    $(".iframe_submiter", $scope).bind("click", function(){
        var form = $(this).closest("form");
        form.submit();
        form.find('.load').empty().html(language.loading + ' ...');
        $("#uploadHdsub").contents().find(".content").empty();
        $("#uploadHdsub").load(function(){
            form.find('.load').empty();
            var iframeContent = $("#uploadHdsub").contents().find(".content").html();
            form.closest('div').find('.resultAction').empty().append(iframeContent);
        });
    });

    $(".action_submiter", $scope).bind("click", function(){
        var $this = $(this);
        var form = $(this).closest("form");

        $.ajax({
            url : form.attr("action"),
            type : form.attr("method"),
            dataType : 'json',
            data : form.serializeArray(),
            beforeSend: function(){
                $this.prop('disabled', true);
            },
            success : function(data){
                if(!data.success){
                    humane.error(data.message);
                }else{
                    var dialog = p4.Dialog.get(1);
                    dialog.Close();
                }
            },
            complete: function(){
                $this.prop('disabled', false);
            }
        });

        return false;
    });

    $(".action_cancel", $scope).bind("click", function(){
        var dialog = p4.Dialog.get(1);
        dialog.Close();

        return false;
    });

    //thumbExtractor

    var ThumbEditor = new this.THUMB_EDITOR("thumb_video", "thumb_canvas", {
        altCanvas: $('#alt_canvas_container .alt_canvas')
    });

    if(ThumbEditor.isSupported()) {

        var $sliderWrapper = $("#thumb_wrapper", $scope);

        $sliderWrapper.on('click', 'img', function(){
            $('.selected', $sliderWrapper).removeClass('selected');
            $(this).addClass('selected');

            var $self = this;
            var selectedScreenId = $self.getAttribute("id").split("_").pop();
            var screenshots = ThumbEditor.store.get(selectedScreenId);

            ThumbEditor.copy(screenshots.getDataURI(), screenshots.getAltScreenShots());
        });


        $scope.on('click', '#thumb_delete_button', function(){
            var img = $sliderWrapper.find(".selected");
            var id = img.attr("id").split("_").pop();
            var previous = img.prev();
            var next = img.next();

            if(previous.length > 0)
            {
                previous.trigger("click");
            }
            else if(next.length > 0)
            {
                next.trigger("click");
            }
            else
            {
                $(this).hide();
                $("#thumb_info", $scope).show();
                ThumbEditor.resetCanva();
            }

            img.remove();
            ThumbEditor.store.remove(id);
        });

        $scope.on('click', '.close_action_frame', function(){
            $(this).closest(".action_frame").hide();
        });


        $scope.on('click', '#thumb_camera_button', function(){
            $("#thumb_info", $scope).hide();
            $("#thumb_delete_button", $scope).show();

            var screenshot = ThumbEditor.screenshot();
            var img = $("<img />");
            $('.selected', $sliderWrapper).removeClass('selected');
            img.addClass('selected')
            .attr('id', 'working_'+ screenshot.getId())
            .attr('src', screenshot.getDataURI())
            .attr("alt", screenshot.getVideoTime())
            .appendTo($sliderWrapper);
        });

        $("#thumb_canvas").on('tool_event', function(){
            var thumbnail = $('.selected', $sliderWrapper);

            if(thumbnail.length === 0)
            {
                console.error('No image selected');

                return;
            }

            thumbnail.attr('src', ThumbEditor.getCanvaImage());

        });
        $scope.on('click', '#thumb_validate_button', function(){
            var thumbnail = $('.selected', $sliderWrapper);

            if(thumbnail.length === 0)
            {
                var dialog = p4.Dialog.Create({
                    size:'Alert',
                    title: '{{ "alert" | trans }}',
                    closeOnEscape:true
                }, 3);

                var content = $("<div />").css({
                    'text-align':'center',
                    'width': '100%',
                    'font-size':'14px'
                }).append('{{ "no image selected" | trans }}');
                dialog.setContent(content);

                return;
            }

            var buttons = {};

            var record_id = $("input[name=record_id]").val();
            var sbas_id = $("input[name=sbas_id]").val();

            var selectedScreenId = thumbnail.attr('id').split("_").pop();
            var screenshots = ThumbEditor.store.get(selectedScreenId);


            var screenData = screenshots.getAltScreenShots(),
                subDefs = [];

            for(var i = 0; i < screenData.length; i++ ) {
                subDefs.push({
                    name: screenData[i].name,
                    src: screenData[i].dataURI

                });
            }


            function disableConfirmButton(dialog){
                dialog.getDomElement().closest('.ui-dialog').find(".ui-dialog-buttonpane button").filter(function() {
                    return $(this).text() == language.valider;
                }).addClass("ui-state-disabled").attr("disabled", true);
            }


            function enableConfirmButton(dialog){
                dialog.getDomElement().closest('.ui-dialog').find(".ui-dialog-buttonpane button").filter(function() {
                    return $(this).text() == language.valider;
                }).removeClass("ui-state-disabled").attr("disabled", false);
            }

            buttons[language.valider] = function(){
                var dialog = p4.Dialog.get(2);
                var buttonPanel = dialog.getDomElement().closest('.ui-dialog').find(".ui-dialog-buttonpane");
                var loadingDiv = buttonPanel.find('.info-div');

                if(loadingDiv.length == 0)
                {
                    loadingDiv = $("<div />").css({
                        'width' : '120px',
                        'height' : '40px',
                        'float':'left',
                        'line-height' : '40px',
                        'padding-left' : '40px',
                        'text-align' : 'left',
                        'background-position' : 'left center'
                    }).attr('class', 'info-div').prependTo(buttonPanel);
                }

                $.ajax({
                    type: "POST",
                    url: "/prod/tools/thumb-extractor/apply/",
                    data: {
                        sub_def: subDefs,
                        record_id : record_id,
                        sbas_id: sbas_id
                    },
                    beforeSend: function(){
                        disableConfirmButton(dialog);
                        loadingDiv.empty().addClass('loading').append('{{ "processing" | trans }}');
                    },
                    success: function(data){
                        loadingDiv.empty().removeClass('loading');

                        if(data.success)
                        {
                            dialog.Close();
                            p4.Dialog.get(1).Close();
                        }
                        else
                        {
                            //var content = $("<div />").css({'color':'#a00'}).append("{{ "an error occured" | trans }} " + data.message);
                            loadingDiv.append(content);
                            enableConfirmButton(dialog);
                        }
                    }
                });
            };

            //show confirm box, content is loaded here /prod/tools/thumb-extractor/confirm-box/
            var dialog = p4.Dialog.Create({
                size:'Small',
                title:"{{ 'thumbnail validation' | trans }}",
                cancelButton:true,
                buttons: buttons
            }, 2);

            var datas = {
                image: $('.selected', $sliderWrapper).attr("src"),
                sbas_id: sbas_id,
                record_id: record_id
            };

            $.ajax({
                type: "POST",
                url: "/prod/tools/thumb-extractor/confirm-box/",
                data: datas,
                success: function(data){

                    if(data.error)
                    {
                        var content = $("<div />").css({'font-size':'16px', 'text-align':'center'}).append(data.datas);
                        dialog.setContent(content);
                        disableConfirmButton(dialog);
                    }
                    else
                    {
                        dialog.setContent(data.datas);
                    }
                }
            });
        });
    } else {
        //not supported
        $("#thumbExtractor").empty().append(language.browserFeatureSupport);
    }

    {% if selectionLength == 1%}
    $('#tools-sharing .stateChange_button').bind('click',function(event){
        var $btn = $(event.currentTarget),
                state = true;

        // inverse state
        if( $btn.data('state') == 1) {
            state = false;
        }

        // submit changes
        $.post('tools/sharing-editor/{{record.get_base_id}}/{{record.get_record_id}}/', {
            name: $btn.data('name'),
            state: state
        }).done(function(data) {
            // self reload tab with current active tab:
            var activeTab = tabs.tabs('option', 'active');
            toolREFACTOR($dialog.getOption('contextArgs'), activeTab);
        }).error(function(err) {
            alert('forbidden action')
        });
        return false;
    });
    {% endif %}
});
</script>