var demo = window.demo || {};

demo.attachEventHandlers = function () {
    /* attach all our event handlers in this function */

    /* Attach handlers for amount */
    demo.payDayLoanForm.loanValueSlide.oninput = function () {
        //Update loan value text box;
        demo.payDayLoanForm.loanValue.value = this.value;
    };

    /* Increment and decrement handlers for loan amount*/
    demo.payDayLoanForm.loanValueMinus.onclick = function (event) {
        event.preventDefault();

        demo.payDayLoanForm.loanValueSlide.stepDown(1);

        demo.payDayLoanForm.loanValueSlide.oninput();
    };

    demo.payDayLoanForm.loanValuePlus.onclick = function (event) {
        event.preventDefault();

        demo.payDayLoanForm.loanValueSlide.stepUp(1);

        demo.payDayLoanForm.loanValueSlide.oninput();
    };

    /* event handler for text box */
    demo.payDayLoanForm.loanValue.onchange = function () {
        demo.payDayLoanForm.loanValueSlide.value = this.value;
    };

    /* Attach handlers for duration */
    demo.payDayLoanForm.durationInDaysSlide.oninput = function () {
        demo.payDayLoanForm.durationInDays.value = this.value;
    };

    /* Increment and decrement handlers for loan duration*/
    demo.payDayLoanForm.durationInDaysMinus.onclick = function (event) {
        event.preventDefault();

        demo.payDayLoanForm.durationInDaysSlide.stepDown(1);

        demo.payDayLoanForm.durationInDaysSlide.oninput();
    };

    demo.payDayLoanForm.durationInDaysPlus.onclick = function (event) {
        event.preventDefault();

        demo.payDayLoanForm.durationInDaysSlide.stepUp(1);

        demo.payDayLoanForm.durationInDaysSlide.oninput();
    };

    /* event hander for duration text box */
    demo.payDayLoanForm.durationInDays.oninput = function () {
        demo.payDayLoanForm.durationInDaysSlide.value = this.value;
    };

    /* Form change event */
    demo.payDayLoanForm.oninput = demo.payDayLoanForm.onchange = demo.payDayLoanForm.onclick = function (event) {
        // if the event doesn't come from the button or input that disregard.
        if (event.target.tagName !== 'BUTTON' && event.target.tagName !== 'INPUT') return;
        //detect changes in the form and recalculate and update ui
        var payment = demo.calculatePayment(demo.payDayLoanForm.loanValue.value, demo.payDayLoanForm.durationInDays.value);

        demo.updateUI(payment);
    };

    demo.payDayLoanForm.onsubmit = function (event) {
        event.preventDefault();

        alert('Submit Fired');
        //If this was a real implementation, we would probably do some logic before submit.
    }
};

demo.updateUI = function (payment) {
    /* update all our ui elements that aren't part of the form */
    demo.borrowingAmountEle.innerHTML = payment.amount;
    demo.interestRepaymentEle.innerHTML = payment.interest.toFixed(2);
    demo.repaymentTotalEle.innerHTML = payment.total.toFixed(2);

    demo.repayMentDateEle.innerHTML = "Repayment due on: " + demo.getRepaymentDate(payment.duration);
};

demo.getRepaymentDate = function (numOfDays) {
    //gets final loan repayment date
    return moment().add(numOfDays, 'days').format('MMMM Do YYYY');
};

demo.calculatePayment = function (amount, numOfDays) {
    var getInterestRateText = function () {
        //get the interest rate that is injected as a form data attribute
        return demo.payDayLoanForm.dataset.interestRateDaily;
    },

    getInterestRate = function () {
        //gets the interest rate in a form we can deal with
        return parseFloat(getInterestRateText());
    },

    calculateInterest = function () {
        amount = parseInt(amount, 10);
        numOfDays = parseInt(numOfDays, 10);

        return getInterestRate() * amount * numOfDays;
    },

    calculateTotal = function () {
        //calculates our total
        return amount + calculateInterest();
    };

    //return an object literal which has all our information about our pay day loan
    return {
        interest: calculateInterest(),
        total: calculateTotal(),
        amount: amount,
        duration: numOfDays
    };
};

//Initialise the form and find important dom elements
window.onload = function () {
    demo.payDayLoanForm = document.forms[0];

    demo.repayMentDateEle = document.getElementById('repayment-date');
    demo.borrowingAmountEle = document.getElementById('borrowing-amount');
    demo.interestRepaymentEle = document.getElementById('interest-repayment');
    demo.repaymentTotalEle = document.getElementById('repayment-total');

    demo.attachEventHandlers();
};