/* メッセージを敷き詰めて表示する関数
------------------------------------------------------------ */
function displayMessages() {
  var row_height = [];
  var row_last_element = [];
  var liElements = document.getElementById("main").getElementsByTagName("li");
  Array.map(liElements, function(node, i) {
    node.style.marginTop = 0;
    node.style.width = "29%";
    if (i >= 3) {
      var row_min = Number.MAX_VALUE;
      var row_min_j;
      for(var j = 0; j < 3; ++j) {
          if (row_min > row_height[j]) {
              row_min = row_height[j];
              row_min_j = j;
          }
      }
      var overNode = row_last_element[row_min_j];
      var distance = overNode.offsetTop + overNode.offsetHeight - node.offsetTop;
      node.style.marginTop = distance + 12 + "px";
      node.style.marginLeft = row_min_j * 33.33 + "%";
      row_height[row_min_j] += node.offsetHeight;
      row_last_element[row_min_j] = node;
    }
    else {
      node.style.marginLeft = i * 33.33 + "%";
      row_height[i] = node.offsetHeight;
      row_last_element[i] = node;
      node.style.marginTop = liElements[0].offsetTop - node.offsetTop + "px";
    }
  });
}
displayMessages();

// イベントハンドラとして登録
var displayMessagesInterval = setInterval(displayMessages, 1000);
addHandler(window, "load", function() {
    displayMessages();
    clearInterval(displayMessagesInterval);
});
addHandler(window, "resize", displayMessages);