duckinjug.js

$(document).ready(function () {
})
var oldValue = 0;
var duckAnimation;


var getSliderSum = function () {
    var sliderAValue = parseInt($('#sliderA').val());
    var sliderBValue = parseInt($('#sliderB').val());
    var sliderCValue = parseInt($('#sliderC').val());
    var totalSliderSum = parseInt(sliderAValue + sliderBValue + sliderCValue);

    //setImagePosition(totalSliderSum);

    sliderAValue = parseInt(sliderAValue / 10);
    sliderBValue = parseInt(sliderBValue / 10);
    sliderCValue = parseInt(sliderCValue / 10);

    var hiddenValueA = $('#silderValuesA').val().split('|')[sliderAValue];
    var hiddenValueB = $('#silderValuesB').val().split('|')[sliderBValue];
    var hiddenValueC = $('#silderValuesC').val().split('|')[sliderCValue];

    loadDuckInJugImage(hiddenValueA, hiddenValueB, hiddenValueC, totalSliderSum);
}

var loadDuckInJugImage = function (sliderValue1, sliderValue2, sliderValue3, totalSliderSum) {

    var searchParams =
    {
        Answer1: sliderValue1,
        Answer2: sliderValue2,
        Answer3: sliderValue3
    };

    //ajax request to adjust balance points and retrieve your-world image
    $.ajax({
        url: 'cet/LoadJugImage',
        type: "POST",
        contentType: 'application/json',
        data: JSON.stringify(searchParams),
        success: function (data) {
            var imagePosition = data.imagePosition;
            //var duckImagePositionPx;
            //    if (imagePosition == 60) {
            //        duckImagePositionPx = -41326;
            //    } else {
            //        duckImagePositionPx = -(imagePosition * 700);
            //    }
            //    var duckInJug = $("#duckInJug");
            //    duckInJug.css("background-position", duckImagePositionPx);
            //}
            setImagePosition(imagePosition);
        },
        error: function (error) {
            //alert(error.statusText);
            setImagePosition(totalSliderSum);
        }
    });
}

var setSliderVaue = function (value, element) {
    var sliderElement = $('#' + element);
    sliderElement.val(value);
    getSliderSum();
}


var supplyAndDemandSlider = function (value, element, hiddenElement) {
    var calvalue = parseInt(value / 10);
    var hiddenValue = $('#' + hiddenElement).val().split('|')[calvalue];
    var sliderElement = $("#" + element);
    sliderElement.val(hiddenValue);
    getSliderSum();
}


var setImagePosition = function (totalSliderSum) {
    if (duckAnimation) {
        clearInterval(duckAnimation);
    }
    duckAnimation = setInterval(function () {
        
        var duckInJug = $("#duckInJug");

        var newValue = (Math.floor(totalSliderSum * .2));
        var moveToStep = (newValue > oldValue) ? 1 : -1;


        if (oldValue != newValue) {
            oldValue += moveToStep;
            duckInJug.css("background-position", "" + (-1 * Math.abs(oldValue) * 700) + "px");

        }

        if (oldValue == newValue) {
            console.log("Clear Interval is called");
            clearInterval(duckAnimation);
        }

        alert(newValue);

        if (oldValue == 58) {
            console.log("Clear Interval on 59");
            clearInterval(duckAnimation);
        }

    }, 10)
}