
var FindPattern = {};
var Utils = {};
Utils.Path = "";
var questionId = 0, startTime = 0, scoredMarks = 0, totalMarks = 10, resId = 0, label='';

$(document).ready(function () {
    $(".se-pre-con").fadeOut("slow");
    /* if(navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i))
		Utils.mobileDeviceFlag=true; */
    if((navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) && !(window.location.href.includes('http')))
        Utils.mobileDeviceFlag = true;
	else
		Utils.mobileDeviceFlag=false;
    setTimeout(function () {
        FindPattern.init();
    });
}, 200);

FindPattern.init = function () {
    $("#home").hide();
    $("#gamePage").hide();
    $("#finalPage").hide();
	document.title = FindPattern.hardcodedData.nameOfGame;
	FindPattern.setImages();
	FindPattern.initVariables();
	FindPattern.createAcknowledgementDivs();
}

FindPattern.setImages = function () {
    document.body.style.backgroundImage = Utils.Path + "url('images/skin/BG.png')";
    document.getElementById("home").src = Utils.Path + "images/skin/Home.png";
    document.getElementById("logo").src = Utils.Path + "images/skin/logo.png";
    document.getElementById("playbutton").src = Utils.Path + "images/skin/Play.png";
    document.getElementById("soundImage").src = Utils.Path + "images/skin/sound.png";
    document.getElementById("nextImage").src = Utils.Path + "images/skin/Next.png";
    document.getElementById("playAgainBtn").src = Utils.Path + "images/skin/replay.png";
    document.getElementById("creditbtn").src = Utils.Path + "images/skin/Credits.png";
    document.getElementById("questionDiv").style.backgroundImage = Utils.Path + "url('images/skin/rule box.png')";
    document.getElementById("ansOptionDiv").style.backgroundImage = Utils.Path + "url('images/skin/time box.png')";
    $('#gameOverTextDiv').text(FindPattern.hardcodedData.gameOverMsg);
}

FindPattern.initVariables = function () 
{
    FindPattern.questionCnt = 0; 
    FindPattern.questionMarkIndex = 0;
    FindPattern.imageArray = [];
}

FindPattern.play = function()
{
    document.body.style.backgroundImage = Utils.Path + "url('images/skin/BG.png')";
    $("#home, #gamePage").show();
    $("#playbutton, #finalPage").hide();

    if(FindPattern.questionCnt != 5){
        if(FindPattern.questionCnt < 3){    //For Level 1 Questions
            level = 1;
            noOfImages = 2;
            FindPattern.questionMarkIndex = 7;
        }    
        else{                               //For Level 2 Questions
            level = 2;
            noOfImages = 3;
            FindPattern.questionMarkIndex = Math.floor(Math.random() * 5) + 1;
        }    
        FindPattern.makeQuestion(noOfImages);
        FindPattern.showQuestion(level);
    }
    else{
        FindPattern.gameOver();
    }
}

FindPattern.makeQuestion = function(noOfImages)     //This function will find unique 2(level 1) & 3(level2) images for each question.
{
    tempArray = [];
    while(FindPattern.imageArray.length != noOfImages) {
        randQue = Math.floor(Math.random() * FindPattern.patternData[FindPattern.questionCnt].data.length);
        while(tempArray.includes(randQue))
            randQue = Math.floor(Math.random() * FindPattern.patternData[FindPattern.questionCnt].data.length);
        tempArray.push(randQue);
        FindPattern.imageArray.push(FindPattern.patternData[FindPattern.questionCnt].data[randQue]);
    }
}

FindPattern.showQuestion = function(level)
{
    FindPattern.questionCnt++;
    
    for(index = 1; index < 8; index++)
	{	
		div = document.createElement("div");
		document.getElementById("questionDiv").appendChild(div);
		div.setAttribute("id","div"+index);
        div.setAttribute("class","divCss nopadding col-xs-1 col-sm-1 col-md-1 col-lg-1");
    
        image = document.createElement("img");
        document.getElementById("div"+index).appendChild(image);
        image.setAttribute("id","image"+index);
        image.setAttribute("class","imgHeight nopadding col-xs-12 col-sm-12 col-md-12 col-lg-12"); 
        if(level == 1)
            FindPattern.showLevel1Question(index);       //Show two objects with alternate pattern
        else if(level == 2)
            FindPattern.showLevel2Question(index);       //Show three objects with alternate pattern
    }
    FindPattern.makeAnsOptionDiv(level, index);    
}

FindPattern.showLevel1Question = function(index)    //Show two objects with alternate pattern
{   
    if(index < 7){
        if(FindPattern.questionCnt == 3){           //
            switch(index){
                case 1:
                case 2:
                case 5:
                case 6:
                    $("#div"+index).data('description',FindPattern.imageArray[0].imgName);
                    image.src = Utils.Path + "images/" + FindPattern.imageArray[0].imgName;
                    break;
                case 3: 
                case 4:
                    $("#div"+index).data('description',FindPattern.imageArray[1].imgName);
                    image.src = Utils.Path + "images/" + FindPattern.imageArray[1].imgName;
                    break;
            }
        }
        else{ 
            if(index % 2 == 0){
                $("#div"+index).data('description',FindPattern.imageArray[0].imgName);
                image.src = Utils.Path + "images/" + FindPattern.imageArray[0].imgName;
            }
            else{
                $("#div"+index).data('description',FindPattern.imageArray[1].imgName);
                image.src = Utils.Path + "images/" + FindPattern.imageArray[1].imgName;
            }    
        }
    }
    else{                       //For question mark at last image.
        if(index % 2 == 0)
            $("#div"+index).data('description',FindPattern.imageArray[0].imgName);
        else
            $("#div"+index).data('description',FindPattern.imageArray[1].imgName);
        image.src = Utils.Path + "images/skin/red_questionMark.png"
        $("#image7").addClass('animated flash');
    }
}

FindPattern.showLevel2Question = function(index)    //Show three objects with alternate pattern
{
    switch(index){
        case 1:
        case 4:
        case 7:
                $("#div"+index).data('description',FindPattern.imageArray[0].imgName);
                image.src = Utils.Path + "images/" + FindPattern.imageArray[0].imgName;
                break;
        case 2:
        case 5:
                $("#div"+index).data('description',FindPattern.imageArray[1].imgName);
                image.src = Utils.Path + "images/" + FindPattern.imageArray[1].imgName;
                break;
        case 3:
        case 6:
                $("#div"+index).data('description',FindPattern.imageArray[2].imgName);
                image.src = Utils.Path + "images/" + FindPattern.imageArray[2].imgName;
                break;
    }
    if(index == FindPattern.questionMarkIndex){
        image.src = Utils.Path + "images/skin/red_questionMark.png"
        $("#image"+index).addClass('animated flash');
    }
}

FindPattern.makeAnsOptionDiv = function(index)
{
    i = 0;
    shuffle(FindPattern.imageArray);
    if(level == 1)
        noOfAnsImg = 2;
    else if(level == 2)
        noOfAnsImg = 3;
    while(noOfAnsImg != 0)
	{	
		div = document.createElement("div");
		document.getElementById("ansOptionDiv").appendChild(div);
        div.setAttribute("id","ansDiv"+(i+1));
        div.setAttribute('onclick','FindPattern.checkAnswer(this.id)')
        if(level == 1)
            div.setAttribute("class","ansDivCss level1width nopadding col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xs-offset-2 col-md-offset-2 col-lg-offset-2 col-sm-offset-2");
        if(level == 2)
            div.setAttribute("class","ansDivCss level2width nopadding col-xs-3 col-sm-3 col-md-3 col-lg-3 col-xs-offset-1 col-md-offset-1 col-lg-offset-1 col-sm-offset-1");

        image = document.createElement("img");
        document.getElementById("ansDiv"+(i+1)).appendChild(image);
        image.setAttribute("id","ansImage"+(i+1));
        image.setAttribute("class","imgHeight img-responsive nopadding col-xs-12 col-sm-12 col-md-12 col-lg-12"); 
        if(level == 1){
            if(i % 2 == 0){
                $(div).data('description',FindPattern.imageArray[0].imgName);
                image.src = Utils.Path + "images/" + FindPattern.imageArray[0].imgName;
            }
            else{
                $(div).data('description',FindPattern.imageArray[1].imgName);
                image.src = Utils.Path + "images/" + FindPattern.imageArray[1].imgName;
            }
        }
        else if(level == 2){
            switch(i){
                case 0:
                        $("#ansDiv"+(i+1)).data('description',FindPattern.imageArray[0].imgName);
                        image.src = Utils.Path + "images/" + FindPattern.imageArray[0].imgName;
                        break;
                case 1:
                        $("#ansDiv"+(i+1)).data('description',FindPattern.imageArray[1].imgName);
                        image.src = Utils.Path + "images/" + FindPattern.imageArray[1].imgName;
                        break;
                case 2:
                        $("#ansDiv"+(i+1)).data('description',FindPattern.imageArray[2].imgName);
                        image.src = Utils.Path + "images/" + FindPattern.imageArray[2].imgName;
                        break;
            }
        }
        i++;
        noOfAnsImg--;
    }    
}

FindPattern.checkAnswer = function(ansDivId)
{
    clickedDivData = $("#"+ ansDivId).data("description");
    questionDivData = $("#div"+ FindPattern.questionMarkIndex).data("description");
     
    if(questionDivData == clickedDivData){               //Correct Answer
        $(".ansDivCss").css("pointer-events", "none");
        $("#nextBtn").css("pointer-events", "none");
        $("#image"+ FindPattern.questionMarkIndex).removeClass('flash');
        $("#image"+ FindPattern.questionMarkIndex).prop('src', Utils.Path + "images/" + clickedDivData);
        document.getElementById("playSound").src = Utils.Path + "sounds/instructions/Right_answer__Aditi.mp3";
        document.getElementById("playSound").play();
        setTimeout(function(){
            $(".ansDivCss").css('pointer-events','auto');
            $("#nextBtn").css("pointer-events", "auto");
            FindPattern.callNext();
        },1000)
    }
    else{                                               //Wrong Answer
        document.getElementById("playSound").src = Utils.Path + "sounds/instructions/Not_this_one__Aditi.mp3";
        document.getElementById("playSound").play();
    }
}

FindPattern.callNext = function()       //Clicked on next button
{
    document.getElementById("questionDiv").innerHTML = '';
    document.getElementById("ansOptionDiv").innerHTML = '';
    document.getElementById("playSound").pause();
    FindPattern.imageArray = [];
    FindPattern.play();
}

FindPattern.callSound = Function()
{
    /* document.getElementById("playSound").src = Utils.Path + "sounds/instructions/Not_this_one__Aditi.mp3";
    document.getElementById("playSound").play(); */
}

FindPattern.gameOver = function()
{
    document.getElementById("playSound").pause();
    $("#finalPage").show()
    $("#gamePage").hide();
    $("#acknowledgementDiv").hide();
}

FindPattern.replayGame = function()
{
    FindPattern.initVariables();
    FindPattern.play();
}

FindPattern.callHome = function()
{
	location.reload();
}

FindPattern.createAcknowledgementDivs = function () {
	var i = 0, div;
	for (i = 0; i < Object.keys(FindPattern.AcknowledgementPageData).length; i++) {
		div = document.createElement('div');
		div.className = "nopadding fontClass firstLetter col-xs-12 col-sm-12 col-md-12 col-lg-12";
		div.innerHTML = Object.keys(FindPattern.AcknowledgementPageData)[i] + " : " + Object.values(FindPattern.AcknowledgementPageData)[i];
		acknowledgementDiv.appendChild(div);
	}
	div = document.createElement('div');
	div.className = "nopadding fontClass firstLetter col-xs-12 col-sm-12 col-md-12 col-lg-12";
	div.innerHTML = FindPattern.hardcodedData.createdOn;
	div.style.marginBottom = "2vh";
	acknowledgementDiv.appendChild(div);
}

FindPattern.showAcknowledgement = function () {
	$("#acknowledgementDiv").show();
}

function shuffle(randomArray) {
    var arrayLength = randomArray.length;
    var temp, random_index;
    while (arrayLength > 0) {
        random_index = Math.floor(Math.random() * arrayLength);
        arrayLength--;
        temp = randomArray[arrayLength];
        randomArray[arrayLength] = randomArray[random_index];
        randomArray[random_index] = temp;
    }
    return (randomArray);
}