{% set id = id is defined ? id : '$$name$$' %}
<div class="areaPontoMap-container" id="areaPontoMap-container-{{id}}" style="padding-bottom: 5px;">
    <div class="row-fluid">
        <div class="span12" style="padding-left: 7px">
            <div id="map_{{ id }}_formato_container" class="input-prepend" style="{% if FF_habilitar_coordenada_diferentes_formatos == "nao_habilitar" %} display:none;{% endif %}">
                <span id="map_{{ id }}_format_span" class="add-on" style="margin-right: -5px;">Formato&nbsp;&nbsp;</span>
                <select
                        id="map_{{ id }}_formato"
                        name="map_{{ full_name }}[formato]"
                >
                    <option value="" class="hide"></option>
                    <option value="1">GG°MM'SS,SSS''N/S</option>
                    <option value="2">GG°MM'SS''N/S</option>
                    <option value="3">GG°MM,MMM'N/S</option>
                    <option value="4">{{ 'GG,DDD...' | trans }}</option>
                </select>
            </div>
        </div>

        <div id="map_{{ id }}_geoPonto_lat_container" class="input-prepend span10">
                <span id="map_{{ id }}_geoPonto_lat_span" class="add-on" style="width: 20px">Lat</span><input
                        class="hasfocus wf2_notBlank wf2_defaultValue wf2_lostFocus" type="text"
                        id="map_{{ id }}_geoPontolat"
                        disabled="disabled"
                        >
                <div id="map_{{ id }}_geoPonto_lat_error"
                     style="color: rgb(185, 74, 72); height: 40px; display: none; max-width: 230px; width: 264px;"></div>
            </div>
            <div id="map_{{ id }}_geoPonto_lng_container" class="input-prepend span10">
                <span id="map_{{ id }}_geoPonto_lng_span" class="add-on" style="width: 20px">Lon</span><input
                        class="insertaction wf2_notBlank wf2_lostFocus wf2_notDefaultValue" type="text"
                        id="map_{{ id }}_geoPontolng"
                        disabled="disabled"
                        >
                <div id="map_{{ id }}_geoPonto_lng_error"
                     style="color: rgb(185, 74, 72); height: 40px; display: none; max-width: 230px; width: 267px;">

                </div>
                <script>
                    var isCoordenadaValida = true;
                    function showPoint(id, formato, latitude, longitude){

                        array = reverteCoordenadas(formato, false, latitude, longitude );
                        setPinOnMap({
                            "id": id,
                            "formato": formato,
                            "latitude": array['lat'],
                            "longitude": array['lng']
                        });
                    }
                    function removePoint(id, removeUltimoElementoFocus){
                        if(removeUltimoElementoFocus) {
                            ultimoElementoComFocus = null;
                        }

                        var feature = pontosSourceConfig.getFeatureById(id);
                        if (feature) {

                            pontosSourceConfig.removeFeature(feature);
                        }
                    }

                    $(document).ready(function(){
                        $lat = $('#map_{{ id }}_geoPontolat');
                        $lng = $('#map_{{ id }}_geoPontolng');

                        var tipo = $('#map_{{ id }}_formato').val();
                        var localStorageFormat = localStorage.getItem("lastFormat");
                        if(!localStorageFormat){
                            localStorage.setItem("lastFormat", '2');
                            localStorageFormat = '2';
                        }
                        if(!tipo){
                            tipo = localStorageFormat;
                        }
                        $('#map_{{ id }}_formato option[value="'+tipo+'"]').attr('selected','selected');
                        $('#map_{{ id }}_formato').data('formatoAnterior', tipo);
                        var lat = $lat.val();
                        var lng = $lng.val();
                        if(lat && lng) {
                            array = converteCoordenadas(tipo, lat, lng);
                            $lat.val(array['lat']);
                            $lng.val(array['lng']);
                        }
                        setMaskLatLngGeoInformacao(tipo, '{{ id }}');

                        $(".remover-area-ponto-map").live('click', function(){
                            var featureId = $(this).attr('id').match(/[\d]+$/);
                            removePoint(featureId, true);
                        });

                        $(window).bind("resize", resizeWindow);
                        function resizeWindow( e ) {
                            if ($('#map_{{ id }}_geoPonto_lat_span').width() + $('#map_{{ id }}_geoPontolat').width() == 203) {
                                $('#map_{{ id }}_geoPonto_lat_error').width(170);
                            } else {
                                $('#map_{{ id }}_geoPonto_lat_error').width($('#map_{{ id }}_geoPonto_lat_span').width() + $('#map_{{ id }}_geoPontolat').width());
                            }

                            if ($('#map_{{ id }}_geoPonto_lng_span').width() + $('#map_{{ id }}_geoPontolng').width() == 205) {
                                $('#map_{{ id }}_geoPonto_lng_error').width(170);
                            } else {
                                $('#map_{{ id }}_geoPonto_lng_error').width($('#map_{{ id }}_geoPonto_lng_span').width() + $('#map_{{ id }}_geoPontolng').width());
                            }
                        }

                        if ($('#map_{{ id }}_geoPonto_lat_span').width() + $('#map_{{ id }}_geoPontolat').width() == 203) {
                            $('#map_{{ id }}_geoPonto_lat_error').width(170);
                        } else {
                            $('#map_{{ id }}_geoPonto_lat_error').width($('#map_{{ id }}_geoPonto_lat_span').width() + $('#map_{{ id }}_geoPontolat').width());
                        }

                        if ($('#map_{{ id }}_geoPonto_lng_span').width() + $('#map_{{ id }}_geoPontolng').width() == 205) {
                            $('#map_{{ id }}_geoPonto_lng_error').width(170);
                        } else {
                            $('#map_{{ id }}_geoPonto_lng_error').width($('#map_{{ id }}_geoPonto_lng_span').width() + $('#map_{{ id }}_geoPontolng').width());
                        }

                        $("#map_{{ id }}_geoPontolng").focusout(function (){
                            validaCamposmap_{{ id }}_geoPonto();
                        });

                        $("#map_{{ id }}_geoPontolat").focusout(function (){
                            validaCamposmap_{{ id }}_geoPonto();
                        });
                    });

                    $('#map_{{ id }}_formato').on('change', function () {
                        var formatoAnterior = $(this).data('formatoAnterior');
                        var formatoFuturo = $(this).val();
                        $(this).data('formatoAnterior', formatoFuturo);
                        $lat = $('#map_{{ id }}_geoPontolat');
                        $lng = $('#map_{{ id }}_geoPontolng');
                        var lat = $lat.val();
                        var lng = $lng.val();


                        var hasErrorLat = true;
                        var hasErrorLng = true;
                        if(formatoAnterior == 4){
                            hasErrorLat = !pointFormats.GD.latitude.validate(lat, $lat);
                            hasErrorLng = !pointFormats.GD.longitude.validate(lng, $lng);

                        }else{
                            hasErrorLat = !pointFormats.GMS.latitude.validate(lat, $lat);
                            hasErrorLng = !pointFormats.GMS.longitude.validate(lng, $lng);
                        }

                        if(hasErrorLat){
                            lat = '';
                        }

                        if(hasErrorLng){
                            lng = '';
                        }




                        setTimeout(function () {
                            if(lat && lng) {
                                var array = reverteCoordenadas(formatoAnterior, formatoFuturo, lat, lng);
                                $('#map_{{ id }}_geoPontolat').val(array['lat']);
                                $('#map_{{ id }}_geoPontolng').val(array['lng']);

                                /*Atualiza o formato caso usuário mude após selecionar ponto*/

                                setPinOnMap({
                                    "id": {{ id }},
                                    "formato": formato,
                                    "latitude": reverteCoordenadas(formatoFuturo, null, array['lat'], array['lng'])['lat'],
                                    "longitude": reverteCoordenadas(formatoFuturo, null, array['lat'], array['lng'])['lng']
                                });

                            }
                        },100);
                        var formato = $(this).val();
                        if (typeof(Storage) !== "undefined") {
                            localStorage.setItem("lastFormat", formato);
                        }
                        setMaskLatLngGeoInformacao(formato, '{{ id }}');
                    });

                    function setMaskLatLngGeoInformacao(tipo, id) {
                        $lat = $('#map_'+id+'_geoPontolat');
                        $lng = $('#map_'+id+'_geoPontolng');
                        $lat.unmask();
                        $lng.unmask();
                        $lat.removeAttr("placeholder");
                        $lng.removeAttr("placeholder");
                        if(tipo) {
                            $lat.removeAttr("disabled");
                            $lng.removeAttr("disabled");
                            if (tipo == "1") {
                                $lat.attr("placeholder", "GG°MM'SS,SSS''N/S");
                                $lng.attr("placeholder", "GGG°MM'SS,SSS''W/E");
                                maskLat = "GG°MM'SS,SSS''C";
                                maskLng = "GGG°MM'SS,SSS''C";
                            } else if (tipo == "2") {
                                $lat.attr("placeholder", "GG°MM'SS''N/S");
                                $lng.attr("placeholder", "GGG°MM'SS''W/E");
                                maskLat = "GG°MM'SS''C";
                                maskLng = "GGG°MM'SS''C";
                            } else if (tipo == "3") {
                                $lat.attr("placeholder", "GG°MM,MMM'N/S");
                                $lng.attr("placeholder", "GGG°MM,MMM'W/E");
                                maskLat = "GG°MM,MMM'C";
                                maskLng = "GGG°MM,MMM'C";
                            } else if (tipo == "4") {
                                $lat.attr("placeholder", "{{ 'GG,DDD...' | trans }}");
                                $lng.attr("placeholder", "{{ 'GG,DDD...' | trans }}");
                                maskLat = "TGG,GGGDDDDDD";
                                maskLng = "TGGG,GGGDDDDDD";
                            }
                            $lat.mask(maskLat, pointFormats.GMS.latitude);
                            $lng.mask(maskLng, pointFormats.GMS.longitude);
                        }else{
                            $lat.attr("disabled", "disabled");
                            $lng.attr("disabled", "disabled");
                        }
                    }

                    function validaCamposmap_{{ id }}_geoPonto() {
                        var e = $.Event("keydown");
                        e.which = 9;
                        e.keyCode = 9;

                        var lat = true;
                        var lng = true;

                        if (eval("map_{{ id }}_geoPontolat").value != "" && !verificaCoordenada(eval("map_{{ id }}_geoPontolat").value, true)) {
                            lat = false;
                        }

                        if (eval("map_{{ id }}_geoPontolng").value != "" && !verificaCoordenada(eval("map_{{ id }}_geoPontolng").value, false)) {
                            lng = false;
                        }



                        $('#map_{{ id }}_geoPonto_lat_error').empty();
                        $('#map_{{ id }}_geoPonto_lng_error').empty();
                        $('#map_{{ id }}_geoPonto_lat_error').hide();
                        $('#map_{{ id }}_geoPonto_lng_error').hide();

                        if (lat && lng) {
                            $("#map_{{ id }}_geoPontolng").setError(false);
                            isCoordenadaValida = true;

                            if(eval("map_{{ id }}_geoPontolat").value != "" && eval("map_{{ id }}_geoPontolng").value != "") {

                                showPoint('{{ id }}', eval("map_{{ id }}_formato").value, eval("map_{{ id }}_geoPontolat").value, eval("map_{{ id }}_geoPontolng").value);
                            }else{
                                removePoint('{{ id }}', false);
                            }
                        } else {
                            if (!lat) {
                                var html = '<div class="alert alert-error">Valor inválido para latitude.</div>';
                                $('#map_{{ id }}_geoPonto_lat_error').append(html);
                                $('#map_{{ id }}_geoPonto_lat_error').show();
                                isCoordenadaValida = false;
                            }

                            if (!lng) {
                                var html = '<div class="alert alert-error">Valor inválido para longitude.</div>';
                                $('#map_{{ id }}_geoPonto_lng_error').append(html);
                                $('#map_{{ id }}_geoPonto_lng_error').show();
                                isCoordenadaValida = false;
                            }
                        }

                        if (isCoordenadaValida && eval("map_{{ id }}_geoPontolat").value != "" && eval("map_{{ id }}_geoPontolng").value == "") {
                            var html = '<div class="alert alert-error">Por favor infornar a coordenada para longitude.</div>';
                            $('#map_{{ id }}_geoPonto_lng_error').append(html);
                            $('#map_{{ id }}_geoPonto_lng_error').show();
                            isCoordenadaValida = false;
                        } else if (isCoordenadaValida && eval("map_{{ id }}_geoPontolat").value == "" && eval("map_{{ id }}_geoPontolng").value != "") {
                            var html = '<div class="alert alert-error">Por favor infornar a coordenada para latitude.</div>';
                            $('#map_{{ id }}_geoPonto_lat_error').append(html);
                            $('#map_{{ id }}_geoPonto_lat_error').show();
                            isCoordenadaValida = false;
                        }

                        if(!isCoordenadaValida){
                            removePoint('{{ id }}', false);
                        }
                    }



                    map_{{ id }}_geoPontolat = document.getElementById('map_{{ id }}_geoPontolat');
                    map_{{ id }}_geoPontolng = document.getElementById('map_{{ id }}_geoPontolng');
                </script></div>

        <div class="span1" >
            <a href="javascript:;" id="remover-areaPontoMap-{{id}}" tabindex="-1" class="btn remover-area-ponto-map" onclick="$(this).parents('.areaPontoMap-container').remove()"><i class="icon-remove"></i></a>
        </div>

    </div>
</div>