// from prototype.js
var $ = function(id) {
  return document.getElementById(id);
}

// マウスオーバー判定用
var overed = null;
// 進行方向管理
var matrix = [];
// メインパネル
var mainPanel;

// initialize
window.onload = function() {
  mainPanel = $('mainPanel');
  
  // パネル作成
  for (var i=0;i<10;i++) {
    var newsPanel = document.createElement('div');
    newsPanel.id = 'newsPanel_' + i;
    newsPanel.style.position = 'absolute';
    newsPanel.style.zIndex = i + 2;
    newsPanel.style.top = Math.floor(Math.random() * 350) + 'px';
    newsPanel.style.right = Math.floor(Math.random() * 550) + 'px';
    newsPanel.style.width = '70px';
    newsPanel.style.height = '70px';
    newsPanel.style.border = '1px #880000 solid';
    newsPanel.style.backgroundColor = '#a0522d';
    newsPanel.style.color = '#ffffff';
    newsPanel.style.textAlign = 'center';
    newsPanel.innerHTML = '*'+i+'*<br /><img src="/images/aipractice/earth_02.gif">';
    newsPanel.onmouseover = function() {
      overed = this.id.replace('newsPanel_', '');
      this.style.zIndex = 99;
    }
    newsPanel.onmouseout = function() {
      overed = null;
      this.style.zIndex = parseInt(this.id.replace('newsPanel_', '')) + 2;
    }
    mainPanel.appendChild(newsPanel);
    // 進行方向
    matrix[i] = Math.floor(Math.random() * 4);
  }
  
  // イベント実行
  setInterval(function(){
    for (var i=0;i<10;i++) {
      var newsPanel = $('newsPanel_' + i);
      if (overed != newsPanel.id.replace('newsPanel_', '')) {
        var changed = false;
        switch(matrix[i]) {
          // up
          case 0:
            newsPanel.style.top = (parseInt(newsPanel.style.top) + Math.floor(Math.random() * 5 + 1)) + 'px';
            if (parseInt(newsPanel.style.top) > 430) {
              newsPanel.style.top = '430px';
              matrix[i] = 1;
              changed = true;
            }
            break;
          // right
          case 1:
            newsPanel.style.right = (parseInt(newsPanel.style.right) - Math.floor(Math.random() * 5 + 1)) + 'px';
            if (parseInt(newsPanel.style.right) < 0) {
              newsPanel.style.right = '10px';
              matrix[i] = 3;
              changed = true;
            }
            break;
          // down
          case 2:
            newsPanel.style.top = (parseInt(newsPanel.style.top) - Math.floor(Math.random() * 5 + 1)) + 'px';
            if (parseInt(newsPanel.style.top) < 0) {
              newsPanel.style.top = '10px';
              matrix[i] = 2;
              changed = true;
            }
            break;
          // left
          case 3:
            newsPanel.style.right = (parseInt(newsPanel.style.right) + Math.floor(Math.random() * 5 + 1)) + 'px';
            if (parseInt(newsPanel.style.right) > 600) {
              newsPanel.style.right = '600px';
              matrix[i] = 1;
              changed = true;
            }
            break;
          default:
            break;
        }
        if (changed == false && Math.floor(Math.random() * 10) == 0) {
          matrix[i] = Math.floor(Math.random() * 4);
        }
      }
    }
  }, 50);
}