RT Morse Code - Rewritten

Created by Raul Rodriguez Rewritten by Shawn Chin

by EnigmaMaster

HTML

<div id="two">
    Click in the text box below and use the left arrow for "." and the right arrow for "-" the bottom arrow is space.
</div>
<div id="box">
    <textarea id="type"></textarea>
</div>
<img src="http://www.learnmorsecode.com/pix/CW.gif" />
<!-- Created By Raul Rodriguez-->
<!-- Rewritten by Shawn Chin -->

CSS

#two {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: -1px -1px 18px #006400;
-moz-box-shadow: -1px -1px 18px #006400;
box-shadow: -1px -1px 18px #006400;
text-shadow: 0px 0px 1px #FFFFFF;
background-image: -moz-linear-gradient(top, #90EE90 81%, #2E8B57);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.81, #90EE90), color-stop(1.0, #2E8B57));
border: 1px solid #000000;
background-color: #DDDDDD;
padding: 10px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12pt;
color: #000000;
text-align: center;
outline: 0px solid #7FFF00;
    width:300px;
    height:200px;
}
* {
    margin:auto;
}

JavaScript

var morse = {
    '.-': 'a', '-...': 'b', '-.-.': 'c', '-..': 'd', '.': 'e',
    '..-.': 'f', '--.': 'g', '....': 'h', '..': 'i', '.---': 'j',
    '-.-': 'k', '.-..': 'l', '--': 'm', '-.': 'n', '---': 'o',
    '.--.': 'p', '--.-': 'q', '.-.': 'r', '...': 's', '-': 't',
    '..-': 'u', '...-': 'v', '.--': 'w', '-..-': 'x', '-.--': 'y',
    '--..': 'z', '.----': '1', '..---': '2', '...--': '3', 
    '....-': '4', '.....': '5', '-....': '6', '--...': '7',
    '---..': '8', '----.': '9', '-----': '0', '.-.-.-': '.',
    '--..--': ',', '..--..': '?', '-..-.': '/', '.--.-.': '@'
};

function translate_morse(code) {
    return (typeof morse[code] === "undefined") ? "" : morse[code];
}

$('#type').keydown(function(e) {
    switch(e.keyCode) {
        case 37: this.value += "."; break;
        case 39: this.value += "-"; break;
        case 40: this.value += " "; break;
        case 8: return; // allow backspace
    }
    e.preventDefault();
}).keyup(function() {
    $('#two').text(
        this.value.split(" ").map(translate_morse).join("")
    );
});