var termijnIndex = 0;
var bedragIndex = 0;
var sliderBarLength = 514;
var handleWidth = 39;
var bedragSlider;
var termijnSlider;
var sliderValues = [];
var loadInitBedragen = Prototype.emptyFunction;
function getBedragen() {
    var bedragen = [];
    for (var i = 0; i < sliderValues.length; i++)
        bedragen.push(sliderValues[i].bedrag);
    return bedragen;
}

function berekenKrediet() {
    if (sliderValues.length > 0 && bedragIndex <= sliderValues.length) {
        var currentVal = sliderValues[bedragIndex];
        var taegPer = Math.pow((1 + (currentVal.jkp[termijnIndex] / 100)), 1 / 12) - 1;
        var currentBedrag = parseInt($("txtBedrag").value) || currentVal.bedrag;
        var aflossing = round((currentBedrag * taegPer) / (1 - Math.pow((1 / (1 + taegPer)), currentVal.termijn[termijnIndex])));
        $("txtJkp").value = currentVal.jkp[termijnIndex];
        $("txtBedrag").value = currentBedrag;
        $("maandAflossing").value = aflossing;
        $("txtTotaal").value = round(aflossing * currentVal.termijn[termijnIndex]);
    }
}

function resetTermijnSlider() {
    if (sliderValues.length > 0 && bedragIndex <= sliderValues.length) {
        try {
            termijnSlider.setValue(termijnSlider.minimum);              
        } catch (ex) {
            berekenKrediet();
        }
        var currIndex = sliderValues[bedragIndex].termijn.length - 1
        termijnSlider.range = $R(0, currIndex);
        termijnSlider.values = $R(0, currIndex);
        while (sliderValues[bedragIndex].termijn[currIndex] > 60 && currIndex > 0)
            currIndex--;
        try {
            termijnSlider.setValue(currIndex);
        } catch (ex) { }            
    }
}

function generateValueLabels(values, container) {
    var numberOfVals = ((values.length > 1) ? values.length - 1 : 1);
    var lblWidth = parseInt(sliderBarLength / numberOfVals) - parseInt(handleWidth / numberOfVals);
    while (container.childNodes[0])
        container.removeChild(container.childNodes[0]);

    for (var i = 0; i < values.length; i++) {
        var div = new Element("div", { "class": "bedrag" }).update(values[i]);
        container.appendChild(div);
        div.style.left = (lblWidth * i) + ((handleWidth / 2) - (div.getWidth() / 2)) + "px";
    }
}

function setTermijnValue() {
    if (sliderValues.length > 0 && bedragIndex <= sliderValues.length) {
        var duurtijd = $("Duurtijd");
        for (var i = 0; i < duurtijd.options.length; i++) {
            if (duurtijd.options[i].value == sliderValues[bedragIndex].termijn[termijnIndex])
                duurtijd.selectedIndex = i;
        }
    }
}

function loadTermijnList() {
    if (sliderValues.length > 0 && bedragIndex <= sliderValues.length) {
        var duurtijd = $("Duurtijd");
        while (duurtijd.childNodes[0])
            duurtijd.removeChild(duurtijd.childNodes[0]);
        for (var i = 0; i < sliderValues[bedragIndex].termijn.length; i++) {
            duurtijd.appendChild(new Element("option", { value: sliderValues[bedragIndex].termijn[i] }).update(sliderValues[bedragIndex].termijn[i]));
        }
    }
}

function round(number, X) {
    X = (!X ? 2 : X);
    return Math.round(number * Math.pow(10, X)) / Math.pow(10, X);
}
function setCurrentBedrag() {
    var txtBedrag = $("txtBedrag");
    var currentBedrag = parseInt(txtBedrag.value);
    if (currentBedrag) {
        var currentIndex = 0;
        for (var i = 0; i < sliderValues.length; i++) {
            if (currentBedrag >= sliderValues[i].bedrag)
                currentIndex = i;
            else
                break;
        }
        bedragSlider.setValue(currentIndex);
        if (currentBedrag >= sliderValues[0].bedrag)
            txtBedrag.value = currentBedrag;
        else
            txtBedrag.value = sliderValues[0].bedrag;
    }
    berekenKrediet();
}

function initializeSliders() {
    $("Duurtijd").stopObserving();
    $("txtBedrag").stopObserving();
    if (bedragSlider) {
        try {
            bedragSlider.setValue(0);
        } catch (ex) { }
        bedragSlider.dispose();
    }
    if (termijnSlider) {
        try {
            termijnSlider.setValue(0);
        } catch (ex) { }
        termijnSlider.dispose();
    }

    bedragSlider = new Control.Slider("bedragHandle", "bedragSlider", {
        range: $R(0, sliderValues.length - 1),
        values: $R(0, sliderValues.length - 1),
        sliderValue: 0,
        onChange: function(v) {
            bedragIndex = v;
            $("txtBedrag").value = sliderValues[bedragIndex].bedrag;
            resetTermijnSlider();
            loadTermijnList();
            setTermijnValue();
            generateValueLabels(sliderValues[bedragIndex].termijn, $("termijnLbls"));
        }
    });

    termijnSlider = new Control.Slider("termijnHandle", "termijnSlider", {
        sliderValue: 0,
        range: $R(0, 5),
        values: $R(0, 5),
        onSlide: function(v) {
            if (v > sliderValues[bedragIndex].termijn.length - 1)
                termijnSlider.setValue(sliderValues[bedragIndex].termijn.length - 1);
        },
        onChange: function(v) {
            termijnIndex = v;
            setTermijnValue();
            berekenKrediet();
        }
    });

    generateValueLabels(getBedragen(), $("bedragLbls"));
    generateValueLabels(sliderValues[bedragIndex].termijn, $("termijnLbls"));

   
    if (parseInt($("txtBedrag").value)) {
        setCurrentBedrag();
        if (parseInt(initTermijn)) {
            var duurtijd = $("Duurtijd");
            for (var i = 0; i < duurtijd.options.length; i++) {
                if (duurtijd.options[i].value == initTermijn) {
                    termijnIndex = i;
                    termijnSlider.setValue(termijnIndex);
                }
            }
        }
    } else {
        loadTermijnList();
        resetTermijnSlider();
    }

    setTermijnValue();
    $("Duurtijd").observe("change", function(ev) {
        termijnIndex = ev.element().selectedIndex;
        termijnSlider.setValue(termijnIndex);
        //berekenKrediet();
    });
    $("txtBedrag").observe("change", setCurrentBedrag);
}
document.observe("dom:loaded", function(ev) {
    if (sliderValues.length > 0 && bedragIndex <= sliderValues.length) {
        loadInitBedragen();
        initializeSliders();
    }
});