{% extends "propesqBundle::layout.html.twig" %}

{% block stylesheets %}
    <!-- TODO: verificar caminho do arquivo -->
    <link rel="stylesheet" href="{{ asset('bundles/propesq/css/edit.css') }}" type="text/css" media="all" />
    <link rel="stylesheet" href="{{ asset('bundles/propesq/js/upload/css/bootstrap-image-gallery.min.css') }}" type="text/css" media="all" />
    <link rel="stylesheet" href="{{ asset('bundles/propesq/js')}}/upload/css/jquery.fileupload-ui.css">

    <script src="{{ asset('bundles/propesq/js')}}/upload/vendor/jquery.ui.widget.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/tmpl.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/load-image.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/canvas-to-blob.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/bootstrap-image-gallery.min.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.iframe-transport.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.fileupload.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.fileupload-fp.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/jquery.fileupload-ui.js"></script>
    <script src="{{ asset('bundles/propesq/js')}}/upload/locale.js"></script>

    <style>
        div#modal-gallery{
            margin-top: 0 !important;
        }

        .modal-gallery .modal-body{
            max-height: 400px !important;
        }

        .modal-body  .modal-image {
            display: block;
            width: auto;
            max-height: 100% !important;
        }

        .template-download td{
            vertical-align: middle;
        }
    </style>
{% endblock %}

{% block content %}
<div id="form-container">
    <div class="title">
        <h2>
            {%if entity.id is defined and entity.id is not null%}
                {{'cabecalho.alterar.especie'|trans}}
            {%else%}
                {{'cabecalho.incluir.especie'|trans}}
            {%endif%}
        </h2>
    </div>

{{ form_errors(form) }}

    <form id="fileuploadList" action="{%if entity.id is defined and entity.id is not null %} {{ path('especie_imagelistedit', { 'id': entity.id }) }} {%else%}  {{ path('especie_imagelistnew', {'token': uploadcontroller} ) }} {%endif%}" method="POST" enctype="multipart/form-data" style="display: none;"></form>
    <form id="fileuploadSend" action="{%if entity.id is defined and entity.id is not null %} {{ path('especie_imageedit', { 'id': entity.id }) }} {%else%}  {{ path('especie_imagenew', {'token': uploadcontroller}) }} {%endif%}" method="POST" enctype="multipart/form-data" style="display: none;"></form>
    <form id="formulario-especie" name="formulario-especie" class="{% if  not includeLayout %}ajax {%endif%} form-horizontal" action="{%if entity.id is defined and entity.id is not null %} {{ path('especie_update', { 'id': entity.id }) }} {%else%}  {{ path('especie_create') }} {%endif%}" method="post" {{ form_enctype(form) }}>
    <fieldset style="float: left; margin: 10px;">

        {{ form_widget(form._token) }}

        <input type='hidden' name='uploadcontroller' value='{{uploadcontroller}}'>
        {% if not includeLayout %}
            <input type='hidden' name='noLayout' value='true'>
        {% endif %}


        <div class="row-fluid">
             <div class="span6">
                <div class="control-group">
                    {{ form_label(form.txtNomeCientifico) }}
                    <div class="controls">
                        {{ form_widget(form.txtNomeCientifico,{ 'attr': {'class': 'input-xlarge cemporcento focus especiePmap', 'my-input': 'name'} }) }}
                        <span class="help-inline">{{ form_errors(form.txtNomeCientifico) }}</span>
                    </div>
                </div>
             </div>
             <div class="span6">
                <div class="control-group">
                    {{ form_label(form.txtNomeReferencia) }}
                    <div class="controls">
                        {{ form_widget(form.txtNomeReferencia,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                        <span class="help-inline">{{ form_errors(form.txtNomeReferencia) }}</span>
                    </div>
                </div>
             </div>
        </div>
        <div class="row-fluid">
             <div class="span6">
                <div class="control-group">
                    {{ form_label(form.txtNivelTaxonomico) }}
                    <div class="controls">
                        {{ form_widget(form.txtNivelTaxonomico,{ 'attr': {'class': 'input-xlarge cemporcento especiePmap'} }) }}
                        <span class="help-inline">{{ form_errors(form.txtNivelTaxonomico) }}</span>
                    </div>
                </div>
             </div>
             <div class="span6">
                <div class="control-group">
                    {{ form_label(form.txtAutor) }}
                    <div class="controls">
                        {{ form_widget(form.txtAutor,{ 'attr': {'class': 'input-xlarge cemporcento especiePmap'} }) }}
                        <span class="help-inline">{{ form_errors(form.txtAutor) }}</span>
                    </div>
                </div>
             </div>
        </div>
        <div class="row-fluid">
             <div class="span3">
                <div class="control-group">
                    {{ form_label(form.txtGenero) }}
                    <div class="controls">
                        {{ form_widget(form.txtGenero,{ 'attr': {'class': 'input-xlarge cemporcento especiePmap'} }) }}
                        <span class="help-inline">{{ form_errors(form.txtGenero) }}</span>
                    </div>
                </div>
             </div>
             <div class="span3">
                <div class="control-group">
                    {{ form_label(form.txtFamilia) }}
                    <div class="controls">
                        {{ form_widget(form.txtFamilia,{ 'attr': {'class': 'input-xlarge cemporcento especiePmap'} }) }}
                        <span class="help-inline">{{ form_errors(form.txtFamilia) }}</span>
                    </div>
                </div>
             </div>
             <div class="span3">
                <div class="control-group">
                    {{ form_label(form.txtOrdem) }}
                    <div class="controls">
                        {{ form_widget(form.txtOrdem,{ 'attr': {'class': 'input-xlarge cemporcento especiePmap'} }) }}
                        <span class="help-inline">{{ form_errors(form.txtOrdem) }}</span>
                    </div>
                </div>
             </div>
             <div class="span3">
                <div class="control-group">
                    {{ form_label(form.txtClasse) }}
                    <div class="controls">
                        {{ form_widget(form.txtClasse,{ 'attr': {'class': 'input-xlarge cemporcento especiePmap'} }) }}
                        <span class="help-inline">{{ form_errors(form.txtClasse) }}</span>
                    </div>
                </div>
             </div>
        </div>
        <div class="row-fluid">
            <div class="span4">
                <div class="control-group">
                    {{ form_label(form.codEspecieGrupo) }}
                    <div class="controls">
                        {{ form_widget(form.codEspecieGrupo,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                        <span class="help-inline">{{ form_errors(form.codEspecieGrupo) }}</span>
                    </div>
                </div>
             </div>
             <div class="span4">
                 <div class="control-group">
                    {{ form_label(form.codEspecieHabito) }}
                    <div class="controls">
                        {{ form_widget(form.codEspecieHabito,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                        <span class="help-inline">{{ form_errors(form.codEspecieHabito) }}</span>
                    </div>
                </div>
             </div>
             <div class="span4">
                <div class="control-group">
                    {{ form_label(form.indDistribuicao) }}
                    <div class="controls">
                        {{ form_widget(form.indDistribuicao,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                        <span class="help-inline">{{ form_errors(form.indDistribuicao) }}</span>
                    </div>
                </div>
             </div>
        </div>
        <div class="row-fluid">
            <div class="span2">
                <div class="control-group">
                    {{ form_label(form.txtAlphaid) }}
                    <div class="controls">
                        {{ form_widget(form.txtAlphaid,{ 'attr': {'class': 'input-xlarge cemporcento especiePmap'} }) }}
                        <span class="help-inline">{{ form_errors(form.txtAlphaid) }}</span>
                    </div>
                </div>
            </div>
            <div class="span2">
                <div class="control-group">
                    {{ form_label(form.txtTsn) }}
                    <div class="controls">
                        <div class="input-append">
                            {{ form_widget(form.txtTsn,{ 'attr': {'class': 'input-small especiePmap'} }) }}
                            <button class="btn" id="btn-searchTSN" type="button"><i class="icon-search"></i></button>
                        </div>
                        <span class="help-inline">{{ form_errors(form.txtTsn) }}</span>
                    </div>
                </div>
            </div>
            <div class="span2">
                <div class="control-group">
                    {{ form_label(form.codEspeciePmap) }}
                    <div class="controls">
                        {{ form_widget(form.codEspeciePmap,{ 'attr': {'class': 'input-small'} }) }}
                    </div>
                </div>
            </div>
            <div class="span3">
                <div class="control-group">
                    {{ form_label(form.numFaixaProfInicial) }}
                    <div class="controls">
                        {{ form_widget(form.numFaixaProfInicial,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                        <span class="help-inline">{{ form_errors(form.numFaixaProfInicial) }}</span>
                    </div>
                </div>
           </div>
           <div class="span3">
               <div class="control-group">
                    {{ form_label(form.numFaixaProfFinal) }}
                    <div class="controls">
                        {{ form_widget(form.numFaixaProfFinal,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                        <span class="help-inline">{{ form_errors(form.numFaixaProfFinal) }}</span>
                    </div>
                </div>
           </div>
        </div>
        <div class="row-fluid show-grid">
            <div class="span6">
                <div class="control-group">
                    {{ form_label(form.especies) }}
                    <div class="controls">
                        <div id="especie-fields-list" data-prototype="{% filter escape %}{% include 'propesqBundle:EspecieRelacionada:new.html.twig' with {'formEspecie': form.especies.get('prototype')} %}{% endfilter %}">
                            {% for especieField in form.especies %}
                                {% include 'propesqBundle:EspecieRelacionada:new.html.twig' with {'formEspecie': especieField, 'id' : loop.index0} %}
                            {% endfor %}
                        </div>

                        <a href="#" id="add-another-especie">Novo Nome Científico Associado</a>
                        <span class="help-inline">{{ form_errors(form.especies) }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="control-group">
                    {{ form_label(form.txtObservacao) }}
                    <div class="controls">
                        {{ form_widget(form.txtObservacao,{ 'attr': {'class': 'input-xlarge cemporcento', 'style' : 'height: 135px'} }) }}
                        <span class="help-inline">{{ form_errors(form.txtObservacao) }}</span>
                    </div>
               </div>
            </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="" style="margin-left: 20px;">
                                    <div class="page-header">
                                        <h1>Envio de fotos</h1>
                                    </div>
                                    <blockquote>
                                        <p>Envio e visualização de fotos da espécie. Caso queira ver a foto em tamanho real, clique sobre a foto para iniciar a visualização.</p>
                                    </blockquote>

                                        <div class="row fileupload-buttonbar">
                                            <div class="span12" style="margin-left: 15px;">
                                                <!-- The fileinput-button span is used to style the file input field as button -->
                                                <span class="btn btn-success fileinput-button">
                                                    <i class="icon-plus icon-white"></i>
                                                    <span>Selecionar fotos...</span>
                                                    <input type="file" name="files[]" multiple>
                                                </span>
                                                <!--<button type="submit" class="btn btn-primary start">
                                                    <i class="icon-upload icon-white"></i>
                                                    <span>Iniciar envio ao servidor</span>
                                                </button>-->
                                                <button type="reset" class="btn btn-warning cancel">
                                                    <i class="icon-ban-circle icon-white"></i>
                                                    <span>Cancelar envio</span>
                                                </button>
                                                <button type="button" class="btn btn-danger delete">
                                                    <i class="icon-trash icon-white"></i>
                                                    <span>Excluir fotos selecionadas</span>
                                                </button>
                                                <input type="checkbox" class="toggle">
                                            </div>
                                            <!-- The global progress information -->
                                            <div class="span5 fileupload-progress fade">
                                                <!-- The global progress bar -->
                                                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                                                    <div class="bar" style="width:0%;"></div>
                                                </div>
                                                <!-- The extended global progress information -->
                                                <div class="progress-extended">&nbsp;</div>
                                            </div>
                                        </div>
                                        <!-- The loading indicator is shown during file processing -->
                                        <div class="fileupload-loading"></div>
                                        <br>
                                        <!-- The table listing the files available for upload/download -->
                                        <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
                                </div>
                                <!-- modal-gallery is the modal dialog used for the image gallery -->
                                <div id="modal-gallery" class="modal modal-gallery hide feide" data-filter=":odd">
                                    <div class="modal-header">
                                        <a class="close" data-dismiss="modal">&times;</a>
                                        <h3 class="modal-title"></h3>
                                    </div>
                                    <div class="modal-body"><div class="modal-image"></div></div>
                                    <div class="modal-footer">
                                        <a class="btn modal-download" target="_blank">
                                            <i class="icon-download"></i>
                                            <span>Download</span>
                                        </a>
                                        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="2500">
                                            <i class="icon-play icon-white"></i>
                                            <span>Slideshow</span>
                                        </a>
                                        <a class="btn btn-info modal-prev">
                                            <i class="icon-arrow-left icon-white"></i>
                                            <span>Anterior</span>
                                        </a>
                                        <a class="btn btn-primary modal-next">
                                            <span>Próxima</span>
                                            <i class="icon-arrow-right icon-white"></i>
                                        </a>
                                    </div>
                                </div>
            </div>
        </div>

        <div style="width: 90%; float: left; margin-left: 30px">
            {% if entity.codRespInclusao is not null %}
                <div style="width: 90%; float: left; margin-left: 30px">
                    <label style="float: right;font-weight: bold;margin-top: 10px;">Responsável pela
                        inclusão: {{ entity.codRespInclusao.codPessoa.txtNome }}
                        em {{ entity.datInclusao|date('d/m/Y H:i') }}</label>
                </div>
            {% endif %}

            {% if entity.codRespEdicao is not null %}
                <div style="width: 90%; float: left; margin-left: 30px">
                    <label style="float: right;font-weight: bold;margin-top: 10px;">Responsável pela última
                        edição: {{ entity.codRespEdicao.codPessoa.txtNome }}
                        em {{ entity.datEdicao|date('d/m/Y H:i') }}</label>
                </div>
            {% endif %}
        </div>

</fieldset>
    <div class="div-actions">
        {#<a id="buttonSubmit" class="btn btn-primary">{{'acao.salvar'|trans}}</a>#}
        <button type="submit" id="buttonSubmit" class="btn btn-primary">{{'acao.salvar'|trans}}</button>
        <a class=""{% if not includeLayout %} onclick="$(this).parents('.modal').find('.close').click(); return false;" {% endif %} href="{{ path('especie') }}" title="{{'acao.cancelar'|trans}}">{{'acao.cancelar'|trans}}</a>
    </div>
</form>


 {% raw %}
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}

    <tr class="template-upload feide">
        <td class="preview"><span class="feide"></span></td>
		<td class="name"><span>{%=file.name%}</span></td>
                <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download feide">
        {% if (file.error) { %}
            <td></td>
            <td class="name"><span>{%=file.name%}</span></td>
            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else { %}
            <td class="preview">{% if (file.thumbnail_url) { %}
                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
            </td>

<!--            <td class="title" style='width: 150px;'>
                <span  style='background-color: blue'>{%=file.title%}</span>
            </td>-->
            <!--<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>-->
            <td colspan="3"></td>

        {% } %}
        <td class="delete">
            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                <i class="icon-trash icon-white"></i>
                <span>{%=locale.fileupload.destroy%}</span>
            </button>
            <input type="checkbox" name="delete" value="1">
        </td>
    </tr>
{% } %}
</script>

 {% endraw %}
<script>

$(function () {
    'use strict';
    $('#formulario-especie').fileupload({
        maxFileSize: {{ upload_max_filesize }},
        acceptFileTypes: /(\.|\/)(png|gif|jpg|jpeg|bin)$/i,
        autoUpload: true,
    });
    $('#formulario-especie').each(function () {
        var that = this;
        var action = $('#fileuploadList').attr('action');
        $.getJSON(action, function (result) {
            if (result && result.length) {
                $(that).fileupload('option', 'done')
                    .call(that, null, {result: result});
            }
        });
    });
});

var fileNotSend = false;
var counter = 0;
var number_of_files = 0;
var ajax = false;

$(document).ready(function(){
    $(document).on('DOMNodeInserted', function(e) {
        if( e.target.className == 'alert alert-error') {
            setTimeout(function() {
                $('#buttonSubmit').removeAttr("disabled");
            }, 200);

        }
    });
    $('#entidade_especie_txtNomeReferencia').on('focusin', function () {
        $(this).setError(false);
    });

    $('#entidade_especie_txtNomeReferencia').on('change', function () {
        ajax = false;
    });
    $('#formulario-especie').on('submit',function(e) {
        setTimeout(function () {
            $('button[type="submit"]').attr("disabled", "disabled");
        }, 100);

        var ok = true;
        if( $(".alert-error:visible").length > 0) {
            $('html,body').animate({scrollTop: ($($(".alert-error").first()).offset().top) - 35}, 1000);
            ok =  false;
        }

        var nome_referencia = $('#entidade_especie_txtNomeReferencia').val();
        var id = '{{ entity.id }}';
        if(nome_referencia ) {
            if(ajax){
                return true;
            }

            $.ajax({
                type: 'post',
                data: {referencia: nome_referencia, id: id},
                url: '{{ path('especie_verifica_nome_referencia') }}',
                beforeSend: function () {
                },
                success: function (result) {
                    if (result && result >= 1) {
                        $('#entidade_especie_txtNomeReferencia').setError("Espécie com nome de refêrencia <strong>" + nome_referencia + "</strong> já cadastrada.");
                        $('html,body').animate({scrollTop: ($($(".alert-error").first()).offset().top) - 35}, 1000);
                        return false;
                    }else{
                        ajax = true;
                        $('#formulario-especie').trigger('submit');
                    }
                },
                error: function () {
                }
            });
        }else{
            return true;
        }
        return false;
    });

    $('#formulario-especie').bind('fileuploadsubmit', function (e, data) {
        data.form = $("#fileuploadSend");
    });

    $('#formulario-especie').bind('fileuploadadd', function (e, data) {
        $.each(data.files, function (index, file) {
            number_of_files = number_of_files + 1;
        });
    });

    $('#formulario-especie').bind('fileuploadprogressall', function (e, data) {
        number_of_files = number_of_files - 1;
    });

    $('button.cancel').click(function (e) {
        number_of_files = 0;
    });

    $('td.cancel button').live('click',function (e) {
        number_of_files = number_of_files - 1;
    });

});
</script>






</div>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width:940px; margin-left:-470px;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Resultado da Busca no ITIS</h3>
  </div>
    <div class="modal-body modal-body-tns" style="width: 910px; height: 600px;">
        <!--<iframe src="" style="width: 100%; height: 100%" id="modalContent" frameborder="0"></iframe>-->
    </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Fechar janela</button>
  </div>
</div>
<script type="text/javascript" src="{{ asset('bundles/propesq/js/jquery.hotkeys.js') }}"></script>
<script>
    var arrayEspecies = [];

    arrayEspecies.push({{ entity.id }});
    {% for especie in entity.especies %}
        arrayEspecies.push({{ especie.codEspecie.id }});
    {% endfor %}

    /**
    Utilizado para identificar se a espécie associada já foi inclusa (não permitir duplicação)
     */
    function updateEspecieRelacionadaList(combo, idDeleted){
        if(idDeleted){
            var pos = arrayEspecies.indexOf(parseInt(idDeleted, 10));
            arrayEspecies.splice(pos, 1);
        }else{
            var regex = /\d+/;
            var match = regex.exec(combo.idContainer);
            var lastId = (combo.getLastSelectedObject() == null)?'':parseInt(combo.getLastSelectedObject().id);
            var newId = parseInt(combo.getSelectedObject().id);
            if(newId != lastId) {
                if (newId && $.inArray(newId, arrayEspecies) <= -1) {
                    arrayEspecies.push(newId);
                } else {
                    combo.setSelectedByValue('', false);
                    $("#" + combo.idContainer).setError("Opção já selecionada.");
                }

                if (lastId && $.inArray(lastId, arrayEspecies) > -1) {
                    var pos = arrayEspecies.indexOf(parseInt(lastId, 10));
                    arrayEspecies.splice(pos, 1);
                }
            }
        }
    }

    var especies = new Prototype.Class({
        'count'       :{{ form.especies|length }},
        'list'        : '#especie-fields-list',
        'removeButton': '#remover-especie',
        'container'   : '.especie-container',
        'addButton'   : '#add-another-especie',
        'onDelete'    : updateEspecieRelacionadaList,
        'isEdit'       : '{{entity.id}}'
    });

    $(document).ready(function(){



        $('#entidade_especie_txtNomeCientifico').on('change', function () {
            $(this).parent().find('.help-inline').remove();
        });

        $('#btn-searchTSN').click(detalharTSN);


        /*Espécies associadas ao abrir os modais*/
        $qtdEspeciesArray = [];
        $('#especie-fields-list').find('.btn_remove_especie').each(function () {
            $qtdEspeciesArray.push($(this).data('id'));
        });
        $qtdEspecies = -1;
        if($qtdEspeciesArray.length > 0){
            $qtdEspecies = Math.max.apply(null, $qtdEspeciesArray)
        }

        $codEspeciePmapEntity = null;
        $codEspecie = null;
        {% if entity.id %}
            $codEspeciePmapEntity = '{{ entity.codEspeciePmap.id }}';
            $codEspecie = '{{ entity.id }}';
        {% endif %}
        localStorage.setItem("lastPmapTaxId", $codEspeciePmapEntity);
        localStorage.setItem("lastPmapApplyTaxId", $codEspeciePmapEntity);

        // if press tab open modal//
        /*Fim espécies associadas*/

        var modal = true;
        //exibe modal do tab se modal do enter não estiver aberto
        $("#entidade_especie_codEspeciePmap").on("focusout ", function (e) {
            //verifica se ja existe modal
            if ( $('.modal-backdrop').is(":visible")){
                modal = true;
            }else {
                modal = false;
            }
            if (modal !== true ) {
                if (e.type === "focusout") {
                    if (parseInt($(this).val())) {
                        if (parseInt($(this).val()) !== parseInt(localStorage.getItem("lastPmapTaxId"))
                            || parseInt($(this).val()) !== parseInt(localStorage.getItem("lastPmapApplyTaxId"))
                        )
                            localStorage.setItem("lastPmapApplyTaxId", null);
                        localStorage.setItem("lastPmapTaxId", parseInt($(this).val()));
                        $('#btn-infoEspeciePmapId').click();
                    }
                }
            }
        });

        //exibe modal do enter
        $("#entidade_especie_codEspeciePmap").on("keypress" , function (e) {
            if(e.keyCode === 13){
                if(parseInt($(this).val())){
                    if(parseInt($(this).val()) !== parseInt(localStorage.getItem("lastPmapTaxId"))
                        || parseInt($(this).val()) !== parseInt(localStorage.getItem("lastPmapApplyTaxId"))
                    )
                        localStorage.setItem("lastPmapApplyTaxId", null);
                    localStorage.setItem("lastPmapTaxId", parseInt($(this).val()));
                    $('#btn-infoEspeciePmapId').click();
                    e.preventDefault();
                }
            }
        });
    });

    function closeLoader() {

         loader('.modal-body-tns', true);

    }

    function detalharTSN(){
        setTimeout(function(){
            loader('.modal-body-tns', false);
        });
        var tsnID = $("#{{form.txtTsn.get('id')}}").val();
        var url = "http://www.itis.gov/servlet/SingleRpt/SingleRpt?search_topic=TSN&search_value="+ tsnID+"&print_version=PRT&source=to_print";
        //var url = "http://www.itis.gov/servlet/SingleRpt/SingleRpt?search_topic=TSN&search_value="+tsnID;
        $('.modal-body-tns')
            .html('<iframe width="100%" id="teste" height="100%" onload="closeLoader()" frameborder="0" allowtransparency="true" src="' + url + '"></iframe>');
        $("#myModal").modal();

        $('.modal')
            .css('z-index', 1041)
            .addClass('stacked');
    }

</script>
{% endblock %}