/* ------------------------------------------------------------+/
/+ 拡張クラス
/+ ------------------------------------------------------------*/
var Paneler;

var $ = function(id) {
  return document.getElementById(id);
}

Function.prototype.applyEventWithDOM = function(element, type, args, ignoreEvent) {
  var self = this;
  var _chk = function(event, args, ignoreEvent){
    var ev = event || window.event;
    if (ignoreEvent != true)
      if (typeof args[0] !== typeof ev)
        args.unshift(ev)
      else if (typeof args[0] === typeof ev)
        args[0] = ev
    
    self.apply(self, args);
  }
  if (element.addEventListener)
    element.addEventListener(type, function(event){ _chk(event, args, ignoreEvent) }, false);
  else
    element.attachEvent('on'+type, function(event){ _chk(event, args, ignoreEvent) });
}

/* ------------------------------------------------------------+/
/+ ユーザークラス
/+ ------------------------------------------------------------*/
var User = [
  { panelColor: 'white' },
  { panelColor: 'black' }
];

/* ------------------------------------------------------------+/
/+ パネルクラス
/+ ------------------------------------------------------------*/
var PanelClass = function() {
  // ターン判定
  var Turn = 0;
  // マスの数
  var PanelSize = 8;
  // パネル
  var Panel = [];
  // 置き換え用スタックパネル
  var StackPanel = [[], [], [], [], [], [], [], [], []];
  /* ------------------------------------------------------------+/
   * 初期処理
   * ------------------------------------------------------------*/
  this.init = function() {
    // マス作成
    makePanel();
    // 中央にコマ配置
    setCenterPanel();
    // 初期ターン表示
    $('turnPanel').innerHTML = (!Turn ? '白' : '黒') + 'のターンです';
  }
  /* ------------------------------------------------------------+/
   * マス作成
   * ------------------------------------------------------------*/
  var makePanel = function() {
    for (var x=0;x<PanelSize;x++) {
      Panel[x] = [];
      for (var y=0;y<PanelSize;y++) {
        var panel = document.createElement('div');
        panel.id = 'panel['+x+','+y+']';
        panel.style.position = 'absolute';
        panel.style.left = (x * 80) + 'px';
        panel.style.top = (y * 80) + 'px';
        panel.style.width = '80px';
        panel.style.height = '80px';
        panel.style.border = '#333333 1px solid';
        panel.innerHTML = '&nbsp;';
        chkPosition.applyEventWithDOM(panel, 'click', [x, y], true);
        $('mainPanel').appendChild(panel);
      }
    }
  }
  /* ------------------------------------------------------------+/
   * 初期コマ配置
   * ------------------------------------------------------------*/
  var setCenterPanel = function() {
    for (var x=3;x<=4;x++)
      for (var y=3;y<=4;y++)
        setPanel(x, y, x + y == 7 ? 'white' : 'black');
  }
  /* ------------------------------------------------------------+/
   * 配置チェック
   * ------------------------------------------------------------*/
  var chkPosition = function(x, y) {
    var flag  = false;
    
    // 既にコマがおかれている場合は無効
    if (Panel[x][y])
      return ;
    
    // 周りのコマを確認
    for (var dx=-1;dx<=1;dx++) {
      for (var dy=-1;dy<=1;dy++) {
        // マスの端をはみ出てなく、且つ１つ隣のコマが別の色でそのコマの延長線上に自分の色のコマがある場合OK
        if (chkRefical(x+dx) && chkRefical(y+dy) && Panel[x+dx][y+dy] == User[1-Turn].panelColor && chkNearPanel(x, y, dx, dy)) {
          flag = true;
          
          // 痴漢
          StackPanel[x+dx][y+dy] = User[Turn].panelColor;
          for (var px=0;px<PanelSize;px++)
            for (var py=0;py<PanelSize;py++)
              if (StackPanel[px][py] != null)
                setPanel(px, py, User[Turn].panelColor);
        }
      }
    }
    
    if (flag == true) {
      setPanel(x, y, User[Turn].panelColor);
      
      // コマ数カウント
      var counter = []; counter['white'] = 0; counter['black'] = 0;
      for (var px=0;px<PanelSize;px++)
        for (var py=0;py<PanelSize;py++)
          if (Panel[px][py] != null) counter[Panel[px][py]] += 1;
      
      // 終了のお知らせ
      if (counter['white'] + counter['black'] == 64) {
        $('statPanel').innerHTML = '白:' + counter['white'] + '個<br>' + 
                                   '黒:' + counter['black'] + '個<br>' + 
                                   '<p>' + (counter['black'] == counter['white'] ? '引分' : counter['black'] > counter['white'] ? '黒勝利ッ!!' : '白勝利ッ!!') + '</p>';
      }
      else {
        // 現在の戦況
        $('statPanel').innerHTML = '白:' + counter['white'] + '個<br>' + 
                                   '黒:' + counter['black'] + '個<br>' + 
                                   '<p>' + (counter['black'] == counter['white'] ? '同率' : counter['black'] > counter['white'] ? '黒, 優勢' : '白, 優勢') + '</p>' + 
                                   '<p>' + '<a href="javascript:Paneler.pass()">パス</a>' + '</p>';
      }
      
      // ターン交代
      Turn = 1 - Turn;
      $('turnPanel').innerHTML = (!Turn ? '白' : '黒') + 'のターンです';
    }
    else
      alert('そのマスにはおけません');
  }
  /* ------------------------------------------------------------+/
   * 設置可能判定, 反転させるマス予約
   * ------------------------------------------------------------*/
  var chkNearPanel = function(x, y, dx, dy) {
    var ax, ay;
    
    if (dx == -1)
      ax = ['dtx = dx - 1', 'x + dtx >= 0', 'dtx--'];
    else if (dx == 1)
      ax = ['dtx = dx + 1', 'x + dtx < PanelSize', 'dtx++'];
    else
      ax = ['dtx = 0', '1', '1'];
    
    if (dy == -1)
      ay = ['dty = dy - 1', 'y + dty >= 0', 'dty--'];
    else if (dy == 1)
      ay = ['dty = dy + 1', 'y + dty < PanelSize', 'dty++'];
    else
      ay = ['dty = 0', '1', '1'];
    
    StackPanel = [[], [], [], [], [], [], [], []];
    for (eval('var '+ax[0]+','+ay[0]);eval(ax[1]+'&&'+ay[1]);eval(ax[2]+','+ay[2])) {
      // コマのない座標に衝突したらfalse
      if (!Panel[x+dtx][y+dty])
        break;
      
      // 反転させるマスの予約
      StackPanel[x+dtx][y+dty] = User[Turn].panelColor;
      
      // 自分と同じ色のコマと衝突したらtrue
      if (Panel[x+dtx][y+dty] == User[Turn].panelColor)
        return true;
    }
    
    return false;
  }
  /* ------------------------------------------------------------+/
   * コマ配置
   * ------------------------------------------------------------*/
  var setPanel = function(x, y, color) {
    Panel[x][y] = color;
    $('panel['+x+','+y+']').style.backgroundImage = 'url(/images/othello/'+color+'.gif)';
  }
  /* ------------------------------------------------------------+/
   * パス
   * ------------------------------------------------------------*/
  this.pass = function() {
    // ターン交代
    Turn = 1 - Turn;
    $('turnPanel').innerHTML = (!Turn ? '白' : '黒') + 'のターンです';
  }
  /* ------------------------------------------------------------+/
   * マスの端か?
   * ------------------------------------------------------------*/
  var chkRefical = function(pt) {
    return pt >= 0 && pt < PanelSize ? true : false;
  }
};

/* ------------------------------------------------------------+/
/+ 実装部分
/+ ------------------------------------------------------------*/
window.onload = function() {
  // パネル生成
  Paneler = new PanelClass();
  Paneler.init();
}