{% 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>
{% 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: 15px;
        width: 321px;
        float: right;
        margin: 21px;
        margin-left: 0px;
        height: calc(100% - 50px);
        overflow-y: auto;
    }

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

    .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;
    }
</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="btn btn-primary cemporcento">Finalizar</button>
            <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 title="Buscar marcadores" type="button" class="btn btn-default" onclick="abrirBusca('marcador')"><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>
            </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;" class="selecionar-area-quadrante">
                <label>Quadrantes selecionados:</label>
                <br/>
                <small><div id="div-quadrantes-selecionados"></div></small>
            </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">Busca de marcadores</h4>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="span-12">
                <div class="input-group" style="text-align:left">
                    <input type="text" class="form-control" id="nome-ponto" placeholder="Nome do 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: 15px">
            <div class="form-group" style="margin-left: 30px;">
                <select class="form-control" multiple id="select_marcador" data-placeholder="Selecione" >

                </select>
                <span id="help_marcador" class='help-block' style="display: none">Por favor selecione um ou mais marcadores.</span>
            </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 line;
    var quadrantesSource;
    var pontosSource;
    var pontosSourceConfig;
    var quadrantesSourceConfig;
    var selectClick;
    var indice;
    var lista = [];
    var listaMarcador = [];

    var listaOperacoes = [];


    var draw;
    // Utilizado para controle de ferramentas, verificação de status entre ações.
    var app = {};






    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){
                    quadrantesSelecionados.push({"nome": feature.get("nome")});
                });
                quadrantesDepoisDoMapa(quadrantesSelecionados, indice, lista, map);

                disableRegua();
                map.setTarget(null);
                map = null;

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

        $("#abrirMapa").on('click', function () {
            loader('body', false);
            var malha  = 30;
            var listaIdSelecionados = new Array();
            if(arrayBlocos.length > 0 ){
                $("#div-quadrantes-selecionados").html( "Carregando..." );
                arrayBlocos.forEach(function(bloco, index){
                        listaIdSelecionados.push(bloco);
                });
            }
            //Descomentar ao colocar em produção
            malha = $("input[name='{{ form.indTamanhoMalha.vars.full_name }}']:checked").val();
            $("#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").show();

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

            abrirMapaConfiguracaoInicial(malha, listaIdSelecionados);
            regua.setMap(map);
            pontoReferencia.setMap(map);

            quadrantesSource = quadrantesSourceConfig[malha];

            quadrantesSource.on('change', function(e) {
                if (quadrantesSource.getState() == 'ready') {
                    loader('body', true);
                }
            });

        });

    });


    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();
/*


                for (var i in layerManager.layers) {
                    map.addLayer(functionLayerOL(layer));
                    map.addLayer(layerManager.layersOL()[i]);
                }
                */
            },
            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.get('nome')){
                    var coordenada = feature.get('geometry').getLastCoordinate();
                    selectClick.getFeatures().push(feature);
                    map.getView().setCenter(coordenada);
                    map.getView().setZoom(8);
                }
            }
        });



        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: function (coord) {
                return ol.coordinate.format(coord, 'Coordenadas: Lat: {y} / Long: {x}', 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,
            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){
            atualizaTextoQuadrantes();
        });



        selectClick.getFeatures().on("remove", function(evt){
            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;
            }
        }
        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();

        if (tipo == 'ponto') {
            $("#titulo_referencia").show();
            $("#btn_ponto").show();
        } else {
            $("#titulo_marcador").show();
            $("#btn_marcador").show();
            $("#container_marcador").show();
            $("#btn_selecionar_marcador").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
            });

            $.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 lista = $("#select_marcador").find("option");
        var listaMarcadores = [];

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


        if (pontosSelecionados) {
            var marcadorIcone = new ol.style.Style({
                image: new ol.style.Icon( ({
                    anchor: [0.5, 46],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'pixels',
                    opacity: 1,
                    src:  '{{ asset('bundles/propesq/webgis/img/marker-large.png') }}'
                }))
            });



            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 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)
                        });
                        marcadorFeature.setStyle(marcadorIcone);
                        listaMarcadores.push(marcadorFeature)
                        layerMarcadores.getSource().addFeature(marcadorFeature);
                    }
                }
            }
        }

        $("#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 = [];

        $('#listaQuadrantes').html("");


        arrayBlocos = new Array();

        for (var i = 0; i < size; i++) {
            if (arrayNomes[i].nome != "" && arrayNomes[i].nome != undefined  ) {
                var bloco  = arrayNomes[i].nome;
                arrayBlocos.push(bloco);
                $('#listaQuadrantes').append("<tr data-quadrante='"+bloco+"'><td>"+bloco+"</td>" +
                        "<td><input onkeyup='vProfundidade(this)' type='text' data-quadrante='"+bloco+"' class='sobreposicao'></td></tr>");
                $('#quadrantes').removeClass('hidden');

                //Faz a lista com as sobreposicoes salvas no banco setando no input de acordo com o quadrante
                $('.sobreposicao').each(function(idx){
                    var $sobreposicao = this;
                    var quadrante = $(this).data('quadrante');
                    if(sobreposicoes.length > 0) {

                        for (var i = 0 in sobreposicoes) {
                            var sobreposicao = sobreposicoes[i];
                            if (sobreposicao.bloco == quadrante) {

                                $($sobreposicao).val(sobreposicao.sobreposicao.replace('.', ","));
                                break;
                            } else {
                                $($sobreposicao).val('100,00');
                            }
                        }
                    }else{
                        $($sobreposicao).val('100,00');
                    }
                });


            }
        }
    }




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


    }


    function disableRegua() {
        regua.disableRuler(function () {

            $("#tools_ruler").removeClass('active btn-success');
            $("#tools_ruler i").removeClass('icon-white');
        });
    }


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




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

        });
    }

</script>