var latDefault = 39.472396;
var lonDefault = -0.376629;
var latitud = 39.472396;
var longitud = -0.376629;
var sportpager = {
    tipo: "enviar",
    fechaPronostico: 0,
    fechaPronosticoString: "",
    fechaAviso: 0,
    fechaAvisoString: "",
    tempMin: -10,
    tempMax: +30,
    probLluviaMin: 0,
    probLluviaMax: 10,
    velVientoMin: 0,
    velVientoMax: 30,
    dirViento: "0,359",
    sinNubes: "true",
    ParcialmenteNublado: "true",
    Nublado: "true",
    latitud: 39.472396,
    longitud: -0.376629,
    lugar: "Valencia"
};
var SpArray = [];
var spEnviados = 0;
var spRecibidos = 0;
var id_sp = 0;
var ultimoRowIdDetalle = 0;
var ultimoRowIdRecibidos = 0;
var ultimoRowIdEnviados = 0;

$(function () {

    $('#datetimepicker1').datetimepicker({
        locale: 'es'
    });

    $("#datetimepicker1").on("dp.change", function (e) {
        console.log(e.date.format());
    });

    $('#datetimepicker2').datetimepicker({
        locale: 'es'
    });

    $("#datetimepicker2").on("dp.change", function (e) {
        console.log(e.date.format());
    });

    $('input.circle-range-select').lcnCircleRangeSelect();
    $("#circuloViento > div").removeClass("ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset");
    $("#viento").css("text-align")

    var openInbox = document.getElementById("btnRecibidos");
    openInbox.click();

    console.log("a punto de cargar sp");

    cargarSP();
    console.log("sp cargados");
    setInterval(checkSP, 10000);
    console.log("setInterval iniciado");
});

function cargarSP(){
    inicializarRecibidos();
    inicializarEnviados();

    if(ultimoRowIdRecibidos >= 0){
        openDetalle("appendID" + ultimoRowIdRecibidos);
    }else{
        if(ultimoRowEnviados >= 0){
            openDetalle("appendID" + ultimoRowEnviados);
        }else{
            openDetalle("nada");
        }
    }
}

function eliminarSportPager(){
    console.log("eliminarSportPager");
    $("#confirmaEliminar").css("display", "block");
}

function confirmaEliminarSP(){
    $("#confirmaEliminar").css("display", "none");

    jsInterfazNativa.eliminarSP(ultimoRowIdDetalle);
    cargarSP();
}

function checkSP() {
    var act = jsInterfazNativa.nuevosSPDisponibles();
    console.log("checkSP: " + act);
    if(act === 1)
    {
        cargarSP();
    }
}

function initMap(){
    console.log("initMap callback");
}

function clearSpArray(){
    while(SpArray.length) {
        SpArray.pop();
    }
}

function addToSpArray(spElement){
    SpArray.push(spElement);
}


function nuevoSportPager(){
    $("#id01").css("display", "block");

    $(".gllpLatlonPicker").each(function() {

        $obj = $("#mapa").gMapsLatLonPicker();

        $obj.params.strings.markerText = "Puedes arrastrar esta marca";
        $obj.params.defLat = latDefault;
        $obj.params.defLng = lonDefault;
        $obj.params.defZoom = 10;

        $obj.params.displayError = function(message) {
            console.log("MAPS ERROR: " + message); // instead of alert()

        };

        $obj.init( $(this) );

    });
}

function cancelarSportPager(){
    $("#id01").css("display", "none");
}


function inicializarRecibidos(){
    console.log("inicializarRecibidos");

    clearSpArray();
    $("#contenedorRecibidos").html("");
    spRecibidos = 0;

    var jsonString = jsInterfazNativa.recallSportPagers("recibido");
    var jsonArray = JSON.parse(jsonString);
    var cant = jsonArray.length;
    var elemento;
    ultimoRowIdRecibidos = -1;

    for(i=0; i<cant; i++){
        elemento = jsonArray[i].sp.nameValuePairs;
        append_SP(elemento, "#contenedorRecibidos");
        spRecibidos++;
        ultimoRowIdRecibidos = elemento.rowId;
    }

    $("#id01").css("display", "none");

    var textoRecibidos = '<i class="fa fa-inbox w3-padding-right"></i>Recibidos (' + spRecibidos + ')<i class="w3-padding-left fa fa-caret-down"></i>';
    $("#btnRecibidos").text("");
    $(textoRecibidos).appendTo("#btnRecibidos");
}

function inicializarEnviados()
{
    console.log("inicializarEnviados");
    clearSpArray();
    $("#contenedorEnviados").html("");
    spEnviados = 0;
    var jsonString = jsInterfazNativa.recallSportPagers("ENVIANDO");
    var jsonArray = JSON.parse(jsonString);
    var cant = jsonArray.length;
    var elemento;
    ultimoRowEnviados = -1;
    for(i=0; i<cant; i++){
        elemento = jsonArray[i].sp.nameValuePairs;
        append_SP(elemento, "#contenedorEnviados");
        //append_SP(elemento, "#contenedorEnviados", ++id_sp);
        spEnviados++;
        ultimoRowEnviados = elemento.rowId;
    }

    $("#id01").css("display", "none");

    var textoEnviados = '<i class="fa fa-paper-plane w3-padding-right"></i>Enviados (' + spEnviados + ')<i class="w3-padding-left fa fa-caret-down"></i>';
    $("#btnEnviados").text("");
    $(textoEnviados).appendTo("#btnEnviados");
    /*
    if(ultimoRowEnviados >= 0){
        openDetalle("appendID" + ultimo);
    }
    */
}

function enviarSportPager(){
    $("#id01").css("display", "none");
    var spEnviando = getSportPagerValues();
    var sinNubes = spEnviando.sinNubes;
    var ParcialmenteNublado = spEnviando.ParcialmenteNublado;
    var Nublado = spEnviando.Nublado;
    spEnviando.sinNubes = (sinNubes === true)? 1 : 0;
    spEnviando.ParcialmenteNublado = (ParcialmenteNublado === true)? 1 : 0;
    spEnviando.Nublado = (Nublado === true)? 1 : 0;
    var jsonString = JSON.stringify(spEnviando);
    var rowId = jsInterfazNativa.storeSportPager(jsonString, "ENVIANDO");
    spEnviando.rowId = rowId;
    append_SP(spEnviando, "#contenedorEnviados");
    openDetalle("appendID" + rowId);

    //append_SP(spEnviando, "#contenedorEnviados", ++id_sp);
    //openDetalle("appendID" + id_sp);

    spEnviados++;
    var textoEnviados = '<i class="fa fa-paper-plane w3-padding-right"></i>Enviados (' + spEnviados + ')<i class="w3-padding-left fa fa-caret-down"></i>';
    $("#btnEnviados").text("");
    $(textoEnviados).appendTo("#btnEnviados");


}

function getSportPagerValues() {
    sportpager.fechaPronosticoString = $("#fechaPronostico").val();

    var auxPronostico = $('#datetimepicker1').data("DateTimePicker").date();
    var PronosticoUtc = auxPronostico.utc();
    sportpager.fechaPronostico = PronosticoUtc.format("x");

    auxAviso = $('#datetimepicker2').data("DateTimePicker").date();
    var AvisoUtc = auxAviso.utc();
    sportpager.fechaAviso = AvisoUtc.format("x");

    sportpager.fechaAvisoString = $("#fechaAviso").val();
    sportpager.tempMin = $("#Temp-a").val();
    sportpager.tempMax = $("#Temp-b").val();
    sportpager.probLluviaMin = $("#Lluvia-a").val();
    sportpager.probLluviaMax = $("#Lluvia-b").val();
    sportpager.velVientoMin = $("#Viento-a").val();
    sportpager.velVientoMax = $("#Viento-b").val();
    //sportpager.dirViento = $("#sliderDirViento").roundSlider("option", "value");
    sportpager.dirViento = $("#viento").val();
    sportpager.sinNubes = $("#cbSinNubes").is(":checked");
    sportpager.ParcialmenteNublado = $("#cbParcialmenteNublado").is(":checked");
    sportpager.Nublado = $("#cbNublado").is(":checked");
    sportpager.latitud = latitud;
    sportpager.longitud = longitud;
    sportpager.lugar = $(".gllpSearchField").val();

    console.log(sportpager.fechaPronosticoString);
    //console.log(sportpager.fechaPronostico.format("x"));
    //console.log(sportpager.fechaAviso.format("x"));
    console.log(sportpager.fechaAvisoString);
    console.log("Temp mínima: " + sportpager.tempMin);
    console.log("Temp máxima: " + sportpager.tempMax);
    console.log("Lluvia mínima: " + sportpager.probLluviaMin);
    console.log("Lluvia máxima: " + sportpager.probLluviaMax);
    console.log("Velocidad del viento mínima: " + sportpager.velVientoMin);
    console.log("Velocidad del viento máxina: " + sportpager.velVientoMax);
    console.log("Dirección del viento: " + sportpager.dirViento);

    console.log("sinNubes: " + sportpager.sinNubes);
    console.log("ParcialmenteNublado: " + sportpager.ParcialmenteNublado);
    console.log("Nublado: " + sportpager.Nublado);
    console.log("latitud: " + sportpager.latitud);
    console.log("longitud: " + sportpager.longitud);
    console.log("lugar: " + sportpager.lugar);

    return sportpager;
}

function actualizarSentBox (sp){

}

function actualizarCoordenadas() {
    console.log("latitud: " + $("#latitud").val());
    console.log("longitud: " + $("#longitud").val());
    latitud = $("#latitud").val();
    longitud = $("#longitud").val();
}

function w3_open() {
    document.getElementById("mySidenav").style.display = "block";
    document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidenav").style.display = "none";
    document.getElementById("myOverlay").style.display = "none";
}

function myFunc(id) {
    var x = document.getElementById(id);
    //var x = $("#"+id)[0];
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        x.previousElementSibling.className += " w3-red";
    } else {
        x.className = x.className.replace(" w3-show", "");
        x.previousElementSibling.className =
            x.previousElementSibling.className.replace(" w3-red", "");
    }
}

function decode_utf8(s) {
    return decodeURIComponent(escape(s));
}

function append_SP(sp, target){
    var linea;
    var id = sp.rowId;
    var appendID = "appendID" + id;

    linea = "<a href=\"javascript:void(0)\" class=\"w3-border-bottom test w3-hover-light-grey\" onclick=\"openDetalle(\'" + appendID + "\');w3_close();\">";
    linea += "<div class=\"w3-container\">";
    linea += "<h5>Lugar: " + sp.lugar + "</h5>";
    if(target === "#contenedorRecibidos"){
        linea += "<h5>" + sp.resultado + "</h5>";
    }
    linea += "<h6>Pronosticar: " + sp.fechaPronosticoString + "</h6>";
    linea += "<h6>Avisar: " + sp.fechaAvisoString + "</h6>";
    linea += "<h6>Temperatura: " + sp.tempMin + " a " + sp.tempMax + " °C"  + "</h6>";
    linea += "<h6>Probabilidad de precipitaciones: " + sp.probLluviaMin + " a " + sp.probLluviaMax + "%</h6>";
    linea += "<h6>Velocidad del viento: " + sp.velVientoMin + " a " + sp.velVientoMax + " kmh</h6>";
    linea += "<h6>Dirección de viento: " + sp.dirViento + "°</h6>";
    linea += "<h6>Cobertura del cielo: ";

    if(((sp.sinNubes === true) && (sp.Nublado === true) && (sp.Nublado === true)) ||
        ((sp.sinNubes === false) && (sp.Nublado === false) && (sp.Nublado === false))){
        linea += "cualquiera";
    } else {
        if(sp.sinNubes === true){
            linea += "sin nubes";
        }
        if(sp.ParcialmenteNublado === true){
            if(sp.sinNubes === true){
                linea += "o ";
            }
            linea += "parcialmente nublado";
        }
        if(sp.Nublado === true){
            if((sp.sinNubes === true) || (sp.ParcialmenteNublado === true) ){
                linea += "o ";
            }
            linea += "nublado";
        }
    }
    linea += "</h6>";
    var lat = Number(sp.latitud);
    console.log("Tipo:" + typeof(lat));
    var latf = lat.toFixed(6);
    linea += "<h6>Latitud: " + latf + "</h6>";
    var lon = Number(sp.longitud);
    var lonf = lon.toFixed(6);
    linea += "<h6>Longitud: "+ lonf + "</h6>";
    //linea +=  '<input type="hidden" value="' + id + '" id="id_sportpager"/>';
    linea += "</div>";
    linea += "</a>";

    console.log("serializado: " + JSON.stringify(sp));
    var serializado = JSON.stringify(sp);
    linea += '<div id="';
    linea += appendID;
    linea += '" data-sp=';
    linea += "'";
    linea += serializado;
    linea += "' class=";
    linea += '"hidden"></div>';

    //var stuff = JSON.parse($('#mydiv').attr('data-unicorns'));
    //$("#contenedor").html(linea);
    //$(linea).appendTo( "#Demo1" );
    $(linea).prependTo(target);
}

function openDetalle(id) {
    var i;
    var selector = "#" + id;

    if(id === "nada"){
        $("#detalleEnviado").css("display", "none");
        $("#detalleEnviadoVacio").css("display", "block");
    } else{
        console.log("Abriendo detalle id: " + id);
        var sp = JSON.parse($(selector).attr('data-sp'));
        ultimoRowIdDetalle = sp.rowId;
        var x = $(".person");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }

        x = $(".test");
        for (i = 0; i < x.length; i++) {
            x[i].className = x[i].className.replace(" w3-light-grey", "");
        }

        var linea = "<br>";
        linea += "<h5>Lugar: " + sp.lugar + "</h5>";
        if(sp.hasOwnProperty("resultado")){
            linea += "<h5>"+ sp.resultado + "</h5>";
        }
        linea += "<h6>Pronosticar: " + sp.fechaPronosticoString + "</h6>";
        linea += "<h6>Avisar: " + sp.fechaAvisoString + "</h6>";
        linea += "<h6>Temperatura: " + sp.tempMin + " a " + sp.tempMax + " °C"  + "</h6>";
        linea += "<h6>Probabilidad de precipitaciones: " + sp.probLluviaMin + " a " + sp.probLluviaMax + "%</h6>";
        linea += "<h6>Velocidad del viento: " + sp.velVientoMin + " a " + sp.velVientoMax + " kmh</h6>";
        linea += "<h6>Dirección de viento: " + sp.dirViento + "°</h6>";
        linea += "<h6>Cobertura del cielo: ";

        if(((sp.sinNubes === true) && (sp.Nublado === true) && (sp.Nublado === true)) ||
            ((sp.sinNubes === false) && (sp.Nublado === false) && (sp.Nublado === false))){
            linea += "cualquiera";
        } else {
            if(sp.sinNubes === true){
                linea += "sin nubes";
            }
            if(sp.ParcialmenteNublado === true){
                if(sp.sinNubes === true){
                    linea += "o ";
                }
                linea += "parcialmente nublado";
            }
            if(sp.Nublado === true){
                if((sp.sinNubes === true) || (sp.ParcialmenteNublado === true) ){
                    linea += "o ";
                }
                linea += "nublado";
            }
        }
        linea += "</h6>";
        var lat = Number(sp.latitud);
        console.log("Tipo:" + typeof(lat));
        var latf = lat.toFixed(6);
        linea += "<h6>Latitud: " + latf + "</h6>";
        var lon = Number(sp.longitud);
        var lonf = lon.toFixed(6);
        linea += "<h6>Longitud: "+ lonf + "</h6>";
        linea += '<input id="rowId" type="hidden" value="' + sp.rowId + '" />';
        //linea += '</div>';

        $("#textoDetalle").html(linea);

        $("#detalleEnviadoVacio").css("display", "none");
        $("#detalleEnviado").css("display", "block");

        $(".gllpLatlonPickerDetalle").each(function() {

            $obj = $("#mapaDetalle").gMapsLatLonPicker();

            $obj.params.strings.markerText = "Puedes arrastrar esta marca";
            $obj.params.defLat = sp.latitud;
            $obj.params.defLng = sp.longitud;
            $obj.params.defZoom = 10;

            $obj.params.displayError = function(message) {
                console.log("MAPS ERROR: " + message); // instead of alert()

            };

            $obj.init( $(this) );
        });
    }
}



