var convFlag  = 0;      //モードフラグ ひらがな→0　カタカナ→1
var nameField; //名前のID
var rubyField;

jQuery(function() {
  nameField = jQuery("input[type='text']").eq(0).attr('id');
  rubyField = jQuery("input[type='text']").eq(1).attr('id');
});

var baseVal = "";
var beforeVal = "";
function setRuby() {
  var newVal = document.getElementById(nameField).value;
  if (baseVal == newVal){return;}
  if (newVal == "") {
    document.getElementById(rubyField).value="";
    baseVal = "";
    return;
  }
  var addVal = newVal;
  for(var i=baseVal.length; i>=0; i--) {
    if (newVal.substr(0,i) == baseVal.substr(0,i)) {
      addVal = newVal.substr(i);break;
    }
  }
  baseVal = newVal;
  if (addVal.match(/[^ 　ぁあ-んァー]/)) return;
  var flg = 0;
  if (addVal.match(/^[あ-ん]$/)) {
    if (beforeVal == addVal) flg = 1;
    beforeVal = addVal;
  }
  if (convFlag) addVal = convKana(addVal);
  var q = document.getElementById(rubyField).value.slice(-1 * addVal.length);
  if (flg == 0 && q == addVal) return;
  document.getElementById(rubyField).value += addVal;
}

function loopTimer(){
    setRuby();
  timer = setTimeout("loopTimer()",30);
}

function convKana(val){
  var c, a = [];
  for(var i=val.length-1;0<=i;i--){
    c = val.charCodeAt(i);
    a[i] = (0x3041 <= c && c <= 0x3096) ? c + 0x0060 : c;
  }
  return String.fromCharCode.apply(null, a);
}

var timer = false;
window.onload = function(){
  loopTimer();
  document.getElementById(rubyField).onKeyup = setRuby();
}