{% set selectionLength = records|length %}

{% set nbHdSubstitute = 0 %}
{% set nbThumbSubstitute = 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 %}
      {% endif%}

      {% if key == 'thumbnail' %}
        {% set nbThumbSubstitute = nbThumbSubstitute + 1 %}
      {% endif%}

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

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

    {# jquery Tabs #}
    <div id="tool-tabs">
        {# jquery menu #}
        <div>
            <ul>
                <li>
                    <a href="#subdefs">
                        {% trans "regeneration of sub-definitions" %}
                    </a>
                </li>
                {% if selectionLength == 1%}
                    {% for record in records %}
                        {% if record.get_type() == 'video' %}
                            <li>
                                <a href="#thumbExtractor">
                                    {% trans "video tool" %}
                                </a>
                            </li>
                        {% endif %}
                    {% endfor %}
                {% endif %}
                <li>
                    <a href="#image">
                        {% trans "image tool"%}
                    </a>
                </li>
                {% if selectionLength == 1 and (app['phraseanet.registry'].get('GV_seeOngChgDoc') or app['phraseanet.registry'].get('GV_seeNewThumb')) %}
                    <li>
                        <a href="#substitution">
                            {% trans "substitution" %}
                        </a>
                    </li>
                {% endif %}
                {% if metadatas %}
                    <li>
                        <a href="#exiftool">
                            {% trans "meta-datas" %}
                        </a>
                    </li>
                {% 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 style='color:#EEE'>&nbsp;<b>{% trans "Reconstruire les sous definitions" %}</b>&nbsp;</legend>
                    {% if nbThumbSubstitute > 0 %}
                        <div style="color:#A00;">
                            {% trans "Attention, certain documents ont des sous-definitions substituees"%}
                        </div>
                        <label for="FTS" class="checkbox">
                            <input type="checkbox" name="ForceThumbSubstit" value="1" id="FTS" />
                            {% trans "Forcer la reconstruction sur les enregistrements ayant des thumbnails substituees" %}
                        </label>
                        <br/>
                    {% else %}
                        <input type="hidden" name="ForceThumbSubstit" value="1">
                    {% endif %}
                    <div>
                        <select name="rebuild">
                            <option selected="selected" value="none">
                                {% trans "recreer aucune sous-definitions" %}
                            </option>
                            <option value="all">
                                {% trans "recreer toutes les sous-definitions" %}
                            </option>
                        </select>
                    </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">{% trans "validate" %}</button>
                    <button class="action_cancel btn btn-inverse" type="button">{% trans "cancel" %}</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='/skins/prod/ThumbExtractor/camera_title.png'/>
              {% trans "screenshot video" %}
            </div>
            <hr style='margin-top:25px;'/>
            <div class="PNB part_title_left"></div>

            <div class="PNB frame_video">

              {% 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 width = record.get_technical_infos(dataW) %}
              {% set height = record.get_technical_infos(dataH) %}

              {% 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 %}
                {% trans 'No preview available' %}
              </video>
            </div>

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

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

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

            <div class="PNB frame_canva">
              <div id="thumb_reset_button">
                <img src="/skins/prod/ThumbExtractor/reset.png" />
              </div>
              <div id="thumb_delete_button">
                <img src="/skins/prod/ThumbExtractor/delete.png" />
              </div>
              <p id='thumb_info'>{% trans 'To take a screenshot click on camera' %}</p>
              <canvas id="thumb_canvas">
              </canvas>
            </div>
            <div class="PNB action_bar_right">
              <div class="action_icon">
                <img id="flipH" src="/skins/prod/ThumbExtractor/flip_horizontal.png"/>
              </div>
              <div class="action_icon">
                <img id="flipV" src="/skins/prod/ThumbExtractor/flip_vertical.png"/>
              </div>
              <div class="action_icon">
                <img id="brightness" src="/skins/prod/ThumbExtractor/luminosity.png" />
              </div>
              <div class="action_icon">
                <img id="contrast" src="/skins/prod/ThumbExtractor/contrast.png" />
              </div>
            </div>

            <div id="thumb_slider" class="PNB">
              <div id="thumb_wrapper">
              </div>
            </div>

            <div id="action_frame_brightness" class="PNB action_frame" style='background-color:#3B3D3B;z-index: 5;top:295px;left:380px;width:325px;height:125px;display: none;'>
              <div class='close_action_frame PNB' style='background: url("/skins/prod/Push/close_badge.png") #141616 no-repeat center center; top:5px;left:310px;width:10px;height:10px;'></div>
              <div>
                {% trans 'brightness settings' %}
                <hr style='color:#141616' />
              </div>
              <table style="table-layout:fixed; width:100%">
                <tbody>
                  <tr>
                    <td style='width:45px; text-align:center'>
                        <input id="value-brightness" type="text" style="width:45px;border:none;color:white;background-color:#3B3D3B" readonly="readonly" value="0">
                    </td>
                    <td style='padding:5px;text-align:center'>
                      <div id="slider-brightness" ></div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div class='PNB' style="top:80px;left:220px;width:90px;height:30px;">
                <button class="apply-brightness btn btn-inverse">{% trans 'validate'%}</button>
              </div>
            </div>

            <div id="action_frame_contrast" class="PNB action_frame" style='background-color:#3B3D3B;z-index: 5;top:295px;left:380px;width:325px;height:125px;display: none;'>
              <div class='close_action_frame PNB' style='background: url("/skins/prod/Push/close_badge.png") #141616 no-repeat center center; top:5px;left:310px;width:10px;height:10px;'>
              </div>
              <div>
                {% trans 'contrast settings' %}
                <hr style='color:#141616' />
              </div>
              <table style="table-layout:fixed;width:100%">
                <tbody>
                  <tr>
                    <td style='width:45px; text-align:center'>
                        <input id="value-contrast" type="text" style="width:45px;border:none;color:white;background-color:#3B3D3B" readonly="readonly" value="0.3">
                    </td>
                    <td style='padding:5px;text-align:center'>
                      <div id="slider-contrast" ></div>
                    </td>
                  </tr>
                </tbody>
              </table>
              <div class='PNB' style="top:80px;left:220px;width:90px;height:30px;">
                <button class="apply-contrast btn btn-inverse">{% trans 'validate'%}</button>
              </div>
            </div>

            <div id="thumb_validate_button" class="PNB">
              <input type="hidden" value='{{record.get_sbas_id()}}' name='sbas_id'>
              <input type="hidden" value='{{record.get_record_id()}}' name='record_id'>
              <img src="/skins/prod/ThumbExtractor/validate_button.png" alt="{% trans 'take a screenshot' %}" />
            </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 style='color:#EEE'>&nbsp;<b>{% trans "image rotation" %}</b>&nbsp;</legend>
            <label for="ROTA_90" class="radio">
                <input type="radio" name="rotation" id="ROTA_90" value="90" checked="checked">
                {% trans "rotation 90 degres horaire"%}
            </label>
            <br />
            <label for="ROTA_C90" class="radio">
                <input type="radio" name="rotation" id="ROTA_C90" value="-90">
                {% trans "rotation 90 degres anti-horaires"%}
            </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">{% trans "validate" %}</button>
          <button class="action_cancel btn btn-inverse">{% trans "cancel" %}</button>
        </div>
      </form>
    </div>

    {# hd sub section #}
    {% if selectionLength == 1 and (app['phraseanet.registry'].get('GV_seeOngChgDoc') or app['phraseanet.registry'].get('GV_seeNewThumb')) %}
      {% for record in records %}
        <div id="substitution" class="tabBox">

         {% if "unknown" == record.get_type() %}
            <i class="icon-warning-sign icon-white"></i>{% trans "Substitution is not possible for this kind of record" %}
         {% else %}
            {% if app['phraseanet.registry'].get('GV_seeOngChgDoc') %}
                <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 style='color:#EEE'>&nbsp;<b>{% trans "substitution HD" %}</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">
                            {% trans "mettre a jour le nom original de fichier apres substitution"%}
                        </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">{% trans "validate" %}</button>
                      <button class="action_cancel btn btn-inverse">{% trans "cancel" %}</button>
                    </div>
                  </form>
                  <div class='resultAction'></div>
                </div>
              {% endif %}

              {% if app['phraseanet.registry'].get('GV_seeNewThumb') %}
                <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 style='color:#EEE'>&nbsp;<b>{% trans "substitution SD" %}</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">{% trans "validate" %}</button>
                      <button class="action_cancel btn btn-inverse">{% trans "cancel" %}</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 %}
  </div>

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

<script type="text/javascript">

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

    $("#tool-tabs", scope).tabs();

    $(".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.attr('disabled', true);
            },
            success : function(data){
                if(!data.success){
                    humane.error(data.message);
                }else{
                    var dialog = p4.Dialog.get(1);
                    dialog.Close();
                }
            },
            complete: function(){
                $this.attr('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");

    if(ThumbEditor.isSupported()) {
        $("#slider-brightness", scope).slider({
            slide: function() {
                $("#value-brightness").val(Math.round($("#slider-brightness").slider("value") / 100 * 300) - 150);
            }
        }).slider( "option", "value", 50);

        $("#slider-contrast").slider({
            slide: function() {
                $("#value-contrast").val(
                (
                (
                $("#slider-contrast").slider("value") / 100 * 4
            )
                    -1
            ).toFixed(1));
            }
        }).slider( "option", "value", 1/3*100);

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

        $("#thumb_reset_button",scope).bind("click", function(){
            var curImg = sliderWrapper.find(".selected");
            var id = curImg.attr("id").split("_").pop();
            var originalScreenShot = ThumbEditor.store.get(id);
            var newImg = $("<img />");

            curImg.after(newImg).remove();

            newImg
            .attr("id", "#working_"+ id)
            .attr("src", originalScreenShot.getDataURI())
            .trigger("click");
        });

        $("#thumb_delete_button", scope).bind("click", 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_reset_button",scope).hide();
                $("#thumb_info", scope).show();
                ThumbEditor.resetCanva();
            }

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

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

        $("#flipV", scope).bind("click", function(){
            Pixastic.process($("#thumb_canvas").get(0),
            "flipv",
            null,
            function(canvas){$("#thumb_canvas").trigger("tool_event");}
        );
        });

        $("#flipH", scope).bind("click", function(){
            Pixastic.process($("#thumb_canvas").get(0),
            "fliph",
            null, function(canvas){$("#thumb_canvas").trigger("tool_event");}
        );
        });

        $("#brightness", scope).bind("click", function(){
            $("#action_frame_brightness", scope).show();
            $("#action_frame_contrast", scope).hide();
        });

        $("#contrast", scope).bind("click", function(){
            $("#action_frame_brightness", scope).hide();
            $("#action_frame_contrast", scope).show();
        });

        $(".apply-brightness", scope).bind("click", function(){
            Pixastic.process($("#thumb_canvas").get(0), "brightness", {
                brightness: $("#value-brightness").val(),
                contrast: $("#value-contrast").val(),
                legacy: false
            }, null, function(canvas){$("#thumb_canvas").trigger("tool_event");});
        });

        $(".apply-contrast").bind("click", function(){
            Pixastic.process($("#thumb_canvas").get(0), "brightness", {
                brightness: $("#value-brightness").val(),
                contrast: $("#value-contrast").val(),
                legacy: false
            }, null, function(canvas){$("#thumb_canvas").trigger("tool_event");});
        });

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

            ThumbEditor.copy($(this).get(0));
        });

        $("#thumb_camera_button", scope).bind("click", function(){
            $("#thumb_info", scope).hide();
            $("#thumb_delete_button", scope).show();
            $("#thumb_reset_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").live('tool_event', function(){
            var thumbnail = $('.selected', sliderWrapper);

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

                return;
            }

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

        });

        $("#thumb_validate_button", scope).bind("click", function(){

            var thumbnail = $('.selected', sliderWrapper);

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

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

                return;
            }

            var buttons = {};

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


            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: {
                        image: $("#thumb_confirm img.selected").attr('src'),
                        record_id : record_id,
                        sbas_id: sbas_id
                    },
                    beforeSend: function(){
                        disableConfirmButton(dialog);
                        loadingDiv.empty().addClass('loading').append('{% trans "processing" %}');
                    },
                    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("{% trans "an error occured" %} " + 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:"{% trans 'thumbnail validation' %}",
                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);
    }
});
</script>