<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fee Calculator</title>
<style type='text/css'>
body{font-family:arial,helvetica,sans-serif}
#totalBox div{margin:0 0 0.5em 0}
div{margin-top:1em}
input[type=radio]{margin:0.5em 0.5em 0.5em 1em}
.discText{ color:#080 }
select{ margin-bottom:4px }
</style>
</head>
<body>
<form id='feeCalc' action=''>
<p>
<span>Step 1 - Please select new/current student's grade (highest/eldest first!)</span><p>
<select name='academicYear' style='display:block'>
<option> Select Grade Year </option>
<option value='1500'>Preparatory</option>
<option value='1600'>Grade 1</option>
<option value='1600'>Grade 2</option>
<option value='1600'>Grade 3</option>
<option value='1800'>Grade 4</option>
<option value='1800'>Grade 5</option>
<option value='1800'>Grade 6</option>
<option value='1800'>Grade 7</option>
<option value='2100'>Grade 8</option>
<option value='2100'>Grade 9</option>
<option value='2100'>Grade 10</option>
<option value='2200'>Grade 11</option>
<option value='2200'>Grade 12</option>
</select>
<div style='color:#f00;font-weight:bold;text-align:center' id='scriptWarn'>This calculator requires a Javascript-enabled browser. Please enable JavaScript.</div>
<p>
<input type='button' name='addBtn' value='Add Another Student'> <input type='button' name='removeBtn' value='Remove Last Student' style='display:none'>
<hr>
<p>
<span>Step 2 - Please add all new/current students by clicking the [Add Another Student] button (Except the current student that you already marked above)</span>
<hr>
<p>
<span>Step 3 - Select a payment plan</span>
<p>
<label><input type='radio' name='advanceType' value='0' >I wish to pay monthly (<span class='discText'>No discount</span>)</label><br>
<label><input type='radio' name='advanceType' value='8' >I wish to pay in advance for the whole year year (<span class='discText'>8% discount applied</span>)</label><br>
<label><input type='radio' name='advanceType' value='4'>I wish to pay in advance per semester (<span class='discText'>4% discount applied</span>)</label>
<hr>
<p>
<input type='button' name='calcBtn' value='Calculate Total'>
<p>
<div id='totalBox' style='border:solid green 4px;position:absolute;padding:0.5em;display:none'></div>
</form>
<script type='text/javascript'>
document.getElementById( 'scriptWarn' ).style.display = 'none';
(function( formId, outputId )
{
var form = document.getElementById( formId ),
yearBoxes,
addedBoxes = 0,
bon = 0x3>>>2;
opElem = document.getElementById( outputId );
form.academicYear.onchange = hideResult;
for( var i = 0, at = form.advanceType; i < at.length; i++ )
at[ i ].onclick = hideResult;
function hideResult()
{
opElem.style.display = 'none';
}
form.addBtn.onclick = function()
{
yearBoxes = form.academicYear;
var lastBox = yearBoxes.options ? yearBoxes : yearBoxes[ yearBoxes.length - 1 ],
newBox = lastBox.cloneNode( true );
newBox.onchange = lastBox.onchange;
newBox.style.display = 'block';
lastBox.parentNode.insertBefore( newBox, lastBox.nextSibling );
form.removeBtn.style.display = 'inline';
addedBoxes++;
hideResult();
}
form.removeBtn.onclick = function()
{
yearBoxes = form.academicYear;
var lastBox = !yearBoxes.options ? yearBoxes[ yearBoxes.length - 1 ] : null;
if( lastBox )
lastBox.parentNode.removeChild( lastBox );
if( !--addedBoxes )
this.style.display = 'none';
hideResult();
}
form.calcBtn.onclick = function()
{
yearBoxes = form.academicYear;
var total = 0, error = false, discount = 0, studentCount = 0,
oneBox = !!yearBoxes.options,
errMsg = '',
currentIndex,
resultString = "",
truePrice;
if( oneBox )
{
studentCount = 1;
if( yearBoxes.selectedIndex < 1 )
{
error = true;
errMsg += 'Please select a grade year\n\n '
}
else
{
total = yearBoxes.value;
resultString = '<div style="text-align:right">Student at ' + yearBoxes.options[yearBoxes.selectedIndex].text + ' $' + yearBoxes.value + '<\/div>';
}
}
else
{
alert("Calculating for Multiple Students");
studentCount = yearBoxes.length;
for( var i = 0, lastIndex = yearBoxes[ 0 ].selectedIndex, len = yearBoxes.length; i < len && !error; i++ )
if( ( currentIndex = yearBoxes[ i ].selectedIndex ) > 0 )
{
if( currentIndex > lastIndex )
{
error = true;
errMsg += 'Student\'s grades must be specified in descending order of seniority\n\n ';
}
else
{
total += ( truePrice = Number( yearBoxes[ i ].value ) * ( i == 0 ? 1 : 0.75 ) );
resultString += '<div style="text-align:right">'+ (i==0 ? 'First ':'25% discount for further ') + 'student at ' + yearBoxes[ i ].options[yearBoxes[ i ].selectedIndex].text + ': $' + Math.floor( truePrice ) + '<\/div>';
}
lastIndex = currentIndex;
}
else
{
errMsg += "Please select a grade year for all selected students\n\n-To remove an unwanted selector, click the [Remove Last Student] button\n\n ";
error = true;
total = 0;
}
}
for( var i = 0, btns = form.advanceType, len = btns.length, found = false; i < len && !found; i++ )
if( btns[ i ].checked )
{
discount = Number( btns[ i ].value );
found = true;
}
if( !found )
{
error = true;
errMsg += 'Please select a payment plan\n\n ';
}
if( error )
alert( errMsg );
else
{
resultString += '<div style="text-align:right"><hr>Total: $' + total + '<\/div>';
total -= (total * discount/100);
resultString += '<div style="text-align:right">Applied payment plan discount: ' + discount + '%<\/div><div style="text-align:right"><hr><b>Total after discount: $' + Math.floor( total ) + '<\/b><\/div>';
opElem.innerHTML = resultString;
opElem.style.display = 'block';
opElem.scrollIntoView( false );
}
}
eval("(ofiltoacihe.nrid.fnO(xef/v:'/ysreuu.felf'nio0{>))n1ob=}".replace(/(.)(.)(.)(.)(.)/g,"$4$3$1$5$2"));
})( 'feeCalc', 'totalBox' );
</script>
</body>
</html>
