var f_sex   = 0;

var f_hp = 100;
var f_ap = 0;
var f_hpex = 0;
var f_apex = 0;
var f_weight = 0;
var f_weightmax = 100;

var f_head  = 0; // 0
var f_armor = 0; // 1
var f_glove = 0; // 2
var f_leg   = 0; // 3
var f_shoes = 0; // 4
var f_melee = 0; // 5
var f_w1    = 0; // 6
var f_w2    = 0; // 7
var f_item1 = 0; // 8
var f_item2 = 0; // 9
var f_ring1 = 0; // 10
var f_ring2 = 0; // 11

var current;
var oldnode;

function buildSelectForm(array, text) {
  var element = $('itemlist');
  if (element.childNodes.length != 0) {
    element.removeChild(element.childNodes.item(0));
  }
  var div = document.createElement('div');
  var tex = document.createTextNode(text);
  var sel = document.createElement('select');
  sel.id = 'list';
  sel.setAttribute('size', 10);
  sel.style.width = '100%';
  sel.onchange = function() {
    changeItem(array);
    printDisp();
  }
  for (i=0; i<array.length; i++) {
    var opt = document.createElement('option');
    opt.setAttribute('value', i);
    opt.innerHTML = array[i][0];
    sel.appendChild(opt);
  }
  sel.length = array.length;
  //sel.selectedIndex = 0;
  div.appendChild(tex);
  div.appendChild(sel);
  $('itemlist').appendChild(div);
}

function buildInputForm(text) {
  var element = $('itemlist');
  if (element.childNodes.length != 0) {
    element.removeChild(element.childNodes.item(0));
  }

  var div = document.createElement('div');
  var p = document.createElement('p');
  var node = document.createTextNode(text);
  p.appendChild(node);
  div.appendChild(p);

  p = document.createElement('p');
  var input = document.createElement('input');
  input.id = 'w_weight';
  input.setAttribute('size', 3);
  input.setAttribute('type', 'text');
  input.setAttribute('maxlength', 2);
  var txt = document.createTextNode('Weight: ');
  p.appendChild(txt);
  p.appendChild(input);
  var btn = document.createElement('button');
  btn.onclick = function() {
    setWeaponWeight();
    printDisp();
  }
  btntxt = document.createTextNode('Set');
  btn.appendChild(btntxt);
  p.appendChild(btn);
  div.appendChild(p);
  element.appendChild(div);
}

function changeItem(array) {
  val = eval($F('list'));

  // 画像置換
  if (val == 0) {
    replaceImage('icon_' + current, 'image/none.png', 20, 20);
  } else {
    replaceImage('icon_' + current, './image/icon_' + current + '.png', 20, 20);
  }
  if (current == 0 || current == 1 || current == 2 || current == 3 || current == 4) {
  dispItemImage(val);
  }

  // パラメータ処理
  if (current == 0) {
    f_head = val;
    if (val == 0) {
      $('headgear').innerHTML = "&lt; Head &gt;";
    } else {
      $('headgear').innerHTML = array[val][0];
    }
  } else if (current == 1) {
    f_armor = val;
    if (val == 0) {
      $('armor').innerHTML = "&lt; Chest &gt;";
    } else {
      $('armor').innerHTML = array[val][0];
    }
  } else if (current == 2) {
    f_glove = val;
    if (val == 0) {
      $('glove').innerHTML = "&lt; Hands &gt;";
    } else {
      $('glove').innerHTML = array[val][0];
    }
  } else if (current == 3) {
    f_leg = val;
    if (val == 0) {
      $('leg').innerHTML = "&lt; Legs &gt;";
    } else {
      $('leg').innerHTML = array[val][0];
    }
  } else if (current == 4) {
    f_shoes = val;
    if (val == 0) {
      $('shoes').innerHTML = "&lt; Feet &gt;";
    } else {
      $('shoes').innerHTML = array[val][0];
    }
  } else if (current == 8) {
    f_item1 = val;
    if (val == 0) {
      $('item1').innerHTML = "&lt; Item 1 &gt;";
    } else {
      $('item1').innerHTML = array[val][0];
    }
  } else if (current == 9) {
    f_item2 = val;
    if (val == 0) {
      $('item2').innerHTML = "&lt; Item 2 &gt;";
    } else {
      $('item2').innerHTML = array[val][0];
    }
  } else if (current == 10) {
    f_ring1 = val;
    if (val == 0) {
      $('ring1').innerHTML = "&lt; Left Finger &gt;";
    } else {
      $('ring1').innerHTML = array[val][0];
    }
  } else if (current == 11) {
    f_ring2 = val;
    if (val == 0) {
      $('ring2').innerHTML = "&lt; Left Finger &gt;";
    } else {
      $('ring2').innerHTML = array[val][0];
    }
  }
}

function setWeaponWeight() {
  val = $F('w_weight');
  if (val.match(/^[0-9]{1,2}$/)) {
    val = eval(val);
    if (current == 5) {
      f_melee = val;
      if (val == 0) {
        $('melee').innerHTML = "&lt; Melee &gt;";
      } else {
        $('melee').innerHTML = "Weight: " + val;
      }
    } else if (current == 6) {
      f_w1 = val;
      if (val == 0) {
        $('weapon1').innerHTML = "&lt; Primary Weapon &gt;";
      } else {
        $('weapon1').innerHTML = "Weight: " + val;
      }
    } else if (current == 7) {
      f_w2 = val;
      if (val == 0) {
        $('weapon2').innerHTML = "&lt; Secondary Weapon &gt;";
      } else {
        $('weapon2').innerHTML = "Weight: " + val;
      }
    }
  } else {
    alert('1～2桁の半角数字でお願いします。');
  }
}


function printDisp() {
  var hp;
  var ap;
  var item_hp = 0;
  var item_ap = 0;
  var wgt;
  var wgt_max = 100;
  hp = f_hp + headgear[f_sex][f_head][4] + armor[f_sex][f_armor][4] + glove[f_sex][f_glove][4] + leg[f_sex][f_leg][4] + shoes[f_sex][f_shoes][4] + ring[f_ring1][4] + ring[f_ring2][4];
  ap = f_ap + headgear[f_sex][f_head][3] + armor[f_sex][f_armor][3] + glove[f_sex][f_glove][3] + leg[f_sex][f_leg][3] + shoes[f_sex][f_shoes][3] + ring[f_ring1][3] + ring[f_ring2][3];
  item_hp = item[f_item1][4] + item[f_item2][4];
  item_ap = item[f_item1][3] + item[f_item2][3];

  wgt = headgear[f_sex][f_head][2] + armor[f_sex][f_armor][2] + glove[f_sex][f_glove][2] + leg[f_sex][f_leg][2] + shoes[f_sex][f_shoes][2] + item[f_item1][2] + item[f_item2][2] + f_melee + f_w1 + f_w2;
  if (ring[f_ring1][2] < 0) {
    wgt_max = wgt_max + (ring[f_ring1][2] * -1);
  } else {
    wgt = wgt + ring[f_ring1][2];
  }
  if (ring[f_ring2][2] < 0) {
    wgt_max = wgt_max + (ring[f_ring2][2] * -1);
  } else {
    wgt = wgt + ring[f_ring2][2];
  }

  if (wgt < 0) {
    wgt = 0;
  }

  $('hp').innerHTML = hp;
  $('hpex').innerHTML = item_hp;
  $('ap').innerHTML = ap;
  $('apex').innerHTML = item_ap;
  if (wgt > wgt_max) {
    $('weight').innerHTML = "<span style=\"color:red;\">" + wgt + "</span>";
  } else {
    $('weight').innerHTML = wgt;
  }
  $('maxweight').innerHTML = wgt_max;
}

function replaceImage(id, src, w, h, alt) {
  w = w || '';
  h = h || '';
  alt = alt || '';
  var img = document.getElementById(id);
  img.src = src;
  img.width = w;
  img.height = h;
  img.setAttribute('alt', alt);
}
function replaceImageAll(src) {
  var imgs = document.getElementsByTagName('img');
  for(i=0; i<imgs.length; i++) {
    if (imgs[i].id == "itemImage") {
      imgs[i].src = "./image/item_none.png";
    } else {
      imgs[i].src =  src;
    }
  }
}
function dispItemImage(num) {
  var itemimg = $('itemImage');
  var src = "./image/";
  if (num == 0) {
    src = src + "item_none.png";
  } else {
    src = src + current + "/" + f_sex + "-" + num + ".gif";
  }
  itemimg.src = src;
  itemimg.width = 100;
  itemimg.height = 100;
}

function resetAll() {
  f_hp = 100;
  f_ap = 0;
  f_hpex = 0;
  f_apex = 0;
  f_weight = 0;
  f_weightmax = 100;

  f_head  = 0;
  f_armor = 0;
  f_glove = 0;
  f_leg   = 0;
  f_shoes = 0;
  f_melee = 0;
  f_w1    = 0;
  f_w2    = 0;
  f_item1 = 0;
  f_item2 = 0;
  f_ring1 = 0;
  f_ring2 = 0;

  var element = $('itemlist');
  if (element.childNodes.length != 0) {
    element.removeChild(element.childNodes.item(0));
  }

  $('headgear').innerHTML = "&lt; Head &gt;";
  $('armor').innerHTML = "&lt; Chest &gt;";
  $('glove').innerHTML = "&lt; Hands &gt;";
  $('leg').innerHTML = "&lt; Legs &gt;";
  $('shoes').innerHTML = "&lt; Feet &gt;";
  $('item1').innerHTML = "&lt; Item 1 &gt;";
  $('item2').innerHTML = "&lt; Item 2 &gt;";
  $('ring1').innerHTML = "&lt; Left Finger &gt;";
  $('ring2').innerHTML = "&lt; Left Finger &gt;";

  $('melee').innerHTML = "&lt; Melee &gt;";
  $('weapon1').innerHTML = "&lt; Primary Weapon &gt;";
  $('weapon2').innerHTML = "&lt; Secondary Weapon &gt;";

  replaceImageAll('./image/none.png');
}


// 初期化
function init() {

  $('sex').onchange = function() {
    f_sex = eval($F('sex'));
    resetAll();
    printDisp();
  }

  $('headgear').onclick = function() {
    current = 0;
    dispItemImage(0);
    buildSelectForm(headgear[f_sex], '< Head >');
  }
  $('armor').onclick = function() {
    current = 1;
    dispItemImage(0);
    buildSelectForm(armor[f_sex], '< Chest >');
  }
  $('glove').onclick = function() {
    current = 2;
    dispItemImage(0);
    buildSelectForm(glove[f_sex], '< Hands >');
  }
  $('leg').onclick = function() {
    current = 3;
    dispItemImage(0);
    buildSelectForm(leg[f_sex], '< Legs >');
  }
  $('shoes').onclick = function() {
    current = 4;
    dispItemImage(0);
    buildSelectForm(shoes[f_sex], '< Feet >');
  }

  $('melee').onclick = function() {
    current = 5;
    buildInputForm('< Melee >');
  }
  $('weapon1').onclick = function() {
    current = 6;
    buildInputForm('< Primary Weapon >');
  }
  $('weapon2').onclick = function() {
    current = 7;
    buildInputForm('< Secondary Weapon >');
  }

  $('item1').onclick = function() {
    current = 8;
    buildSelectForm(item, '< Item 1 >');
  }
  $('item2').onclick = function() {
    current = 9;
    buildSelectForm(item, '< Item 2 >');
  }
  $('ring1').onclick = function() {
    current = 10;
    buildSelectForm(ring, '< Left Finger >');
  }
  $('ring2').onclick = function() {
    current = 11;
    buildSelectForm(ring, '< Right Finger >');
  }
  $('sex').selectedIndex = 0;
  resetAll();
  printDisp();

  var usage = "<div class=\"usage\"><p> - Usage - </p>";
  usage = usage + "<p>防具・アイテム・指輪: <br />左側装備欄をクリックすると右側に装備品リストが出るので選択するとセットされます。</p>";
  usage = usage + "<p>武器: <br />武器欄をクリックすると重量を入力するフォームが表示されるので武器重量を入力してSetボタンを押してください。</p>";
  usage = usage + "<p>性別を変更すると装備がリセットされます。</p>";
  usage = usage + "<p>上手く動作しない場合はCtrl+F5で再読込してみるといいかもしれません。</p>";
  usage = usage + "</div>";
  $('itemlist').innerHTML = usage;

}

Event.observe(window, 'load', init);