Alphabet: <input id="alpha" size=80 /><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").value += String.fromCharCode(i);
		alpha[String.fromCharCode(i)] = i;
	}
	
	$("input").onchange = function() {
		$("output").value = encrypt($("input").value);
	};
	
	$("output").onchange = function() {
		$("input").value = decrypt($("output").value);
	};
	
	function encrypt(str) {
		var pos = 0;
		var encrypted = "";
		
		for (var i = 0; i < str.length; i++) {
			var j = 0;
			while (j++ < 9001) {
				if (alpha[str[i]] == pos) {
					encrypted += "/";
					break;
				}
				else if (alpha[str[i]] > pos) {
					encrypted += "1";
					pos++;
				}
				else {
					encrypted += "0";
					pos--;
				}
			}
			
			if (j > 9000)
				return alert("error (unsupported character?");
		}
		
		return encrypted;
	}
	
	function decrypt(str) {
		// For now I'll leave this as an exercise for the user :P
	}
</script>