%(message)s

{{{ #!html

<script type="text/javascript">

  function getPrice(el) {
    return parseFloat(el.parentNode.previousSibling.previousSibling.firstChild.nodeValue.replace(/\s/g, ''));
  }

  function recalc(evt) {
    var el = evt.currentTarget;
    var price = getPrice(el);
    var amountDiv = el.nextSibling;
    if( amountDiv ) {
      var amountText = amountDiv.firstChild;
    }
    else {
      amountDiv = document.createElement('span');
      amountDiv.style.color = '#aaaaaa';
      el.parentNode.appendChild(amountDiv);
      var amountText = document.createTextNode('');
      amountDiv.appendChild(amountText);
    }
    amountText.nodeValue = ' = ' + (price * el.value).toFixed(2).toString();
    updateTotals();
  }

  function updateTotals() {
    var formId = 'catalogue';
    var form = document.getElementById(formId);
    var totalAmount = 0;
    for(var i = 0; i < form.length; i++) {
      var el = form.elements[i];
      if( el.type == 'text' ) {
        totalAmount += getPrice(el) * el.value;
      }
    }
    var totalsEl = document.getElementById('totalAmount');
    if( totalsEl ) {
      totalsEl.firstChild.nodeValue = 'Итого: ' + totalAmount.toFixed(2).toString();
    }
  }

  function digitsOnly(evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode(key);
    var regex = /[0-9]/;
    if( !regex.test(key) ) {
      theEvent.returnValue = false;
      if(theEvent.preventDefault) 
        theEvent.preventDefault();
    }
  }

</script>

<style type="text/css">
  .store {
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    border-color: #aaaaaa;
    padding: 5px;
  }

  .nolink {
    border: 0;
  }

  .nolink:hover {
    background-color: transparent;
    border: 0;
  }

  .shopping-cart-input {
    width: 40px;
    padding: 2px 2px 2px 20px;
    text-align: right;
    // background-image: url(/shopping_cart/mb-cart-96x96.png);
    // background-image: url(/shopping_cart/baroquon_Shopping_Cart.png);
    background-image: url(/shopping_cart/cart_16x15.png);
    background-repeat: no-repeat;
    background-position: left center;
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    border-color: #aaaaaa;
  } 
</style>

<form id="catalogue" method="POST">
<input type="hidden" name="order_id" value="%(order_id)s"/>

<table class="store" style="width: 800px;">
<tr>
 <td class="store" align="center">Продукт</td>
 <td class="store" align="center">Цена</td>
 <td class="store" align="center">Количество</td>
</tr>
<tr>
 <td class="store">Электронный платеж</td>
 <td class="store" align="center">1 руб</td>
 <td class="store"> &times; <input name="tracker_mounting_custom" class="shopping-cart-input" 
  onkeyup="javascript:recalc(event)"
  onkeypress="javascript:digitsOnly(event)"></input></td>
</tr>
<tr>
 <td colspan="3" align="right">
  <span id="totalAmount">Итого: 0</span>
  <button style="padding: 10px 20px 10px 20px; margin: 10px; align: right;">Оформить заказ &rarr;</button>
 </td>
</tr>
</table>

</form>

}}}