window.onload = onloadHandler;
var phaz = 0;
var step = 0;
var cgiURL = "./a6.cgi";
var english;
var japanese;
var puzzle;
var loaded = false;
var prelen = 0;
var no = 0;

function clearButtons() {
  Element.hide('end', 'hint', 'next', 'decide', 'clear', 'pass', 'teach');
}

function says(html) {
  $("says").innerHTML = html;
}

function getPuzzle(english) {
  var idx = new Array();
  for(var i = 0; i < english.length; i++) {
    idx.push(i);
  }
  for(var i = 0; i < english.length; i++) {
    var j = Math.floor(Math.random() * english.length);
    if (j != i) {
      var t = idx[i];
      idx[i] = idx[j];
      idx[j] = t;
    }
  }
  var ret = "";
  for(var i = 0; i < english.length; i++) {
    ret += " " + english.charAt(idx[i]) + " ";
  }
  return ret;
}

function onLoadQuestion(request) {
  var item = request.responseText.split('<>');
  english = decodeURL(item[0]);
  japanese = decodeURL(item[1]);
  if (english == '' || japanese == '') {
    says("データが読み込めません。<br />また後ほど来てもらえますか？");
    clearButtons();
    return;
  }
  loaded = true;
  do {
    puzzle = getPuzzle(english);
  } while(puzzle == english);
}

function onClear() {
  $('answer').value = '';
  if (no > 1) $('answer').focus();
}

function japaneseMode() {
  $('answer').style.imeMode = "active";
  if (no > 1) $('answer').focus();
}

function englishMode() {
  $('answer').style.imeMode = "disabled";
  if (no > 1) $('answer').focus();
}

function onHint() {
  if (phaz == 0 && step == 3) {
    says("「"+japanese+"」<br />という意味の単語です。<br /><br /><br />"+ puzzle);
  }
}

function onEnd() {
  phaz = 0; step = 0; onClear(); no = 0;
}

function onPass() {
  if (phaz == 0 && step == 3) { step = 5; }
}

function onNext() {
  if (phaz == 0 && step == 4) { step = 0; onClear(); }
  if (phaz == 1 && step == 5) { phaz = 0; step = 0; onClear(); }
}

function onDecide() {
  if (phaz == 1 && step == 1) {
    english  = $F('answer').toUpperCase();
    if (english.match(/[^A-Z]/g)){
        says("アルファベットだけで<br />答えてもらえますか？");
        return;
    }
    if (english.length < 4) {
        says("申し訳ないのですが、４文字以上の<br />英単語を教えてください。");
        return;
    }
    step = 2;
    onClear();
  }
  else if (phaz == 1 && step == 3) {
    japanese = $F('answer');
    if (japanese.length == 0) return;
    step = 4;
    onClear();
  }
}

function onTeach() {
  if (phaz == 0 && step == 4) { phaz = 1; step = 0; onClear() }
}

function question() {
  switch(step) {
    // 問題読み込み
    case 0:
      loaded = false;
      clearButtons();
      onClear();
      var ajax = new Ajax.Request(cgiURL, {
	                              method : 'get',
                                  parameters : 'mode=load',
                                  onComplete: onLoadQuestion
      });
      step++;
      break;
    // 読み込み待ち
    case 1:
      if (loaded) {
        no++;
        step++;
      }
      break;
    // 出題
    case 2:
      if (no == 1)
        says("アルファベットを並び替えて<br />英単語にしてくださいね。<br /><br /><br />" + puzzle);
      else
        says("これはどうでしょうか？<br /><br /><br /><br />" + puzzle);
      Element.show('hint', 'clear', 'pass');
      englishMode();
      step++;
      break;
    // 回答待ち
    case 3:
      var ans = $F('answer').toUpperCase();
      var len = ans.length;
      if (ans == english) {
        says("正解です！<br />「"+japanese+"」<br />という意味です。");
        Element.show('next', 'teach');
        Element.hide('hint', 'clear', 'pass');
        $('next').focus();
        step++;
        break;
      }
      else if (len != prelen && len == english.length) {
        says("それではなくて…<br />「"+japanese+"」<br />という意味でありませんか？<br /><br />"+ puzzle);
      }
      prelen = len;
      break;
    // 「次へ」待ち
    case 4:
      break;
    // 
    case 5:
      says("答えは「"+english+"」。<br />「"+japanese+"」<br />という意味です。");
      Element.show('next');
      Element.hide('hint', 'clear', 'pass');
      $('next').focus();
      step = 4;
      break;
    default:
      break;
  }
}

function teach() {
  switch(step) {
    // 英単語問いかけ
    case 0:
      clearButtons();
      onClear();
      says("英単語をひとつ教えてもらえますか？");
      Element.show('end', 'decide', 'clear');
      englishMode();
      step++;
      break;
    // 英単語入力待ち
    case 1:
      break;
    // 日本語訳問いかけ
    case 2:
      says("なるほど<br />" + english + " ですか。<br />日本語でいうとどんな意味でしょう？");
      japaneseMode();
      step++;
      break;
    // 日本語訳入力待ち
    case 3:
      break;
    // 受け付け
    case 4:
      var param = 'mode=add&english='+encodeURL(english)+'&japanese='+encodeURL(japanese);
      var ajax = new Ajax.Request(cgiURL, {
	                              method : 'get',
                                  parameters : param
      });
      says("なるほど。<br />" + english + " というのは<br />"+japanese+"<br />のことなのですね。<br />ありがとうございました！");
      Element.hide('end', 'decide', 'clear');
      Element.show('next');
      $('next').focus();
      step++;
      break;
    // 「次へ」待ち
    case 5:
      break;
  }
}


function update() {
  window.setTimeout("update();", 100);
  switch(phaz) {
    case 0:  question(); break;
    case 1:  teach(); break;
    default: break;
  }
}

function onloadHandler()
{
  phaz = 0;
  step = 0;
  clearButtons();
  update();
}