var gewicht;
var geslacht;
var lengte;

$(document).ready(function() {
    setFlowHeight();
    
    setTimeout(function(){
        setFlowHeight();
    }, 600);
    $(window).on("resize", function(){
        setFlowHeight();
    });
    
    $(".flowBlock .step[data-step='1'] .option").on("click", function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active").addClass("nonActive");
            if($(".flowBlock .step[data-step='1'] .option.active").length < 1){
                $(".flowBlock .step[data-step='1'] .option").removeClass("nonActive");
            }
        } else {
            $(".flowBlock .step[data-step='1'] .option:not(.active)").addClass("nonActive");
            $(this).addClass("active").removeClass("nonActive");
        }
        if($(".flowBlock .step[data-step='1'] .option.active").length > 0){
            $(".flowBlock .step[data-step='1'] .buttons .nextButton").removeClass("disabled");
        } else {
            $(".flowBlock .step[data-step='1'] .buttons .nextButton").addClass("disabled");
        }
    });
    
    $(".flowBlock .step[data-step='2'] .option").on("click", function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active").addClass("nonActive");
            if($(".flowBlock .step[data-step='2'] .option.active").length < 1){
                $(".flowBlock .step[data-step='2'] .option").removeClass("nonActive");
            }
        } else {
            $(".flowBlock .step[data-step='2'] .option").addClass("nonActive").removeClass("active");
            $(this).addClass("active").removeClass("nonActive");
        }
        if($(".flowBlock .step[data-step='2'] .option.active").length > 0){
            $(".flowBlock .step[data-step='2'] .buttons .nextButton").removeClass("disabled");
        } else {
            $(".flowBlock .step[data-step='2'] .buttons .nextButton").addClass("disabled");
        }
    });
    
    $(".flowBlock .step[data-step='3'] .option").on("click", function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active").addClass("nonActive");
            if($(".flowBlock .step[data-step='3'] .option.active").length < 1){
                $(".flowBlock .step[data-step='3'] .option").removeClass("nonActive");
            }
        } else {
            $(".flowBlock .step[data-step='3'] .option").addClass("nonActive").removeClass("active");
            $(this).addClass("active").removeClass("nonActive");
        }
        if($(".flowBlock .step[data-step='3'] .option.active").length > 0){
            $(".flowBlock .step[data-step='3'] .buttons .nextButton").removeClass("disabled");
        } else {
            $(".flowBlock .step[data-step='3'] .buttons .nextButton").addClass("disabled");
        }
    });
    
    $(".flowBlock .step[data-step='4'] .option").on("click", function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active").addClass("nonActive");
            if($(".flowBlock .step[data-step='4'] .option.active").length < 1){
                $(".flowBlock .step[data-step='4'] .option").removeClass("nonActive");
            }
        } else {
            $(".flowBlock .step[data-step='4'] .option").addClass("nonActive").removeClass("active");
            $(this).addClass("active").removeClass("nonActive");
        }
        checkResultButton();
    });
    
    $(".flowBlock .bmiField").on("keyup change", function(){
        checkResultButton();
    });
    
    
    $(".flowBlock .nextButton").on("click", function(){
        if(!$(this).hasClass("disabled")){
            if($(".flowBlock .step.active .option.active[data-error='true']").length < 1){
                $(".flowBlock .step").removeClass("active");
                if($(this).data("step")){
                    $(".flowBlock .step[data-step='" + $(this).data("step") + "']").addClass("active");
                    setNavigator();
                }
            } else {
                $(".flowBlock .step").removeClass("active");
                $(".flowBlock .navigator").addClass("hide");
                $(".flowBlock .item.contact").addClass("active");
                $(".flowBlock .intro").addClass("hidden");
            }
        }
        setFlowHeight();
    });
    
    $(".flowBlock .backButton").on("click", function(){
        $(".flowBlock .step").removeClass("active");
        if($(this).data("step")){
            $(".flowBlock .step[data-step='" + $(this).data("step") + "']").addClass("active");
        }
        setFlowHeight();
    });
    
    $(".flowBlock .resultButton").on("click", function(){
        if(!$(this).hasClass("disabled")){
            gewicht = parseFloat($("#weightField").val().replace(",", "."));
            lengte = parseFloat($("#sizeField").val().replace(",", "."));
            geslacht = $(".flowBlock .step.active .option.active").data("gender");
            generateResult();
            $(".flowBlock .step").removeClass("active");
            $(".flowBlock .navigator").addClass("hide");
            $(".flowBlock .item.result").addClass("active");
            $(".flowBlock .intro").addClass("hidden");
        }
        setFlowHeight();
        setTimeout(function(){
            setFlowHeight();
        }, 300);
    });
    
    $(".flowBlock .goBack").on("click", function(){
        $(".flowBlock .item.contact").removeClass("active");
        setTimeout(function(){
        $(".flowBlock .navigator").removeClass("hide");
        $(".flowBlock .intro").removeClass("hidden");
        $(".flowBlock .step[data-step='3").addClass("active");
        setNavigator();
    }, 300);
    });
    
    $(".flowBlock .reset").on("click", function(){
        $(".flowBlock .step .option").removeClass("nonActive active")
        $(".flowBlock .item").removeClass("active");
        $(".flowBlock .bmiField").val("");
        $(".flowBlock .nextButton, .flowBlock .resultButton").addClass("disabled");
        setTimeout(function(){
            $(".flowBlock .navigator").removeClass("hide");
            $(".flowBlock .intro").removeClass("hidden");
            $(".flowBlock .step[data-step='1']").addClass("active");
            $("#textResult").html();
            $("#graphResult").empty();
            setFlowHeight();
        }, 300);
    });
    
});

function setNavigator(){
    $(".flowBlock .current").html($(".flowBlock .step.active").data("step"));
}

function checkResultButton(){
    if($("#sizeField").val().length > 0 && $("#weightField").val().length > 0 && $(".flowBlock .step.active .option.active").length > 0){
        console.log("test");
        $(".flowBlock .step[data-step='4'] .buttons .resultButton").removeClass("disabled");
    } else {
        console.log("test2");
        $(".flowBlock .step[data-step='4'] .buttons .resultButton").addClass("disabled");
    }
} 

function setFlowHeight(){
    $(".flowBlock .steps").css("height", $(".flowBlock .item.active").outerHeight());
    AOS.init();
}

function generateResult(){
    var bmi = gewicht / ((lengte/100) * (lengte/100));

    if (geslacht == 'male' && gewicht > 40 && lengte > 100 && bmi >= 18){
        $('#textResult').html('Je verliest gemiddeld 4 centimeter buikomvang!');
    }
    else if (gewicht > 40 && lengte > 100 && bmi >= 18){
        $('#textResult').html('Je verliest gemiddeld 3 centimeter buikomvang.');
    }

    if (gewicht > 40 && lengte > 100 && bmi >= 18) {
        var sd_factor = 0.0096;
        var sd_factor2 = 0.0234;

        var data = [];

        data[0] = gewicht;
        data[1] = gewicht*0.995;
        data[2] = gewicht*0.99;
        data[3] = gewicht*0.985;
        data[4] = gewicht*0.975;
        data[5] = gewicht*0.965;
        data[6] = gewicht*0.955;
        data[7] = gewicht*0.95;
        data[8] = gewicht*0.945;
        data[9] = gewicht*0.943;
        data[10] = gewicht*0.941;
        data[11] = gewicht*0.943;
        data[12] = gewicht*0.946;
        data[13] = gewicht*0.948;
        data[14] = gewicht*0.949;
        data[15] = gewicht*0.950;
        data[25] = gewicht*0.948;

        for (var i = 0; i < data.length; i++) {
            data[i] = parseFloat(data[i]);
            data[i] = data[i].toFixed(2);
        }

        var ymin = parseInt(data[25]) - 2;

        new Morris.Line({
          // ID of the element in which to draw the chart.
          element: 'graphResult',
          // Chart data records -- each entry in this array corresponds to a point on
          // the chart.
          data: [
                { x: '0', value: data[0] },
                { x: '1', value: data[1] },
                { x: '2', value: data[2] },
                { x: '3', value: data[3] },
                { x: '4', value: data[4] },
                { x: '5', value: data[5] },
                { x: '6', value: data[6] },
                { x: '7', value: data[7] },
                { x: '8', value: data[8] },
                { x: '9', value: data[9] },
                { x: '10', value: data[10] },
                { x: '11', value: data[11] },
                { x: '12', value: data[12] },
                { x: '13', value: data[13] },
                { x: '14', value: data[14] },
                { x: '15', value: data[15] },
                { x: '25', value: data[25] }
          ],
          // The name of the data record attribute that contains x-values.
          xkey: 'x',
          // A list of names of data record attributes that contain y-values.
          ykeys: ['value'],
          // Labels for the ykeys -- will be displayed when you hover over the
          // chart.
          labels: ['Gewicht'],
          ymax: gewicht,
          ymin: ymin,
          postUnits: ['kg'],
          xLabelFormat: function (x) { return 'Dag ' + x.getYear(); },
          // parseTime: false
        });
    } else if (bmi < 18){
        $('#textResult').html('Je BMI is lager dan 18. Bij een te laag gewicht raden wij geen Sportvasten aan.');
        $('#flowResultInfo').hide();
    } else {
        $('#textResult').html('Je gewicht en lengte zijn helaas niet correct ontvangen. Ga alsjeblieft terug om deze waarden correct in te voeren.');
        $('#flowResultInfo').hide();
    }
}