Crear conversor (o diccionario)

[adorian]

Quiero crear una pagina web con dos cajas, una para escribir texto en español, y otra que nos vaya trasformando cada silaba en japones (katakana) y la vaya colocando debajo, para que mis alumnos japoneses de español puedan consultar la pronunciacion de cada frase.
Existe esto del ingles al japones, pero no del español:
http://www.freeenglish.jp/pronunciation.html

Algunos ejemplos de lo que quiero:
caja 1: Apaga la calefacción
caja 2:アパガ・ラ・カレファクズィオーン

Siendo la conversión de lo siguiente:
A = ア
pa = パ
ga =ガ
= ・
ca = カ
le = レ
fa = ファ
cci = ックズィ
ó =オー
n = ン

Me estoy haciendo un lio porque estoy empezando ahora con el javascript, pero por logica lo estoy haciendo con 2 arrays, el primero con todas las silabas posibles en español y el segundo, en la misma posicion de lineas, con todas sus equivalencias al japones.

var spanish = new Array
spanish[0] = a
spanish[1] = i
spanish[2] = u
spanish[3] = e
spanish[4] = o
spanish[5] = ca
spanish[6] = qui
spanish[7] = cu
spanish[8] = que
spanish[9] = co
spanish[10] = sa
spanish[11] = si
spanish[12] = su
spanish[13] = se
spanish[14] = so

var katakana = new Array
katakana[0] = ア
katakana[1] = イ
katakana[2] = ウ
katakana[3] = エ
katakana[4] = オ
katakana[5] = カ
katakana[6] = キ
katakana[7] = ク
katakana[8] = ケ
katakana[9] = コ
katakana[10] = サ
katakana[11] = シ
katakana[12] = ス
katakana[13] = セ
katakana[14] = ソ

ahora quiero que cuando en caja 1 metan spanish[14] = so, en caja 2 salga ソ

No sé como comparar uno con otro y que lo muestre !

Código:

<script type="text/javascript">
var spanish = new Array
spanish[0] = a
spanish[1] = i
spanish[2] = u
spanish[3] = e
spanish[4] = o
spanish[5] = ca
spanish[6] = qui
spanish[7] = cu
spanish[8] = que
spanish[9] = co
spanish[10] = sa
spanish[11] = si
spanish[12] = su
spanish[13] = se
spanish[14] = so

var katakana = new Array
katakana[0] = &#x30A2;
katakana[1] = &#x30A4;
katakana[2] = &#x30A6;
katakana[3] = &#x30A8;
katakana[4] = &#x30AA
katakana[5] = &#x30AB;
katakana[6] = &#x30AC;
katakana[7] = &#x30AF;
katakana[8] = &#x30B1;
katakana[9] = &#x30B3;
katakana[10] = &#x30B5;
katakana[11] = &#x30B7;
katakana[12] = &#x30B9;
katakana[13] = &#x30BB;
katakana[14] = &#x30BD;
</script>

El problema, ademas de no saber si voy bien, es que no se como crear el segundo cuadro de texto que vaya comparando el texto que le metemos y lo vaya trasformando y mostrando segun el array 2 :(

Ayuda...