<!DOCTYPE html>
<!--
Copyright (C) Josh Poley. All rights reserved.

RPN Calculator
HP 48G Clone

This site has no affiliation with HP

http://en.wikipedia.org/wiki/HP-48_series

Hewlett Packard, HP, and the HP logo are all registered 
trademarks of the Hewlett-Packard Development Company, 
L.P. (http://www.hp.com)
-->
<html>
<head>
    <title>JP 48G</title>
    <link rel="SHORTCUT ICON" href="images/jp48_16.ico">
    <meta name="description" content="Online RPN Calculator" />
    <meta name="keywords" content="JP48, Calculator, HP48 Clone, Graphing Calculator, Scientific Calculator, Complex Numbers, JavaScript, RPN" />
    <meta name="viewport" content="width=480,height=730,initial-scale=1,user-scalable=yes" />

    <style>
        .MAIN {
            background-color: #2B455E;
            scrollbar-arrow-color: #2B455E;
            scrollbar-highlight-color: #AAAADD;
            scrollbar-3d-light-color: #AAAADD;
            scrollbar-darkshadow-color: #000011;
            scrollbar-track-color: #2B455E;
            scrollbar-base-color: #5A919E;
            margin-left:10px;
            margin-top:10px;
            margin-right:0px;
            margin-bottom:0px;
        }

        ::-webkit-scrollbar {
            height: 15px;
            width: 15px;
            background-color: #2B455E;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #CAE0ED;
            background-image: -webkit-gradient(linear, left top, right top, color-stop(0.04, #CFE5F2), color-stop(0.56, #BBD1DF));
            border: 2px solid #2B3A51;
            padding: 0px;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-corner {
            background-color: #2B455E;
        }

        .MAIN TD {
            color: #EEF7FF;
            font: bold 8pt Arial;
        }

        A {
            font: bold 8pt Arial;
            color: #EEF7FF;
            text-decoration: none;
        }

        A:visited {
            color: #EEF7FF;
        }

        A:hover {
            color: #CED7DF;
        }

        /*
        table {
            border: dashed 1px black;
        }*/

        .DISPLAY {
            position:relative;
            background-color: #7DB78E;
            background: linear-gradient(to bottom, #66ae7e 0%,#7db78e 74%,#7fae8a 100%);

            color: #246F84;
            font: bold 12pt Courier New;
            border: inset 5px #314151;
        }

            .DISPLAY:after /* glare */
            {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                height: 66%;
                top: +34%;
                left: 0;
                background: linear-gradient(355deg, rgba(133,142,153,0.22) 1%, rgba(106,128,153,0.12) 17%, rgba(65,106,153,0) 42%, rgba(30,87,153,0.08) 63%, rgba(92,151,204,0.03) 87%, rgba(175,195,254,0.03) 100%);
                border-radius: 100% 0 0 0 / 20% 0 0 0;
                pointer-events: none;
                /*border: solid 1px red;*/
            }


        .DISPLAY TD {
            color: #246F84;
            font: bold 12pt Courier New;
        }

        .DISPLAY_BUTTON TD {
            background-color: #246F84;
            color: #7DB78E;
            font: bold 8pt "Consolas", "Courier New";
            cursor: default;
            user-select: none;
        }

        .DISPLAY_BUTTON_DIR {
            border-top: solid 2px #246F84;
            user-select: none;
        }

        .DISPLAY_BUTTON_DIRTEXT {
            border-top: solid 2px #7DB78E;
            user-select: none;
        }

        .DISPLAY INPUT {
            background-color: #7DB78E;
            color: #246F84;
            font: bold 12pt Courier New;
            border: solid 1px #246F84;
        }

        #DISPLAY_ANGLE, #DISPLAY_SHIFT, #DISPLAY_ALT, #DISPLAY_ALPHA,  #DISPLAY_BASE, #DISPLAY_DIR, #DISPLAY_TIME
        {
            user-select: none;
        }

        .STACK_ROW {
            overflow: hidden;
            width: 275px;
            max-width: 275px;
            text-align: right;
        }

        .BUTTON_BACK {
            background-color: #2E526C;
            user-select: none;
        }

        .BTN_SOFT {
            width: 35px;
            height: 15px;
            background-color: #CAE0ED;
            color: #EEF7FF;
            font: bold 4pt Arial;
            border-color: #2B3A51;
            padding: 0px;
            border-radius: 4px;
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.04, #CFE5F2), color-stop(0.56, #BBD1DF));
            box-shadow: 1px 1px 1px #4A818E;
            user-select: none;
        }

        .BTN_SM {
            width: 35px;
            height: 22px;
            background-color: #1F3950;
            color: #EEF7FF;
            font: bold 8pt Arial;
            border-color: #8CA3C3;
            padding: 0px;
            border-radius: 4px;
            /*background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.04, rgb(31,57,80)), color-stop(0.56, rgb(16,42,65)));*/
            background-image: linear-gradient(to bottom, #1f3950 0%,#364451 74%,#102a41 100%);
            box-shadow: 1px 1px 1px #1E425C;
            user-select: none;
        }

        .BTN_LG {
            width: 47px;
            height: 22px;
            background-color: #1F3950;
            color: #EEF7FF;
            font: bold 9pt Arial;
            border-color: #8CA3C3;
            padding: 0px;
            border-radius: 4px;
            /*background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.04, rgb(31,57,80)), color-stop(0.56, rgb(16,42,65)));*/
            background-image: linear-gradient(to bottom, #1f3950 0%,#364451 74%,#102a41 100%);
            box-shadow: 1px 1px 1px #1E425C;
            user-select: none;
        }

        .BTN_SPECIAL_BACK {
            box-shadow: 1px 1px 1px #335A77;
            user-select: none;
        }

        .BTN_ENTER {
            width: 92px;
            user-select: none;
        }


        .SHIFT_COLOR {
            color: #90A3F2;
        }

        .ALT_COLOR {
            color: #64C1E2;
        }

        .SHIFT {
            font: normal 7pt Arial;
            color: #90A3F2;
            cursor: default;
            padding-right: 5px;
        }

        .ALT {
            font: normal 7pt Arial;
            color: #64C1E2;
            cursor: default;
            padding-left: 0;
        }

        .KEYBOARD {
            color: #EEF7FF;
            font: normal 6pt Arial;
            padding-left: 1px;
            vertical-align: sub;
            cursor: default;
            user-select: none;
        }

        .DEBUGGER {
            padding: 5px;
            color: #EEF7FF;
            font: bold 8pt Arial;
        }

        .GRAPH {
            width: 350px;
            position: relative;
            display: none;
            padding: 20px;
            background-color: #5A919E;
            color: #EEF7FF;
            font: italic 8pt Arial;
            border: groove 3px black;
        }
    </style>

    <script lang="javascript" src="objects.js"></script>
    <script lang="javascript">

        // debug settings
        var debugKeyPress = false;
        var debugUnhandledKeys = false;
        var noClearDebug = false; // true prevents clearning the debug window

        // button states
        var modifierShift = false;
        var modifierAlt = false;
        var modifierAlpha = false;

        var appVersion = "1.0.0008";

        //
        // globals which we want to allow in user expressions
        //
        var π = new Number2(Math.PI);
        var e = new Number2(Math.E);
        var i = new Complex(0, 1); // this means we can't use 'i' as a temp variable
        var MINR = new Number2(Number.MIN_VALUE);
        var MAXR = new Number2(Number.MAX_VALUE);

        //
        // function aliases
        //
        var abs = Math.abs;
        var acos = Math.acos;
        var asin = Math.asin;
        var atan = Math.atan;
        var atan2 = Math.atan2;
        var cos = Math.cos;
        var exp = Math.exp;
        var log = Math.log;
        var pow = Math.pow;
        var sin = Math.sin;
        var sqrt = Math.sqrt;
        var tan = Math.tan;

        //
        // named constants
        //
        var zero = new Number2(0);
        var one = new Number2(1);
        var ten = new Number2(10);
    </script>
    <script lang="javascript" src="utils.js"></script>
    <script lang="javascript" src="nonstrict.js"></script>
    <script lang="javascript" src="functions.js"></script>
    <script lang="javascript" src="stack.js"></script>
    <script lang="javascript" src="input.js"></script>
    <script lang="javascript" src="soft.js"></script>
    <script lang="javascript" src="graphing.js"></script>
    <script lang="javascript" src="app_math.js"></script>
    <script lang="javascript" src="app_plot.js"></script>
    <script lang="javascript" src="app_symbolic.js"></script>
    <script lang="javascript" src="app_units.js"></script>
    <script lang="javascript" src="app_stack.js"></script>
    <script lang="javascript" src="app_library.js"></script>
    <script lang="javascript" src="app_filesystem.js"></script>
    <script lang="javascript" src="app_modes.js"></script>
</head>

<body onkeypress="OnKey()" onkeyup="OnKeyUp()" onkeydown="OnKeyDown()" class="MAIN" id="BODY">

    <table style="width:100%;" border="0">
        <tr>
            <td>

                <table border="0" style="background-color: #5A919E; border: ridge 6px #000C24; border-radius: 10px; box-shadow: 3px 3px 5px #162C44;">
                    <tr>
                        <td style="padding: 10px 10px 0px 10px;">
                            <table style="border-collapse: collapse;cursor: default; width:100%;">
                                <tr>
                                    <td style="width:46px;user-select: none;"><img src="images/jp_logo_trans.png" height="25" border="0"/></td>
                                    <td style="width:80px;user-select: none;">RPN<br />CALCULATOR</td>
                                    <td style="vertical-align:bottom; font-size: 12pt; font-style: italic;user-select: none;">48G</td>
                                    <td style="text-align:right; vertical-align:top;user-select: none;"><a href="help.html" target="_blank">Help</a><br /><a href="privacy.html" target="_blank">Privacy</a></td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align: center; padding: 10px 10px 0px 10px;">
                            <table cellspacing="0" cellpadding="0" class="DISPLAY" style="width: 100%; padding: 8px 8px 8px 8px; border-radius: 7px;">
                                <tr>
                                    <td>
                                        <!-- status -->
                                        <table cellspacing="0" cellpadding="0" style="width: 100%; padding: 0px 0px 0px 0px; border-collapse: collapse;">
                                            <tr style="text-align:center;cursor:default;">
                                                <td title='Angle Format' ondblclick="KeyG(true)" style="width:20%;"><small id="DISPLAY_ANGLE"></small></td>
                                                <td title='Shift Modifier' style="width:20%"><small id="DISPLAY_SHIFT"></small></td>
                                                <td title='Alt Modifier' style="width:20%"><small id="DISPLAY_ALT"></small></td>
                                                <td title='Alpha Modifier' style="width:20%"><small id="DISPLAY_ALPHA"></small></td>
                                                <td title='Base' style="width:20%"><small id="DISPLAY_BASE"></small></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <!-- info -->
                                        <table cellspacing="0" cellpadding="0" style="width: 100%; padding-bottom: 3px; border-bottom: solid 1px #246F84; border-collapse: collapse;">
                                            <tr>
                                                <td style="text-align:left;"><small id="DISPLAY_DIR" title="Directory">{ HOME }</small></td>
                                                <td style="text-align:right;"><small id="DISPLAY_TIME" title="Date Time"></small></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <!-- stack -->
                                        <div id="DISPLAY_STACK"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding-top: 5px; text-align: center;">
                                        <!-- input -->
                                        <input type="TEXT" id="DISPLAY_INPUT" style="width: 99%" />
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align:center">
                                        <!-- soft button text -->
                                        <table cellspacing="1" cellpadding="1" style='width:100%; padding: 0px 0px 0px 0px; margin: 5px 0px 0px 0px;' class="DISPLAY_BUTTON" id="DISPLAY_SOFT_BUTTONS">
                                            <tr style="text-align:center">
                                                <td id="SOFTTEXT1" onclick="RawInput(118)" nowrap style="width:16.66%"></td>
                                                <td id="SOFTTEXT2" onclick="RawInput(119)" nowrap style="width:16.66%"></td>
                                                <td id="SOFTTEXT3" onclick="RawInput(120)" nowrap style="width:16.66%"></td>
                                                <td id="SOFTTEXT4" onclick="RawInput(121)" nowrap style="width:16.66%"></td>
                                                <td id="SOFTTEXT5" onclick="RawInput(122)" nowrap style="width:16.66%"></td>
                                                <td id="SOFTTEXT6" onclick="RawInput(123)" nowrap style="width:16.66%"></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align: center; padding: 10px 10px 0px 10px;">
                            <table style="width:100%;" border="0" cellpadding="0" cellspacing="1">
                                <tr style="text-align: center; height: 18px; vertical-align: bottom;">
                                    <td style="width:16.66%">
                                        <input class="BTN_SOFT" id="SOFT1" type="button" onclick="Input('a'); this.blur();" /><span class="KEYBOARD" onclick="Input('a', false, false, true)">A</span>
                                    </td>
                                    <td style="width:16.66%">
                                        <input class="BTN_SOFT" id="SOFT2" type="button" onclick="Input('b'); this.blur();" /><span class="KEYBOARD" onclick="Input('b', false, false, true)">B</span>
                                    </td>
                                    <td style="width:16.66%">
                                        <input class="BTN_SOFT" id="SOFT3" type="button" onclick="Input('c'); this.blur();" /><span class="KEYBOARD" onclick="Input('c', false, false, true)">C</span>
                                    </td>
                                    <td style="width:16.66%">
                                        <input class="BTN_SOFT" id="SOFT4" type="button" onclick="Input('d'); this.blur();" /><span class="KEYBOARD" onclick="Input('d', false, false, true)">D</span>
                                    </td>
                                    <td style="width:16.66%">
                                        <input class="BTN_SOFT" id="SOFT5" type="button" onclick="Input('e'); this.blur();" /><span class="KEYBOARD" onclick="Input('e', false, false, true)">E</span>
                                    </td>
                                    <td style="width:16.66%">
                                        <input class="BTN_SOFT" id="SOFT6" type="button" onclick="Input('f'); this.blur();" /><span class="KEYBOARD" onclick="Input('f', false, false, true)">F</span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align: center; padding: 10px 10px 15px 10px;" class="BUTTON_BACK">
                            <table style="width:100%;" border="0" cellpadding="0" cellspacing="1">
                                <tr style="text-align:center; height:38px; vertical-align:bottom;">
                                    <td style="width:16.66%">
                                        <span class="SHIFT" onclick="KeyG(true)">RAD</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('g'); this.blur();" value="MTH" /><span class="KEYBOARD" onclick="    Input('g', false, false, true)">G</span>
                                    </td>
                                    <td style="width:16.66%">
                                        <span class="ALT" onclick="KeyH(true)">&nbsp;</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('h'); this.blur();" value="&nbsp;" /><span class="KEYBOARD" onclick="    Input('h', false, false, true)">H</span>
                                    </td>
                                    <td style="width:16.66%">
                                        <span class="ALT" onclick="KeyI(true)">MODES</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('i'); this.blur();" value="&nbsp;" /><span class="KEYBOARD" onclick="    Input('i', false, false, true)">I</span>
                                    </td>
                                    <td style="width:16.66%">
                                        <span class="ALT" onclick="KeyJ(true)">&nbsp;</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('j'); this.blur();" value="VAR" /><span class="KEYBOARD" onclick="    Input('j', false, false, true)">J</span>
                                    </td>
                                    <td style="width:16.66%">
                                        <span class="ALT" onclick="KeyK(true)">STACK</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('k'); this.blur();" value="&#x25B2;" /><span class="KEYBOARD" onclick="    Input('k', false, false, true)">K</span>
                                    </td>
                                    <td style="width:16.66%">
                                        <span class="SHIFT" onclick="KeyL(true)">PREV</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('l'); this.blur();" value="NXT" /><span class="KEYBOARD" onclick="    Input('l', false, false, true)">L</span>
                                    </td>
                                </tr>
                                <tr style="text-align: center; height: 38px; vertical-align: bottom;">
                                    <td><span class="SHIFT" onclick="KeyM(true)">&nbsp;</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('m'); this.blur();" value="'" /><span class="KEYBOARD" onclick="    Input('m', false, false, true)">M</span></td>
                                    <td><span class="SHIFT" onclick="KeyN(true)">&nbsp;</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('n'); this.blur();" value="STO" /><span class="KEYBOARD" onclick="    Input('n', false, false, true)">N</span></td>
                                    <td><span class="SHIFT" onclick="KeyO(true)">RPT</span><span class="ALT" onclick="KeyO(false, true)">UNDO</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('o'); this.blur();" value="EVAL" /><span class="KEYBOARD" onclick="    Input('o', false, false, true)">O</span></td>
                                    <td><span class="SHIFT" onclick="KeyP(true)">&nbsp;</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('p'); this.blur();" value="&#x25C4;" /><span class="KEYBOARD" onclick="    Input('p', false, false, true)">P</span></td>
                                    <td><span class="SHIFT" onclick="KeyQ(true)">&nbsp;</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('q'); this.blur();" value="&#x25BC;" /><span class="KEYBOARD" onclick="    Input('q', false, false, true)">Q</span></td>
                                    <td><span class="SHIFT" onclick="KeyR(true)">SWAP</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('r'); this.blur();" value="&#x25BA;" /><span class="KEYBOARD" onclick="    Input('r', false, false, true)">R</span></td>
                                </tr>
                                <tr style="text-align: center; height: 38px; vertical-align: bottom;">
                                    <td><span class="SHIFT" onclick="KeyS(true)">ASIN</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('s'); this.blur();" value="SIN" /><span class="KEYBOARD" onclick="    Input('s', false, false, true)">S</span></td>
                                    <td><span class="SHIFT" onclick="KeyT(true)">ACOS</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('t'); this.blur();" value="COS" /><span class="KEYBOARD" onclick="    Input('t', false, false, true)">T</span></td>
                                    <td><span class="SHIFT" onclick="KeyU(true)">ATAN</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('u'); this.blur();" value="TAN" /><span class="KEYBOARD" onclick="    Input('u', false, false, true)">U</span></td>
                                    <td><span class="SHIFT" onclick="KeyV(true)">x&#x00B2;</span><span class="ALT" onclick="KeyV(false, true)">&#x02DF;&#x221A;Y&#x0305;</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('v'); this.blur();" value="&#x221A;X&#x0305;" /><span class="KEYBOARD" onclick="    Input('v', false, false, true)">V</span></td>
                                    <td><span class="SHIFT" onclick="KeyW(true)">10&#x02DF;</span><span class="ALT" onclick="KeyW(false, true)">LOG</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('w'); this.blur();" value="y&#x02DF;" /><span class="KEYBOARD" onclick="    Input('w', false, false, true)">W</span></td>
                                    <td><span class="SHIFT" onclick="KeyX(true)">e&#x02DF;</span><span class="ALT" onclick="KeyX(false, true)">LN</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('x'); this.blur();" value="&#x00B9;&#x2044;&#x2093;" /><span class="KEYBOARD" onclick="    Input('x', false, false, true)">X</span></td>
                                </tr>
                                <tr style="text-align: center; height: 38px; vertical-align: bottom;">
                                    <td colspan="2" style="padding: 0; margin: 0;"><span class="SHIFT" onclick="KeyEnter(true)">&nbsp;</span><br>
                                        <input class="BTN_SM BTN_ENTER" type="button" onclick="KeyEnter(); this.blur();" value="ENTER" /><span class="KEYBOARD">&nbsp;&nbsp;</span></td>
                                    <td><span class="SHIFT" onclick="Input('q')">EDIT</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('y'); this.blur();" value="±" /><span class="KEYBOARD" onclick="    Input('y', false, false, true)">Y</span></td>
                                    <td><span class="SHIFT" onclick="KeyZ(true)">PURG</span><span class="ALT" onclick="KeyZ(false, true)">ARG</span><br>
                                        <input class="BTN_SM" type="button" onclick="Input('z'); this.blur();" value="EEX" /><span class="KEYBOARD" onclick="    Input('z', false, false, true)">Z</span></td>
                                    <td><span class="SHIFT" onclick="KeyDel(true)">CLEAR</span><br>
                                        <input class="BTN_SM" type="button" onclick="RawInput(KEYCODE_DEL); this.blur();" value="DEL" /><span class="KEYBOARD">&nbsp;</span></td>
                                    <td><span class="SHIFT" onclick="KeyBackspace(true)">DROP</span><br>
                                        <input class="BTN_SM" type="button" onclick="RawInput(KEYCODE_BKSPC); this.blur();" value="&#x2190;" /><span class="KEYBOARD">&nbsp;</span></td>
                                </tr>
                            </table>
                            <table class="BUTTON_BACK" style="width: 100%;" border="0" cellpadding="0" cellspacing="2">
                                <tr style="text-align: center; height: 38px; vertical-align: bottom;" >
                                    <td style="width:20%">
                                        <span class="SHIFT" onclick="SpecialKeyInput(192)" title="Alpha Toggle">&alpha;</span><br>
                                        <input class="BTN_SM" type="button" onclick="SpecialKeyInput(192); this.blur();" title="Alpha Toggle" value="`" />
                                    </td>
                                    <td style="width: 20%; background-color: #436A87"><span class="ALT" onclick="Key7(false, true)">&nbsp;</span><br>
                                        <input class="BTN_LG BTN_SPECIAL_BACK" type="button" onclick="Input('7'); this.blur();" value="7" /></td>
                                    <td style="width: 20%; background-color: #436A87"><span class="ALT" onclick="Key8(false, true)">PLOT</span><br>
                                        <input class="BTN_LG BTN_SPECIAL_BACK" type="button" onclick="Input('8'); this.blur();" value="8" /></td>
                                    <td style="width: 20%; background-color: #436A87"><span class="ALT" onclick="Key9(false, true)">SYMBOLIC</span><br>
                                        <input class="BTN_LG BTN_SPECIAL_BACK" type="button" onclick="Input('9'); this.blur();" value="9" /></td>
                                    <td style="width: 20%">
                                        <span class="SHIFT"><span onclick="KeyDivide(true)">( </span><span onclick="OnKey(')')">)</span></span><span class="ALT" onclick="KeyDivide(false, true)">#</span><br>
                                        <input class="BTN_LG" type="button" onclick="Input('/'); this.blur();" value="÷" />
                                    </td>
                                </tr>
                                <tr style="text-align: center; height: 38px; vertical-align: bottom;">
                                    <td>
                                        <input class="BTN_SM SHIFT_COLOR" type="button" value="Shft" onclick="SpecialKeyInput(16); this.blur();" title="Purple Shift" /></td>
                                    <td style="background-color: #436A87"><span class="ALT" onclick="Key4(false, true)">&nbsp;</span><br>
                                        <input class="BTN_LG BTN_SPECIAL_BACK" type="button" onclick="Input('4'); this.blur();" value="4" /></td>
                                    <td style="background-color: #436A87"><span class="ALT" onclick="Key5(false, true)">&nbsp;</span><br>
                                        <input class="BTN_LG BTN_SPECIAL_BACK" type="button" onclick="Input('5'); this.blur();" value="5" /></td>
                                    <td style="background-color: #436A87"><span class="ALT" onclick="Key6(false, true)">UNITS</span><br>
                                        <input class="BTN_LG BTN_SPECIAL_BACK" type="button" onclick="Input('6'); this.blur();" value="6" /></td>
                                    <td><span class="SHIFT" onclick="KeyTimes(true)">&nbsp;</span><br>
                                        <input class="BTN_LG" type="button" onclick="Input('*'); this.blur();" value="&times;" /></td>
                                </tr>
                                <tr style="text-align: center; height: 38px; vertical-align: bottom;">
                                    <td style="background-color: #436A87">
                                        <input class="BTN_SM ALT_COLOR BTN_SPECIAL_BACK" type="button" value="Alt" onclick="SpecialKeyInput(18); this.blur();" title="Green Alt" /></td>
                                    <td style="background-color: #436A87"><span class="ALT" onclick="Key1(false, true)">&nbsp;</span><br>
                                        <input class="BTN_LG BTN_SPECIAL_BACK" type="button" onclick="Input('1'); this.blur();" value="1" /></td>
                                    <td style="background-color: #436A87"><span class="ALT" onclick="Key2(false, true)">LIBRARY</span><br>
                                        <input class="BTN_LG BTN_SPECIAL_BACK" type="button" onclick="Input('2'); this.blur();" value="2" /></td>
                                    <td style="background-color: #436A87"><span class="ALT" onclick="Key3(false, true)">&nbsp;</span><br>
                                        <input class="BTN_LG BTN_SPECIAL_BACK" type="button" onclick="Input('3'); this.blur();" value="3" /></td>
                                    <td><span class="SHIFT" onclick="KeyMinus(true)">&nbsp;</span><br>
                                        <input class="BTN_LG" type="button" onclick="Input('-'); this.blur();" value="-" /></td>
                                </tr>
                                <tr style="text-align: center; height: 38px; vertical-align: bottom;">
                                    <td><span class="SHIFT" onclick="KeyOn(true)">&nbsp;</span><br>
                                        <input class="BTN_SM" type="button" onclick="RawInput(27); this.blur();" value="ESC" title="Cancel" /></td>
                                    <td><span class="SHIFT" onclick="Key0(true)">&nbsp;</span><br>
                                        <input class="BTN_LG" type="button" onclick="Input('0'); this.blur();" value="0" /></td>
                                    <td><span class="SHIFT" onclick="KeyPeriod(true)">,</span><br>
                                        <input class="BTN_LG" type="button" onclick="Input('.'); this.blur();" value="." /></td>
                                    <td><span class="SHIFT" onclick="KeySpc(true)">&#x03C0;</span><br>
                                        <input class="BTN_LG" type="button" onclick="Input(' '); this.blur();" value="SPC" /></td>
                                    <td><span class="SHIFT" onclick="KeyPlus(true)">&nbsp;</span><br>
                                        <input class="BTN_LG" type="button" onclick="Input('+'); this.blur();" value="+" /></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>

                <div id="DEBUG" class="DEBUGGER"></div>
            </td>

            <td align="LEFT">
                <div id="GRAPH" class="GRAPH"></div>
            </td>

        </tr>
    </table>

    <script lang="javascript">
        // settings (items added here should be reset in app_library.js:Lib_Debug_Reset
        var base = GetCookieInt("base", 10);
        var radians = GetCookieBool("radians", false);
        var showDate = GetCookieBool("showDate", false);

        var SOFTTEXT_LIST = new Array(SOFTTEXT1, SOFTTEXT2, SOFTTEXT3, SOFTTEXT4, SOFTTEXT5, SOFTTEXT6);

        LoadFilesystem(); // load the filesystem from the browser storage

        // restore the soft menu and the stack
        pageOffset = GetCookieInt("pageOffset", 0);
        SetSoftMenu(GetCookie("softMenu", null));

        var index = GetCookie("stack", "");
        if (index != "")
        {
            var stackParts = index.split("~|~");
            index = 0;
            for (index in stackParts)
            {
                stack[index] = CreateObject(stackParts[index]);
            }
        }

        ReDraw(null);

        // start the clock tick
        setTimeout("Tick()", 1000);


        function ReDraw(obj)
        {
            var today = new Date();

            if (obj == DISPLAY_ANGLE || obj == null) DISPLAY_ANGLE.innerHTML = (radians ? "RAD" : "DEG");
            if (obj == DISPLAY_SHIFT || obj == null) DISPLAY_SHIFT.innerHTML = (modifierShift ? "SHIFT" : "");
            if (obj == DISPLAY_ALT || obj == null) DISPLAY_ALT.innerHTML = (modifierAlt ? "ALT" : "");
            if (obj == DISPLAY_ALPHA || obj == null) DISPLAY_ALPHA.innerHTML = (modifierAlpha ? "&#x03B1;" : "");
            if (obj == DISPLAY_BASE || obj == null) DISPLAY_BASE.innerHTML = "" + base;
            if (obj == DISPLAY_TIME || obj == null)
            {
                if (showDate)
                    DISPLAY_TIME.innerHTML = FormatDate(today);
                else
                    DISPLAY_TIME.innerHTML = "";
            }
            if (obj == DISPLAY_DIR || obj == null)
            {
                DISPLAY_DIR.innerHTML = "{ " + currentDir.replace(/\_\|\_/g, " ") + " } ";
            }

            if (obj == DISPLAY_STACK || obj == null)
            {
                var rows = "";
                var index = stack.length - 1;
                if (index > STACK_DISPLAY_MAX - 1) index = STACK_DISPLAY_MAX - 1;
                if (index < STACK_DISPLAY_MIN - 1) index = STACK_DISPLAY_MIN - 1;
                for (; index >= 0; index--)
                {
                    if (index >= stack.length)
                        rows += "<tr><td style='text-align:left;user-select: none;'>" + (index + 1) + ":</td><td class='STACK_ROW'></td></tr>";
                    else
                        rows += "<tr VALIGN=TOP><td style='text-align:left;user-select: none;'>" + (index + 1) + ":</td><td class='STACK_ROW'>" + stack[stack.length - index - 1].toString(base) + "</td></tr>";
                }

                DISPLAY_STACK.innerHTML = "<table width='100%' border='0'>" + rows + "</table>";
            }

            if (obj == DISPLAY_SOFT_BUTTONS || obj == null)
            {
                for (index = 0; index < SOFTTEXT_LIST.length; index++)
                {
                    var text = "&nbsp;";
                    var tip = "";
                    if (softMenu && (index + pageOffset < softMenu.length))
                    {
                        if (softMenu[index + pageOffset].toolTip != null && softMenu[index + pageOffset].toolTip != undefined)
                            tip = softMenu[index + pageOffset].toolTip;

                        var cls = "";
                        if (softMenu[index + pageOffset].type == SOFT_TYPE_DIR)
                            cls = " class='DISPLAY_BUTTON_DIR'";

                        if (softMenu[index + pageOffset].type == SOFT_TYPE_TOGGLE)
                            softMenu[index + pageOffset].name = GetToggleName(softMenu[index + pageOffset]);

                        text = "<span " + cls + "" + ">" + softMenu[index + pageOffset].name + "</span>";
                    }
                    SOFTTEXT_LIST[index].innerHTML = text;
                    SOFTTEXT_LIST[index].title = tip;
                }
            }
        }

        function Tick()
        {
            ReDraw(DISPLAY_TIME);
            setTimeout("Tick()", 1000);
        }

    </script>

</body>
</html>