<div class="heading"> Debt Free Date </div> <div class="date"> <%= abbreviateDate(snowball.getPayoffDate()) %> </div> <div class="progress"> <%= view("/progress-bar", {progress: snowball.getProgress(new Date()), maxWidth:163}) %> <div class="star"> </div> <div class="progress-text"> DEBT PROGRESS </div> </div> <div> </div> <div id="modal-window"> <%= view(modalView, modalViewParams) %> </div> <div class="header"> Current Snowball </div> <div class="current-description"> <%= debt.description() %> </div> <div class="current-balance"> <span class="dollar-sign"> $ </span> <%= parseInt(debt.getScheduledPayment(date)) %> </div> <div class="current-payments-left"> <%= debt.getNumberOfPaymentsUntilPayoff(date) %> payments left </div> <% for(var i = 0; i < debts.length; i++) { var debt = debts[i]; %> <div id="debt-id-<%= debt.id() %>" class="debt debt-id-<%= debt.id() %> <% if(arguments[0].debtClass){ %> <%= arguments[0].debtClass %> <%}%>"> <div class="debt-wrapper"> <%= view('/debt/base', { debt: debt, date: date }) %> </div> </div> <% } %> <div class="print-header-container"> <div class="print-header"> <div class="print-header-title"> Debt Snowball </div> <div class="print-header-subtitle"> - Freedom Countdown </div> </div> </div> <div class="print-instructions" > *Instructions: Color one square for each month that you make a snowball payment. </div> <div class="print-debt-list"> <% var debtWeight = (100 / debts.length)/100; var originalDebtScale = 40; var numberOfPaymentsDifference = 0; var numberOfIconRowsPrinted = 0; var MAX_ROWS_FOR_PAGE_BREAK = 5; var PAGE_BREAK_CLASS_NAME = 'page-break'; for(var i = 0; i < debts.length; i++) { var debt = debts[i]; ++numberOfIconRowsPrinted; %> <div id="debt-id-<%= debt.id() %>" class="debt-id-<%= debt.id() %> debt-freedom-countdown"> <div class="debt-wrapper"> <% var numberOfPayments = debt.getNumberOfPaymentsUntilPayoff( new Date() ) - numberOfPaymentsDifference; if ( numberOfPayments > 0 ){ %> <div class="debt-description"> <strong> <%=debt.description()%> </strong> </div> <% } for( var j = 0; j < numberOfPayments; j++ ) { if ( j > 0 && j % 6 == 0 ){ ++numberOfIconRowsPrinted; var extraClassName = ''; if ( numberOfIconRowsPrinted >= MAX_ROWS_FOR_PAGE_BREAK ){ numberOfIconRowsPrinted = 0; extraClassName = PAGE_BREAK_CLASS_NAME; } %> <br> <div class="<%= extraClassName %>"> </div> <% extraClassName = ''; } %> <img src="//cdn.ramseysolutions.net/media/broadcast/mytmmo/images/debtsnowball/print_icons/icon_print_<%= debt.icon() %>.jpg" /> <% } numberOfPaymentsDifference = numberOfPayments + numberOfPaymentsDifference; %> <div style="clear: both;" > </div> </div> </div> <% } %> </div> <% var hide = true; if(arguments[0].hide){ hide = arguments[0].hide; } %> <%= view('/debt/standard/wrapper', {debt: debt, date: date}) %> <%= view('/debt/form/wrapper', { debt: debt, date: date, hide: hide}) %> <div class="debt-standard <% if(new Date(debt.attributes.paymentStart) > DebtSnowballApp.displayDate){ %> deferred <% } else if( DebtSnowballApp.currentDate.getFullYear() == date.getFullYear() && DebtSnowballApp.currentDate.getMonth() == date.getMonth() && DebtSnowballApp.currentDate.getDate() > debt.paymentDay()){ %> paid <% } %> "> <%= view('/debt/standard', { debt: debt, date: date }) %> </div> <% var balanceDate = date; var lastDayOfMonth = new Date(DebtSnowballApp.displayDate.getFullYear(), DebtSnowballApp.displayDate.getMonth() + 1, 0, 0,0,0); var adjustedPaymentDay = lastDayOfMonth.getDate() < debt.paymentDay() ? lastDayOfMonth.getDate() : debt.paymentDay(); var paid = date.getMonth() < DebtSnowballApp.currentDate.getMonth() && date.getFullYear() <= DebtSnowballApp.currentDate.getFullYear() ? true : false; var isPayDay = false; if( DebtSnowballApp.currentDate.getFullYear() == date.getFullYear() && DebtSnowballApp.currentDate.getMonth() == date.getMonth() && DebtSnowballApp.currentDate.getDate() > debt.paymentDay()){ balanceDate = new Date(date.getFullYear(), date.getMonth() + 1, 1, 0,0,0); paid = true; } else if (DebtSnowballApp.currentDate.getFullYear() == date.getFullYear() && DebtSnowballApp.currentDate.getMonth() == date.getMonth() && DebtSnowballApp.currentDate.getDate() == debt.paymentDay()) { isPayDay = true; } %> <div class="medium-icon <%= debt.icon() %>"> </div> <div class="cell description"> <div> <%= debt.description() %> </div> <div class="links"> <div class="details-link-wrapper"> <a href="javascript: void(0)" class="show-debt-details"> Payment Schedule </a> </div> <div class="link-break"> | </div> <div class="edit-link-wrapper"> <a href="javascript: void(0)" class="edit"> Edit </a> </div> <div class="link-break"> | </div> <div class="delete-link-wrapper"> <div class="delete-debt-icon"> </div> <a href="javascript: void(0)" class="delete-debt"> Delete </a> </div> </div> </div> <div class="cell balance paid"> PAID </div> <div class="cell balance"> <span class="dollar-sign"> $ </span> <span> <%= debt.getBalance(balanceDate).commify() %> </span> </div> <% var hasNewPayment = debt.getCurrentMinimumPayment(date).toFixed(0) != debt.getScheduledPayment(date).toFixed(0); %> <div class="cell min-payment <% if(hasNewPayment){%>has-new-payment<%}%>"> <span class="dollar-sign"> $ </span> <span> <%= Math.round(debt.getCurrentMinimumPayment(date)).commify() %> </span> <div class="payment-status"> <% if(paid){ %> <img src="//cdn.ramseysolutions.net/media/broadcast/mytmmo/images/debtsnowball/check_img.jpg" /> PAID <%} else if (isPayDay) {%> TODAY <%} else {%> <%= getAbbreviatedMonthName(date.getMonth()) %> <%= adjustedPaymentDay %> <%}%> </div> </div> <div class="cell new-payment <% if(hasNewPayment){%>has-new-payment<%}%>" > <div class="current-payment"> <span class="dollar-sign"> $ </span> <span> <%= Math.round(debt.getScheduledPayment(date)).commify() %> </span> <div class="payment-status"> <% if(paid){ %> <img src="//cdn.ramseysolutions.net/media/broadcast/mytmmo/images/debtsnowball/check_img.jpg" /> PAID <%} else if (isPayDay) {%> TODAY <%} else {%> <%= getAbbreviatedMonthName(date.getMonth()) %> <%= adjustedPaymentDay %> <%}%> </div> </div> </div> <div class="cell progress"> <% var progress = 1 - (debt.getBalance(balanceDate) / debt.startingBalance()); %> <%= view('/progress-bar', {maxWidth:80, progress: progress}) %> </div> <div class="cell payment-start"> Payments start <%= abbreviateDate(debt.paymentStart()) %> </div> <div class="debt-snowball_clearfix"> </div> <input type="hidden" name="current-view" class="current-view" value="/debt/edit" /> <%= view('/debt/standard', { debt: debt, date: date }) %> <%= view('/debt/form/wrapper', { debt: debt, date: date, hide: false;}) %> <div id="debt-form-wrapper-<%= debt.id() %>" class="debt-form-wrapper" style="display:none;"> <%= view('/debt/form', { debt: debt, date: date}) %> </div> <div class="debt-form"> <div class="left-section"> <div class="description-fields"> <div class="text-input-container"> <input id="description-<%= debt.id() %>" tabindex=1 name="description" type="text" maxlength="15" value="<%= debt.description() %>" class="has-description-label <% if(debt.description() == ""){%>empty<%}%>" /> <label for="description-<%= debt.id() %>" class="default-value" <% if(debt.description() != ""){%>style="display:none"<%}%>> Name </label> </div> <select id="icon-selectmenu-<%= debt.id() %>" class="icon-selectmenu"> <% var cats = DebtCategory.all(); %> <% for(var i=0; i<cats.length; i++){ %> <option class="icon <%= cats[i].icon() %>" value="<%= cats[i].id() %>" <% if(debt.categoryId() == cats[i].id()){%> selected <% } %> > <%= cats[i].name() %> </option> <% } %> </select> </div> <div class="debt-snowball_clearfix"> </div> <div class="errors"> </div> <div class="buttons"> <button class="save-debt" tabindex=8> <span> Save </span> </button> <a href="javascript: void(0);" class="grey button cancel-save-debt"> <span> Cancel </span> </a> </div> </div> <div class="right-section"> <div class="balance-input"> <label for="balance"> Current <br/> Balance </label> <input type="text" name="balance" value="<%= debt.getBalance(date).toFixed(2) %>" tabindex=3 /> </div> <div class="monthly-payment-input"> <label for="monthly_payment"> Minimum <br/> Payment </label> <input type="text" name="monthly_payment" value="<%= debt.getCurrentMinimumPayment(date).toFixed(2) %>" tabindex=4 /> </div> <div class="interest-rate-input"> <label for="interest_rate"> <br/> Interest Rate </label> <input type="text" name="interest_rate" value="<%= (debt.getInterestRate(date)*100).toFixed(2) %>%" tabindex=5 /> </div> <div class="payment-day-input"> <label for="payment_day"> Payment<br/>Day </label> <select name="payment_day" class="payment-day"> <% for(var i=1; i<32; i++){ %> <option value="<%= i %>" <% if(debt.paymentDay() == i){%> selected <% } %> > <%= i %> </option> <% } %> </select> </div> <div class="debt-snowball_clearfix"> </div> <div class="defer-options"> Payments on this debt start in <span class="defer-end"></span> </div> </div> <div class="debt-snowball_clearfix"> </div> <div class="bottom-background"> </div> </div> <div id="debt-sortable-<%=debt.id()%>" class="debt sortable debt-id-<%=debt.id()%>"> <div class="sortable-handle"> </div> <div class="cell description"> <div> <%= debt.description() %> </div> </div> <div class="cell balance"> <span class="dollar-sign"> $ </span> <%= debt.getBalance(date).commify() %> </div> <div class="cell min-payment"> <span class="dollar-sign"> $ </span> <span> <%= debt.getCurrentMinimumPayment(date).toFixed(0) %> </span> </div> <div class="cell new-payment"> <div class="question-mark"> </div> <div class="current-payment"> <span class="dollar-sign"> $ </span> <%= debt.getScheduledPayment(date).toFixed(0) %> </div> </div> <div class="cell progress"> <% var progress = 1 - (debt.getBalance(date) / debt.startingBalance()); %> <%= view('/progress-bar', {maxWidth:80, progress: progress}) %> </div> <div class="debt-snowball_clearfix"> </div> </div> <div id="sortable-debts"> <% debts.each(function(debt){ %> <%= view("/debt/sortable", {debt: debt, date: date}) %> <% }); %> </div> <div id="sort-debt-menu"> <a class="button save-sort" href="javascript:void(0);"> <span> OK </span> </a> <a class="button grey cancel-sort" href="javascript:void(0);"> <span> Cancel </span> </a> <a class="button" id="sort-daves-way" href="javascript:void(0);" style="float:right; margin-right:20px;"> <span> Sort Dave's Way </span> </a> </div> <div class="extra-payment-form debt"> <div class="header"> Extra Payment </div> <br/> How much extra are you going to pay in <%= getFullMonthName(date.getMonth()) %> <%= date.getFullYear() %>? <br/> <br/> <div> <select id="extra-payment-debt-select"> <% for(var i =0; i< debts.length; i++){ %> <option value="<%= debts[i].id() %>"> <%= debts[i].description() %> </option> <%} %> </select> <input type="text" name="extra-payment-amount" value="<%= debts[0].getOneTimeExtraPaymentAmount(date).toFixed(2) %>" /> <% for(var i =0; i< debts.length; i++){ %> <input type="hidden" name="value-<%= debts[i].id() %>" value="<%= debts[i].getOneTimeExtraPaymentAmount(date).toFixed(2) %>" /> <% } %> <br/> <br/> *Dave recommends paying off your smallest debt first </div> <div class="extra-payment-button-container"> <button class="save-extra-payment"> <span> Save </span> </button> <a class="grey button cancel-extra-payment"> <span> Cancel </span> </a> </div> </div> <div class="debt debt-id-<%= debt.id() %>"> <div class="debt-details"> <div class="balance-info"> <span class="heading"> Description: </span> <br/> <span class="value"> <%= debt.description() %> </span> </div> <div class="payment-info"> <span class="heading"> Balance: </span> <br/> <span class="value"> <%= currency(debt.getBalance(new Date()), 0) %> </span> </div> <div class="apr"> <span class="heading"> Annual Percentage Rate </span> <br/> <span class="value"> <%= (debt.getInterestRate() * 100).toFixed(2) %> <span class="small"> % </span> </span> </div> <div class="payoff"> <span class="heading"> Payoff Date </span> <br/> <span class="value"> <%= abbreviateDate(debt.getPayoffDate()) %> </span> </div> </div> <div id="details-panel" class="details-panels"> <ul id="details-tabs"> <li> <span class="navigation-tab"> <a href="#debt-schedule"> Pay Schedule </a> </span> </li> <li> <span class="navigation-tab"> <a href="#debt-chart"> Debt Chart </a> </span> </li> </ul> <div class="debt-snowball_clearfix"> </div> <div class="debt-schedule" id="debt-schedule"> <%= view('/debt/schedule', { debt: debt }) %> </div> <div class="debt-chart" id="debt-chart"> <div class="debt-chart-details"> <span> Payoff Date: </span> <%= getFullMonthName(debt.getPayoffDate().getMonth()) %> <%= debt.getPayoffDate().getFullYear() %> <br/> <br/> <span> Amount Paid: </span> <%= currency(debt.startingBalance() - debt.getBalance(DebtSnowballApp.displayDate),0) %> <br/> <br/> <span> Amount Remaining: </span> <%= currency(debt.getBalance(DebtSnowballApp.displayDate),0) %> <br/> <br/> <span> Length Paid: </span> <%= getMonthsDifference(debt.startDate(),DebtSnowballApp.displayDate) %> Months </div> <div class="debt-chart-debt"> </div> </div> </div> </div> <% for(var i=0; i<debts.length; i++) { %> <div style="margin-right:10px;" id="debt-icon-<%= debts[i].id()%>" class="icon-wrapper debt-id-<%= debts[i].id() %> <% if(arguments[0].debtClass){ %> <%= arguments[0].debtClass %> <%}%>"> <%= view('/debt/icon-bar/icon', {debt: debts[i], date: date}) %> </div> <% } %> <div class="icon-container <% if(debt.getNumberOfPaymentsUntilPayoff(date) == 0){ %> dead <% } %>"> <div class="debt-description"> <%= debt.description() %> </div> <div class="large-icon <%= debt.icon() %>"> </div> <div class="months-til-payoff"> Payoff: <%= abbreviateDate(debt.getPayoffDate(date)) %> </div> <div class="total-payoff-time"> Paid in <%= debt.paymentSchedule().length %> months </div> </div> <div class="debt-schedule-container"> <div class="payment-schedule"> <table> <tr class="schedule-item" style="background: white;"> <td class="date"> </td> <td class="previous-balance" style="text-align:center"> Starting <br/> Balance </td> <td class="interest-rate" style="text-align:center"> Interest <br/> Rate </td> <td style="text-align:center" class="minimum-payment"> Minimum <br/> Payment </td> <td class="recurring-extra" style="text-align:center;"> Recurring <br/> Extra <br/> Payment </td> <td class="one-time-extra"> One Time <br/> Extra <br/> Payment </td> <td class="snowball-amount"> Previous <br/> Debt <br/> Payments </td> <td class="total-amount"> Total </td> <td class="new-balance"> New <br/> Balance </td> </tr> </table> <div class="payment-schedule-table"> <div class="table-loading"> </div> </div> <div id="payment-schedule-error" style="display: none;"> </div> <div class="adjustment-summary"> </div> </div> </div> <table> <% var rowClass = ""; var templateFunction = tmpl($gux_j(".schedule-item-edit-view")[0].value); for(var i = 0; i < paymentSchedule.length; i++) { var context = {"scheduleItem" : paymentSchedule[i]}; Object.extend(context,ViewHelpers); %> <tr class="schedule-item <%= rowClass %>"> <%= templateFunction(context) %> </tr> <% rowClass = rowClass == "" ? "alt-row" : ""; } %> </table> <div class="adjustment debtadjustment-id-<%=adjustment.id() %>"> <div class="adjustment-summary-heading"> On <%= abbreviateDate(adjustment.date()) %> </div> <ul> <% if(adjustment.minimumPaymentAdjustment() != 0) { %> <li> Minimum payment changed from <%= currency(debt.getCurrentMinimumPayment(adjustment.date()) - adjustment.minimumPaymentAdjustment()) %> to <%= currency(debt.getCurrentMinimumPayment(adjustment.date())) %> </li> <% } %> <% if(adjustment.interestRateAdjustment() != 0) { %> <li> Interest rate changed from <%= debt.getInterestRate(adjustment.date()) - adjustment.interestRateAdjustment() %> to <%= debt.getInterestRate(adjustment.date()) %> </li> <% } %> <% if(adjustment.recurringExtraPaymentAdjustment() != 0) { %> <li> Monthly extra payment changed from <%= currency(debt.getRecurringExtraPayment(adjustment.date()) - adjustment.recurringExtraPaymentAdjustment()) %> to <%= currency(debt.getRecurringExtraPayment(adjustment.date())) %> </li> <% } %> <% if(adjustment.oneTimeExtraPaymentAmount() != 0) { %> <li> Made a one time extra payment of <%= currency(adjustment.oneTimeExtraPaymentAmount()) %> </li> <% } %> </ul> </div> <td class="date"> <%= abbreviateDate(scheduleItem.date()) %> <input type="hidden" value="<%= scheduleItem.date() %>" /> </td> <td class="previous-balance"> <%= currency(scheduleItem.previousBalance()) %> </td> <td class="interest-rate"> <div class="cell-wrapper"> <div class="display-value <% if(!scheduleItem.attributes.deferred){%>click-to-input <%}%>" title="Click To Edit"> <%= Math.round(scheduleItem.interestRate() * 120000) / 100 %>% </div> <input style="display:none;" name="interestRateAdjustment" class="recalcField" value="<%= Math.round(scheduleItem.interestRate() * 120000) / 100 %>" /> <input style="display:none;" name="previousValue" value="<%= Math.round(scheduleItem.interestRate() * 120000) / 100 %>" /> <div class="field_bubble error"> <div class="content"> <div class="wrapper"> <div class="t"> </div> <div class="bd"> </div> </div> </div> <div class="b"> <div> </div> </div> </div> </div> </td> <td class="minimum-payment"> <div class="cell-wrapper"> <div class="display-value <% if(!scheduleItem.attributes.deferred){%>click-to-input <%}%>"> <%= currency(scheduleItem.minimumPayment()) %> </div> <input style="display:none;" name="minimumPaymentAdjustment" class="recalcField" value="<%= Math.round(scheduleItem.minimumPayment() * 100)/100 %>" /> <input style="display:none;" name="previousValue" value="<%= Math.round(scheduleItem.minimumPayment() * 100)/100 %>" /> <div class="field_bubble error"> <div class="content"> <div class="wrapper"> <div class="t"> </div> <div class="bd"> </div> </div> </div> <div class="b"> <div> </div> </div> </div> </div> </td> <td class="recurring-extra"> <div class="cell-wrapper"> <div class="display-value <% if(!scheduleItem.attributes.deferred){%>click-to-input <%}%>"> <%= currency(scheduleItem.recurringExtraPayment()) %> </div> <input style="display:none;" name="recurringExtraPaymentAdjustment" class="recalcField" value="<%= Math.round(scheduleItem.recurringExtraPayment() * 100)/100 %>" /> <input style="display:none;" name="previousValue" value="<%= Math.round(scheduleItem.recurringExtraPayment() * 100)/100 %>" /> <div class="field_bubble error"> <div class="content"> <div class="wrapper"> <div class="t"> </div> <div class="bd"> </div> </div> </div> <div class="b"> <div> </div> </div> </div> </div> </td> <td class="one-time-extra"> <div class="cell-wrapper"> <div class="display-value <% if(!scheduleItem.attributes.deferred){%>click-to-input <%}%>"> <%= currency(scheduleItem.oneTimeExtraAmount()) %> </div> <input style="display:none;" name="oneTimeExtraPaymentAmount" class="recalcField" value="<%= Math.round(scheduleItem.oneTimeExtraAmount()*100)/100 %>" /> <input style="display:none;" name="previousValue" value="<%= Math.round(scheduleItem.oneTimeExtraAmount()*100)/100 %>" /> <div class="field_bubble error"> <div class="content"> <div class="wrapper"> <div class="t"> </div> <div class="bd"> </div> </div> </div> <div class="b"> <div> </div> </div> </div> </div> </td> <td class="snowball-amount"> <div class="cell-wrapper"> <div class="display-value <% if(!scheduleItem.attributes.deferred){%>click-to-input <%}%>"> <%= currency(scheduleItem.snowballAmount()) %> </div> <input style="display:none;" name="snowballAdjustment" class="recalcField" value="<%= Math.round(scheduleItem.snowballAmount()*100)/100 %>" /> <input style="display:none;" name="previousValue" value="<%=Math.round(scheduleItem.snowballAmount()*100)/100 %>" /> <div class="field_bubble error"> <div class="content"> <div class="wrapper"> <div class="t"> </div> <div class="bd"> </div> </div> </div> <div class="b"> <div> </div> </div> </div> </div> </td> <td class="total-amount" title="Interest: <%= currency( scheduleItem.interestPaid() ) %>"> <%= currency(scheduleItem.totalPayment()) %> </td> <td class="new-balance"> <%= currency(scheduleItem.newBalance()) %> </td> <div class="progress-bar"> <div class="progress" style="width: <%= Math.max(progress,0) * maxWidth %>px;"> </div> </div> <div id="flashdefaultcontent"> <div class="flash_content_container" style=""> <div class="flash_download_container"> You need Macromedia Flash Player 7+ to view the game. <br/> Click below to download the free player. <br/> <a href="http://get.adobe.com/flashplayer/" target="_blank"> <img src="/media/image/general/get_flash_player.gif" border="0" align="center" vspace="2"> </a> </div> </div> </div> <script type="text/javascript"> var so = new SWFObject("/media/flash/snowballwarrior_as2_hs.swf", "SnowballWarrior", "720", "550", "7", "#ffffff", true, "best"); so.addParam("wmode", "window"); so.write("flashdefaultcontent"); </script> <div> You must correct the following errors: </div> <ul> <% for(var i = 0; i<errors.length; i++) { %> <li> <%= errors[i] %> </li> <% } %> </ul>