<script type="text/javascript">
    onLoadFunctions.push(
        function() {
            updatePrices(0);
            changedBillingCycle(0);
        }
    );

    var billingTypes = new Array();
        billingTypes[0] = new Array();
        billingTypes[0].details = '';
        billingTypes[0].prices = new Array();
        billingTypes[0].prices[0] = {
            priceId     : 0,
            description : lang('CUSTOM'),
            amounts     : new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)
        };
    <!-- BEGIN DYNAMIC BLOCK: billingTypesArr -->
        billingTypes[{INVOICEENTRY_BILLINGTYPEID}] = new Array();
        billingTypes[{INVOICEENTRY_BILLINGTYPEID}].details = '{INVOICEENTRY_BILLINGTYPEDETAILS}';
        billingTypes[{INVOICEENTRY_BILLINGTYPEID}].prices = new Array();
        <!-- BEGIN DYNAMIC BLOCK: pricesArr -->
            billingTypes[{INVOICEENTRY_BILLINGTYPEID}].prices.push({
                priceId     : {INVOICEENTRY_BILLINGTYPEPRICES_ID},
                isDefault   : {INVOICEENTRY_BILLINGTYPEPRICES_ISDEFAULT},
                description : '{INVOICEENTRY_BILLINGTYPEPRICES_DESC}',
                amounts     : new Array({INVOICEENTRY_BILLINGTYPEPRICES_SETUP}, {INVOICEENTRY_BILLINGTYPEPRICES_MONTH}, 0, {INVOICEENTRY_BILLINGTYPEPRICES_QUARTER}, 0, 0, {INVOICEENTRY_BILLINGTYPEPRICES_SEMESTER}, 0, 0, 0, 0, 0, {INVOICEENTRY_BILLINGTYPEPRICES_YEAR})
            });
        <!-- END DYNAMIC BLOCK: pricesArr -->
    <!-- END DYNAMIC BLOCK: billingTypesArr -->

    function changedBillingType(newType)
    {
        $('detail').innerHTML = billingTypes[newType].details;
        updatePrices(newType);
    }

    function changedBillingCycle(newCycle)
    {
        if (newCycle == 0) {
            $('divRecurringPrice').style.display = 'none';
            $('idcreateinvoice').style.display = 'block';
            $('divIncludeInNextPayment').style.display = 'block';
        } else {
            $('divRecurringPrice').style.display = 'block';
            $('idcreateinvoice').style.display = 'none';
            $('divIncludeInNextPayment').style.display = 'none';
        }
        updateSetupRecurring();
    }

    function changedAppliesTo(newValue)
    {
        if (newValue == 0) {
            document.forms['InvoiceEntry'].includenextpayment[0].checked = 1;
            document.forms['InvoiceEntry'].includenextpayment[0].disabled = true;
            document.forms['InvoiceEntry'].includenextpayment[1].disabled = true;
        } else {
            document.forms['InvoiceEntry'].includenextpayment[0].disabled = false;
            document.forms['InvoiceEntry'].includenextpayment[1].disabled = false;
        }
    }

    function updateSetupRecurring()
    {
        var priceId = $('selectedPrice').value;
        if ($('billingtypeid').value < 0) {
            var typeIndex = 0;
        } else {
            var typeIndex = $('billingtypeid').value;
        }
        var prices = billingTypes[typeIndex].prices;
        var i;

        for (i = 0; i < prices.length; i++) {
            if (prices[i].priceId == priceId) {
                break;
            }
        }
        if (typeof prices[i] == 'undefined') {
            $('setupPrice').value = 0;
            $('recurringPrice').value = 0;
        } else {
            $('setupPrice').value = prices[i].amounts[0];
            if ($('billingCycle').value != 0) {
                $('recurringPrice').value = prices[i].amounts[$('billingCycle').value];
            } else {
                $('recurringPrice').value = 0;
            }
        }
    }

    function updatePrices(newType)
    {
        $('selectedPrice').innerHTML = '';
        var selectedIndex = 0;
        for (var i = 0; i < billingTypes[newType].prices.length; i++) {
            var newOption = document.createElement('option');
            newOption.innerHTML = billingTypes[newType].prices[i].description + '&nbsp;&nbsp;';
            newOption.setAttribute('value', billingTypes[newType].prices[i].description);
            $('selectedPrice').appendChild(newOption);
            if (billingTypes[newType].prices[i].isDefault) {
                selectedIndex = i;
            }
        }
        $('selectedPrice').selectedIndex = selectedIndex;
        updateSetupRecurring();
    }

    function submitNewEntryForm(myForm)
    {
        if (myForm.billingtypeid.value == -1) {
            alert(lang('Please select the billing type before submitting this new entry'));
            return;
        }

        if (!isNumber(myForm.setupPrice.value)) {
            alert(lang('You have entered an invalid setup price. Please try again'));
            return;
        }

        submitonce(myForm);
        myForm.submit();
    }
</script>
<br />
<form name="InvoiceEntry" method="POST" action="index.php" onKeyUp="highlight(event)" onClick="highlight(event)">
    <input type="hidden" name="fuse" value="{INVOICEENTRY_FUSE}" />
    <input type="hidden" name="action" value="{INVOICEENTRY_ACTION}" />
    <input type="hidden" name="customerid" value="{INVOICEENTRY_CUSTOMERID}" />
    <table width="400" cellspacing="1" cellpadding="2" border="0">
        <tr>
            <td colspan="2">{INVOICEENTRY_FORMHEADER}</td>
        </tr>
        <tr>
            <td>
                <div style="font-weight:bold">[l]Billing Type[/l]:</div>
                <table cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td>
                            <select id="billingtypeid" name="billingtypeid" onchange="changedBillingType(this.value)" >
                                <option value="-1">[l]Please select[/l]...</option>
                                <!-- BEGIN DYNAMIC BLOCK: billingTypeOptions -->
                                <option value="{INVOICEENTRY_BILLINGTYPEOPTION_VALUE}">{INVOICEENTRY_BILLINGTYPEOPTION_LABEL}</option>
                                <!-- END DYNAMIC BLOCK: billingTypeOptions -->
                            </select>
                        </td>
                        <td>
                            &nbsp;&nbsp;{INVOICEENTRY_ICONADDTYPE}
                        </td>
                    </tr>
                </table>
            </td>
            <td align="right">
                <div style="font-weight:bold">[l]Due Date[/l]:</div>
                <input type="text" id="date" name="date" size="12" maxlength="10" value="{INVOICEENTRY_DUEDATE}" />&nbsp;
                <img id="calButton" src="images/dynCalendar.gif" style="cursor:pointer"/>
                <link rel="stylesheet" type="text/css" href="newedge/javascript/jscalendar/calendar-win2k-cold-1.css" />
                <script type="text/javascript">
                    Calendar.setup({
                        inputField      : 'date',
                        ifFormat        : '{INVOICEENTRY_DATEFORMAT}',
                        showsTime       : false,
                        button          : 'calButton',
                        weekNumbers     : false,
                        step            : 1
                    });
                </script>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div style="font-weight:bold">[l]Entry Detail[/l]:</div>
                <TEXTAREA id="detail" wrap="virtual" rows="6" cols="75" name="detail" ></TEXTAREA>
            </td>
        </tr>
    </table>
    <table width="400" cellspacing="3" cellpadding="2" border="0">
        <tr>
            <td align="right" width="90">
                <div style="font-weight:bold">[l]Billing Cycle[/l]:</div>
            </td>
            <td colspan="2" align="left">
                <select id="billingCycle" name="billingCycle" onchange="changedBillingCycle(this.value)" >
                    <option value="0">[l]Single Payment[/l]</option>
                    <option value="1">[l]Monthly Payment[/l]</option>
                    <option value="3">[l]Quarterly Payment[/l]</option>
                    <option value="6">[l]Semiannually Payment[/l]</option>
                    <option value="12">[l]Annual Payment[/l]</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="right" valign="top" >
                <div style="font-weight:bold">[l]Description[/l]:</div>
            </td>
            <td align="left" valign="top">
                <select id="selectedPrice" name="selectedPrice" onchange="updateSetupRecurring(this.value)" >
                </select>
            </td>
            <td align="right">
                <span style="font-weight:bold">[l]One-time Price[/l]:</span>
                <input type="text" id="setupPrice" name="setupPrice" value="" style="width:50px" />
                <div id="divRecurringPrice" style="margin-top:3px; display:none">
                    <span style="font-weight:bold">[l]Recurring Price[/l]:</span>
                    <input type="text" id="recurringPrice" name="recurringPrice" value="" style="width:50px" />
                </div>
            </td>
        </tr>
        <tr>
            <td align="right">
                <div style="font-weight:bold">[l]Applies To[/l]:</div>
            </td>
            <td colspan="2" align="left">
                <select name="appliesTo" onchange="changedAppliesTo(this.value)" >
                    <option value="0">[l]not applicable[/l]&nbsp;&nbsp;</option>
                    <!-- BEGIN DYNAMIC BLOCK: appliesToOptions -->
                    <option value="{INVOICEENTRY_APPLIESTOOPTION_VALUE}">{INVOICEENTRY_APPLIESTOOPTION_LABEL}&nbsp;&nbsp;</option>
                    <!-- END DYNAMIC BLOCK: appliesToOptions -->
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="padding-top:20px">
                <div id="divIncludeInNextPayment" style="display:none" >
                    {INVOICEENTRY_INCLUDEINNEXTPAYMENT_LABEL}
                    &nbsp;<input type="radio" name="includenextpayment" value="0" checked="true" disabled="true" >[l]No[/l]
                    &nbsp;&nbsp;<input type="radio" name="includenextpayment" value="1" disabled="true" >[l]Yes[/l]
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3" align="right">
                <input type="button" class="button_xlarge name=submitbutton" onclick="submitNewEntryForm(form)" value="[lh]Create Entry[/lh]" />
                <div style="float:right" id="idcreateinvoice"><br />
                    <input type="checkbox" name="createinvoice" />[l]Create Invoice[/l]
                </div>
            </td>
        </tr>
    </table>
</form>
