Offset: <input id="offset" size=2 value=3 /><br/>
Decrypted: <textarea id="input" cols=80 rows=5 ></textarea><br/>
Encrypted: <textarea id="output" cols=80 rows=5 ></textarea><br/>
<input type=button value=Go />
<script>
	function $(id) {
		return document.getElementById(id);
	}
	
	var alpha = [];
	for (var i = 32; i < 127; i++) {
		alpha[String.fromCharCode(i)] = i;
	}
	
	$("input").onchange = function() {
		$("output").value = encrypt($("input").value, $("offset").value);
	};
	
	$("output").onchange = function() {
		$("input").value = decrypt($("output").value, $("offset").value);
	};
	
	function encrypt(str, offset) {
		var encrypted = "";
		offset = parseInt(offset);
		
		for (var i = 0; i < str.length; i++) {
			if (alpha[str[i]] == undefined)
				continue;
			
			encrypted += String.fromCharCode(((alpha[str[i]] - 32 + offset) % Object.keys(alpha).length) + 32);
		}
		
		return encrypted;
	}
	
	function decrypt(str, offset) {
		var decrypted = "";
		offset = parseInt(offset);
		
		for (var i = 0; i < str.length; i++) {
			decrypted += String.fromCharCode(((alpha[str[i]] - 32 + (Object.keys(alpha).length - offset)) % Object.keys(alpha).length) + 32);
		}
		
		return decrypted;
	}
</script>