{% 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" />
    <script src="{{ asset('bundles/propesq/js')}}/ckeditor/ckeditor.js"></script>
    
    
    
    
    <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>
{% endblock %}

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

{{ form_errors(form) }}

<form id="fileuploadList" action="{%if entity.id is defined and entity.id is not null %} {{ path('paginamenu_filelistedit', { 'id': entity.id }) }} {%else%}  {{ path('paginamenu_filelistnew', {'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('paginamenu_fileedit', { 'id': entity.id }) }} {%else%}  {{ path('paginamenu_filenew', {'token': uploadcontroller}) }} {%endif%}" method="POST" enctype="multipart/form-data" style="display: none;"></form>              
<form id="formulario-paginamenu" class="{% if  not includeLayout %}ajax {%endif%} form-horizontal" action="{%if entity.id is defined and entity.id is not null %} {{ path('paginamenu_update', { 'id': entity.id }) }} {%else%} {{ path('paginamenu_create') }} {%endif%}" method="post" {{ form_enctype(form) }} enctype="multipart/form-data">

    <fieldset style="float: left; margin: 10px;">
        
        {{ form_widget(form._token) }}
        {{ form_widget(artigoForm._token) }}
        {{ form_widget(propesqForm._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="span3">
                <div class="control-group">
                    {{ form_label(form.descricao) }}
                    <div class="controls">
                        {{ form_widget(form.descricao,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                        <span class="help-inline">{{ form_errors(form.descricao) }}</span>
                    </div>
                </div>
            </div>            
            <div class="span6">
                <div class="control-group">
                    <label class="radio inline" style="margin-top: 25px;"><input type="radio" id="item_menu_tipo_1" name="item_menu_tipo" required="required" value="1" class=" wf2_notBlank wf2_defaultValue" {%if entity.idConteudo is null and entity.idArquivo is null %}checked="true"{%endif%}>
                        Item de menu agrupador
                    </label>
                    <label class="radio inline" style="margin-top: 25px;"><input type="radio" id="item_menu_tipo_2" name="item_menu_tipo" required="required" value="2" class=" wf2_notBlank wf2_defaultValue" {%if entity.idConteudo is not null %}checked="true"{%endif%}>
                        Conteúdo
                    </label>
                    <label class="radio inline" style="margin-top: 25px;"><input type="radio" id="item_menu_tipo_3" name="item_menu_tipo" required="required" value="3" class=" wf2_notBlank wf2_defaultValue" {%if entity.idArquivo is not null %}checked="true"{%endif%}>
                        Arquivo
                    </label>
                </div>
            </div>
                
        </div>     
            
        <div class="row-fluid">
            <div class="span3">
                <div class="control-group" style="position: relative; height: 270px;">
                    {{ form_label(form.ordem) }}
                    <div class="drag-sort-content controls well" id="orderList">
                        <ul>
                            <li id="draggable" class="ui-state-highlight-move {%if entity.id is empty %}paginamenu{% endif %}" id="0">{{'Nova ' ~ 'entidade.paginamenu.descricao'|trans}}</li>
                        </ul>
                        <ul id="sortable">Escolha um item de menu acima.</ul>
                    </div>
                        <input type="hidden" name="codAnterior" id="anterior">
                        <input type="hidden" name="codProximo" id="proximo">
                </div>
            </div>
                
            <div class="span3" id="container_menu_acima" {%if entity.idConteudo is null and entity.idArquivo is null %}style="display: none"{%endif%}>
                <div class="control-group"> 
                    {{ form_label(form.idMenuAcima, { 'attr': {'class': 'required'} }) }}
                    <div class="controls">
                        {{ form_widget(form.idMenuAcima,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                        <span class="help-inline">{{ form_errors(form.idMenuAcima) }}</span>
                    </div>
                </div>
            </div>
            
        </div>
        
            
            
        <fieldset style="width: 95%; {%if entity.idConteudo is null %}display: none{%endif%}" id="container_conteudo">  
            <legend>Conteúdo</legend>
            <div class="row-fluid">
                <div class="span12">          
                    <div class="control-group">
                        <div class="span6">
                            <label class="radio inline"><input type="radio" id="tipo_conteudo_1" name="tipo_conteudo" required="required" value="1" class=" wf2_notBlank wf2_defaultValue" {%if entity.idConteudo is null or (entity.idConteudo is not null and entity.idConteudo.indTipo == 1) %}checked="true"{%endif%}>
                                Propesq
                            </label>
                            <label class="radio inline"><input type="radio" id="tipo_conteudo_2" name="tipo_conteudo" required="required" value="2" class=" wf2_notBlank wf2_defaultValue" {%if entity.idConteudo is not null and entity.idConteudo.indTipo == 2 %}checked="true"{%endif%}>
                                Artigo
                            </label>
                        </div>
                    </div>
                        
                    <div class="control-group" id="container_conteudo_propesq" {%if entity.idConteudo is not null and entity.idConteudo.indTipo == 2 %}style="display: none"{%endif%}>    
                        <div class="row-fluid">
                            <div class="span3">
                                <div class="control-group">
                                    {{ form_label(propesqForm.acessivel) }}
                                    <div class="controls" id="container_propesq_acessivel">
                                        {%if entity.idConteudo is not null and entity.idConteudo.indTipo == 2 and entity.idConteudo.acessivel == true %}
                                            {{ form_widget(propesqForm.acessivel,{ 'attr': {'class': 'input-xlarge', 'checked' : 'checked'} }) }}
                                        {%else%}
                                            {{ form_widget(propesqForm.acessivel,{ 'attr': {'class': 'input-xlarge'} }) }}
                                        {%endif%}    
                                        
                                        <span class="help-inline">{{ form_errors(propesqForm.acessivel) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                            
                        <div class="row-fluid">
                            <div class="span3">
                                <div class="control-group">
                                    {{ form_label(propesqForm.tipo) }}
                                    <div class="controls">
                                        {{ form_widget(propesqForm.tipo,{ 'attr': {'class': 'input-xlarge'} }) }}
                                        <span class="help-inline">{{ form_errors(propesqForm.tipo) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid conteudo_propesq_{{ propesqForm.informacao.vars.name }}" style="display: none;">
                            <div class="span12">
                                <div class="control-group">
                                    {{ form_label(propesqForm.informacao) }}
                                    <div class="controls">
                                        {{ form_widget(propesqForm.informacao,{ 'attr': {'class': 'input-xlarge'} }) }}
                                        <span class="help-inline">{{ form_errors(propesqForm.informacao) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row-fluid conteudo_propesq_{{ propesqForm.conteudo.vars.name }}"  style="display: none;">
                            <div class="span12">
                                <div class="control-group">
                                    {{ form_label(propesqForm.conteudo) }}
                                    <div class="controls">
                                        {{ form_widget(propesqForm.conteudo,{ 'attr': {'class': 'input-xlarge'} }) }}
                                        <span class="help-inline">{{ form_errors(propesqForm.conteudo) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                        
                    <div class="control-group" id="container_conteudo_artigo" {%if entity.idConteudo is null or (entity.idConteudo is not null and entity.idConteudo.indTipo == 1) %}style="display: none"{%endif%}>
                        <div class="row-fluid">
                            <div class="span3">
                                <div class="control-group">
                                    {{ form_label(artigoForm.acessivel) }}
                                    <div class="controls" id="container_artigo_acessivel">
                                        {%if entity.idConteudo is not null and entity.idConteudo.indTipo == 1 and entity.idConteudo.acessivel == true %}
                                            {{ form_widget(artigoForm.acessivel,{ 'attr': {'class': 'input-xlarge', 'checked' : 'checked'} }) }}
                                        {%else%}
                                            {{ form_widget(artigoForm.acessivel,{ 'attr': {'class': 'input-xlarge'} }) }}
                                        {%endif%}    
                                        <span class="help-inline">{{ form_errors(artigoForm.acessivel) }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span9">
                                <div class="control-group">
                                   {{ form_label(artigoForm.statusArquivos) }}
                                   <div class="controls">
                                       {{ form_widget(artigoForm.statusArquivos,{ 'attr': {'class': 'input-xlarge focus'} }) }}
                                     <span class="help-inline">{{ form_errors(artigoForm.statusArquivos) }}</span>
                                   </div>
                               </div>
                            </div>                                    
                        </div>

                        <div class="row-fluid">
                            <div class="span12">
                                <div class="control-group">
                                    {{ form_label(artigoForm.titulo) }}
                                    <div class="controls">
                                        {{ form_widget(artigoForm.titulo,{ 'attr': {'class': 'input-xlarge cemporcento'} }) }}
                                        <span class="help-inline">{{ form_errors(artigoForm.titulo) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row-fluid">    
                            <div class="control-group span12">
                                {{ form_label(artigoForm.conteudo) }}
                                <div class="controls">
                                    {{ form_widget(artigoForm.conteudo,{ 'attr': {'class': 'cemporcento '} }) }}
                                    <span class="help-inline">{{ form_errors(artigoForm.conteudo) }}</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row-fluid">    
                            <div class="control-group span12">
                                <label><strong>Dica: </strong> Para criar links dos arquivos enviados ao servidor no corpo do artigo utilize as URLs disponibilizadas após o envio. E para que estejam disponíveis apenas no corpo do artigo selecione a opção (Arquivos ocultos).</label>
                            </div>
                        </div>
                        <div class="row-fluid">
                            <div class="span12">
                                <div class="" style="margin-left: 200px;">
                                    <div class="page-header">
                                        <h1>Envio de arquivos</h1>
                                    </div>
                                    <blockquote>
                                        <p>Envio de arquivos que serão disponibilizados para download junto com o conteúdo da página.</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 arquivos...</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 arquivos 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>
                            </div>    
                        </div>
                    </div>
                        
                        
                </div>
            </div>
        </fieldset>               
            
        <fieldset style="width: 95%; {%if entity.idArquivo is null %}display: none{%endif%}" id="container_arquivo">
            <legend>Arquivo</legend>
            <div class="control-group">
                {{ form_label(arquivoForm.arquivo) }}
                <div class="controls">
                    {{ form_widget(arquivoForm.arquivo,{ 'attr': {'class': 'input-xlarge'} }) }}
                    <span class="help-inline">{{ form_errors(arquivoForm.arquivo) }}</span>
                </div>
            </div>
            <label id="label_arquivo" {%if entity.idArquivo is null %} style="display: none;" {%endif%}>Último arquivo salvo: <strong>{%if entity.idArquivo is not null%} {{ultimoArquivo}} {%endif%}</strong></label>
        </fieldset>
            
    </fieldset>
    <div class=" div-actions">
        <button type="submit" 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('paginamenu') }}" 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.namedownload%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
            <td class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.namedownload%}">{%=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 %}    
    
    
</div>
         
<script>
    
        $(function () {
            'use strict';
            if ($("input:[name='item_menu_tipo']:checked").val() != 3) {            
                $('#formulario-paginamenu').fileupload();
            }
            $('#formulario-paginamenu').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 codEdit = {%if entity.id is not null %} {{entity.id}} {%else%}0{%endif%};
            
            
        CKEDITOR.replace( 'entidade_paginaconteudoartigo[conteudo]', {
            filebrowserUploadUrl: "{{ path('paginamenu_upload_arquivo') }}",
            filebrowserImageWindowWidth: '640',
            filebrowserImageWindowHeight: '480'
        });

        CKEDITOR.replace( '{{ propesqForm.conteudo.vars.full_name }}', {
            filebrowserUploadUrl: "{{ path('paginamenu_upload_arquivo') }}",
            filebrowserImageWindowWidth: '640',
            filebrowserImageWindowHeight: '480'
        });
        CKEDITOR.replace( '{{ propesqForm.informacao.vars.full_name }}', {
            filebrowserUploadUrl: "{{ path('paginamenu_upload_arquivo') }}",
            filebrowserImageWindowWidth: '640',
            filebrowserImageWindowHeight: '480'
        });

        $(document).ready(function () {
            {%if artigoForm.statusArquivos.vars.value[2] == false and artigoForm.statusArquivos.vars.value[1] == false %}
                $('#{{artigoForm.statusArquivos.vars.id}}_1').click();
            {%endif%}  
            
            $('#formulario-paginamenu').bind('fileuploadsubmit', function (e, data) {
                data.form = $("#fileuploadSend");
            });

            $("[name='{{ propesqForm.tipo.vars.full_name }}']").on('change',function(){
                var tipoPropesq = $("[name='{{ propesqForm.tipo.vars.full_name }}']:checked").val();
                if($("input:[name='item_menu_tipo']:checked").val() == 2 && $("[name='tipo_conteudo']:checked").val() == 1 && tipoPropesq == 2){
                    $(".conteudo_propesq_{{ propesqForm.informacao.vars.name}}").show();
                    $(".conteudo_propesq_{{ propesqForm.conteudo.vars.name}}").show();
                }else{
                    $(".conteudo_propesq_{{ propesqForm.informacao.vars.name}}").hide();
                    $(".conteudo_propesq_{{ propesqForm.conteudo.vars.name}}").hide();
                }
            });

            $("[name='{{ propesqForm.tipo.vars.full_name }}']").change();

            $('label[for={{propesqForm.tipo.vars.id}}]').addClass("required");
            $('#{{propesqForm.tipo.vars.id}}_1').removeAttr("required");
            $('#{{propesqForm.tipo.vars.id}}_2').removeAttr("required");
            
            $('label[for={{artigoForm.titulo.vars.id}}]').addClass("required");
            $('label[for={{artigoForm.conteudo.vars.id}}]').addClass("required");
            $('label[for={{arquivoForm.arquivo.vars.id}}]').addClass("required");

            
            updateOrdemItemMenu();
            
            
            $("#{{propesqForm.acessivel.vars.id}}").click(function (e) {
                $("#{{artigoForm.acessivel.vars.id}}")[0].checked = e.currentTarget.checked;
            });
            
            $("#{{artigoForm.acessivel.vars.id}}").click(function (e) {
                $("#{{propesqForm.acessivel.vars.id}}")[0].checked = e.currentTarget.checked;
            });
            
            $("input:[name='item_menu_tipo']").click(function (e){
                $("#container_conteudo").hide();
                $("#container_menu_acima").hide();
                $("#container_arquivo").hide();
                
                {%if entity.id is null or form.idArquivo.id is null%}
                $("#{{arquivoForm.arquivo.vars.id}}").removeAttr("required");
                {%endif%}
                
                try {                
                    $('#formulario-paginamenu').fileupload('destroy');
                } catch (error) {}
                
                if (e.currentTarget.value == 1) {
                    
                } else if (e.currentTarget.value == 2) {                    
                    $("#container_conteudo").show();
                    $("#container_menu_acima").show();
                    $('#formulario-paginamenu').fileupload();
                } else if (e.currentTarget.value == 3) {
                    $("#container_menu_acima").show();
                    $("#container_arquivo").show();
                    
                    {%if entity.id is null or form.idArquivo.id is null%}
                    $("#{{arquivoForm.arquivo.vars.id}}").attr("required", "required");
                    {%endif%}
                }
                
                updateOrdemItemMenu();
            });
            
            $("input:[name='tipo_conteudo']").click(function (e){
                if (e.currentTarget.value == 1) {
                    $("#container_conteudo_artigo").hide();
                    $("#container_conteudo_propesq").show();
                } else if (e.currentTarget.value == 2) {                    
                    $("#container_conteudo_propesq").hide();
                    $("#container_conteudo_artigo").show();
                }
            });
                        
            if($("#{{form.descricao.vars.id}}").val() != ''){
                $(".ui-state-highlight-move{%if entity.id is empty %}.paginamenu{% endif %}").text($("#{{form.descricao.vars.id}}").val());
            }
            
            $("#{{form.descricao.vars.id}}").keyup(function(){
                if($(this).val().trim() != ''){
                    $(".ui-state-highlight-move{%if entity.id is empty %}.paginamenu{% endif %}").text($(this).val());
                }else{                    
                    {%if entity.id is empty %}
                        $(".ui-state-highlight-move.paginamenu").text("{{'Nova ' ~ 'entidade.paginamenu.descricao'|trans}}");
                    {%else%}    
                        $(".ui-state-highlight-move").text("{{form.descricao.vars.value}}");
                    {% endif %}
                }
            });
            
            $( "#sortable" ).sortable({
                revert: true,
                cancel: ".ui-state-default",
                placeholder: "ui-state-box",
                receive: function(){
                    $( "#draggable" ).draggable('disable');
                },
                update: function(){
                    var array = $( "#sortable" ).sortable('toArray');
                    for( i=0; i<array.length; i++ ){
                        if(array[i] == 0){
                            if(i == 0){
                                //primeiro
                                $("#anterior").val('');
                                $("#proximo").val(array[i+1]);
                            }else if(i == array.length-1){
                                //ultimo
                                $("#anterior").val(array[i-1]);
                                $("#proximo").val('');
                            }else{
                                //qualquer outra posição
                                $("#anterior").val(array[i-1]);
                                $("#proximo").val(array[i+1]);
                            }
                        }
                    }
                }
            });
            $( "#draggable" ).draggable({
                    connectToSortable: "#sortable",
                    helper: "clone",
                    scroll: true, 
                    scrollSensitivity: 20,
                    revert: "invalid",
                    create: function(){
                        $( "#draggable" ).draggable('disable');
                    }
            });
            $( "ul, li" ).disableSelection();     
            $('form#formulario-paginamenu').preventDoubleSubmission();
            $('form').submit(function() {
                $('form#formulario-paginamenu').data('submitted', true);
                $("#{{propesqForm.tipo.vars.id}}").setError(false);
                $('#{{artigoForm.titulo.vars.id}}').setError(false);
                $('#{{artigoForm.conteudo.vars.id}}').setError(false);
                
                var retorno = true;
                
                
                if ($("input:[name='item_menu_tipo']:checked").val() == 2 && $("[name='tipo_conteudo']:checked").val() == 1 && 
                    $("#{{propesqForm.tipo.vars.id}}_1").is(":checked") == false && $("#{{propesqForm.tipo.vars.id}}_2").is(":checked") == false) {
                    
                    $("#{{propesqForm.tipo.vars.id}}").setError("Selecione uma opção");
                    $("#container_propesq_acessivel").find("span").remove();
                    retorno = false;
                }


                if ($("input:[name='item_menu_tipo']:checked").val() == 2 && $("[name='tipo_conteudo']:checked").val() == 2) {
                    if ($('#{{artigoForm.titulo.vars.id}}').val() == "") {
                        $('#{{artigoForm.titulo.vars.id}}').closest(".controls").append
                        ('<span class="help-inline"><div class="alert alert-error">Campo obrigatório</div></span>');
                        retorno = false;
                    }
                    
                    if (CKEDITOR.instances["{{artigoForm.conteudo.vars.id}}"].getData() == "") {
                        $('#{{artigoForm.conteudo.vars.id}}').closest(".controls").append
                        ('<span class="help-inline"><div class="alert alert-error">Campo obrigatório</div></span>');
                        retorno = false;
                    }
                    
                    if ($('#{{artigoForm.titulo.vars.id}}').val() != "") {
                        $('#{{artigoForm.titulo.vars.id}}').closest(".controls").find("span").remove();
                    }
                    
                    $("#container_artigo_acessivel").find("span").remove();                    
                }
                
                if ($("input:[name='item_menu_tipo']:checked").val() == 3) {
                    
                }                

                if(!retorno){
                    $('form#formulario-paginamenu').data('submitted', false);
                }

                return retorno;
            });      
            
            
            {%if entity.idArquivo is not null %}            
            $("#{{arquivoForm.arquivo.vars.id}}").change(function (e) {
                if ($("#{{arquivoForm.arquivo.vars.id}}").val() == "") {
                    $("#label_arquivo").show();
                } else {
                    $("#label_arquivo").hide();
                }
            });
            {%endif%}
            
        });
        
        
        function updateOrdemItemMenu(obj, value) {
            var item;
            var id = "";
            
            item = eval("{{form.idMenuAcima.vars.id}}").getSelectedObject();
            
            if (item) {
                 id = item.id;
            }
            
            var request = $.ajax({
            url: "{{ path('paginamenu_json') }}",
            type: "GET",
            data: { codMenuAcima: id },
            dataType: "json",
            beforeSend: function ( xhr ) {
                if (obj) {
                    obj.setLoading(true);
                }
                loader('#orderList');
            }
            });

            request.done(function(retorno) {
                var html = '';
                var classe = 'ui-state-default';
                var encontrou = false;
                if(retorno.length > 0){
                    $.each(retorno, function(i, item) {
                    {%if entity.id is not null %}                        
                        if(codEdit == item.id){
                            classe = 'ui-state-highlight-move';
                            item.id = '';
                            item.txtNome = $("#{{form.descricao.vars.id}}").val();
                            encontrou = true;
                        }
                        if (item.id == "") {
                            if (i == 0 && retorno.length > 1) {
                                $("#anterior").val('');
                                $("#proximo").val(retorno[i+1].id);
                            } else if (i == (retorno.length - 1) && retorno.length > 1) {
                                $("#anterior").val(retorno[i-1].id);
                                $("#proximo").val('');
                            } else if (retorno.length > 2) {
                                $("#anterior").val(retorno[i-1].id);
                                $("#proximo").val(retorno[i+1].id);
                            }
                        }
                        html += '<li class="'+classe+'" id="'+item.id+'">'+item.txtNome+'</li>';
                        classe = 'ui-state-default';
                    {%else%}
                        if(i == 0) { 
                            $("#anterior").val('');
                            $("#proximo").val(item.id);
                        }
                        html += '<li class="ui-state-default" id="'+item.id+'">'+item.txtNome+'</li>';
                    {%endif%}
                    });

                    if (encontrou) {
                        $( "#draggable" ).draggable('disabled');
                    } else {
                        $( "#draggable" ).draggable('enable');
                    }


                }else{
                    $("#anterior").val('');
                    $("#proximo").val('');
                    $( "#draggable" ).draggable('disable');
                    html = 'Nenhum item encontrado.';
                }
                $("#sortable").html(html);

                //retira o loading passando true no segundo parâmetro
                loader('#orderList', true);

                if (obj) {
                    obj.setLoading(false);
                }
            });

            request.fail(function(jqXHR, textStatus) {
                alert( "Request failed: " + textStatus );
                if (obj) {
                    obj.setLoading(false);
                }
            });
        }
        
    </script>
{% endblock %}