//timer
//level
//score
//sound click
var url = 'http://fkonyali.com/animals/',
    cardsC = document.getElementsByClassName('flex-cards'),
    card = document.getElementsByClassName('card'),
    cardClick = document.getElementsByClassName('clicked'),
    cardMatch = document.getElementsByClassName('matched'),
    score = document.getElementsByClassName('score'),
    level = document.getElementsByClassName('level'),
    wi_level = 1,
    right_side = document.getElementsByClassName('right-side'),
    level1cards = ['dog', 'cat', 'bear', 'elephant', 'dog', 'cat', 'bear', 'elephant'],
    level2cards = ['owl', 'lion', 'monkey', 'fish', 'chicken', 'rabbit', 'owl', 'lion', 'monkey', 'fish', 'chicken', 'rabbit'],
    level3cards = ['panda', 'tiger', 'unicorn', 'zebra', 'bat', 'giraffe', 'animal', 'chameleon','panda', 'tiger', 'unicorn', 'zebra', 'bat', 'giraffe', 'animal', 'chameleon'],
    level4cards = ['cheetah', 'crocodile', 'fox', 'goat', 'koala', 'narwhal', 'otter', 'sheep', 'dog', 'panda', 'cheetah', 'crocodile', 'fox', 'goat', 'koala', 'narwhal', 'otter', 'sheep', 'dog', 'panda'];

function shuffle(array) {
    var currentIndex = array.length,
        temporaryValue,
        randomIndex;

    while(0 != currentIndex) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
    }
    return array;
}

var level1cards_mix = shuffle(level1cards),
    level2cards_mix = shuffle(level2cards),
    level3cards_mix = shuffle(level3cards),
    level4cards_mix = shuffle(level4cards);

function innerItems(x,y,z) {
    for(i=0; i<y.length; i++) {
        x[0].innerHTML += 
            "<div class='card' data-img='"+btoa(z[i])+"'>"+
                "<div class='front'>"+
                    
                "</div>"+
                "<div class='back'>"+
                    
                "</div>"+
                "<div class='point'>"+

                "</div>"+
            "</div>";
    }
    innerItems_click(y);
}

function innerItems_click(y) {
    for(a=0; a<y.length; a++) {
        card[a].addEventListener("click", click_cards);
    }
}

var hasClickCard = false,
    clickable = false,
    firstCard, secondCard, point=0, totalPoint=0;

function click_cards(e) {
    var attr = atob(this.getAttribute("data-img"));
    if(clickable) return;
    this.classList.add('clicked');
    this.getElementsByClassName('back')[0].innerHTML = "<img src='"+url+attr+".svg' alt='"+attr+"' />";
    if(!hasClickCard) {
        //first click
        hasClickCard = true;
        firstCard = this;
        firstCardAttr = firstCard.getAttribute('data-img');
    }else {
        //second click
        hasClickCard = false;
        secondCard = this;
        secondCardAttr = secondCard.getAttribute('data-img');
        checkForMatch();
    }
}

var timer_circle;

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    timer_circle = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        //if timer zero is game over
        if(timer == 0) {
            clearInterval(timer_circle);
            right_side[0].innerHTML += "<div class='game-over'>"+
                                            "<div class='message'>Kaybettin!</div>"+ 
                                            "<button id='play-again'>Tekrar Oyna</button>"+
                                        "</div>"
            var playAgain_btn = document.getElementById('play-again');
            playAgain_btn.addEventListener('click', play_again);
        }else {
            if (--timer < 0) {
                timer = duration;
            }
        }
    }, 1000);
}

function checkForMatch() {
    var lastMatch_Cards = cardMatch.length;
    console.log(lastMatch_Cards);
    //if match
    if(firstCardAttr === secondCardAttr) {
        disabledCards();
        firstCard.classList.add('matched');
        secondCard.classList.add('matched');
        //point
        point +=100;
        totalPoint +=point * 2;
        score[0].innerHTML = totalPoint;
        firstCard.getElementsByClassName('point')[0].innerHTML = "+"+point;
        secondCard.getElementsByClassName('point')[0].innerHTML = "+"+point;
        if(wi_level == 1 && lastMatch_Cards == 6) {
            //game-win
            clearInterval(timer_circle);
            right_side[0].innerHTML += "<div class='game-win'>"+
                                            "<div class='message'>Kazandın!</div>"+ 
                                            "<button id='second-level'>Sonraki Seviye</button>"+
                                        "</div>"
            var secondLevel_btn = document.getElementById('second-level');
                secondLevel_btn.addEventListener('click', secondLevel);
        }else if(wi_level == 2 && lastMatch_Cards == 10) {
            //game-win
            clearInterval(timer_circle);
            right_side[0].innerHTML += "<div class='game-win'>"+
                                            "<div class='message'>Kazandın!</div>"+ 
                                            "<button id='third-level'>Sonraki Seviye</button>"+
                                        "</div>"
            var thirdLevel_btn = document.getElementById('third-level');
                thirdLevel_btn.addEventListener('click', thirdLevel);
        }else if(wi_level == 3 && lastMatch_Cards == 14) {
            //game-win
            clearInterval(timer_circle);
            right_side[0].innerHTML += "<div class='game-win'>"+
                                            "<div class='message'>Kazandın!</div>"+ 
                                            "<button id='fourth-level'>Sonraki Seviye</button>"+
                                        "</div>"
            var fourthLevel_btn = document.getElementById('fourth-level');
                fourthLevel_btn.addEventListener('click', fourthLevel);
        }else if(wi_level == 4 && lastMatch_Cards == 18){
            //game-win
            clearInterval(timer_circle);
            right_side[0].innerHTML += "<div class='game-win'>"+
                                            "<div class='message'>Oyun bitti. Kazandın!</div>"+ 
                                            "<button id='play-again'>Tekrar Baştan Oyna</button>"+
                                        "</div>";
            wi_level = 1;
            var playAgain_btn = document.getElementById('play-again');
                playAgain_btn.addEventListener('click', play_again);
        }
    }else {
        unClickCards();
        //point
        point = 0;
    }
}

function secondLevel() {
    wi_level = 2;
    point = 0;
    right_side[0].innerHTML = "";
    level[0].innerHTML = "2/4";
    var level2cards_minutes = 85,
        display = document.querySelector('.time');
    startTimer(level2cards_minutes, display);
    right_side[0].innerHTML = "<div class='flex-cards'></div>";
    innerItems(cardsC,level2cards,level2cards_mix);
}

function thirdLevel() {
    wi_level = 3;
    point = 0;
    right_side[0].innerHTML = "";
    level[0].innerHTML = "3/4";
    var level3cards_minutes = 150,
        display = document.querySelector('.time');
    startTimer(level3cards_minutes, display);
    right_side[0].innerHTML = "<div class='flex-cards'></div>";
    innerItems(cardsC,level3cards,level3cards_mix);
}

function fourthLevel() {
    wi_level = 4;
    point = 0;
    right_side[0].innerHTML = "";
    level[0].innerHTML = "4/4";
    var level4cards_minutes = 210,
        display = document.querySelector('.time');
    startTimer(level4cards_minutes, display);
    right_side[0].innerHTML = "<div class='flex-cards'></div>";
    innerItems(cardsC,level4cards,level4cards_mix);
}

console.log(wi_level);

function disabledCards() {
    //is match
    firstCard.removeEventListener('click', click_cards);
    secondCard.removeEventListener('click', click_cards);
}

function unClickCards() {
    clickable = true;

    setTimeout(function(){
        firstCard.classList.remove('clicked');
        secondCard.classList.remove('clicked');
        clickable = false;
    },1500);
}

function play_again() {
    var display = document.querySelector('.time');
    point = 0;
    level[0].innerHTML = "1/4";
    score[0].innerHTML = "0";
    if(wi_level == 1) {
        var level1cards_minutes = 38;
        startTimer(level1cards_minutes, display);
        right_side[0].innerHTML = "<div class='flex-cards'></div>";
        innerItems(cardsC,level1cards,level1cards_mix);
    }else if(wi_level == 2) {
        var level2cards_minutes = 85;
        startTimer(level2cards_minutes, display);
        right_side[0].innerHTML = "<div class='flex-cards'></div>";
        innerItems(cardsC,level2cards,level2cards_mix);
    }else if(wi_level == 3) {
        var level3cards_minutes = 150;
        startTimer(level3cards_minutes, display);
        right_side[0].innerHTML = "<div class='flex-cards'></div>";
        innerItems(cardsC,level3cards,level3cards_mix);
    }else {
        var level4cards_minutes = 210;
        startTimer(level4cards_minutes, display);
        right_side[0].innerHTML = "<div class='flex-cards'></div>";
        innerItems(cardsC,level4cards,level4cards_mix);
    }
}

window.onload = function() {
    innerItems(cardsC,level1cards,level1cards_mix);
    var level1cards_minutes = 38,
        display = document.querySelector('.time');
    startTimer(level1cards_minutes, display);
}