Endless Frontier - Unit Upgrades

HTML

<section>
    <h1>
        Endless Frontier - Unit Upgrades
<!--         <span class="rightAligned">            
           <input type="button" id="btnSave" value="Save" 
                  title="Save the current data in the browser's local storage" />
           <input type="button" id="btnLoad" value="Load"
                  title="Load data from the browser's local storage" />
        </span> -->
    </h1>
</section>
<!-- <section>
    <input type="button" id="btnClearLog" value="Clear" />
    <div id="debug">
    </div>
</section> -->

<section>
    <table>
        <tr>
            <th></th>
            <th>Current</th>
            <th>Wanted</th>
            <th>Cost</th>
        </tr>
        <tr>
            <th class="subTH">Gold Level</th>
            <td><!-- <input type="number" id="txtGoldLevelBefore" value="901" /> --></td>
            <td><input type="number" id="txtGoldLevelAfter" value="901" /></td>
        </tr>
        <tr>
            <th class="subTH">Medal Level</th>
            <td><select id="txtMedalLevelBefore"></select></td>
            <td><select id="txtMedalLevelAfter"></select></td>     
            <td id="medalCostOut" class="bordered"></td>
        </tr>
    </table>
    <table>
        <tr>
            <th></th>
            <th title="Stat shown on the unit's page in the Unit Book">Initial*</th>
            <th title="Shown on the unit details page in your units tab">Artifact Buff</th>
            <th title="Shown on the unit details page in your units tab">Unit Buff</th>
            <th>Result</th>
        </tr>
        <tr>
            <th class="subTH">Attack</th>
            <td><input type="number" step="any" id="txtAttackIn" value="44" /></td>
            <td><input type="number" step="any" id="txtAttackBonus1" value="1492" /></td>
            <td><input type="number" step="any" id="txtAttackBonus2" value="106" /></td>
            <td id="txtAttackOut" class="bordered"></td>
        </tr>
        <tr>
            <th...

CSS

body {
    margin: 1em;
    font-size: 85%;
    font-family: arial, helvetica, sans-serif;
}

.slider {
    width: 50;
    height: 20;
}

input[type="text"] {
    width: 10px;
    text-align: right;
}

.bad {
    color: red;
}

.good {
    color: green;
}

p {
    font-size: 1em;
    margin: 0 0 .8em 0;
}

#chkMoveMenu {
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

.rightAligned {
    position: absolute;
    right: 55px;
}

.rightAligned2 {
    position: absolute;
    right: 30px;
}

.setName {
    font-style: italic;
}

html>body {
    font-size: 12px;
}

h1 {
    font-weight: bold;
    font-size: big;
}

th {
    text-align: left;
    padding: 1px 5px 0 0;
    border-bottom: 1px solid gray;
    padding: 3px;
}
.subTH {
    border-bottom: none;
}
td {
}
input[type="number"] {
    width: 50px;
}
.bordered {
    border: 1px solid gray;
}
section {
    font-size: 1em;
    border: 3px solid white;
    margin: 10px 0 0 0;
    padding: 5px;
    vertical-align: middle;
    box-shadow: 0px 0px 20px 3px #d3d3d3;
    border-radius: 4px;
    background-color: #ffffff;
}

.best {
    background-color: lightcyan;
    font-weight: bold;
}

JavaScript

var medalIncrement = 100;
var medalCosts = 
[
    0,
    15316,
    45603,
    76348,
    108333,
    143588,
    187538,
    254558,
    382770,
    673358,
    1394789,
    3259341,
    8156958,
    19423651,
]
function $(id) { return document.getElementById(id) };

function calc()
{
	print("Calculating..");
	//var goldBefore = parseInt($('txtGoldLevelBefore').value);
    var goldBefore = 1;
    var goldAfter = parseInt($('txtGoldLevelAfter').value);
    var medalsBefore = parseInt($('txtMedalLevelBefore').value);
    var medalsAfter = parseInt($('txtMedalLevelAfter').value);
    var atkBefore = parseFloat($('txtAttackIn').value);
    var hpBefore = parseFloat($('txtHealthIn').value);
    var pdefBefore = parseFloat($('txtPDefIn').value);
    var mdefBefore = parseFloat($('txtMDefIn').value);
    var atkBonus1 = parseFloat($('txtAttackBonus1').value);
    var hpBonus1 = parseFloat($('txtHealthBonus1').value);
    var pdefBonus1 = parseFloat($('txtPDefBonus1').value);
    var mdefBonus1 = parseFloat($('txtMDefBonus1').value);
    var atkBonus2 = parseFloat($('txtAttackBonus2').value);
    var hpBonus2 = parseFloat($('txtHealthBonus2').value);
    var pdefBonus2 = parseFloat($('txtPDefBonus2').value);
    var mdefBonus2 = parseFloat($('txtMDefBonus2').value);
    print("Gold: " + goldBefore + " -> " + goldAfter);
    print("Medals: " + medalsBefore + " -> " + medalsAfter);
    print("Stats: " + atkBefore + "atk, " + hpBefore + "hp, " + pdefBefore + "pdef, " + mdefBefore + "mdef");
    print("Bonuses: " + (atkBonus1 + atkBonus2) + "atk, " + (hpBonus1 + hpBonus2) + "hp, " + (pdefBonus1 + pdefBonus2) + "pdef, " + (mdefBonus1 + mdefBonus2) + "mdef");
    if (isNaN(goldBefore) 
    	|| isNaN(goldAfter) 
        || isNaN(medalsBefore) 
        || isNaN(medalsAfter)
    	|| isNaN(atkBefore) 
        || isNaN(hpBefore) 
        || isNaN(pdefBefore) 
        || isNaN(mdefBefore)
    	|| isNaN(atkBonus1) 
        || isNaN(hpBonus1) 
        || isNaN(pdefBonus1) 
        ||...