hippietrail/cambodiachange.html Secret

## cambodiachange.html
<!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 section = mode.parent();
          var sectionName = section[0].id;

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

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

        switch (mode) {
          case 'dollars-cents':
            var rm = $('#' + section + ' .' + 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(section, mode, inRiels);
            break;

          case 'dollars-riels':
            var rm = $('#' + section + ' .' + 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(section, mode, inRiels);
            break;

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

            inRiels = f[0];

            updateModes(section, mode, inRiels);
            break;

          default:
            // BANG!
        }

        switch (section) {
          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(section, fromMode, inRiels) {
        if ('dollars-cents' !== fromMode)
          updateDollarsCents(section, inRiels);

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

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

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

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

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

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

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

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

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

  </body>
</html>
	<!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 section = mode.parent();
	var sectionName = section[0].id;

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

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

	switch (mode) {
	case 'dollars-cents':
	var rm = $('#' + section + ' .' + 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(section, mode, inRiels);
	break;

	case 'dollars-riels':
	var rm = $('#' + section + ' .' + 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(section, mode, inRiels);
	break;

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

	inRiels = f[0];

	updateModes(section, mode, inRiels);
	break;

	default:
	// BANG!
	}

	switch (section) {
	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(section, fromMode, inRiels) {
	if ('dollars-cents' !== fromMode)
	updateDollarsCents(section, inRiels);

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

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

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

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

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

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

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

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

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

	</body>
	</html>