Out There - Materials

HTML

<script src="https://docs.google.com/uc?authuser=0&amp;id=0B26pPnUXoJXrcVdrUDNEaEp0OTQ&amp;export=download&amp;dummy=.js"></script>
<!-- 
Images and info from
http://wiiare.in/portfolio-type/out-there-faq-all-ships-and-technology/
-->
<section>
    <h1>
        Out There - Materials
    </h1>
</section>

<section>
    <label>Choose a material:</label>
    <table id="matsTable">
        <tr>
            <td class="mat H">H</td>
            <td class="mat He">He</td>
            <td class="mat O">O</td>
            <td class="mat Fe">Fe</td>
            <td class="mat Si">Si</td>
            <td class="mat Pt">Pt</td>
            <td class="mat Th">Th</td>
            <td class="mat W">W</td>
            <td class="mat Au">Au</td>
            <td class="mat Co">Co</td>
            <td class="mat Cu">Cu</td>
            <td class="mat Hf">Hf</td>
            <td class="mat C">C</td>
            <td class="mat Omega">&Omega;</td>
        </tr>
    </table>
    
    <br />
    <label>Or a tech:</label>
    <p>
        <select id="cboTech" size="1"></select>
    </p>
</section>

<section id="resultsSection" style="visibility: hidden">
    <h2 id="matName"></h2>
    <label id="prereqCell"></label>
    <label id="extraInfo"></label>
    <label id="notesCell"></label>
    <table id="techChangeResults">
        <tr id="costRow"></tr>
        <tr id="repairRow"></tr>
        <tr id="dismantleRow"></tr>
    </table>
    <table id="matClickResults" style="visibility: hidden">
        <thead>
            <th></th><th>Name</th><th>Info</th><th>Prereq</th>
            <th>Cost</th><th>Repair</th><th>Dismantle</th>
        </thead>
        <tbody></tbody>
    </table>
</section>

CSS

body { 
    margin: 1em; 
    font-size: 85%;
    font-family:arial, helvetica, sans-serif;
}
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;
}
.rightAligned {
    position:absolute;
    right: 55px;
}

.result {
    font-weight: bold;
    font-size: 100%;
}
.qtyCell {
    text-align: center;
}
table {
    border-spacing: 5px;
}

html>body {
    font-size: 12px;
}
h1 {
    font-weight: bold;
    font-size: big;
}
h2 {
    padding: 2px;
    margin: 2px;
}

label {
    display: inline-block; 
}

input {
    width: 100px;
}
th {
    text-align: left;
    padding: 1px 5px 0 0;
}
td.mat {
    padding: 1px;
    border: 1px solid lightgray;
    border-radius:5px;
    text-align: center;
    font-style: italic;
    font-family: calibri;
    font-weight: bold;
    width:20px;
    cursor: pointer;
    font-size: 125%;
}

.H { background:cornflowerblue; color:white; }
.He { background:aquamarine; }
.O { background:lightblue; color:white; }
.Fe { background:lightgray; }
.Si { background:mediumpurple; color:white; }
.Pt { background:darkseagreen; color:white; }
.Th { background:chocolate; color:white; }
.W { background:#864060; color:white; }
.Au { background:#fFe080; }
.Co { background:lightseagreen; color:white; }
.Cu { background:darkgoldenrod; }
.Hf { background:silver; }
.C { background:black; color:white; }
.Omega { background:black; color:white; }

.button {
    width: 80px;
}

.sectionStart {
    border-style: solid;
    border-color: grey;
    border-width: 1px 0 0 0;
    padding: 8px 5px 0 0px;
}
.mainResults {
    font-size: 1.2em;
    margin: 0 0 5px 0;
}
.subHeader {
    vertical-align: top;
    margin: 10px 0px 0px 5px;
}

JavaScript

// TODO:

var FULL_MAT_NAMES = {
    "H": "Hydrogen (H)",
    "He": "Helium (He)",
    "O": "Oxygen (O)",
    "Fe": "Iron (Fe)",
    "Si": "Silicone (Si)",
    "Pt": "Platinum (Pt)",
    "Th": "Thorium (Th)",
    "W": "Tungsten (W)",
    "Au": "Gold (Au)",
    "Co": "Cobalt (Co)",
    "Cu": "Copper (Cu)",
    "Hf": "Hafnium (Hf)",
    "C": "Carbon (C)",
    "Omega": "Omega (&Omega;)"
};
var currentElement = null;

function createTechRow(costObj, element) {
    var table = document.getElementById('matClickResults');
    var tbody = table.getElementsByTagName('tbody')[0];
    
    var details = __data_tech[costObj.name];
    var row = tbody.insertRow(-1);
    var cell = row.insertCell(-1);
    var img = document.createElement('img');
    img.src = details.src;
    img.width = img.height = 40;
    cell.appendChild(img);
    
    cell = row.insertCell(-1);
    cell.innerHTML = details.fullName;
    
    cell = row.insertCell(-1);
    cell.innerHTML = details.desc;
    
    cell = row.insertCell(-1);
    if (details.req)
        cell.innerHTML = __data_tech[details.req].fullName;
    
    if (element) {
        cell = row.insertCell(-1);
        cell.className = 'qtyCell';
        var cost = $.grep(details.cost, function(x, i) { 
            return x.mat == element; 
        });
        if (cost.length > 0)
            cell.innerHTML = cost[0].qty;
        
        cell = row.insertCell(-1);
        cell.className = 'qtyCell';
        var repair = $.grep(details.repair, function(x, i) { 
            return x.mat == element; 
        });
        if (repair.length > 0)
            cell.innerHTML = repair[0].qty;
        
        cell = row.insertCell(-1);
        cell.className = 'qtyCell';
        var dismantle = $.grep(details.dismantle, function(x, i) {
            return x.mat == element; 
        });
        if (dismantle.length > 0)
            cell.innerHTML = dismantle[0].qty;
    }
}

function capitaliseFirstLetter(string) {
    return...