{% extends 'generic/form.html' %}

{% load i18n %}

{% block media %}
    {{ form.media }}
{% endblock %}

{% block sectionclass %}journal{% endblock %}

{% block formset %}

    <div class='item_table formset-wrapper' id='journal_item_table_container'>

        {% include 'generic/formset.html' %}

        <table id = 'total_table'>
            <tr>
                <td class='label' colspan='2'>Total</td>
                <td class='debit_col'>
                    <span id='total_debit_item'>0</span></td>
                <td class='credit_col'>
                    <span id='total_credit_item'>0</span></td>
            </tr>
        </table>
    </div>

{% endblock %}

{% block script %}

<script>

$(function() {
    // Get current form count. Used in fields id.
    var form = $('.journal form'),
        form_count = {{ formset.total_form_count }},
        empty_form = $('#empty_form_placeholder').html();

    var debit_credit_change = function(index) {
        $('#id_form-'+ index +'-debit').change(function() {
            add_new_item();
        });

        $('#id_form-'+ index +'-credit').change(function() {
            add_new_item();
        });
    };

    var unbound_debit_credit = function(index) {
        $('#id_form-'+ index +'-debit').unbind('change');
        $('#id_form-'+ index +'-credit').unbind('change');
    };

    var add_new_item = function(formset_id) {
        var new_form = empty_form.replace(/__prefix__/g, form_count);
        $(new_form).hide()
                   .appendTo('.formset')
                   .fadeIn();

        unbound_debit_credit(form_count - 1);
        debit_credit_change(form_count);

        form_count++;
        $('#id_form-TOTAL_FORMS').val(form_count);
    };

    debit_credit_change(form_count - 1);

    $('.formset input[type="text"]').live('change', function() {
        var id = $(this).attr('id'),
            $this = $(this),
            row = $(this).closest('tr'),
            value_field = row.find('input[id$="value"]'),
            credit_field = row.find('input[id$="credit"]'),
            debit_field = row.find('input[id$="debit"]');

        // Empty the other field and fill out the value field.
        // If field being entered is debit, assign a negative value to value field
        if ($this.attr('id') == credit_field.attr('id')) {
            debit_field.val('');
            value_field.val($this.val());
        }
        else {
            credit_field.val('');
            value_field.val($this.val() * -1);   
        }
        
    });

    form.find('.formset input[type="text"]').live('blur', function() {
        var $this = $(this),
            formset = $this.closest('.formset'),
            sum = 0;
        
        formset.find('input[id$="credit"]').each(function(index, item) {
            var value = $(item).val();
            if ( ! value) {
                value = 0;
            }
            value = parseFloat(value);
            sum = sum + value;
        });
        $('#total_credit_item').text(formatCurrency(sum, 2, ','));

        sum = 0;
        formset.find('input[id$="debit"]').each(function(index, item) {
            var value = $(item).val();
            if ( ! value) {
                value = 0;
            }
            value = parseFloat(value);
            sum = sum + value;
            
        });
        $('#total_debit_item').text(formatCurrency(sum, 2, ','));

    });

});
</script>


{% endblock %}