path: root/httemplate/elements/customer-table.html

<%doc>

Example:

  include( '/elements/customer-table.html',

             ###
             # required
             ###

             #listrefs...
             'header'        => [ '#', 'Item' ],
             'fields'        => [
                                  'column',
                                  sub { my ($row,$param) = @_;
                                        $param->{"column$row"};
                                      },
                                ],

             ###
             # optional
             ###

             'name_singular' => 'customer', #label
             'custnum_update_callback' => 'name_of_js_callback' #passed a rownum

             #listrefs
             'types'         => ['immutable', ''], # immutable or ''/text
             'align'         => [ 'c', 'l', 'r', '' ],
             'size'          => [],                # sizes ignored for immutable
             'color'         => [],
             'footer'        => ['string', '_TOTAL'], # strings or the special
                                                      #value _TOTAL
             'footer_align'  => [ 'c', 'l', 'r', '' ],

             'param'         => { column0 => 1 },  # preset column of row 0 to 1

         )

Some incomplete notes for javascript programmers:

On page load, existing rows are initialized by passing values to addRow
based on existing cgi values.  An empty row (marked with the 'emptyrow' 
attribute) is created by invoking addRow without values.  After that, 
to keep the non-empty row count (totalrows) accurate, use newEmptyRow to 
create the next row.  There should only be one empty row at a time.

Global vars:
total_el  - element for displaying total number of rows
totalrows - total number of non-empty rows
rownum - really more of a "next row" value, used by addRow
allrows - array of tr elements, one for each row

Don't confuse the global rownum with the element attribute rownum
that is set as a reference point on some of the elements generated
by this script.  They have different values.

Some of the functions:
updateTotalRow() - updates total_el based on value of totalrows
addDeleteButton(searchrow) - adds delete button to searchrow
newEmptyRow() - replaces old empty row
deleteRow() - removes the row specified by this.rownum
addRow(values) - adds a new row (marked as empty if values aren't specified)

This mason element is currently only used by misc/batch-cust_pay.html, 
and probably should be cleaned up more before being used by anything else.

</%doc>

<SCRIPT TYPE="text/javascript">

  var num_open_invoices = new Array;

  function clearhint_invnum() {

    if ( this.value == 'Not found' || this.value == 'Multiple' ) {
      this.value = '';
      this.style.color = '#000000';
    }

  }

  function clearhint_custnum() {

    if ( this.value == 'Not found' || this.value == 'Multiple' ) {
      this.value = '';
      this.style.color = '#000000';
    }

  }

  function clearhint_customer() {

    this.style.color = '#000000';

    if ( this.value == '(last name or company)' || this.value == 'Not found' )
      this.value = '';

  }

  function update_customer(searchrow, customerArray) {
      
      var display_custnum_obj = document.getElementById('display_custnum'+searchrow);
      var custnum_obj = document.getElementById('custnum'+searchrow);
      var customer = document.getElementById('customer'+searchrow);
      var customer_select = document.getElementById('cust_select'+searchrow);

      display_custnum_obj.disabled = false;
      display_custnum_obj.style.backgroundColor = '#ffffff';
      customer.disabled = false;
      customer.style.backgroundColor = '#ffffff';

      if ( customerArray.length == 0 ) {

          custnum_obj.value = '';
          display_custnum_obj.value = 'Not found';
          customer.value = 'Not found';
          display_custnum_obj.style.color = '#ff0000';
          customer.style.color = '#ff0000';

          customer.style.display = '';
          customer_select.style.display = 'none';
          return false;

      } else if ( customerArray.length >= 6 ) {

          custnum_obj.value = customerArray[0];
          display_custnum_obj.value = customerArray[6];
          display_custnum_obj.style.color = '#000000';
          customer.value = customerArray[1];

          update_balance_text(searchrow, customerArray[2]);
          update_status_text( searchrow, customerArray[3]);
          update_status_color(searchrow, '#'+customerArray[4]);
          update_num_open(searchrow, customerArray[5]);

          customer.style.display = '';
          customer_select.style.display = 'none';
          return true;
      }
  }

  function search_invnum() {

    this.style.color = '#000000'

    var invnum_obj = this;
    var searchrow = this.getAttribute('rownum');
    var invnum = this.value;

    if ( invnum == 'searching...' || invnum == 'Not found' || invnum == '' )
      return;

    if ( this.getAttribute('magic') == 'nosearch' ) {
      this.setAttribute('magic', '');
      return;
    }

    if ( document.getElementById('row'+searchrow).emptyrow ) {
      newEmptyRow(searchrow);
    }
    var customer = document.getElementById('customer'+searchrow);
    customer.value = 'searching...';
    customer.disabled = true;
    customer.style.color = '#000000';
    customer.style.backgroundColor = '#dddddd';

    var customer_select = document.getElementById('cust_select'+searchrow);

    customer.style.display = '';
    customer_select.style.display = 'none';
    
    update_balance_text(searchrow, '');
    update_status_text(searchrow, '');
    update_status_color(searchrow, '#000000');
    update_num_open(searchrow, 0);

    function search_invnum_update(customers) {
      
      var customerArray = eval('(' + customers + ')');
      update_customer(searchrow, customerArray);

% if ( $opt{invnum_update_callback} ) {
        <% $opt{invnum_update_callback} %>(searchrow)
% }

    }

    invnum_search( invnum, search_invnum_update );

  }

  function search_custnum() {

    this.style.color = '#000000'

    var display_custnum_obj = this;
    var searchrow = this.getAttribute('rownum');
    var custnum_obj = document.getElementById('custnum'+searchrow);
    var display_custnum = this.value;

    if ( display_custnum == 'searching...' || display_custnum == 'Not found' || display_custnum == '' )
      return;

    if ( this.getAttribute('magic') == 'nosearch' ) {
      this.setAttribute('magic', '');
      return;
    }

    if ( document.getElementById('row'+searchrow).emptyrow ) {
      newEmptyRow(searchrow);
    }

    var customer_obj = document.getElementById('customer'+searchrow);
    customer_obj.value = 'searching...';
    customer_obj.disabled = true;
    customer_obj.style.color = '#000000';
    customer_obj.style.backgroundColor = '#dddddd';

    var customer_select = document.getElementById('cust_select'+searchrow);

    customer_obj.style.display = '';
    customer_select.style.display = 'none';

    var invnum = document.getElementById('invnum'+searchrow);
    invnum.value = '';

    update_balance_text(searchrow, '');
    update_status_text( searchrow, '');
    update_status_color(searchrow, '#000000');    
    update_num_open(searchrow, 0);

    function search_custnum_update(customers) {

      var customerArrayArray = eval('(' + customers + ')') || [];

      if ( customerArrayArray.length == 0 ) {

        update_customer(searchrow, []);

      } else if ( customerArrayArray.length == 1 ) {

        update_customer(searchrow, customerArrayArray[0]);
% if ( $opt{custnum_update_callback} ) {
          <% $opt{custnum_update_callback} %>(searchrow)
% }

      } else {

        custnum_obj.value = 'Multiple'; // or something
        custnum_obj.style.color = '#ff0000';

        //blank the current list
        customer_select.options.length = 0;

        opt(customer_select, '', 'Multiple customers match "' + custnum + '" - select one', '#ff0000');
        //add the multiple customers
        for ( var s = 0; s < customerArrayArray.length; s++ ) {
          opt(customer_select,
              JSON.stringify(customerArrayArray[s]),
              customerArrayArray[s][1],
              '#000000');
        }

        opt(customer_select, 'cancel', '(Edit search string)', '#000000');

        customer_obj.style.display = 'none';

        customer_select.style.display = '';

      }

    }

    custnum_search(display_custnum, search_custnum_update );

  }

  function search_customer() {

    var customer_obj = this;
    var searchrow = this.getAttribute('rownum');
    var customer = this.value;

    if ( customer == 'searching...' || customer == 'Not found' || customer == '' )
      return;

    if ( this.getAttribute('magic') == 'nosearch' ) {
      this.setAttribute('magic', '');
      return;
    }

    if ( document.getElementById('row'+searchrow).emptyrow ) {
      newEmptyRow(searchrow);
    }
    
    var invnum = document.getElementById('invnum'+searchrow);
    invnum.value = '';

    var custnum_obj = document.getElementById('display_custnum'+searchrow);
    custnum_obj.value = 'searching...';
    custnum_obj.disabled = true;
    custnum_obj.style.color = '#000000';
    custnum_obj.style.backgroundColor = '#dddddd';

    var customer_select = document.getElementById('cust_select'+searchrow);
    
    function search_customer_update(customers) {

      var customerArrayArray = eval('(' + customers + ')') || [ [] ];

      custnum_obj.disabled = false;
      custnum_obj.style.backgroundColor = '#ffffff';

      if ( customerArrayArray.length == 0 ) {

        update_customer(searchrow, []);

      } else if ( customerArrayArray.length == 1 ) {

        update_customer(searchrow, customerArrayArray[0]);
% if ( $opt{custnum_update_callback} ) {
        <% $opt{custnum_update_callback} %>(searchrow)
% }

      } else {

        custnum_obj.value = 'Multiple'; // or something
        custnum_obj.style.color = '#ff0000';

        //blank the current list
        customer_select.options.length = 0;

        opt(customer_select, '', 'Multiple customers match "' + customer + '" - select one', '#ff0000');
        //add the multiple customers
        for ( var s = 0; s < customerArrayArray.length; s++ ) {
          opt(customer_select,
              JSON.stringify(customerArrayArray[s]),
              customerArrayArray[s][1],
              '#000000');
        }

        opt(customer_select, 'cancel', '(Edit search string)', '#000000');

        customer_obj.style.display = 'none';

        customer_select.style.display = '';

      }

    }

    smart_search( customer, search_customer_update );

  }

  function select_customer() {

    var custnum_balance_status = this.options[this.selectedIndex].value;
    var customer = this.options[this.selectedIndex].text;

    var searchrow = this.getAttribute('rownum');
    var display_custnum_obj = document.getElementById('display_custnum'+searchrow);
    var custnum_obj = document.getElementById('custnum'+searchrow);
    var customer_obj = document.getElementById('customer'+searchrow);
    var balance_obj = document.getElementById('balance'+searchrow);
    var status_obj = document.getElementById('status'+searchrow);

    if ( custnum_balance_status == '' ) {

    } else if ( custnum_balance_status == 'cancel' ) {

      display_custnum_obj.value = '';
      custnum_obj.value = '';
      custnum_obj.style.color = '#000000';

      this.style.display = 'none';
      customer_obj.style.display = '';
      customer_obj.focus();

    } else {
    
      update_customer(searchrow, JSON.parse(custnum_balance_status));

% if ( $opt{custnum_update_callback} ) {
      <% $opt{custnum_update_callback} %>(searchrow)
% }

    }

  }

  function opt(what,value,text,color) {
    var optionName = new Option(text, value, false, false);
    optionName.style.color = color;
    var length = what.length;
    what.options[length] = optionName;
  }

  function update_status_text(rownum, newval) {
    document.getElementById('status'+rownum).value = newval;
    document.getElementById('status'+rownum+'_text').innerHTML = newval;
  }

  function update_status_color(rownum, newval) {
    document.getElementById('statuscolor'+rownum).value = newval;
    document.getElementById('status'+rownum+'_text').style.color = newval;
  }

  function update_balance_text(rownum, newval) {
    document.getElementById('balance'+rownum).value = newval;
    document.getElementById('balance'+rownum+'_text').innerHTML = newval;
  }

  function update_num_open(rownum, newval) {
    document.getElementById('num_open'+rownum).value = newval;
    num_open_invoices[rownum] = newval;
  }

  // updates display of total rows based on value of totalrows
  function updateTotalRow () {
    if ( totalrows == 1 ) {
      total_el.innerHTML =
        'Total '
          + totalrows
          + ' <% $opt{name_singular} || 'customer' %>';
    } else {
      total_el.innerHTML =
        'Total '
          + totalrows
          + ' <% PL($opt{name_singular} || 'customer') %>';
    }
  }

  var total_el, rownum, totalrows, allrows;

  function addDeleteButton (searchrow) {
    var td_delete = document.getElementById('delete'+searchrow);
    var button_delete = document.createElement('INPUT');
    button_delete.setAttribute('rownum', searchrow);
    button_delete.setAttribute('type', 'button');
    button_delete.setAttribute('value', 'X');
    button_delete.onclick = deleteRow;
    button_delete.style.color = '#ff0000';
    button_delete.style.fontWeight = 'bold';
    button_delete.style.paddingLeft = '2px';
    button_delete.style.paddingRight = '2px';
    td_delete.appendChild(button_delete);
  }

  function newEmptyRow (searchrow) {
    // add delete button to current row
    addDeleteButton(searchrow);
    // mark current row as non-empty
    var oldemptyrow = document.getElementById('row'+searchrow);
    oldemptyrow.emptyrow = false;
    // update totalrows
    totalrows++
    updateTotalRow();
    // add a new empty row
    addRow();
  }

  function deleteRow() {
    var thisrownum = this.getAttribute('rownum');
% if ( $opt{delete_row_callback} ) {
    // callback
    <% $opt{delete_row_callback} %>(thisrownum);
% }
    // remove the actual row
    var thisrow = document.getElementById('row'+thisrownum);
    thisrow.parentNode.removeChild(thisrow);
    // remove row from tally of all rows
    var newrows = [];
    for (i = 0; i < allrows.length; i++) {
      if (allrows[i] == thisrownum) continue;
      newrows.push(allrows[i]);
    }
    allrows = newrows;
    totalrows--; // should never be deleting empty rows
    updateTotalRow();
    // recalculate column totals, if any
% my $col = 0;
% foreach my $footer ( @{$opt{footer}} ) {
%   if ($footer eq '_TOTAL' ) {
    calc_total<% $col %>()
%   }
%   $col++;
% }
  }

  function addRow(values) {

    var table = document.getElementById('OneTrueTable');
    var tablebody = table.getElementsByTagName('tbody').item(0);

    var row = table.insertRow(table.rows.length - 1);
    var thisrownum = values ? values.rownum : rownum;
    row.setAttribute('id', 'row'+thisrownum);
    row.emptyrow = values ? false : true;
    
    var invnum_cell = document.createElement('TD');

      var invnum_input = document.createElement('INPUT');
      invnum_input.setAttribute('name', 'invnum'+thisrownum);
      invnum_input.setAttribute('id',   'invnum'+thisrownum);
      invnum_input.style.textAlign = 'right';
      invnum_input.setAttribute('size', 8);
      invnum_input.setAttribute('maxlength', 12);
      invnum_input.setAttribute('rownum', thisrownum);
      invnum_input.value = values ? values.invnum : '';
      invnum_input.onfocus = clearhint_invnum;
      invnum_input.onchange = search_invnum;
      invnum_cell.appendChild(invnum_input);

    row.appendChild(invnum_cell);

    var custnum_cell = document.createElement('TD');

      var display_custnum_input = document.createElement('INPUT');
      display_custnum_input.setAttribute('name', 'display_custnum'+thisrownum);
      display_custnum_input.setAttribute('id',   'display_custnum'+thisrownum);
      display_custnum_input.style.textAlign = 'right';
      display_custnum_input.setAttribute('size', 8);
      display_custnum_input.setAttribute('maxlength', 12);
      display_custnum_input.setAttribute('rownum', thisrownum);
      display_custnum_input.value = values ? values.custnum : '';
      display_custnum_input.onfocus = clearhint_custnum;
      display_custnum_input.onchange = search_custnum;
      custnum_cell.appendChild(display_custnum_input);

      var custnum_input = document.createElement('INPUT');
      custnum_input.type = 'hidden';
      custnum_input.setAttribute('name', 'custnum'+thisrownum);
      custnum_input.setAttribute('id',   'custnum'+thisrownum);
      custnum_input.setAttribute('rownum', thisrownum);
      custnum_input.value = values ? values.custnum : '';
      custnum_cell.appendChild(custnum_input);

    row.appendChild(custnum_cell);
    
    var status_cell = document.createElement('TD');
      status_cell.style.textAlign = 'center';
        
      var status_span = document.createElement('SPAN');
      status_span.setAttribute('id', 'status'+thisrownum+'_text');
      status_span.style.fontWeight = 'bold';
      status_span.style.color = values ? values.statuscolor : '';
      status_span.setAttribute('rownum', thisrownum);
      status_span.appendChild(
        document.createTextNode(values ? values.status : '')
      );
      status_cell.appendChild(status_span);
        
      var status_input = document.createElement('INPUT');
      status_input.setAttribute('type', 'hidden');
      status_input.setAttribute('name', 'status'+thisrownum);
      status_input.setAttribute('id',   'status'+thisrownum);
      status_input.setAttribute('rownum', thisrownum);
      status_input.value = values ? values.status : '';
      status_cell.appendChild(status_input);

      var statuscolor_input = document.createElement('INPUT');
      statuscolor_input.setAttribute('type', 'hidden');
      statuscolor_input.setAttribute('name', 'statuscolor'+thisrownum);
      statuscolor_input.setAttribute('id',   'statuscolor'+thisrownum);
      statuscolor_input.setAttribute('rownum', thisrownum);
      statuscolor_input.value = values ? values.statuscolor : '';
      status_cell.appendChild(statuscolor_input);

    row.appendChild(status_cell);

    var customer_cell = document.createElement('TD');

      var customer_input = document.createElement('INPUT');
      customer_input.setAttribute('name', 'customer'+thisrownum);
      customer_input.setAttribute('id',   'customer'+thisrownum);
      customer_input.setAttribute('size', 64);
      customer_input.setAttribute('value', '(last name or company)' );
      customer_input.setAttribute('rownum', thisrownum);
      customer_input.value = values ? values.customer : '';
      customer_input.onfocus = clearhint_customer;
      customer_input.onclick = clearhint_customer;
      customer_input.onchange = search_customer;
      customer_cell.appendChild(customer_input);

      var customer_select = document.createElement('SELECT');
      customer_select.setAttribute('name', 'cust_select'+thisrownum);
      customer_select.setAttribute('id',   'cust_select'+thisrownum);
      customer_select.setAttribute('rownum', thisrownum);
      customer_select.style.color = '#ff0000';
      customer_select.style.display = 'none';
      customer_select.onchange = select_customer;
      customer_cell.appendChild(customer_select);

    row.appendChild(customer_cell);
    
    var balance_cell = document.createElement('TD');

      balance_cell.style.textAlign = 'right';
      balance_cell.appendChild(document.createTextNode('<%$money_char%>'));

      var balance_span = document.createElement('SPAN');
      balance_span.setAttribute('id', 'balance'+thisrownum+'_text');
      balance_span.setAttribute('rownum', thisrownum);
      balance_cell.appendChild(balance_span);

      balance_cell.appendChild(
        document.createTextNode(String.fromCharCode(160) + (values ? values.balance : '')) //&nbsp;
      );

      var balance_input = document.createElement('INPUT');
      balance_input.setAttribute('type', 'hidden');
      balance_input.setAttribute('name', 'balance'+thisrownum);
      balance_input.setAttribute('id',   'balance'+thisrownum);
      balance_input.setAttribute('rownum', thisrownum);
      balance_input.value = values ? values.balance : '';
      balance_cell.appendChild(balance_input);

      var num_open_input = document.createElement('INPUT');
      num_open_input.setAttribute('type', 'hidden');
      num_open_input.setAttribute('name', 'num_open'+thisrownum);
      num_open_input.setAttribute('id',   'num_open'+thisrownum);
      num_open_input.setAttribute('rownum', thisrownum);
      balance_cell.appendChild(num_open_input);

    row.appendChild(balance_cell);

%   my $col = 0;
%   foreach my $field ( @{$opt{fields}} ) {

      var my_cell = document.createElement('TD');
      my_cell.setAttribute('align', '<% $align{ $opt{align}->[$col] || 'l' } %>');
%     if ($opt{'color'}->[$col]) {
      my_cell.style.color = '<% $opt{color}->[$col] %>';
%     }

%     if ($types->[$col] eq 'immutable') {
        var my_text = document.createTextNode(values ? values.<% $field %> : '');
        my_cell.appendChild(my_text);
%     }

%     my $name  = (ref($field) eq 'CODE') ? "column${col}_" : $field;
      var my_input = document.createElement('INPUT');
      my_input.setAttribute('name', '<% $name %>'+thisrownum);
      my_input.setAttribute('id',   '<% $name %>'+thisrownum);
      my_input.style.textAlign = '<% $align{ $opt{align}->[$col] || 'l' } %>';
      my_input.setAttribute('size', <% $sizes->[$col] || 10 %>);
      my_input.setAttribute('rownum', thisrownum);
%     if ( $types->[$col] eq 'immutable' ) {
      my_input.setAttribute('type', 'hidden');
%     } elsif ( $types->[$col] eq 'checkbox' ) {
      my_input.setAttribute('type', 'checkbox');
      my_input.checked = (values && values.<% $field %>) ? true : false;
%     }
      my_input.value = (values && values.<% $field %>) || '';
%     if ( $opt{onchange}->[$col] ) {
        my_input.onchange   = <% $opt{onchange}->[$col] %>;
%     }
%     elsif ( $opt{footer}->[$col] eq '_TOTAL' ) {
        my_input.onchange   = calc_total<%$col%>;
        my_input.onkeyup    = calc_total<%$col%>;
%     }
      my_cell.appendChild(my_input);

    row.appendChild(my_cell);

%     $col++;
%   }

    var td_delete = document.createElement('TD');
    td_delete.setAttribute('id', 'delete'+thisrownum);
    row.appendChild(td_delete);
    if (values) {
      addDeleteButton(thisrownum);
    }

    update_num_open(thisrownum, (values ? values.num_open : '0'));

% if ( $opt{add_row_callback} ) {
    <% $opt{add_row_callback} %>(thisrownum, values);
% }

    // update the total number of rows display
    allrows.push(thisrownum);
    if (values) totalrows++;
    updateTotalRow();

    // update the next available row number
    if (thisrownum >= rownum) {
      rownum = thisrownum + 1;
    }

  } // end of addRow


</SCRIPT>

<TABLE ID="OneTrueTable" CLASS="fsinnerbox">

<TR>
  <TH>Inv #</TH>
  <TH>Cust #</TH>
  <TH>Status</TH>
  <TH>Customer</TH>
  <TH>Balance</TH>
% foreach my $header ( @{$opt{header}} ) {
    <TH><% $header %></TH>
% }
</TR>

% my @rownums = sort { $a <=> $b } map /^custnum(\d+)$/, keys %$param;
<TR id="row_total">
  <TH COLSPAN=5 ID="_TOTAL_TOTAL">
    Total <% @rownums || 0 %>
    <% PL($opt{name_singular} || 'customer', ( @rownums || 0 ) ) %>
  </TH>
% my $col = 0;
% foreach my $footer ( @{$opt{footer}} ) {
%   my $align = $align{ $opt{'footer_align'}->[$col] || 'c' };
%   if ($footer eq '_TOTAL' ) {
%     my $id = $opt{'fields'}->[$col];
%     $id = ref($id) ? "column${col}_TOTAL" : "${id}_TOTAL";
      <TH ALIGN="<% $align %>" ID="<% $id %>">&nbsp;<% sprintf('%.2f', $total[$col] ) %></TH>
%   } else {
      <TH ALIGN="<% $align %>"><% $footer %></TH>
%   }
%   $col++;
% }
</TR>

</TABLE>

<SCRIPT TYPE="text/javascript">

total_el =
  document.getElementById("_TOTAL_TOTAL");

rownum = 1; // really more of a "next row", used by addrow
totalrows = 0; // will not include empty rows
allrows = []; // will include empty rows

% foreach my $row ( @rownums ) {
%   if ( grep($param->{$_.$row},qw(invnum display_custnum custnum status statuscolor customer balance),@{$opt{fields}} ) ) {

addRow({
  rownum:<% $row %>,
  num_open:<% $param->{"num_open$row"} |js_string %>,
  invnum:<% $param->{"invnum$row"} |js_string %>,
  display_custnum:<% $param->{"display_custnum$row"} |js_string %>,
  custnum:<% $param->{"custnum$row"} |js_string %>,
  status:<% $param->{"status$row"} |js_string %>,
  statuscolor:<% $param->{"statuscolor$row"} |js_string %>,
  customer:<% $param->{"customer$row"} |js_string %>,
  balance:<% $param->{"balance$row"} |js_string %>,
%     my $col = 0;
%     foreach my $field ( @{$opt{fields}} ) {
%       my $value;
%       if ( ref($field) eq 'CODE' ) {
%         $value = &{$field}($row,$param) || '';
%       } else {
%         $value = $param->{"$field$row"} || '';
%       }
%       my $name  = (ref($field) eq 'CODE') ? "column${col}" : "$field";
  <% $name %>:<% $value |js_string %>,
%       $col++;
%     }
});
%   }
% }

addRow();

% my $col = 0;
% foreach my $footer ( @{$opt{footer}} ) {
%   if ($footer eq '_TOTAL' ) {
%     my $name = $opt{fields}->[$col];
%     $name = ref($name) ? "column$col" : $name;
      var th_el = document.getElementById("<%$name%>_TOTAL");
      function calc_total<% $col %>() {
        var row = 0;
        var total = 0;
        for (i = 0; i < allrows.length; i++) {
          var value = document.getElementById("<%$name%>"+allrows[i]).value;
          value = parseFloat(value);
          if ( ! isNaN(value) ) {
            total = total + value;
          }
        }
        th_el.innerHTML = '&nbsp;' + total.toFixed(2);
      }
      calc_total<% $col %>()
%   }
%   $col++;
% }
</SCRIPT>

<% include('/elements/xmlhttp.html',
              'url'  => $p. 'misc/xmlhttp-cust_main-search.cgi',
              'subs' => [qw( custnum_search smart_search invnum_search )],
           )
%>

<%init>

my(%opt) = @_;
my $conf = new FS::Conf;

my $types = $opt{'type'} ? [ @{$opt{'type'}} ] : [];
my $sizes = $opt{'size'} ? [ @{$opt{'size'}} ] : [];

my $param = $opt{param};
$param = $cgi->Vars if $cgi->param('error');

$opt{$_} ||= [] foreach qw(align color footer footer_align);

my @total = map 0, @{$opt{footer}};

my %align = (
  'l' => 'left',
  'r' => 'right',
  'c' => 'center',
);

my $money_char = $conf->config('money_char') || '$';
</%init>