<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- PowerAttacker 0.1
Copyright 2007 by Erik Osheim <erik@osheim.org>

This file is licensed under the GNU General Public License.
http://www.gnu.org/copyleft/gpl.html -->

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Power Attacker!</title>
        <script type="text/javascript" src="file:///System/Library/WidgetResources/button/genericButton.js" charset="utf-8"></script>
        <script type="text/javascript" src="Fader.js"></script>
        <script type="text/javascript" src="PowerAttacker.js"></script>
        <script type="text/javascript">
            var x = 3;
            for(var i=0; i < 10; i++) {
                foo(i);
            }
        </script>
        <style type="text/css">@import "PowerAttacker.css";</style>
    </head>

    <body onLoad="loaded();">
        <div id='front' onmousemove="flipper.fadeIn();" onmouseout="flipper.fadeOut();"> 
            <table cellpadding="2" class="mainTable">
                <tr>
                    <td class="captionText">Attack Modifier</td>
                    <td><input id="attackModifier" class="numInput" value="0" onchange="recalculate();"/></td>
                    <td rowspan="3"><div id="result">666.00 hp/rnd</div></td>
                </tr>
                <tr>
                    <td class="captionText">Damage Modifier</td>
                    <td><input id="damageModifier" class="numInput" value="0" onchange="recalculate();"/></td>
                </tr>
                <tr>
                    <td class="captionText">Enemy AC</td>
                    <td><input id="enemyAC" class="numInput" value="10" onchange="recalculate();"/></td>
                </tr>
            </table>
            <span class='flip' id='fliprollie'></span>
            <span class='flip' id='flip' onclick='showBackside(event);' onmouseover='document.getElementById("fliprollie").style.display="block";' onmouseout='document.getElementById("fliprollie").style.display="none";'></span>
        </div>
        <div id='back'>
            <table class="backTable">
                <tr>
                    <td class="captionText">Base Attack</td><td><input class="numInput" id="baseAttack" onchange="recalculate();"/></td>
                    <td class="captionText">Total Attack</td><td><input class="numInput" id="totalAttack" onchange="recalculate();"/></td>
                </tr>
                <tr>
                    <td class="captionText">Total Damage</td><td><input class="numInput" id="totalDamage" onchange="recalculate();"/></td>
                    <td class="captionText">Has Power Attack</td><td><input type="checkbox" id="hasPowerAttack" value="1" onchange="recalculate();"/></td>
                </tr>
                <tr>
                    <td class="captionText">Threat Range</td>
                    <td>
                    <!--<form action="" onchange="recalculate();">-->
                    <form action="">
                        <select id="threatRange">
                            <option value="20">20</option>
                            <option value="19">19-20</option>
                            <option value="18">18-20</option>
                            <option value="17">17-20</option>
                            <option value="16">16-20</option>
                            <option value="15">15-20</option>
                            <option value="14">14-20</option>
                            <option value="13">13-20</option>
                        </select>
                    </form>
                    </td>                
                    <td class="captionText">Crit Multiplier</td>
                    <td>
                        <form action="">
                        <!--<form action="" onchange="recalculate();">-->
                            <select id="critMultiplier">
                                <option value="2">x2</option>
                                <option value="3">x3</option>
                                <option value="4">x4</option>
                            </select>
                        </form>
                    </td>
                </tr>

            </table>
            <div id='doneButton'></div>
        </div>
    </body>
</html>