bossraids script

HTML

<div id="wrapper">
    <h1 title="this site looks pretty damn good in all modern browsers, but was optimized for google chrome. if you have trouble seeing any of the elements below, please update your browser to it's latest version, and enjoy a whole new world of web experience! users of Internet Explorer 8 and below.... go get a new browser.">
        boss raids calculator</h1>
    <div id="i">fill in the blanks from the selections (Make a selection from each field, or the
        script will fail):</div>
    <p>
        I want to attack a/n
        <select id="boss" title="the name of the boss you want to attack">
            <option class="defaultOption">boss</option>
            <option>dragon</option>
            <option>moloch</option>
            <option>hydra</option>
            <option>octopus</option>
        </select>
        level
        <select id="level" title="the level of the boss you want to attack">
            <option class="defaultOption">level</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
        with
        <select id="unit" title="the troop type you want to send to attack this boss">
            <option class="defaultOption">unit</option>
            <option class="landUnit">berserkers</option>
            <option class="landUnit">rangers</option>
            <option class="landUnit">guardians</option>
            <option class="landUnit">crossbowmen</option>
            <option class="landUnit">knights</option>
            <option class="landUnit">mages</option>
            <option class="landUnit">warlocks</option>
            <option class="landUnit">templars</option>
            <option class="landUnit">paladins</option>
            <option...

CSS

img {display:none;}
body
{
    background: black;
}
h1
{
    font: 40px "Trebuchet MS" , sans-serif;
    background: #C6B9A5;
    width: 400px;
    text-align: center;
    margin-left: 125px;
    margin-top: 25px;
    border-radius: 8px;
    box-shadow: inset 0px 0px 8px black;
    border: 1px solid black;
    text-transform: capitalize;
}
#i
{
    font: 14px "Trebuchet MS" , sans-serif;
    background: #C6B9A5;
    width: 630px;
    text-align: center;
    margin: 0px 10px 0px 10px;
    border-radius: 8px;
    box-shadow: inset 0px 0px 8px black;
    border: 1px solid black;
    text-transform: capitalize;
}
p
{
    font: 14px "Trebuchet MS" , sans-serif;
    background: #C6B9A5;
    width: 580px;
    margin: 20px 25px 0px 25px;
    border-radius: 8px;
    box-shadow: inset 0px 0px 8px black;
    border: 1px solid black;
    padding: 10px;
}
select
{
    background: #C6B9A5;
    font: 14px "Trebuchet MS" , sans-serif;
    border: none;
    border-bottom: 1px dashed black;
}
input
{
    width: 30px;
    background: #C6B9A5;
    font: 14px "Trebuchet MS" , sans-serif;
    border: none;
    border-bottom: 1px dashed black;
}
button
{
    background: #C6B9A5;
    font: 18px "Trebuchet MS" , sans-serif;
    width: 250px;
    height: 50px;
    border-radius: 8px;
    box-shadow: inset 0px 0px 8px black;
    border-color: gray;
    margin: 5px 0px 0px 200px;
}
#output
{
    font: 20px "Trebuchet MS" , sans-serif;
    background: #C6B9A5;
    width: 580px;
    height:100px;
    margin: 6px 25px 0px 25px;
    border-radius: 8px;
    box-shadow: inset 0px 0px 8px black;
    border: 1px solid black;
    padding: 10px;
    text-shadow: 0px 0px 3px black;
}
#guaranteed
{
    color: green;
}
#seventyFive
{
    color: yellow;
}
#fifty
{
    color: orange;
}
#twentyFive
{
    color: red;
}
#wrapper
{
    position: relative;
    margin: 0 auto;
    width: 650px;
    height: 500px;
    border: 1px solid black;
}
#peg
{
    display:block;
    z-index: -1;
    position: absolute;
 ...

JavaScript

precentResult = 0;
//hides irrelevant units---------------------->>>

function hideUnnecessaryUnits() {

    if ($('#boss').val() == 'octopus') {
        $('.seaUnit').css('display', 'block');
        $('.landUnit').css('display', 'none');
    }
    if ($('#boss').val() != 'octopus') {
        $('.seaUnit').css('display', 'none');
        $('.landUnit').css('display', 'block');
    }
}

function Answer() {
    // sets the unit numbers for each boss ----------->>
    berForDraMol = [
        50, 300, 2000, 4000, 10000, 15000, 20000, 30000, 45000, 60000];
    ranForDraMol = [
        84, 500, 3334, 6667, 16667, 25000, 33334, 50000, 75000, 100000];
    guaForDraMol = [
        250, 1500, 10000, 20000, 50000, 75000, 100000, 150000, 225000, 300000];
    temForDraMol = [
        100, 600, 4000, 8000, 20000, 30000, 40000, 60000, 90000, 120000];
    croForDra = [
        42, 250, 1700, 3300, 8300, 12500, 17000, 25000, 37500, 50000];
    kniForDra = [
        19, 112, 756, 1467, 3689, 5556, 7556, 11112, 16667, 22223];
    magForDraHyd = [
        36, 215, 1429, 2858, 7143, 10715, 14286, 21429, 32143, 42858];
    warForDraHyd = [
        21, 125, 834, 1667, 4167, 6250, 8334, 12500, 18750, 250000];
    palForDra = [
        28, 167, 1134, 2200, 5534, 8334, 11334, 16667, 25000, 33334];
    croForMolHyd = [
        63, 375, 2500, 5000, 12500, 18750, 25000, 37500, 56250, 75000];
    kniForMolHyd = [
        28, 167, 1112, 2223, 5556, 8334, 11112, 16667, 25000, 33334];
    palForMolHyd = [
        42, 250, 1667, 3334, 8334, 12500, 16667, 25000, 37500, 50000];
    berForHyd = [
        34, 200, 1360, 2640, 6640, 10000, 13600, 20000, 30000, 40000];
    ranForHyd = [
        56, 334, 2267, 4400, 11067, 16667, 22667, 33334, 50000, 66667];
    guaForHyd = [
        168, 1000, 6800, 13200, 33200, 50000, 68000, 100000, 150000, 200000];
    temForHyd = [
        68, 400, 2720, 5280, 13280, 20000, 27200, 40000, 60000, 80000];
    magForMol = [
        24, 143, 972, 1886, 4743, 7143,...