//Globals
var lvl_points = [0, 1, 2, 3, 4, 5, 6, 7, 9, 11, 13, 16, 20];  //Needed attribute points needed to go from one level to the next
var att_points = 200;   //Remaining attribute points
var cumulated_points = [0];   //Total needed attribute points for a certain level
var att_lvls = [];   //Current levels of each of the 10 attributes

//Fill cumulated_points based on lvl_points
for (var i in lvl_points) {
   cumulated_points[i] = cumulated_points[Math.max(0, i - 1)] + lvl_points[i];
}

//Show the 10 attribute interface and fill att_lvls with zeros
var out = ['Attribute points left: <input id="left_points" type="text" size="4" value="' + att_points + '"/><br/><br/>'];
for (var i = 0; i < 10; i++) {
   att_lvls[i] = 0;
   out.push('<div id="att' + i + '">Att #' + i + ': <input type="text" size="3" value="0" onkeyup="change_lvl(this.parentNode, 0)"/><button onclick="change_lvl(this.parentNode, -1);">0</button><button onclick="change_lvl(this.parentNode, +1);">1</button><br/></div>');
}
document.getElementById('att_points').innerHTML = out.join('');

//Someone changed the attribute level : adapts everything accordingly
//obj points to the att div
//is_up == 1 if lvl up, -1 if lvl down, 0 if level specified manually
function change_lvl(obj, is_up) {
   var id = parseInt(obj.id.replace('att', ''));
   var lvl = is_up ? (att_lvls[id] + is_up) : parseInt(obj.childNodes[1].value);
   //Make sure new level is valid
   if (typeof(lvl_points[lvl]) == 'undefined') {
      return;
   }
   //else
   //Remember changes
   att_points += cumulated_points[att_lvls[id]] - cumulated_points[lvl];
   document.getElementById('left_points').value = att_points;
   att_lvls[id] = lvl;
   //Adapt att lvl input
   if (is_up) {
      obj.childNodes[1].value = lvl;
   }
   //Adapt attribute point requirements on buttons
   obj.childNodes[2].innerHTML = lvl_points[lvl];
   obj.childNodes[3].innerHTML = (lvl == 12) ? 999 : lvl_points[lvl+1];
}