// variables; var income = 30000; var expenses = 12000; var roi = 0.05; var swr = 0.04; var savings; var savingrate; var inputIncome; var inputExpenses; var inputSavings; var inputSavingrate; var inputNetworth; var inputReturn; var inputWithdrawal; var step; var oldColumnValue // temp storage var var touched; var autoNumericCurrencyOptions = { aSep: '.' , aDec: ',' , aSign: ' €' , pSign: 's' , mDec: '0' , wEmpty: 'zero' , lZero: 'deny' }; var autoNumericPercentageOptions = { aSep: '.' , aDec: ',' , aSign: ' %' , pSign: 's' , mDec: '1' , wEmpty: 'zero' , lZero: 'deny' , aPad: false , vMax: '100' }; jQuery(document).ready(function () { initInputs(); updateFromIncomeExpenses(); updateNumbers(); updateTable(); initGraph(); initFaq(); jQuery('input').on('focus', function (e) { jQuery(this) .one('mouseup', function () { jQuery(this).select(); return false; }) .select(); }); jQuery("#optionen-toggle").click(function() { jQuery("#optionen").slideToggle(150, function() { if(jQuery(this).is(":visible")) { jQuery("#optionen-toggle #chevron").text("▴"); } else { jQuery("#optionen-toggle #chevron").text("▾"); } }); }) jQuery("#toggle_table").click(function() { jQuery("#table").slideToggle(150); jQuery('html, body').animate({ scrollTop: jQuery("#toggle_table").offset().top }, 350); }); jQuery(".annahmen_toggle").click(function() { jQuery("#faq").slideToggle(150); }) inputIncome.blur(function() { updateFromIncomeExpenses(); updateNumbers(); updateTable(); }) inputIncome.keyup(function(event){ if(event.keyCode == 13){ updateFromIncomeExpenses(); updateNumbers(); updateTable(); } }); inputExpenses.blur(function() { updateFromIncomeExpenses(); updateNumbers(); updateTable(); }) inputExpenses.keyup(function(event){ if(event.keyCode == 13){ updateFromIncomeExpenses(); updateNumbers(); updateTable(); } }); inputSavings.blur(function() { updateFromSavings(); updateNumbers(); updateTable(); }) inputSavings.keyup(function(event){ if(event.keyCode == 13){ updateFromSavings(); updateNumbers(); updateTable(); } }); inputSavingrate.blur(function() { updateFromSavingrate(); updateNumbers(); updateTable(); }) inputSavingrate.keyup(function(event){ if(event.keyCode == 13){ updateFromSavingrate(); updateNumbers(); updateTable(); } }); inputNetworth.blur(function() { updateNumbers(); updateGraph(); updateTable(); }) inputNetworth.keyup(function(event){ if(event.keyCode == 13){ updateNumbers(); updateGraph(); updateTable(); } }); inputReturn.blur(function() { updateNumbers(); updateGraph(); updateTable(); }) inputReturn.keyup(function(event){ if(event.keyCode == 13){ updateNumbers(); updateGraph(); updateTable(); } }); inputWithdrawal.blur(function() { updateNumbers(); updateGraph(); updateTable(); }) inputWithdrawal.keyup(function(event){ if(event.keyCode == 13){ updateNumbers(); updateGraph(); updateTable(); } }); initColumns(); }) jQuery(window).resize(function () { initGraph(); initColumns(); }) function initInputs() { inputIncome = jQuery("#parameter-einkommen-input"); inputExpenses = jQuery("#parameter-ausgaben-input"); inputSavings = jQuery("#parameter-sparrate-input"); inputSavingrate = jQuery("#parameter-sparquote-input"); inputNetworth = jQuery("#parameter-vermoegen-input"); inputReturn = jQuery("#parameter-rendite-input"); inputWithdrawal = jQuery("#parameter-withdrawal-input"); inputIncome.autoNumeric('init', autoNumericCurrencyOptions); inputExpenses.autoNumeric('init', autoNumericCurrencyOptions); inputSavings.autoNumeric('init', autoNumericCurrencyOptions); inputSavingrate.autoNumeric('init', autoNumericPercentageOptions); inputNetworth.autoNumeric('init', autoNumericCurrencyOptions); inputReturn.autoNumeric('init', autoNumericPercentageOptions); inputWithdrawal.autoNumeric('init', autoNumericPercentageOptions); } function initColumns() { jQuery(".column-container").click(function() { var value = jQuery(this).data("value"); updateSavingrate(value); oldColumnValue = value; updateFromSavingrate(); updateNumbers(); updateTable(); }) } function updateFromIncomeExpenses() { var inc = inputIncome.autoNumeric('get'); var exp = inputExpenses.autoNumeric('get'); income = parseFloat(inc); expenses = parseFloat(exp); updateSavings(income - expenses); var savr = Math.round(income - expenses) * 100 / income; updateSavingrate(savr); } function updateFromSavings() { var sav = inputSavings.autoNumeric('get'); savings = parseFloat(sav); updateExpenses(income - savings); updateSavingrate(Math.round(savings * 100) / income); } function updateFromSavingrate() { var savr = inputSavingrate.autoNumeric('get'); savingrate = savr; var sav = Math.round(income * (savingrate / 100)); updateExpenses(income - sav); updateSavings(sav); updateGraph(); } function updateNumbers() { var ytr = getYearsToRetirement(savingrate / 100); jQuery(".years-to-retirement").text(ytr.toLocaleString()); jQuery(".savingsrate").text(savingrate.toLocaleString()); } function updateExpenses(exp) { expenses = exp; inputExpenses.autoNumeric('set', expenses); } function updateSavings(sav) { savings = sav; inputSavings.autoNumeric('set', savings); } function updateSavingrate(savr) { savingrate = Math.round( savr * 10) / 10; inputSavingrate.autoNumeric('set', savingrate); } function initGraph() { var w = jQuery("#mq-test").width(); if(w == 0) { step = 10; initColumnsContainers(9); } else if(w == 1) { step = 5; initColumnsContainers(19); } else if(w == 2) { step = 2; initColumnsContainers(49); } jQuery(".column-container").on({ mouseenter: function(){ if(touched) { touched = false; oldColumnValue = ""; return; } jQuery(".column", this).addClass("mouseover"); var value = jQuery(this).data("value"); oldColumnValue = jQuery(".column-value", this).html(); jQuery(".column-value", this).html(value); jQuery("#years-overlay").show(); jQuery("#years-overlay").css("bottom", (jQuery(".column", this).outerHeight() + 36) + "px"); jQuery("#years-overlay").html(getYearsToRetirement(value / 100).toLocaleString() + " Jahre"); }, mouseleave: function(){ jQuery(".column", this).removeClass("mouseover"); if(oldColumnValue != "") { jQuery(".column-value", this).html(oldColumnValue); } jQuery("#years-overlay").hide(); } }); jQuery(".column-container-inner, .column-value").on('touchstart',function(e, data){ touched = true; }); updateGraph(); } function updateGraph() { var max = getYearsToRetirement((jQuery(".column").first().parent().parent().data("value") / 100)); var oh = jQuery(".column-container").outerHeight(); jQuery(".column").each(function(index, element) { var value = jQuery(this).parent().parent().data("value"); var newHeight; if(Math.abs(savingrate - value ) <= step/2 && !jQuery(this).parent().parent().prev().hasClass("active")) { jQuery(this).parent().parent().addClass("active"); if(!jQuery(this).parent().parent().is(":hover")) { jQuery(".column-value", this).html(savingrate); } newHeight = (getYearsToRetirement( savingrate / 100) / max) * oh; } else { jQuery(this).parent().parent().removeClass("active"); jQuery(".column-value", this).html(value); newHeight = (getYearsToRetirement( value / 100) / max) * oh; } jQuery(this).outerHeight(newHeight); // var valueOffset = newHeight > 40 ? 6 : newHeight + 6; // jQuery(".column-value", this).css("bottom", valueOffset + "px"); }) jQuery("#graph-background").empty(); var interval = getGridLineInterval(max, oh); var count = Math.floor(max / interval); var height = interval * (oh / max); for(var i = 0; i <= count; i++) { jQuery("#graph-background").append("