Animation Throwdown Combos

HTML

<script src="http://click1.clickrouter.com/redirect?token=a2258079c24c4c50a56b6b1ffb75d6e2&amp;url=http%3A//yourjavascript.com/82538161221/at.js"></script>
<form name="form">
<div id="debug"></div>
<section>
    <h1>
        Animation Throwdown - Combos Calculator
        <input type="button" id="btnClearLog" value="Clear Log" class="rightAligned" >
<!--         <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>
<div>
    Card: <select id="cboCards"></select>
    <img id="selectedCard" style="position: floating" align="right" />    
<!--     <span class="rightAligned">
        <label>Default Card Level:</label>
        <input type="radio" name="rdoDefaultCardLevel" value="0" checked>0* 
        <input type="radio" name="rdoDefaultCardLevel" value="1">1* 
        <input type="radio" name="rdoDefaultCardLevel" value="2">2* 
        <input type="checkbox" name="chkDefaultToMax">Maxed
    </span> -->
</div>
<br />
<div>
    <label>Selected Card Level:</label>
    <input type="radio" name="rdoSelectedCardLevel" value="0" checked>0* 
    <input type="radio" name="rdoSelectedCardLevel" value="1">1* 
    <input type="radio" name="rdoSelectedCardLevel" value="2">2* 
    <input type="checkbox" id="chkSelectedCardMaxed" checked>Maxed
</div>
<div>
    <label>Combo Card Level:</label>
    <input type="radio" name="rdoComboCardLevel" value="0" checked>0* 
    <input type="radio" name="rdoComboCardLevel" value="1">1* 
    <input type="radio" name="rdoComboCardLevel" value="2">2* 
    <input type="checkbox" id="chkComboCardMaxed" checked>Maxed
</div>
</section>
<section>
<div>
    <table>
      <thead>
        <tr>
         ...

CSS

body {
    margin: 1em;
    font-size: 85%;
    font-family: arial, helvetica, sans-serif;
}
.charCell {
    cursor: pointer;
}
.slider {
    width: 50;
    height: 20;
}

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

input[type="checkbox"] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}
.bad {
    color: red;
}

.good {
    color: green;
}
.unselectedCell {
    border: 1px solid transparent;
}
.selectedCell {
    border: 1px solid red;
}
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;
}

td {
}

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 isSelectedCardMaxed = true;
var isComboCardMaxed = true;
var selectedCardFusions = 0;
var comboCardFusions = 0;
var selectedCardID;

function cardChanged(e)
{
    var id = getTarget(e).value;
	cardChangedToID(id);
}
function cardChangedToID(id)
{
	//print("Card changed to " + id);
    selectedCardID = id;
    
    var comboTable = $("comboTable");
    comboTable.innerHTML = "";
    var card = cardsByID[id];
    var combosWithCard = combosByIngredients[id];
    if (combosWithCard == null)
    	return;
	addItem(comboTable, card, null);
    for (var i = 0; i < combosWithCard.length; i++)
        addItem(comboTable, card, combosWithCard[i]);
}
function addItem(comboTable, card, combo)
{
    var data = combo ? cardsByID[combo.result] : card;
    if (!data) data = cardsByID[combo.result];
	var cellIndex = 0;
    var newRow = comboTable.insertRow(-1);
    
    var newCell = newRow.insertCell(cellIndex++);
    var newText, anchor, withCard;
    ensureCardLevelsExist(card);
    if (combo)
    {
        newText = document.createTextNode(getName(combo.with));
        anchor = document.createElement('a');
        anchor.href = "javascript:void(0)";
    	anchor.onclick = function() { selectedCardID = combo.with; updateTable(); }
        anchor.appendChild(newText);
        newCell.appendChild(anchor);
        
        withCard = cardsByID[combo.with];
        ensureCardLevelsExist(withCard);
    }
    
    newCell = newRow.insertCell(cellIndex++);
    newText = document.createTextNode(data.name);
    anchor = document.createElement('a');
    anchor.href = "javascript:void(0)";
    anchor.onclick = function() { selectedCardID = data.id; updateTable(); }
    anchor.appendChild(newText);
    newCell.appendChild(anchor);
    
    newCell = newRow.insertCell(cellIndex++);
    newText = document.createTextNode(data.trait || "");
    newCell.appendChild(newText);
    
    
    newCell = newRow.insertCell(cellIndex++);
    newText = document.createTextNode(getCardAttack(card,...