$(window).on('touchmove.noScroll', function(e) {
    e.preventDefault();
});

function sizeSet(num) {
    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        cellSize = Math.ceil(windowHeight / num) * 0.9,
        $board = $(".js-board"),
        $list = $board.find("li");

    if (windowWidth > windowHeight) {
        if (200 > (windowWidth - cellSize * num) / 2) {
            cellSize = cellSize * 0.9;
            $list.css({
                'width': cellSize,
                'height': cellSize
            });
            $board.css({
                'width': cellSize * num + 1,
                'margin-top': 50
            });
            $('.reversi_navi').addClass('is-small');

        } else {
            $list.css({
                'width': cellSize,
                'height': cellSize
            });
            $board.css({
                'width': cellSize * num + 1,
                'margin-top': (windowHeight - cellSize * num) / 2
            });
            $('.reversi_navi').addClass('is-large');
        }

    } else {
        cellSize = Math.ceil(windowWidth / num) * 0.9;
        $list.css({
            'width': cellSize,
            'height': cellSize
        });
        $board.css({
            'width': cellSize * num + 1,
            'margin-top': ((windowHeight - cellSize * num) / 2 > 50) ? (windowHeight - cellSize * num) / 2 : 50
        });
        $('.reversi_navi').addClass('is-small');
    }
}
$.fn.selectOption = function() {
    var self = this,
        list = this.find('li'),
        listNum = list.length,
        itemWidth = this.find('li').width(),
        num = 0,
        currentPosition = 0,
        $wrap = this.closest('.reversi_start_wrap'),
        $arrow = $wrap.find('.arrow'),
        $prev = this.prev('.prev'),
        $next = this.next('.next');

    list.eq(num).addClass('is-active');
    $arrow.on('click', function() {
        if ($wrap.hasClass('is-passive')) {
            return false;
        }

        moveList($(this).attr('class').substr(6));
        list.removeClass('is-active');
        list.eq(num).addClass('is-active');
    });

    function moveList(that) {
        switch (that) {
            case "prev":
                if (num > 0) {
                    num--;
                    currentPosition = currentPosition + itemWidth
                    self.animate({
                        left: currentPosition
                    });
                    $next.show();
                }
                if (num == 0) {
                    $prev.hide();
                }
                break;

            case "next":
                if (num < listNum - 1) {
                    num++;
                    currentPosition = currentPosition - itemWidth
                    self.animate({
                        left: currentPosition
                    });
                    $prev.show();
                }
                if (num == listNum - 1) {
                    $next.hide();
                }
                break;
        }
    }
}
$(function() {
    var $selectList = $('.reversi_start_select'),
        $list = $selectList.eq(0).find('li'),
        $arrow = $selectList.eq(0).closest('.reversi_start_wrap').find('.arrow'),
        flag = true;

    $selectList.eq(0).selectOption();
    $selectList.eq(2).selectOption();

    $arrow.on('click', function() {
        if ($list.eq(1).hasClass('is-active')) {
            $selectList.eq(1).closest('.reversi_start_wrap').removeClass('is-passive');
            if (flag) {
                $selectList.eq(1).selectOption();
            }

        } else {
            $selectList.eq(1).closest('.reversi_start_wrap').addClass('is-passive');
        }
        flag = false;
    });
});

;(function(w) {
    w.REVERSI = w.REVERSI || {};
    REVERSI.controller = REVERSI.controller || {};
    REVERSI.model = REVERSI.model || {};
    REVERSI.view = REVERSI.view || {};


    REVERSI.controller = {
        selectEvent: ("ontouchstart" in window) ? "touchend" : "mouseup",
        initialize: function() {
            $(document).on(this.selectEvent, ".js-start-btn", this._startGame);
            $(document).on(this.selectEvent, ".js-board li", this._putPiece);
            $(document).on(this.selectEvent, ".js-pass", this._passTurn);
            $(document).on(this.selectEvent, ".js-hint", this._viewHint);
            $(document).on("change", this._updateBoard);
            $(document).on("turnChange", REVERSI.view.rewriteTurn);
            $(document).on("end", REVERSI.view.endGame);
            $(document).on("getHint", REVERSI.view.renderHint);
            $(document).on("trueHintFlag", REVERSI.view.changeHintFlag);
            $(document).on("triggerClick", this._triggerClick);
        },
        _startGame: function() {
            REVERSI.model.selectMode();
            REVERSI.model.createBoardModel();
            REVERSI.view.initBoard(REVERSI.model.board, REVERSI.model.currentColor, REVERSI.model.SETTING.BOARD_ROW_NUM);
        },
        _putPiece: function() {
            if ($(this).attr('class')|| !REVERSI.model.turnFlag) {
                return false;
            }
            REVERSI.model.setCell($(this));
            REVERSI.model.updateData(REVERSI.model.getFlipCell());
            setTimeout(function() {
                REVERSI.model.checkBoard();
                REVERSI.model.goNextTurn();
            }, 500);
        },
        _passTurn: function() {
            REVERSI.model.increasePassNum();
            REVERSI.view.animatePass();
        },
        _viewHint: function() {
            REVERSI.model.checkHint();
        },
        _updateBoard: function(e, changeCellArray) {
            REVERSI.view.flipDisc(changeCellArray, REVERSI.model.currentColor, REVERSI.model.nextColor, REVERSI.model.putPiece.num);
        },
        _triggerClick: function(e, that) {
            $(that).trigger(REVERSI.controller.selectEvent);
        }
    };

    REVERSI.model = {
        SETTING: {
            BOARD_ROW_NUM: undefined,
            BOARD_CELL_NUM: undefined,
            GAME_MODE: undefined,
            GAME_LEVEL: undefined
        },
        currentColor: 'yellow',
        nextColor: 'blue',
        board: [],
        putPiece: {
            num: undefined,
            x: undefined,
            y: undefined
        },
        putFlag: false,
        passNum: 0,
        hintFlag: true,
        puttableCell: [],
        cpuTurnFlag: true,
        turnFlag: true,
        selectMode: function() {
            this.SETTING.GAME_MODE = this._getMode('mode');
            this.SETTING.GAME_LEVEL = this._getMode('level');
            this.SETTING.BOARD_ROW_NUM = this._getMode('num');
            this.SETTING.BOARD_CELL_NUM = this.SETTING.BOARD_ROW_NUM * this.SETTING.BOARD_ROW_NUM;
        },
        _getMode: function(type) {
            var list = '.js-' + type + '-select',
                value;

            $(list).find("li").each(function() {
                if ($(this).hasClass("is-active")) {
                    value = $(this).data(type);
                }
            });
            return value;
        },
        createBoardModel: function() {
            var first1 = (this.SETTING.BOARD_ROW_NUM / 2 - 1) * this.SETTING.BOARD_ROW_NUM + (this.SETTING.BOARD_ROW_NUM / 2) - 1,
                first2 = first1 + 1,
                second1 = first2 + this.SETTING.BOARD_ROW_NUM,
                second2 = second1 - 1;

            for (var i = 0; i < this.SETTING.BOARD_CELL_NUM; i++) {
                var boardCell = {};
                boardCell.num = i;
                boardCell.x = i % this.SETTING.BOARD_ROW_NUM;
                boardCell.y =  Math.floor(i / this.SETTING.BOARD_ROW_NUM);

                if (i == first1 || i == second1) {
                    boardCell.disc = this.currentColor;
                } else if (i == first2 || i == second2) {
                    boardCell.disc = this.nextColor;
                }
                this.board.push(boardCell);
            }
        },
        setCell: function(that) {
            this.putPiece.num = that.index();
            this.putPiece.x = this.putPiece.num % this.SETTING.BOARD_ROW_NUM;
            this.putPiece.y = Math.floor(this.putPiece.num / this.SETTING.BOARD_ROW_NUM);
        },
        getFlipCell: function() {
            var checkPiece = {},
                changeArray = [];
            for (var i = 0; i < this.board.length; i++) {
                checkPiece.diffX = this.putPiece.x - this.board[i].x;
                checkPiece.diffY = this.putPiece.y - this.board[i].y;

                if (checkPiece.diffX == 0 || checkPiece.diffY == 0 || Math.abs(checkPiece.diffX) == Math.abs(checkPiece.diffY)) {
                    if (Math.abs(checkPiece.diffX) >= 2 || Math.abs(checkPiece.diffY) >= 2) {
                        checkPiece = {
                            putNum: this.putPiece.num,
                            num: i,
                            changeNum: (Math.abs(checkPiece.diffX) >= Math.abs(checkPiece.diffY)) ? Math.abs(checkPiece.diffX) - 1 : Math.abs(checkPiece.diffY) - 1,
                            changeX: this._getChangeNum(checkPiece.diffX),
                            changeY: this._getChangeNum(checkPiece.diffY)
                        };

                        var value = this.getArray(this.board[i], checkPiece);
                        if (value) {
                            for(var j = 0; j < value.length; j++) {
                                changeArray.push(value[j]);
                            }
                        }
                    }
                }
            }
            if (changeArray.length) return changeArray;
        },
        _getChangeNum: function(num) {
            if (num == 0) {
                num = 0;
            } else if (num > 0) {
                num = 1;
            } else {
                num = -1;
            }
            return num;
        },
        getArray: function(that, obj) {
            var changeFlag = false,
                preArray = [];

            if (that.disc == this.currentColor) {
                for (var i = 0; i < obj.changeNum; i++) {
                    for (var j = 0; j < this.board.length; j++) {
                        if (that.x + (obj.changeX * (i + 1)) == this.board[j].x && that.y + (obj.changeY * (i + 1)) == this.board[j].y) {
                            if (this.board[j].disc == this.nextColor) {
                                preArray.push(this.board[j].num);
                                changeFlag = true;
                            } else {
                                i = obj.changeNum;
                                changeFlag = false;
                            }
                        }
                    }
                }
            }
            if (changeFlag) {
                var value = this._getPreArray(preArray);
                this.puttableCell.push(obj);
                this.putFlag = true;
                preArray = [];
                return value;
            }
            preArray = [];
        },
        _getPreArray: function(array) {
            var value = [];
            for (var i = 0; i < array.length; i++) {
                value.push(array[i]);
            }
            return value;
        },
        updateData: function(changeCellArray) {
            if (this.putFlag) {
                this.board[this.putPiece.num].disc = this.currentColor;
                for (var i = 0; i < changeCellArray.length; i++) {
                    this.board[changeCellArray[i]].disc = this.currentColor;
                }
                $(document).trigger("change", [changeCellArray]);
                this.passNum = 0;
                this.puttableCell = [];
            } else {
                return false;
            }
        },
        checkBoard: function() {
            var numA = 0,
                numB = 0;

            for (var i = 0; i < this.board.length; i++) {
                if (this.board[i].disc == this.currentColor) {
                    numA++;
                } else if (this.board[i].disc == this.nextColor) {
                    numB++;
                }
            }

            if (numA + numB == this.SETTING.BOARD_CELL_NUM || !numA || !numB || this.passNum == 2) {
                $(document).trigger("end", [numA, numB, this.currentColor, this.nextColor]);
            }

            numB = 0;
            numA = 0;
        },
        goNextTurn: function() {
            if (this.putFlag) {
                this._changeTurn();
                this._goCpuTurn();
            }
        },
        _changeTurn: function() {
            this.currentColor = [this.nextColor, this.nextColor = this.currentColor][0];
            $(document).trigger("turnChange", this.currentColor);
            this.putFlag = false;
            this.hintFlag = true;
            $(document).trigger("trueHintFlag", true);
        },
        increasePassNum: function() {
            this.passNum++;
            if (this.passNum == 2) {
                this.checkBoard();
            }
            this._changeTurn();
            this._goCpuTurn();
        },
        checkHint: function() {
            this.puttableCell = [];
            if (this.hintFlag) {
                var self = this;
                this.putFlag = false;
                this.checkPuttableCell();
                if (this.puttableCell.length) {
                    $(document).trigger("getHint", [this.puttableCell]);
                    this.hintFlag = false;
                }
            } else {
                return false;
            }
        },
        checkPuttableCell: function() {
            var dammy = [];
            for (var i = 0; i < this.board.length; i++) {
                if (this.board[i].disc) {
                    continue;
                }
                this.putPiece = {
                    num: i,
                    x: this.board[i].x,
                    y: this.board[i].y
                }
                dammy.push(this.getFlipCell());
            }
            dammy = [];
            this.putFlag = false;
        },
        _goCpuTurn: function() {
            if (this.SETTING.GAME_MODE) {
                if (this.cpuTurnFlag) {
                    this.turnFlag = false;
                    setTimeout(function() {
                        REVERSI.model._cpuTurn();
                    }, 1000);
                }
                this.cpuTurnFlag = !this.cpuTurnFlag;
            }
        },
        _cpuTurn: function() {
            this.turnFlag = true;
            this.checkPuttableCell();

            if (!this.puttableCell.length) {
                $(document).trigger("triggerClick", $('.js-pass'));
                return false;
            }

            this.puttableCell = this._getAdjustArray(this.puttableCell);
            switch (this.SETTING.GAME_LEVEL) {
                case 'easy':
                    this._cpuRandomClick(this.puttableCell);
                    break;

                case 'normal':
                    var cpuPuttableCell = this._getPriorityCell(this.puttableCell);

                    this._cpuStartTrigger(cpuPuttableCell);
                    break;

                case 'hard':
                    var cornerArray = [];
                    for (var i = 0; i < this.puttableCell.length; i++) {
                        if (this.puttableCell[i].putNum == 0 || this.puttableCell[i].putNum == this.SETTING.BOARD_ROW_NUM - 1 ||
                            this.puttableCell[i].putNum == this.SETTING.BOARD_CELL_NUM - this.SETTING.BOARD_ROW_NUM ||
                            this.puttableCell[i].putNum == this.SETTING.BOARD_CELL_NUM - 1) {
                            cornerArray.push(this.puttableCell[i]);
                        }
                    }

                    if (cornerArray.length) {
                        var cpuPuttableCell = this._getPriorityCell(cornerArray);
                    } else {
                        var cpuPuttableCell = this._getPriorityCell(this.puttableCell);
                    }

                    this._cpuStartTrigger(cpuPuttableCell);
                    cornerArray = [];
                    break;
            }
            this.puttableCell = [];
        },
        _getAdjustArray: function(array) {
            for (var i = 0; i < array.length; i++) {
                for (var j = 0; j < array.length; j++) {
                    if (i == j || !array[i] || !array[j]) {
                        continue;
                    }
                    if (array[i].putNum == array[j].putNum) {
                        array[i].changeNum = array[i].changeNum + array[j].changeNum;
                        array[j] = null;
                    }
                }
            }
            for (var i = 0; i < array.length; i++) {
                if (!array[i]) {
                    array.splice(i, 1);
                    i--;
                }
            }
            return array;
        },
        _getPriorityCell: function(array) {
            var cpuPuttableNum = array[0],
                cpuPuttableArray = [];

            for (var i = 1; i < array.length; i++) {
                if (cpuPuttableNum.changeNum < array[i].changeNum) {
                    cpuPuttableNum = array[i];
                    cpuPuttableArray = [];
                } else if (cpuPuttableNum.changeNum == array[i].changeNum) {
                    if (!cpuPuttableArray.length) {
                        cpuPuttableArray.push(cpuPuttableNum);
                    }
                    cpuPuttableArray.push(array[i]);
                }
            }
            return [cpuPuttableNum, cpuPuttableArray];
        },
        _cpuRandomClick: function(array) {
            var randomNum = Math.floor(Math.random() * array.length);
            $(document).trigger("triggerClick", $(".js-board").find("li").eq(array[randomNum].putNum));
        },
        _cpuStartTrigger: function(array) {
            if (!array[1].length) {
                $(document).trigger("triggerClick", $(".js-board").find("li").eq(array[0].putNum));
            } else {
                this._cpuRandomClick(array[1]);
            }
        }
    };

    REVERSI.view = {
        $list: undefined,
        initBoard: function(board, color, num) {
            this.openGameDisplay();
            this.rewriteTurn(board, color);
            this.render(board);
            sizeSet(num);
        },
        openGameDisplay: function() {
            $(".js-dp-game").removeClass("is-hidden");
            $(".js-dp-start").addClass("is-hidden");
        },
        rewriteTurn: function(e, color) {
            $(".js-current-turn").text(color);
        },
        render: function(board) {
            $(".js-board").append(this._getTemplate(board));
            this.$list = $(".js-board").find("li");
        },
        _getTemplate: function(board) {
            var template = '';

            for (var i = 0; i < board.length; i++) {
                if (board[i].disc) {
                    template += '<li class="' + board[i].disc + '"></li>';
                } else {
                    template += '<li></li>';
                }
            }
            return template;
        },
        flipDisc: function(changeCellArray, currentColor, nextColor, putNum) {
            var self = this;
            this.$list.eq(putNum).addClass(currentColor);
            setTimeout(function() {
                for (var i = 0; i < changeCellArray.length; i++) {
                    self.$list.eq(changeCellArray[i]).removeClass(nextColor).addClass(currentColor);
                }
            }, 400);
        },
        endGame: function(e, numA, numB, currentColor, nextColor) {
            var $txt = $('.js-result-txt'),
                $result = $('.js-dp-result'),
                resultTxt = '',
                winner;

            if (numA == numB) {
                resultTxt = currentColor + ": " + numA + "<br>" + nextColor + ": " + numB + "<br>DRAW!!"
            } else {
                winner = (numA > numB) ? currentColor : nextColor;
                resultTxt = currentColor + ": " + numA + "<br>" + nextColor + ": " + numB + "<br>" + winner + " won!!"
            }

            setTimeout(function() {
                $txt.html(resultTxt);
                $result.removeClass('is-hidden').animate({
                    opacity: 1
                }, 800);
            }, 700);
        },
        animatePass: function() {
            $('.js-pass-image').removeClass('is-hidden').animate({
                opacity: 1
            },300, function() {
                $(this).animate({
                    opacity: 0
                },300, function() {
                    $(this).addClass('is-hidden');
                });
            });
        },
        renderHint: function(e, array) {
            for (var i = 0; i < array.length; i++) {
                REVERSI.view.$list.eq(array[i].putNum).addClass('hint');
            }
            setTimeout(function() {
                for (var i = 0; i < array.length; i++) {
                    REVERSI.view.$list.eq(array[i].putNum).removeClass('hint');
                }
                REVERSI.view.changeHintFlag('dammy', false);
            }, 1500);
        },
        changeHintFlag: function(e, that) {
            if (that) {
                $(".js-hint").removeClass('is-pale');
            } else {
                $(".js-hint").addClass('is-pale');
            }
        }
    };
})(window);
$(function() {
    REVERSI.controller.initialize();
});