{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/propesq/webgis/css/ol.css') }}" type="text/css">
    <link rel="stylesheet" href="" type="text/css" media="all" />
    <link rel="stylesheet" href="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/gs/ruler/v0.0.1/ruler.css') }}" type="text/css">

{% endblock %}

{% block javascripts %}
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/gs/ruler/v0.0.1/ruler.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/gs/referencePoint/v0.0.1/referencePoint.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/gs/pointTool/v0.0.1/pointTool.js') }}"></script>
{% endblock %}

<style>

    a{
        cursor: pointer;
    }

    .btn.disabled, .btn[disabled] {
        cursor: not-allowed;

    }

    .help-inline-error{
        padding: 5px;
        color: #b94a48;
    }

    .pesquisa-resultado{
        width: 260px;
    }

    #container_mapa {
        z-index: 1;
        background-color: #FFFFFF;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }
    #container_mapa .row {
        margin: 0px;
    }

    #container_mapa{
        display: none;
        margin-top: 0px;
        height: 100%;
    }

    #mapa {
        background-color: #212121 !important;
        width: calc(100% - 380px);
        height: calc(100% - 0px);
        float: left;
    }

    #container_camadas_mapa {
        padding: 0px;
        padding-right: 5px;
        width: 360px;
        float: right;
        margin-top: 10px;
        margin-left: 0px;
        height: 95vh !important;
        overflow-y: auto;
    }

    #div-pontos-selecionados{
        overflow-y: auto;
        height: 270px;
    }

    #div-quadrantes-selecionados{
        max-height: 54px;
        overflow-y: scroll;
        font-size: 80%;
        line-height: 1.3em;
    }

    .checkbox input[type="checkbox"] {
        margin-top: 3px;
    }

    .modal.fade.in {
        top: 25%;
    }

    .modal-body .row, .modal-body input{
        margin: 0;
    }

    /*Ajuste no estilo das coordenadas*/
    #coord-footer{
        position: absolute;
        width: 41%;
        background: rgba(225, 225, 225, 0.95);
        bottom: 5px;
        padding-left: 25px;
    }
</style>

<div id="container_mapa"  class="form-group">
    <div class="row">
        <div id="mapa">
            <div id="popup"></div>
        </div>
        <div id="coord-footer">
            <div id="mouse-position" class="text-left"></div>
        </div>
        <div id="container_camadas_mapa" >
            <button id="finalizar-espacializacao" type="button" class="waitAjax btn btn-primary cemporcento">Finalizar espacialização</button>
            <button id="finalizar-espacializacao-pontual" type="button" class="waitAjax btn btn-primary cemporcento">Finalizar espacialização</button>
            <button id="finalizar-espacializacao-pontual-mapa-bordo" type="button" class="waitAjax btn btn-primary cemporcento">Finalizar espacialização</button>
            <hr   class="infoAreaPesca" style="margin-right: 20px;"/>
            <div class="infoAreaPesca" style="margin-top: 15px;">
                <label><strong>Área de Pesca</strong></label>
                {{ 'entidade.registro.registroArea.txtLocalPescaSimples' |trans }}: <span id="txtLocalPesca"></span><br/>
                {{ 'entidade.registro.registroArea.numDistanciaMinima' |trans }}: <span id="numDistanciaMinima"></span><br/>
                {{ 'entidade.registro.registroArea.numDistanciaMaxima' |trans }}: <span id="numDistanciaMaxima"></span><br/>
                {{ 'entidade.registro.registroArea.numProfundidadeMinima' |trans }}: <span id="numProfundidadeMinima"></span><br/>
                {{ 'entidade.registro.registroArea.numProfundidadeMaxima' |trans }}: <span id="numProfundidadeMaxima"></span><br/>
            </div>
            <hr style="margin-right: 20px;"/>

            <div class="btn-group btn-group-sm">
                <a title="Configurar camadas" type="button" class="btn btn-default" onclick="configurarCamadas()">
                    <i class="icon-align-justify"></i>
                </a>
                <a title="Reiniciar mapa" type="button" class="btn btn-default" onclick="reiniciarMapa()">
                    <i class="icon-refresh"></i>
                </a>
                <a id="habilitar_marcadores" title="Habilitar marcadores" type="button" class="btn btn-default" onclick="habilitarPontosReferencia(this)">
                    <i class="icon-map-marker"></i>
                </a>
                <a id="tools_ruler" title="Régua" type="button" class="btn btn-default" onclick="ferramentaRegua()" >
                    <i class="icon-screenshot"></i>
                </a>
                <a title="Configuração" type="button" class="btn btn-default" onclick="abrirBusca('marcador')">
                    <i class="fa fa-cog"></i>
                </a>
            </div>

            <div id="div-pontoespacializacao" style="margin-top: 15px;">
                <small>Para <b>adicionar</b> um ponto de <b>espacialização</b> clique no mapa com as teclas Ctrl + Alt pressionadas.</small>
            </div>

            <div id="div-pontoreferencia-desativado" style="margin-top: 15px;">
                <small>Para <b>adicionar</b> um ponto de referência com régua clique no mapa com a tecla Ctrl
                    pressionada ou <a class="btn-link" onclick="abrirBusca('ponto')">clique aqui</a> para procurar um
                    ponto pelo nome.
                </small>
            </div>
            <div id="div-pontoreferencia-ativado">
                <small>Para <b>mover</b> o ponto de referência clique no mapa com a tecla Ctrl pressionada.</small>
                <br/>
                <small>Para <b>remover</b> ponto de referência <a class="btn-link" onclick="removerPontoReferencia();">clique
                        aqui</a>.
                </small>
                <br/>
                <small>Latitude: <span id="span-pontoreferencia-latitude"></span></small>
                <br/>
                <small>Longitude: <span id="span-pontoreferencia-longitude"></span></small>
                <br/>
                <small>Distância: <span id="span-pontoreferencia-distancia"></span></small>
            </div>
            <div style="margin-top: 15px; margin-right: 12px;" class="selecionar-area-quadrante">
                <label>Selecionar quadrantes da área:</label>

                <select class="form-control input-sm" id="area-pesca" multiple  data-placeholder="Selecione"  >
                        <option>Carregando...</option>
                </select>
            </div>
            <div style="margin-top: 15px;" class="selecionar-area-quadrante">
                <label>Quadrantes selecionados:</label>
                <br/>
                <small><div id="div-quadrantes-selecionados"></div></small>
            </div>
            <div style="margin-top: 15px;" class="selecionar-ponto">
                <label>Pontos:</label>
                <div id="div-pontos-selecionados">
                    <div id="areaPontoMap-fields-list" data-prototype="{% filter escape %}{% include 'propesqBundle:GeoInformacao:geoInformacao_areaPonto.html.twig' with {'FF_habilitar_coordenada_diferentes_formatos': FF_habilitar_coordenada_diferentes_formatos, 'formAreaPonto': form.registroArea.areasPonto.get('prototype')} %}{% endfilter %}">
                    </div>
                    <div class="span2" style="margin:0">
                        <a href="#" id="add-another-areaPontoMap">Novo ponto</a>
                    </div>
                    <span class="help-inline"></span>
                </div>
            </div>
            <div style="margin-top: 15px;" class="selecionar-operacoes">

                <div id="div-operacoes">
                    <div id="operacaoPontoMap-fields-list" data-prototype="{% filter escape %}{% include 'propesqBundle:GeoInformacao:geoInformacao_operacaoPonto.html.twig' with {'FF_habilitar_coordenada_diferentes_formatos': FF_habilitar_coordenada_diferentes_formatos, 'formAreaPonto': form.registroArea.areasPonto.get('prototype')} %}{% endfilter %}">
                    </div>
                    <span class="help-inline"></span>
                </div>
            </div>
            <div style="margin-top: 15px;">
                <small>
                    <a class="btn-link" onclick="limparSelecaoQuadrantes()" id="limpar-selecao-quadrantes">Limpar seleção</a>
                </small>
            </div>
        </div>
    </div>
</div>

<div id="buscar-ponto" class="modal fade" tabindex="1">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title" id="titulo_referencia">Busca de pontos de referência</h4>
        <h4 class="modal-title" id="titulo_marcador" style="display: none">Configurações</h4>
    </div>
    <div class="modal-body">
        <div id="container-configuracoes" style="display: none;">

            <div class="row" style="margin-top: 5px; border-bottom: 1px solid #eee">
                <div class="span-12">
                    <label>Unidade de medida da régua</label>
                    <select name="unidade_medida" id="unidade_medida">
                        <option value="km" selected>Quilômetros</option>
                        <option value="mn">Milhas náuticas</option>
                    </select>
                </div>
                <div class="span-12">
                    <label>Formato da coordenada no footer</label>
                    <select id="changeFooter">
                        <option value="graus">Grau/Min/Seg</option>
                        <option value="decimal">Grau decimal</option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="span-12" style="padding-top: 5px">
                    <label>Pontos de referência</label>
                    <label class="checkbox" style="padding-top: 15px">
                        Exibir rótulos dos pontos
                        <input type="checkbox" name="habilitar_rotulos" id="habilitar_rotulos" value="1">
                    </label>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 15px;">
            <div class="span-12">
                <div class="input-group" style="text-align:left">
                    <input type="text" class="form-control" id="nome-ponto" placeholder="Novo ponto de referência">
                    <span class="input-group-btn">
                        <button id="btn_ponto" onclick="pesquisar('ponto');" class="btn green"><i class="fa fa-check"></i> Procurar</button>
                        <button id="btn_marcador" onclick="pesquisar('marcador');" style="display: none" class="btn green"><i class="fa fa-check"></i> Procurar</button>
                    </span>
                </div>
                <div id="pesquisa_help_message" class="help-inline help-inline-error"></div>
            </div>
        </div>
        <div class="row">
            <div class="span-6">
                <h5>Google</h5>
                <div id="resultados-google" class="pesquisa-resultado" >

                </div>
            </div>
            <div class="span-6">
                {# <h5>Meus pontos de referência</h5>
                <div id="resultados-meus-pontos" class="pesquisa-resultado" >

                </div> #}
            </div>
        </div>
        <div class="row" id="container_marcador" style="display: none; margin-top: 5px; padding-top: 15px">
            <div class="span-12">
                <div class="form-group">
                    <select class="form-control" multiple id="select_marcador" data-placeholder="Pontos a serem apresentados" > </select>
                    <span id="help_marcador" class='help-block' style="display: none">Por favor selecione um ou mais marcadores.</span>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button id="btn_selecionar_marcador" onclick="selecionarMarcadores();" class="btn blue"><i class="fa"></i> Selecionar</button>
        <button type="button" data-dismiss="modal" class="btn default">Cancelar</button>
    </div>
</div>

<div id="configurar-camadas" class="modal fade" tabindex="1">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="fecharConfigurarCamadas()"></button>
        <h4 class="modal-title">Selecione as camadas visíveis</h4>
    </div>
    <div class="modal-body">
        <div class="checkbox-list" id="lista-camadas-wms">
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn blue" onclick="fecharConfigurarCamadas()">Voltar</button>
    </div>
</div>


<!-- BEGIN WEBGIS PLUGINS -->

<script src="{{ asset('bundles/propesq/webgis/geoInformacao/plugins/openlayers/v3.17.1-dist/ol.js') }}" type="text/javascript"></script>
<script src="{{ asset('bundles/propesq/webgis/geoInformacao/webgis/LayerManager.js') }}" type="text/javascript"></script>
<script>

    var layersValorInicial;
    var areaPescaInfo = {};
    var map = null;
    var regua = new Ruler();
    //Utilizado para verificar se a mensagem de camada não carregada jpa foi exibida para não apresentação mais de uma vez na tela.
    var mensagemCamadaNaoEncontrada = [];
    var view = null;
    var layers;
    var pontoReferencia = new ReferencePoint();
    var ponto = new PointTool();
    var quadrantesSource;
    var quadrantesSourceConfig;
    var selectClick;
    var indice;
    var lista = [];
    var listaMarcador = [];
    var listaPontosReferencia = [];
    var listaPontosReferenciaAdicionais = [];
    var listaOperacoes = [];
    var draw;
    // Utilizado para controle de ferramentas, verificação de status entre ações.
    var app = {};
    //Utilizado para preenchimento do campo com focus ao pressionar Ctrl+Alt
    var ultimoElementoComFocus = null;
    var features = new Array();

    $(document).ready(function () {

        $("#select_marcador").chosen({no_results_text: "Nenhum resultado encontrado para"});
        $("#area-pesca").chosen({no_results_text: "Nenhum resultado encontrado para"});

        $("#area-pesca").on('change',  function(evt, params) {

            var listaQuadrantesArea = new Array();
            var acao = null;
            if (params.selected != undefined)
            {

                listaQuadrantesArea = params.selected.split(",");
                var adicionou = false;

                for (var i in listaQuadrantesArea){
                    var feature = quadrantesSource.getFeatureById(listaQuadrantesArea[i]);

                    if (feature) {
                        var adicionar = true;
                        selectClick.getFeatures().forEach( function(featureArr){ if(featureArr.getId() == feature.getId()){adicionar = false;} } );
                        if(adicionar){
                            selectClick.getFeatures().push(feature);
                        }
                        adicionou = true;
                    }
                }
            }
            if (params.deselected != undefined)
            {
                listaQuadrantesArea = params.deselected.split(",");
                var features = selectClick.getFeatures();
                listaQuadrantesArea.forEach( function(quadranteId){
                    var feature = quadrantesSource.getFeatureById(quadranteId);
                    if (feature) {
                        features.remove(feature)
                    }
                });


            }
        });

        $(window).resize(function(){
            $("#mapa").height(($(window).height() - 5 ));
        });

        $("#container_camadas_mapa").height(($(window).height() - 130));
        $("#mapa").height(($(window).height() - 5 ));

        $("#finalizar-espacializacao").on('click', function () {
                $('#mouse-position .custom-mouse-position').remove();
                $("#container_mapa").hide();
                $('body').css('overflow','scroll');


                $("#select_marcador").html('');
                $("#select_marcador").trigger("liszt:updated");


                removerPontoReferencia();


                var quadrantesSelecionados = new Array();
                var quadrantesSelecionadosId = new Array();
                selectClick.getFeatures().forEach( function(feature){
                    quadrantesSelecionadosId.push(feature.getId());
                    quadrantesSelecionados.push({"nome": feature.get("nome"), "vertice_superior_direito":feature.get("vertice_superior_direito")});

                });
                quadrantesDepoisDoMapa(quadrantesSelecionados, quadrantesSelecionadosId, indice, lista, map);

                disableRegua();

                map.setTarget(null);
                map = null;

                $("#mapa").html();
        });

        $("#abrirMapa").on('click', function () {
            areaPescaInfo.txtLocalPesca = $('#{{form.registroArea.txtLocalPesca.vars.id}}').val();
            areaPescaInfo.numDistanciaMinima = $('#{{form.registroArea.numDistanciaMinima.vars.id}}').val();
            areaPescaInfo.numDistanciaMaxima = $('#{{form.registroArea.numDistanciaMaxima.vars.id}}').val();
            areaPescaInfo.numProfundidadeMinima = $('#{{form.registroArea.numProfundidadeMinima.vars.id}}').val();
            areaPescaInfo.numProfundidadeMaxima = $('#{{form.registroArea.numProfundidadeMaxima.vars.id}}').val();

            $("#txtLocalPesca").html(areaPescaInfo.txtLocalPesca);
            $("#numDistanciaMinima").html(areaPescaInfo.numDistanciaMinima);
            $("#numDistanciaMaxima").html(areaPescaInfo.numDistanciaMaxima);
            $("#numProfundidadeMinima").html(areaPescaInfo.numProfundidadeMinima);
            $("#numProfundidadeMaxima").html(areaPescaInfo.numProfundidadeMaxima);

            loader('body', false);
            var malha  = 30;
            var listaIdSelecionados = new Array();

            if(arrayBlocos.length > 0 ){
                $("#div-quadrantes-selecionados").html( "Carregando..." );
                arrayBlocos.forEach(function(bloco, index){
                    if (bloco.hasOwnProperty('id')) {
                        listaIdSelecionados.push(bloco.id);
                    }else {
                        listaIdSelecionados.push(bloco);
                    }
                });
            }

            //Descomentar ao colocar em produção
            malha = $("input[name='{{ form.indTamanhoMalha.vars.full_name }}']:checked").val();

            $("#div-pontoespacializao").show();
            $("#div-pontoreferencia-desativado").show();
            $("#div-pontoreferencia-ativado").hide();
            $("#div-quadrantes-selecionados").html( "Nenhum quadrante selecionado" );
            $("#limpar-selecao-quadrantes").hide();
            $(".selecionar-area-quadrante").show();
            $("#div-quadrantes-selecionados").show();


            $("#finalizar-espacializacao-pontual").hide();
            $(".selecionar-ponto").hide();

            $(".infoAreaPesca").show();
            $("#finalizar-espacializacao-pontual-mapa-bordo").hide();
            $("#finalizar-espacializacao").show();


            $("#container_mapa").show();
            $('body').css('overflow','hidden');
            abrirMapaConfiguracaoInicial(malha, listaIdSelecionados);

            regua.setMap(map);
            pontoReferencia.setMap(map);
            ponto.setMap(map);
            obterAreas(malha);

            quadrantesSource = quadrantesSourceConfig[malha];

            quadrantesSource.on('change', function(e) {
                if (quadrantesSource.getState() == 'ready') {
                    loader('body', true);
                }
            });
        });
     //   $("#abrirMapa").trigger('click');
    });

    function adicionaPontoReferencia(){
        $("#tools_ruler").addClass("disabled");

        ferramentaRegua();

        $("#div-pontoreferencia-desativado").hide();
        $("#div-pontoreferencia-ativado").show();
        atualizarInformacaoPontoReferencia();
    }

    function removerPontoReferencia() {
        pontoReferencia.remove(function(){
            $("#tools_ruler").removeClass("disabled");
            $("#div-pontoreferencia-desativado").show();
            $("#div-pontoreferencia-ativado").hide();
        });
    }

    function atualizarInformacaoPontoReferencia(){
        var coord = pontoReferencia.getGeometry().getCoordinates();
        coord = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326')
        var lat =  coord[1].toFixed(9)
        lat = parseFloat(lat).toString().replace('.',',');

        var lng =  coord[0].toFixed(9)
        lng = parseFloat(lng).toString().replace('.',',');

        $("#span-pontoreferencia-latitude").html(lat);
        $("#span-pontoreferencia-longitude").html(lng);

    }

    function abrirMapaConfiguracaoInicial(malha,listaIdSelecionados){
        layerManager.resetLayers();

        app.Drag = function() {

            ol.interaction.Pointer.call(this, {
                handleDownEvent: app.Drag.prototype.handleDownEvent,
                handleMoveEvent: app.Drag.prototype.handleMoveEvent,
                handleUpEvent: app.Drag.prototype.handleUpEvent
            });

            this.coordinate_ = null;
            this.cursor_ = 'pointer';
            this.feature_ = null;
            this.previousCursor_ = undefined;

        };
        ol.inherits(app.Drag, ol.interaction.Pointer);


        /**
         * @param {ol.MapBrowserEvent} evt Map browser event.
         * @return {boolean} `true` to start the drag sequence.
         */
        app.Drag.prototype.handleDownEvent = function(evt) {
            if(evt.originalEvent.ctrlKey && evt.originalEvent.altKey) {
               this.selecting = true;
               return true;
            }
        };

        var ultimoPixel = null;

        app.Drag.prototype.handleMoveEvent = function(evt) {
            if(ultimoPixel != null){
                delta = Math.abs(evt.pixel[0] - ultimoPixel[0])+Math.abs(evt.pixel[1] - ultimoPixel[1]);
                if(delta < 10){
                    return;
                }
            }
            ultimoPixel = evt.pixel;

            if(this.selecting) {
                var map = evt.map;

                var feature = map.forEachFeatureAtPixel(evt.pixel,
                        function (feature) {
                            return feature;
                        });
                        if (feature) {
                            if(!evt.originalEvent.shiftKey) { //Quando Shift NÃO PRESSIONADO adiciona bloco
                                var adicionar = true;
                                selectClick.getFeatures().forEach(function (featureArr) {
                                    if (featureArr.getId() == feature.getId()) {
                                        adicionar = false;
                                    }
                                });
                                if (adicionar) {
                                    selectClick.getFeatures().push(feature);
                                }
                            }else{ //Quando Shift  PRESSIONADO remove bloco
                                var remover = false;
                                var featureIndex = -1;
                                selectClick.getFeatures().forEach(function (featureArr, index) {
                                    if (featureArr.getId() == feature.getId()) {
                                        remover = true;
                                        featureIndex = index;
                                    }
                                });
                                if (remover) {
                                    selectClick.getFeatures().removeAt(featureIndex);
                                }
                            }
                        }
                return !!feature;
            }
        };

        /**
         * @return {boolean} `false` to stop the drag sequence.
         */
        app.Drag.prototype.handleUpEvent = function() {
            this.selecting = false;
            return false;
        };

        if(map != null){
            map.setTarget("mapa")
            return;
        }
        console.log("configurando...");

        // Obtem camadas WMS
        $.ajax({
            type: "GET",
            cache: false,
            url: '{{ path('webgis_getwmslayers') }}',
            dataType: "json",
            beforeSend: function (){

            },
            success: function (groups) {


                for (var j in groups) {
                    var group = groups[j];
                    var groupLayers = new Array();
                    for (var i in group.layers) {
                        var layer = group.layers[i];
                        groupLayers.push(layer);
                    }

                    layerManager.layers.push({
                        name: group.name,
                        layers: groupLayers
                    });
                    layersValorInicial = $.extend(true, layersValorInicial, layerManager.layers);

                }

                layerManager.updateLayers();

            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log("Error");

            },
            async: true
        });
       // Fim camadas WMS.

        var estilos = new Array();
        estilos[false] = [
            new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)' // BRANCO
                }),
                stroke: new ol.style.Stroke({
                    color: 'rgba(255, 255, 255, 0.5)', // BRANCO
                    width: 1
                })
            })
        ];
        estilos[true] = [
            new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 238, 88, 0.7)'
                }),
                stroke: new ol.style.Stroke({
                    color: 'rgba(255, 238, 88, 0.5)',
                    width: 1
                })
            })
        ];

        quadrantesSourceConfig = new Array();
        quadrantesSourceConfig[malha] = new ol.source.Vector({
           url: '{{ url('blocoestatistico_geoinformacao_json' ) }}?tamanho_malha='+malha,
          // projection: 'EPSG:3857',
           format: new ol.format.GeoJSON()
        });

        view = new ol.View({
            projection: 'EPSG:3857',
            center: ol.proj.transform([-47.2, -24.4], 'EPSG:4326', 'EPSG:3857'),
            zoom: 7,
            minZoom: 4
        });

        quadrantesSourceConfig[malha+""].on('addfeature', function(event) {


            var feature = event.feature;
            for(var i = 0; i < listaIdSelecionados.length; i++){
                if(listaIdSelecionados[i] == feature.getId()){
                    selectClick.getFeatures().push(feature);
                }
            }
        });

        layers = [
            new ol.layer.Tile({
                source: new ol.source.BingMaps({
                    key: 'ArBRVdRO6N8KADd4_40dgi4YWynGgSVSZLU6Z6MlUjNy1srTwi_OOyK5BjUaMKBN',
                    imagerySet: 'Aerial'
                })
            }),
            new ol.layer.Vector({
                id: "b1",
                name: "malha_"+malha,
                source: quadrantesSourceConfig[malha],
                style: function (feature, resolution) {
                    return estilos[(feature.get('selecionado') == true)];
                },
                visible: true
            }),

            new ol.layer.Vector({
                id: "b3",
                name: "marcadores",
                source: new ol.source.Vector({
                    features: []
                })
            })
        ];

        var mousePosition = new ol.control.MousePosition({
            coordinateFormat: ol.coordinate.createStringXY(4),
            projection: 'EPSG:4326',
            className: 'custom-mouse-position',
            target: document.getElementById('mouse-position'),
            undefinedHTML: '&nbsp;'
        });

        map = new ol.Map({
            interactions: ol.interaction.defaults().extend([new app.Drag()]),
            layers: layers,
            // Improve user experience by loading tiles while animating. Will make
            // animations stutter on mobile or slow devices.
            loadTilesWhileAnimating: true,
            target: 'mapa',
            controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                    collapsible: false
                })
            }).extend([mousePosition]),
            view: view
        });

        //Adicionado ZIndex para considerar camadas WMS;
        if (ol.Map.prototype.getLayer === undefined) {
            ol.Map.prototype.getLayer = function (id) {
                var layer;
                this.getLayers().forEach(function (lyr) {
                    if (id == lyr.get('id')) {
                        layer = lyr;
                    }
                });
                return layer;
            }
        }

        map.getLayer('b1').setZIndex(100001);

        map.getLayer('b3').setZIndex(100003);

        var layersMalha = new Array();

        map.getLayers().forEach(
                function(layer){
                    if( (layer.get("name")+"").indexOf("malha_") != -1 ){
                        layersMalha.push(layer);
                    }
                }
        );

        selectClick = new ol.interaction.Select({
            condition: ol.events.condition.click,
            toggleCondition: ol.events.condition.click,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(253, 220, 20, 0.9)' // amarelo

                }),
                stroke: new ol.style.Stroke({
                    color: 'rgba(253, 220, 20, 0.5)', // amarelo
                    width: 1
                })
            }),
            layers: layersMalha
        });

        selectClick.getFeatures().on("add", function(evt){
            //var feature = evt.element;

            atualizaTextoQuadrantes();
        });

        selectClick.getFeatures().on("remove", function(evt){

            //evt.stopPropagation();
            //evt.preventDefault();
            atualizaTextoQuadrantes();
        });
        map.addInteraction(selectClick);
    }

    function configurarCamadas(){
        mensagemCamadaNaoEncontrada = [];
        $("#configurar-camadas").modal({
            keyboard: false,
            backdrop: 'static'
        });
        $("#lista-camadas-wms").html("");

        var tmp = '<label class="checkbox"><input type="checkbox" name="camada-wms" value="__CAMADA__" __ATIVA__/>__NOME__</label>';
        var groupTmp = '<label >__NOME__</label>';
        for(var i in layerManager.layers) {
            var layerGroup = layerManager.layers[i];

            $("#lista-camadas-wms").append(groupTmp.replace("__NOME__", layerGroup.name));

            for (var j in layerGroup.layers) {
                var camadaWMS = layerGroup.layers[j];

                var componente = tmp.replace("__CAMADA__", camadaWMS.id);
                componente = componente.replace("__NOME__", camadaWMS.name);
                if (camadaWMS.visible) {
                    componente = componente.replace("__ATIVA__", "checked='checked'");
                } else {
                    componente = componente.replace("__ATIVA__", "");
                }
                $("#lista-camadas-wms").append(componente);
            }
        }
    }

    function fecharConfigurarCamadas(){
        var componentes = $("input[name=camada-wms]");
        var qtdAtivas = 0;
        for(var i=componentes.length-1; i >=0; i--) {
            var camadaID = $(componentes[i]).val();

            if(componentes[i].checked){
                layerManager.getLayer(camadaID).visible = true;
                qtdAtivas++
            }else{
                layerManager.getLayer(camadaID).visible = false;
            }
        }
        if(!!layerManager.layers) {
            if(!!map) {
                layerManager.updateLayers();
            }
        }
    }

    function reiniciarMapa(){
        var copia =     $.extend(true, {}, layersValorInicial);
        layerManager.layers = copia ;
        map.setView(new ol.View({
            projection: 'EPSG:3857',
            center: ol.proj.transform([-47.2, -24.4], 'EPSG:4326', 'EPSG:3857'),
            zoom: 7,
            minZoom: 4
        }));

        layerManager.updateLayers();
    }

    function abrirBusca(tipo){
        $("#titulo_referencia").hide();
        $("#titulo_marcador").hide();
        $("#btn_marcador").hide();
        $("#btn_ponto").hide();
        $("#container_marcador").hide();
        $("#help_marcador").hide();
        $("#btn_selecionar_marcador").hide();
        $("#container-configuracoes").hide();

        if (tipo == 'ponto') {
            $("#titulo_referencia").show();
            $("#btn_ponto").show();
        } else {
            $("#titulo_marcador").show();
            $("#btn_marcador").show();
            $("#container_marcador").show();
            $("#btn_selecionar_marcador").show();
            $("#container-configuracoes").show();
        }

        $("#buscar-ponto").modal({
            keyboard: false,
            backdrop: 'static'
        });
        listaMarcador = [];

        //$("#select_marcador").select2("val", "");
        $("#select_marcador").html("");
        $("#select_marcador").trigger("liszt:updated");
        $("#resultados-google").html("");
        $("#resultados-meus-pontos").html("");
    }

    function pesquisar(tipo) {
        var nomePonto = $("#nome-ponto").val();
        var tmp = "";

        $("#pesquisa_help_message").html("");
        $("#resultados-google").html("");
        $("#resultados-meus-pontos").html("");
        if (!!nomePonto) {


            if (tipo == "ponto") {
                tmp = "<a class='btn-link' onclick='selecionarPonto(__LAT__, __LNG__)'>__NOME__</a>";
            } else {
                tmp = '<a class="btn-link" onclick="adicionarMarcador(__LAT__, __LNG__, \'__NOME__\', this)">__NOME__</a>';
            }

            $.ajax({
                type: "GET",
                cache: false,
                url: "https://maps.googleapis.com/maps/api/geocode/json",
                dataType: "json",
                beforeSend: function (xhr) {

                },
                success: function (res) {
                    $("#resultados-google").html("");
                    if (res.status == "OK") {
                        for (i in res.results) {
                            var componente = tmp;
                            var endereco = res.results[i].formatted_address;
                            componente = componente.replace("__NOME__", endereco);
                            componente = componente.replace("__NOME__", endereco);
                            componente = componente.replace("__LAT__", res.results[i].geometry.location.lat);
                            componente = componente.replace("__LNG__", res.results[i].geometry.location.lng);
                            $("#resultados-google").append(componente + "<br/>");
                        }
                    } else {
                        $("#resultados-google").append("Nenhum registro encontrado.");
                    }

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log("Erro");
                },
                data: {
                    key: "{{ key_Gmaps }}",
                    address: nomePonto,
                    sensor: "false"
                },
                async: true
            });

            // Desativada a funcionalidade de busca de pontos cadastrados, uma vez que todos os pontos são exibidos por padrão
            // $.ajax({
            //     type: "GET",
            //     cache: false,
            //     url: '{{ url('pontoreferencia_json') }}',
            //     dataType: "json",
            //     beforeSend: function (xhr) {

            //     },
            //     success: function (res) {
            //         $("#resultados-meus-pontos").html("");
            //         if (res.status == "OK") {
            //             for (i in res.results) {
            //                 var componente = tmp;
            //                 var endereco = res.results[i].formatted_address;
            //                 componente = componente.replace("__NOME__", endereco);
            //                 componente = componente.replace("__NOME__", endereco);
            //                 componente = componente.replace("__LAT__", res.results[i].geometry.location.lat);
            //                 componente = componente.replace("__LNG__", res.results[i].geometry.location.lng);
            //                 $("#resultados-meus-pontos").append(componente + "<br/>");
            //             }
            //         } else {
            //             $("#resultados-meus-pontos").append("Nenhum registro encontrado.");
            //         }

            //     },
            //     error: function (xhr, ajaxOptions, thrownError) {
            //         console.log("Erro");

            //     },
            //     data: {
            //         address: nomePonto
            //     },
            //     async: true
            // });
        }else{
            $("#pesquisa_help_message").append("Você deve informar um termo para pesquisa.");

        }
    }

    function selecionarPonto(lat, lng){
        $("#nome-ponto").val("");
        $("#buscar-ponto").modal('hide');
        //var coordinate = new ol.Coordinate();
        var coordinate = ol.proj.transform([lng, lat], 'EPSG:4326', 'EPSG:3857')
        pontoReferencia.setCoordinate(coordinate);
        map.getView().setCenter( coordinate );
        adicionaPontoReferencia();
    }

    function selecionarMarcadores() {
        $("#help_marcador").hide();
        var pontosSelecionados = $("#select_marcador").val();
        var habilitarRotulos = $('#habilitar_rotulos').is(':checked');
        var lista = $("#select_marcador").find("option");
        var listaMarcadores = [];

        // Zera lista de marcadores
        listaPontosReferenciaAdicionais = [];

        var layerMarcadores = null;;
        map.getLayers().forEach(
                function(layer) {
                    if (layer.get("name") == "marcadores"){
                        layerMarcadores = layer;
                    }
                }
        );
        layerMarcadores.getSource().clear();

        if (pontosSelecionados) {
            for (var i = 0; i < pontosSelecionados.length; i++) {
                var coordenada = pontosSelecionados[i];
                for (var j = 0; j < lista.length; j++) {
                    var opcao = lista[j];

                    if (coordenada === opcao.value) {
                        var label = '';
                        var nome = $(opcao).html();
                        var latLng = coordenada.split(";");

                        var coordinate = ol.proj.transform([parseFloat(latLng[1]), parseFloat(latLng[0])], 'EPSG:4326', 'EPSG:3857');
                        var marcadorFeature = new ol.Feature({
                            geometry: new ol.geom.Point(coordinate)
                        });

                        if (habilitarRotulos === true) {
                            label = nome;
                        }

                        var marcadorIcone = createMarkerStyle(label);

                        marcadorFeature.setStyle(marcadorIcone);
                        marcadorFeature.setId('m.'+coordenada+i+j);

                        listaMarcadores.push(marcadorFeature)

                        listaPontosReferenciaAdicionais.push(marcadorFeature);
                    }
                }
            }
        }

        // Adiciona marcadores
        layerMarcadores.getSource().addFeatures(listaPontosReferenciaAdicionais);

        if (listaPontosReferencia.length > 0 && $('#habilitar_marcadores').hasClass('btn-success')) {
            for (var i = 0; i < listaPontosReferencia.length; i++) {
                if (habilitarRotulos == true) {
                    listaPontosReferencia[i].getStyle().getText().setText(listaPontosReferencia[i].get('_label'));
                } else {
                    listaPontosReferencia[i].getStyle().getText().setText('');
                }
            }

            layerMarcadores.getSource().addFeatures(listaPontosReferencia);
        }

        // Altera a unidade de medida da régua
        regua.setMeasureUnit($('#unidade_medida').val());

        $("#buscar-ponto").modal('hide');
    }

    function adicionarMarcador(lat, lng, nome, componente) {
        $("#nome-ponto").val("");
        var lista = $("#select_marcador").find("option");
        var encontrou = false;

        if (lista) {
            for (var i = 0; i < lista.length; i++) {
                if (lista[i].value === lat + ";" + lng) {
                    encontrou = true;
                    break;
                }
            }
        }

        if (!encontrou) {
            var valoresSelecionados = $("#select_marcador").val();

            if(!!!valoresSelecionados){
                valoresSelecionados = new Array();
            }

            var valor = lat + ';' + lng ;
            var opcao = '<option value="' + valor + '">' + nome + '</option>';

            valoresSelecionados.push(valor);
            listaMarcador.push({id:'lat;lng', value:nome});
            $("#select_marcador").append(opcao);
            $("#select_marcador").val(valoresSelecionados);
            $("#select_marcador").trigger("liszt:updated");

            var divElementos = $(componente).closest("div");
            var br = $(componente).next();
            br.remove();
            $(componente).remove();

            if ($(divElementos).find("a").length == 0) {
                $(divElementos).append("Todos os registros desta pesquisa foram adicionados.");
            }
        }
    }

    function atualizaTextoQuadrantes(){
        var txt = "";
        var virgula = "";
        selectClick.getFeatures().forEach( function(feature){ txt += virgula + feature.get("nome"); virgula = ", "; } );
        $("#div-quadrantes-selecionados").html( txt );
        if(txt == ""){
            $("#limpar-selecao-quadrantes").hide();
        }else{
            $("#limpar-selecao-quadrantes").show();
        }
    }

    function limparSelecaoQuadrantes() {
        $("#area-pesca").val('')
        $("#area-pesca").trigger("liszt:updated");
        selectClick.getFeatures().clear();
    }

    function quadrantesDepoisDoMapa(arrayNomes,arrayIds, index, list, map){
        var size = arrayNomes.length;
        var lista = [];
        var listaIds = [];

        $("#tag_malhas_"+index+"_tagsinput").find(".tag").remove();
        $("#tag_malhas_"+index).val("");
        $("#valor_malha_"+index).val("");

        arrayBlocos = new Array();
        $('.unstyled').html('<li class="nenhum">Nenhum quadrante adicionado.</li>');
        for (var i = 0; i < size; i++) {
            if (arrayNomes[i].nome != "" && arrayNomes[i].nome != undefined && arrayIds[i] != "" && arrayIds[i] != undefined && !isNaN(arrayIds[i])) {
                    var isOnArray = false;
                    var bloco = {};
                    bloco.id = arrayIds[i];
                    bloco.nome =  arrayNomes[i].nome;
                    bloco.vertice_superior_direito=  arrayNomes[i].vertice_superior_direito;
                    for(var i in arrayBlocos){
                        if(arrayBlocos[i] == bloco.id || arrayBlocos[i].id == bloco.id){
                            isOnArray = true;
                            break;
                        }
                    }
                    if(!isOnArray){
                        arrayBlocos.push(bloco.id);
                        $('.unstyled > .nenhum').remove();
                        $('.unstyled').append(
                                '<li style="line-height: 24px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;"><span style="float: left;">'
                                +bloco.nome+' <b>(vértice: '
                                + bloco.vertice_superior_direito.replace("\\", "").replace("\\", "")
                                +')</b> </span> <button type="button" class="btn btn-mini btn-danger" cydata="btnRemoverBloco'+$('.unstyled > li[class!=nenhum]').length+'" style="float: right; margin-top: 2px;" onclick="removeBloco(this,'+bloco.id+')" href="" class="remover">Remover</button></li>')
                        $('#buscarMalha').val('').focus();
                    }

                //$("#tag_malhas_"+index).addTag(arrayNomes[i]);
                lista.push({id:arrayIds[i], text:arrayNomes[i]});
                listaIds.push(arrayIds[i]);
            }
        }
    }

    function obterAreas(tamanho){
        $.ajax({
            type: "GET",
            cache: false,
            url: '{{ url('areapesca_geoinformacao_json') }}',
            dataType: "json",
            beforeSend: function ( xhr ) {

            },
            success: function(res) {
                var areaPesca = $("#area-pesca");
                areaPesca.html("");
                if(res.status == "OK"){
                    var option = '';


                    jQuery.each(res.results, function(index,obj){
                        option = '<option value="'+obj.blocos+'">'+obj.nome+'</option>';
                        areaPesca.append(option);
                    });
                    $(areaPesca).attr('data-placeholder', 'Selecione.');
                    areaPesca.removeAttr('disabled' );

                    areaPesca.trigger("liszt:updated");
                }else{
                    $(areaPesca).attr('data-placeholder', 'Nenhuma área  encontrada.');

                    areaPesca.attr('disabled', 'disabled');
                    areaPesca.trigger("liszt:updated");
                }

            },
            error: function(xhr, ajaxOptions, thrownError) {
                console.log("Erro");
            },
            data: {
                tamanho_malha: tamanho
            },
            async: true
        });
    }

    /* Verificar */
    function reiniciarRegua(){
       $("#tools_ruler").addClass('active btn-success');
       $("#tools_ruler i").addClass('icon-white');
       $(".tooltip-static").remove();
    }

    function disableRegua() {
        regua.resetRuler(function () {
            regua.disableRuler(function() {
                $("#tools_ruler").removeClass('active btn-success');
                $("#tools_ruler i").removeClass('icon-white');
                $(".tooltip-static").remove();
            });
        });
    }

    function ferramentaRegua(){
        if(pontoReferencia.isActive()){
            disableRegua();
        }else if(regua.isActive()){
            disableRegua();
        }else {
            ativarRegua();
        }
    }

    function exibirInformacoesAreaPescaTextual(areaPescaInfo){
        var naoInformado  = '<small><i>(Não Informado)</i></small>';
        $("#txtLocalPesca").html(naoInformado);
        $("#numDistanciaMinima").html(naoInformado);
        $("#numDistanciaMaxima").html(naoInformado);
        $("#numProfundidadeMinima").html(naoInformado);
        $("#numProfundidadeMaxima").html(naoInformado);

        if(!!areaPescaInfo.txtLocalPesca && areaPescaInfo.txtLocalPesca.length > 0){
            $("#txtLocalPesca").html(areaPescaInfo.txtLocalPesca);
        }

        if(!!areaPescaInfo.numDistanciaMinima && areaPescaInfo.numDistanciaMinima.length > 0) {
            $("#numDistanciaMinima").html(areaPescaInfo.numDistanciaMinima);
        }

        if(!!areaPescaInfo.numDistanciaMaxima && areaPescaInfo.numDistanciaMaxima.length > 0) {
            $("#numDistanciaMaxima").html(areaPescaInfo.numDistanciaMaxima);
        }

        if(!!areaPescaInfo.numProfundidadeMinima && areaPescaInfo.numProfundidadeMinima.length > 0) {
            $("#numProfundidadeMinima").html(areaPescaInfo.numProfundidadeMinima);
        }

        if(!!areaPescaInfo.numProfundidadeMaxima && areaPescaInfo.numProfundidadeMaxima.length > 0) {
            $("#numProfundidadeMaxima").html(areaPescaInfo.numProfundidadeMaxima);
        }
    }

    function ativarRegua(){
        var unidadeMedidaRegua = $('#unidade_medida').val();

        regua.resetRuler(function(){
            reiniciarRegua();
        });

        regua.setMeasureUnit(unidadeMedidaRegua);
    }

    function habilitarPontosReferencia(btn) {
        // habilita mensagem "Carregando..."
        loader('body', false);

        var btn = $(btn);
        var habilitarRotulos = $('#habilitar_rotulos').is(':checked');

        var layerMarcadores = layers.find(x => x.get('name') == 'marcadores');

        if (btn.hasClass('btn-success')) {
            btn.removeClass('btn-success');

            layerMarcadores.getSource().clear();

            // Adiciona marcadores adicionais após limpar a layer
            if (listaPontosReferenciaAdicionais.length > 0) {
                layerMarcadores.getSource().addFeatures(listaPontosReferenciaAdicionais);
            }

            loader('body', true);
            return;
        }

        // "Cache" p/ não ter necessidade de carregar novamente a lista de pontos de referência
        if (listaPontosReferencia.length > 0) {
            for (var i = 0; i < listaPontosReferencia.length; i++) {
                if (habilitarRotulos == true) {
                    listaPontosReferencia[i].getStyle().getText().setText(listaPontosReferencia[i].get('_label'));
                } else {
                    listaPontosReferencia[i].getStyle().getText().setText('');
                }
            }

            layerMarcadores.getSource().addFeatures(listaPontosReferencia);

            if (!btn.hasClass('btn-success')) {
                btn.addClass('btn-success');
            }

            loader('body', true);
            return;
        }

        $.ajax({
            type: "GET",
            cache: false,
            url: "{{ path('webgis_getlayer') }}",
            dataType: "json",
            beforeSend: function (xhr) {

            },
            success: function (res) {
                var geojsonFormat = new ol.format.GeoJSON();
                var features = geojsonFormat.readFeatures(res, {featureProjection: 'EPSG:3857'});

                for (var i = 0; i < features.length; i++) {
                    features[i].setStyle(createMarkerStyle((habilitarRotulos ? features[i].get('_label') : '')));
                }

                listaPontosReferencia = features;

                layerMarcadores.getSource().addFeatures(listaPontosReferencia);

                if (!btn.hasClass('btn-success')) {
                    btn.addClass('btn-success');
                }

                loader('body', true);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log("Erro");

                loader('body', true);
            },
            data: {
                layer: 'ponto_referencia',
                url_parameters: '{"tipo_rotulo":"1"}'
            },
            async: true
        });
    }

    function createMarkerStyle(label) {
        return new ol.style.Style({
            image: new ol.style.Icon(({
                scale: .6,
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 1,
                src:  '{{ asset('bundles/propesq/webgis/img/marker-large.png') }}'
            })),
            text: new ol.style.Text({
                textAlign: 'start',
                textBaseline: 'top',
                font: 'normal 12px Arial',
                text: label,
                fill: new ol.style.Fill({color: '#ffffff'}),
                stroke: new ol.style.Stroke({color: '#000000', width: parseInt(3, 10)}),
                offsetX: parseInt(0, 10),
                offsetY: parseInt(0, 10),
                rotation: parseFloat(0)
            })
        });
    }
</script>