Camobodian mixed dollar & riel change calculator


<!DOCTYPE html>
<html>
  <head>
    <title>Cambodian change calculator</title>
  </head>
  <body>
    Cambodian change calculator
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <hr>

    <label id="price">
      Price
      <div class="dollars-cents">
        <span class="dollars">
          <label>
            Dollars
            <input type="number" value="0"></input>
          </label>
        </span>
        <span class="cents">
          <label>
            Cents
            <input type="number" value="0"></input>
          </label>
        </span>
      </div>
      <div class="dollars-riels">
        <span class="dollars">
          <label>
            Dollars
            <input type="number" value="0"></input>
          </label>
        </span>
        <span class="riels">
          <label>
            Riels
            <input type="number" value="0"></input>
          </label>
        </span>
      </div>
      <div class="riels-only">
        <span class="riels">
          <label>
            Riels
            <input type="number" value="0"></input>
          </label>
        </span>
      </div>
    </label>

    <hr>

    <label id="paid">
      Paid
      <div class="dollars-cents">
        <span class="dollars">
          <label>
            Dollars
            <input type="number" value="0"></input>
          </label>
        </span>
        <span class="cents">
          <label>
            Cents
            <input type="number" value="0"></input>
          </label>
        </span>
      </div>
      <div class="dollars-riels">
        <span class="dollars">
          <label>
            Dollars
            <input type="number" value="0"></input>
          </label>
        </span>
        <span class="riels">
          <label>
            Riels
            <input type="number" value="0"></input>
          </label>
        </span>
      </div>
      <div class="riels-only">
        <span class="riels">
          <label>
            Riels
            <input type="number" value="0"></input>
          </label>
        </span>
      </div>
    </label>

    <hr>

    <label id="change">
      Change
      <div class="dollars-cents">
        <span class="dollars">
          <label>
            Dollars
            <input type="number" value="0" readonly="1"></input>
          </label>
        </span>
        <span class="cents">
          <label>
            Cents
            <input type="number" value="0" readonly="1"></input>
          </label>
        </span>
      </div>
      <div class="dollars-riels">
        <span class="dollars">
          <label>
            Dollars
            <input type="number" value="0" readonly="1"></input>
          </label>
        </span>
        <span class="riels">
          <label>
            Riels
            <input type="number" value="0" readonly="1"></input>
          </label>
        </span>
      </div>
      <div class="riels-only">
        <span class="riels">
          <label>
            Riels
            <input type="number" value="0" readonly="1"></input>
          </label>
        </span>
      </div>
    </label>

    <script>
      $( "input" ).change(function(eo) {
          var inp = $(this);
          var val = inp[0].value;

          var field = inp.parent().parent();
          var fieldName = field[0].className;

          var mode = field.parent();
          var modeName = mode[0].className;

          var row = mode.parent();
          var rowName = row[0].id;

          doStuff(rowName, modeName, fieldName);
      });

      function doStuff(row, mode, field) {
        // update the other modes in the same row
        var inRiels = -1;

        switch (mode) {
          case 'dollars-cents':
            var rm = $('#' + row + ' .' + mode);
            var f = rm.find('.dollars, .cents').map(function(i, e) {
              return parseInt($(e).find('input')[0].value);
            }).toArray();

            inRiels = (f[0] * 100 + f[1]) * 40;

            updateModes(row, mode, inRiels);
            break;

          case 'dollars-riels':
            var rm = $('#' + row + ' .' + mode);
            var f = rm.find('.dollars, .riels').map(function(i, e) {
              return parseInt($(e).find('input')[0].value);
            }).toArray();

            inRiels = f[0] * 4000 + f[1];

            updateModes(row, mode, inRiels);
            break;

          case 'riels-only':
            var rm = $('#' + row + ' .' + mode);
            var f = rm.find('.riels').map(function(i, e) {
              return parseInt($(e).find('input')[0].value);
            }).toArray();

            inRiels = f[0];

            updateModes(row, mode, inRiels);
            break;

          default:
            // BANG!
        }

        switch (row) {
          case 'price':
            var rm = $('#paid .riels-only');
            var p = rm.find('.riels input')[0].value;

            updateModes('change', '', p - inRiels);
            break;

          case 'paid':
            var rm = $('#price .riels-only');
            var p = rm.find('.riels input')[0].value;

            updateModes('change', '', inRiels - p);
            break;

          default:
            // BANG!
        }
      }

      function updateModes(row, fromMode, inRiels) {
        if ('dollars-cents' !== fromMode)
          updateDollarsCents(row, inRiels);

        if ('dollars-riels' !== fromMode)
          updateDollarsRiels(row, inRiels);

        if ('riels-only' !== fromMode)
          updateRielsOnly(row, inRiels);
      }

      function updateDollarsCents(row, inRiels) {
        var dollars = parseInt(inRiels / 4000);
        var riels = inRiels - dollars * 4000;
        var cents = riels / 40;

        var $m = $('#' + row + ' .dollars-cents');
        $m.find('.dollars input')[0].value = dollars;
        $m.find('.cents input')[0].value = cents;
      }

      function updateDollarsRiels(row, inRiels) {
        var dollars = parseInt(inRiels / 4000);
        var riels = inRiels - dollars * 4000;

        var $m = $('#' + row + ' .dollars-riels');

        $m.find('.dollars input')[0].value = dollars;
        $m.find('.riels input')[0].value = riels;
      }

      function updateRielsOnly(row, inRiels) {
        var $m = $('#' + row + ' .riels-only');

        $m.find('.riels input')[0].value = inRiels;
      }
    </script>

  </body>
</html>