var allFunctionsPicName = "walk,town,store,sell,run,potion,loot,help".split(",");
var FUNC_PIC_ELEMENTS_CONTAINER_CLASSNAME = "icos-list";
var MESSAGE_BOX_ID = "message_box";
Array.prototype.indexOf = function(item){
  var temp = this;
  for (var i=0; i < temp.length; i++) {
    if (temp[i] == item) {
      return i;
    };
  };
  return -1;
}

Array.prototype.last = function(){
  return this[this.length-1];
}
Array.prototype.first = function(){
  return this[0];
}

function GetOffset(e)
{
    var off = new Object;
    var t = e.offsetTop;
    var l = e.offsetLeft;
    var w = e.offsetWidth;
    var h = e.offsetHeight-2;

    while(e=e.offsetParent)
    {
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
    off.top = t;
    off.left = l;
    off.width = w;
    off.height = h;
    return off;
}

function FilterElementsByClassName(htmlElementCollection, className){
  var result = [];
  for (var i=0; i < htmlElementCollection.length; i++) {
    (htmlElementCollection[i].className != className) || result.push(htmlElementCollection[i]);
  };
  return result;
}
function RegisterFuncPicEvents(){
  function GetFuncDescription(index){
    // var index = 0;
    // if ((index = allFunctionsPicName.indexOf(ele.src.split("/").last().split(".").first())) != -1) {
    return FilterElementsByClassName($("function_descriptions").getElementsByTagName("div"),"showimg-box")[index].innerHTML;
    // };
    // return "";
  }
  function RegFunctionEvent(ele){
    ele.onmouseover = function(e){
      var html = ""
      if ((html = GetFuncDescription(this.index)) != "") {
        MessageBox.show(html,this);
      };
    }
    ele.onmouseout = function(e){
      MessageBox.hide();
    }
  }
  
  var functions = FilterElementsByClassName($("function_container").getElementsByTagName("td"),"icos-list");
  for (var j=0; j < functions.length; j++) {
    functions[j].index = j;
    RegFunctionEvent(functions[j]);
  };
}
var MessageBox = {
  ele: $(MESSAGE_BOX_ID),
  show: function(content,ele){
    var off = GetOffset(ele);
    MessageBox.ele.innerHTML = content;
    MessageBox.ele.style.display = "block";
    MessageBox.ele.style.left = off.left + "px";
    MessageBox.ele.style.top = (off.top+off.height) + "px";
    
    MessageBox.compensate(off);
  },
  hide: function(){
    MessageBox.ele.style.display = "none";
  },
  compensate: function(o){
    var off = GetOffset(MessageBox.ele);
    (off.width + off.left < document.body.offsetWidth) ||  (MessageBox.ele.style.left = (off.left - off.width + o.width) + "px");
  }
}