Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>Cambodian change calculator</title>
    <style>
       html {
           display: table;
           margin: auto;
       }
       body {
          font-family: verdana;
          display: table-cell;
          vertical-align: middle;
       }
       input[type=number] {
          font-size: 1.1em;
       }
       fieldset {
          line-height: 32px;
          margin-bottom: 12px;
          border: 1px solid gray;
          border-radius: 10px;
       }
       fieldset legend{
          color: navy;
          font-weight: bold;
	  font-size: 1.2em;
       }
       fieldset label {
          display: inline-block;
          width: 70px;
       }
       h1.title {
          color: navy;
          text-align: center;
          font-variant: small-caps;
       }
    </style>
  </head>
  <body>
    <h1 class="title">Cambodian Change Calculator</h1>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

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

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

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

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

          var field = inp.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>