<!--typing area-->
<textarea cols="45" rows="5" readonly></textarea>

<div id="keyboard">
    <!--lowercase keyboard-->
    <div id="lowercase">
        <div class="row">
            <div class="key white">
                <span>q</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>w</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>e</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>r</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>t</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>y</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>u</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>i</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>o</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>p</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="key white">
                <span>a</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>s</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>d</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>f</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>g</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>h</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>j</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>k</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>l</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="key gray">
                <span>&#8679;</span>
            </div>
            <div class="key white">
                <span>z</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>x</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>c</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>v</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>b</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>n</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>m</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key gray">
                <span>&#9003;</span>
            </div>
        </div>
        <div class="row">
            <div class="key gray">
                <span>123</span>
            </div>
            <div class="key white">
                <span>space</span>
            </div>
            <div class="key gray">
                <span>return</span>
            </div>
        </div>
    </div>
    <!--uppercase keyboard-->
    <div id="uppercase">
        <div class="row">
            <div class="key white">
                <span>Q</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>W</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>E</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>R</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>T</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>Y</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>U</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>I</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>O</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>P</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="key white">
                <span>A</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>S</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>D</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>F</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>G</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>H</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>J</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>K</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>L</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="key gray" style="background:#fff;">
                <span>&#11014;</span>
            </div>
            <div class="key white">
                <span>Z</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>X</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>C</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>V</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>B</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>N</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>M</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key gray">
                <span>&#9003;</span>
            </div>
        </div>
        <div class="row">
            <div class="key gray">
                <span>123</span>
            </div>
            <div class="key white">
                <span>space</span>
            </div>
            <div class="key gray">
                <span>return</span>
            </div>
        </div>
    </div>
    <!--numbers and symbols keyboard-->
    <div id="numbers">
        <div class="row">
            <div class="key white">
                <span>1</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>2</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>3</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>4</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>5</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>6</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>7</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>8</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>9</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>0</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="key white">
                <span>-</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>/</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>:</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>;</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>(</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>)</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>$</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>&amp;</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>@</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>"</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="key gray" style="font-size:10pt;line-height:3.4em;">
                <span>#+=</span>
            </div>
            <div class="key white" style="width:46px;">
                <span>.</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white" style="width:47px;">
                <span>,</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white" style="width:47px;">
                <span>?</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white" style="width:47px;">
                <span>!</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white" style="width:47px;">
                <span>'</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key gray">
                <span>&#9003;</span>
            </div>
        </div>
        <div class="row">
            <div class="key gray">
                <span>ABC</span>
            </div>
            <div class="key white">
                <span>space</span>
            </div>
            <div class="key gray">
                <span>return</span>
            </div>
        </div>
    </div>
    <!--additional symbols keyboard-->
    <div id="symbols">
        <div class="row">
            <div class="key white">
                <span>[</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>]</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>{</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>}</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>#</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>%</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>^</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>*</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>+</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>=</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="key white">
                <span>_</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>\</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>|</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>~</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>&lt;</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>&gt;</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>&euro;</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>&pound;</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>&yen;</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white">
                <span>&bull;</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="key gray" style="font-size:10pt;line-height:3.4em;">
                <span>123</span>
            </div>
            <div class="key white" style="width:46px;">
                <span>.</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white" style="width:47px;">
                <span>,</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white" style="width:47px;">
                <span>?</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white" style="width:47px;">
                <span>!</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key white" style="width:47px;">
                <span>'</span>
                <div class="popout">
                    <div class="head"></div>
                    <div class="neck"></div>
                </div>
            </div>
            <div class="key gray">
                <span>&#9003;</span>
            </div>
        </div>
        <div class="row">
            <div class="key gray">
                <span>ABC</span>
            </div>
            <div class="key white">
                <span>space</span>
            </div>
            <div class="key gray">
                <span>return</span>
            </div>
        </div>
    </div>
</div>
body, textarea {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}
textarea {
    font-size: 12pt;
    padding: 5px;
}
/* Main styles */
#keyboard {
    background: #d1d5db;
    font-size: 16pt;
    width: 380px;
    height: 216px;
}
#lowercase, #uppercase, #numbers, #symbols {
    position: absolute;
    z-index: 0;
}
#lowercase {
    display: block;
}
#uppercase, #numbers, #symbols {
    display: none;
}
.row {
    margin: 10px 3px;
    text-align: center;
}
/* Third row */
.row:nth-of-type(3) .gray:first-of-type {
    margin-right: 10px;
}
.row:nth-of-type(3) .gray:last-of-type {
    margin-left: 10px;
}
.row:nth-of-type(3) .gray:last-of-type:active {
    background: #fff;
}
/* Last row */
.row:last-of-type .key {
    font-size: 12pt;
    line-height: 2.7em;
}
.row:last-of-type .gray {
    width: 88px;
}
.row:last-of-type .white {
    width: 184px;
}
.row:last-of-type .white:active {
    background: #aaa;
}
.row:last-of-type .gray:last-of-type:active {
    background: #fff;
}
/* Keys */
.key {
    border-radius: 5px;
    box-shadow: 0 1px 0 #888;
    display: inline-block;
    line-height: 1.9em;
    height: 42px;
    position: relative;
}
.white {
    background: #fff;
    width: 32px;
}
.gray {
    background: #acb3bd;
    width: 42px;
}
/* Key pop-out */
.popout {
    display: none;
    font-size: 24pt;
    position: absolute;
    left: -9px;
    bottom: 38px;
    z-index: 1;
}
/* align pop-outs for q Q 1 - [ _*/
#lowercase .row:first-of-type .key:first-of-type .popout, 
#uppercase .row:first-of-type .key:first-of-type .popout, 
#numbers .row:nth-child(-n+2) .key:first-of-type .popout, 
#symbols .row:nth-child(-n+2) .key:first-of-type .popout {
    left: 0;
}
/* align pop-outs for p P 0 " = • */
#lowercase .row:first-of-type .key:last-of-type .popout, 
#uppercase .row:first-of-type .key:last-of-type .popout, 
#numbers .row:nth-child(-n+2) .key:last-of-type .popout, 
#symbols .row:nth-child(-n+2) .key:last-of-type .popout {
    left: -18px;
}
.head {
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 0 -1px 1px #888;
    line-height: 1.5em;
    width: 50px;
    height: 50px;
}
.neck {
    background: #fff;
    width: 50px;
    height: 10px;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 20% 100%);
}
/* adjust width of . , ? ! ' */
#numbers .row:nth-child(3) .key:nth-child(n+2):nth-child(-n+6) .head, 
#symbols .row:nth-child(3) .key:nth-child(n+2):nth-child(-n+6) .head, 
#numbers .row:nth-child(3) .key:nth-child(n+2):nth-child(-n+6) .neck, 
#symbols .row:nth-child(3) .key:nth-child(n+2):nth-child(-n+6) .neck {
    width: 64px;
}
/* alter necks for q Q 1 - [ _ */
#lowercase .row:first-of-type .key:first-of-type .neck, 
#uppercase .row:first-of-type .key:first-of-type .neck, 
#numbers .row:nth-child(-n+2) .key:first-of-type .neck, 
#symbols .row:nth-child(-n+2) .key:first-of-type .neck {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 67% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 67% 100%, 0% 100%);
}
/* alter necks for p P 0 " [ = • */
#lowercase .row:first-of-type .key:last-of-type .neck, 
#uppercase .row:first-of-type .key:last-of-type .neck, 
#numbers .row:nth-child(-n+2) .key:last-of-type .neck, 
#symbols .row:nth-child(-n+2) .key:last-of-type .neck {
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 33% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 33% 100%);
}
var isShift = false,
	capsLock = false,
	isNumSymbols = false,
	isMoreSymbols = false;

var kbdMode = ["lowercase", "uppercase", "numbers", "symbols"];

/* typing */
for (var i = 0; i < kbdMode.length; ++i) {
	$("#" + kbdMode[i] + " .row .white:not(:last)").mousedown(function(){
		$("textarea").append($(this).find("span").html().substring(0,1));
    	$(this).find(".popout").css("display", "block");
    	$(this).find(".popout .head").html($(this).find("span").html().substring(0,1));
    	$(this).find("span").css("color", "transparent");
	});
    $("#" + kbdMode[i] + " .row .white:last").mousedown(function(){
        $("textarea").append("&#32;");
    });
}
$(".white").mouseup(function(){
    $(this).find(".popout").css("display", "none");
    $(this).find(".popout .head").html("");
    $(this).find("span").css("color", "#000");
    if (isShift == true && capsLock == false) {
    	$("#lowercase").css("display", "block");
    	$("#uppercase").css("display", "none");
        isShift = false;
    }
});

/* toggle shift */
// lowercase to uppercase
$("#lowercase .row:eq(2) .gray:eq(0)").click(function(){
    if (isShift == false) {
    	$("#lowercase").css("display", "none");
    	$("#uppercase").css("display", "block");
        isShift = true;
    }
});
// uppercase to lowercase
$("#uppercase .row:eq(2) .gray:eq(0)").click(function(){
    if (isShift == true) {
    	$("#lowercase").css("display", "block");
    	$("#uppercase").css("display", "none");
        isShift = false;
    }
});
// caps lock on
$("#uppercase .row:eq(2) .gray:eq(0)").dblclick(function(){
    if (capsLock == false) {
    	$("#lowercase").css("display", "none");
    	$("#uppercase").css("display", "block");
        $(this).children("span").html("&#8682;");
        capsLock = true;
    }
});
// caps lock off
$("#uppercase .row:eq(2) .gray:eq(0)").click(function(){
    if (capsLock == true) {
        $("#lowercase").css("display", "block");
    	$("#uppercase").css("display", "none");
        $(this).children("span").html("&#11014;");
        capsLock = false;
    }
});

/* backspace */
var backspace = function(){
    $("textarea").html($("textarea").html().substring(0,$("textarea").html().length-1));
};
for (var j = 0; j < kbdMode.length; ++j) {
	$("#" + kbdMode[j] + " .row:eq(2) .key:last").click(backspace);
};

/* toggle numbers */
// lowercase/uppercase to numbers
for (var k = 0; k < kbdMode.length-2; ++k) {
	$("#" + kbdMode[k] + " .row:eq(3) .gray:eq(0)").click(function(){
    	if (isNumSymbols == false) {
    		$("#numbers").css("display", "inherit");
    		$("#lowercase").css("display", "none");
            $("#uppercase").css("display", "none");
            $("#uppercase .row:eq(2) .gray:eq(0)").children("span").html("&#11014;");
        	isNumSymbols = true;
        	isShift = false;
            capsLock = false;
    	}
	});
}
// numbers to lowercase
$("#numbers .row:eq(3) .gray:eq(0)").click(function(){
    if (isNumSymbols == true) {
    	$("#numbers").css("display", "none");
    	$("#lowercase").css("display", "block");
        isNumSymbols = false;
    }
});

/* toggle symbols */
// numbers to symbols
$("#numbers .row:eq(2) .gray:eq(0)").click(function(){
    if (isMoreSymbols == false) {
    	$("#numbers").css("display", "none");
        $("#symbols").css("display", "block");
        isMoreSymbols = true;
    }
});
// symbols to numbers
$("#symbols .row:eq(2) .gray:eq(0)").click(function(){
    if (isMoreSymbols == true) {
    	$("#numbers").css("display", "block");
        $("#symbols").css("display", "none");
        isMoreSymbols = false;
    }
});
// symbols to lowercase
$("#symbols .row:eq(3) .gray:eq(0)").click(function(){
    if (isMoreSymbols == true) {
    	$("#lowercase").css("display", "block");
        $("#symbols").css("display", "none");
        isMoreSymbols = false;
    }
});

/* return (line break) */
for (var l = 0; l < kbdMode.length; ++l) {
	$("#" + kbdMode[l] + " .row:eq(3) .gray:eq(1)").click(function(){
    	$("textarea").append("&#10;");
	});
}
Rerun