//startingDate:16-07-2019
var TwoZeroFourEight = {};
var Utils = {};
Utils.Path = "";
Utils.mobileDeviceFlag = false;
var questionId = 0,
    startTime = 0,
    scoredMarks = 0,
    totalMarks = 40,
    resId = 0,
    level = 0;
var src;
var deltaX, deltaY, touchX, touchY, randNum;
$(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(Utils.mobileDeviceFlag) 
          Utils.Path=Android.getMediaPath("TwoZeroFourEight");  */
    setTimeout(function () {
        TwoZeroFourEight.init();
        src = document.getElementById("grid");
    }, 100);
});
var clientX, clientY;

TwoZeroFourEight.init = function () {
    $("#coverPage").show();
    $("#gamePage").hide();
    $(".header")
        .not("#logo")
        .css("visibility", "hidden");
    // document.body.style.backgroundImage = "url(" + Utils.Path + "images/Bg.png";
    document.body.style.backgroundColor = "#333";
    //document.body.style.backgroundColor="white";
    TwoZeroFourEight.initializeVariables();
    TwoZeroFourEight.setAllImages();
    TwoZeroFourEight.createGridDivs();
};

TwoZeroFourEight.initializeVariables = function () {
    TwoZeroFourEight.firstFlag = true;
    TwoZeroFourEight.storeArr = [];
    TwoZeroFourEight.refArr = [];
    //TwoZeroFourEight.colorArr = ["#d6cfc9", "#ece2d8", "#ebdfc7", "#f2b078", "#f29762", "#f37659", "#f65c3c", "#ebcd70", "#eccb60", "#ebc74f", "#eac440", "#e6c136", "#f0676c", "#eb4d5c", "#f3403c", "#75b3d8", "#5ba0db"];
    TwoZeroFourEight.colorArr = ["#5a595a", "#d442b0", "#09d26a", "#ec6a12", "#f7544d", "#f8bc4c", "#10b2e1", "#1d3eab", "#a245f9", "#a19ca1", "#00d0a1", "#33e860"]
    TwoZeroFourEight.newNumArr = [2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048];
    TwoZeroFourEight.score = 0;
    TwoZeroFourEight.highScore = 0;
    TwoZeroFourEight.traverseArr = [-4, 1, 4, -1];
    TwoZeroFourEight.vanishArr = [-5, -4, -3, 1, 3, 4, 5, -1];
    TwoZeroFourEight.deleteCtr = 0;
};

TwoZeroFourEight.setAllImages = function () {
    document.getElementById("homeImage").src = Utils.Path + "images/Home.png";
    document.getElementById("logoImage").src = Utils.Path + "images/logo.png";
    document.getElementById("playImg").src = Utils.Path + "images/playButton.png";
    document.getElementById("delete").style.backgroundImage = "url(" + Utils.Path + 'images/delete.png' + ")";
    document.getElementById("scoreText").innerHTML =
        TwoZeroFourEight.hardCodedData.scoreText;
    document.getElementById("currScore").innerHTML = 0;
    document.getElementById("deletePara").innerHTML = 0;
};

TwoZeroFourEight.createGridDivs = function () {
    var parentDiv, i, j, gridDiv, container, counter = 0;
    parentDiv = document.getElementById("grid");
    for (i = 1; i <= 4; i++) {
        container = document.createElement("DIV");
        container.setAttribute("id", "container" + i);
        container.setAttribute("class", "nopadding col-xs-12 col-md-12 col-lg-12 col-sm-12");
        for (j = 1; j <= 4; j++) {
            counter++;
            gridDiv = document.createElement("div");
            gridDiv.setAttribute("id", "gridDiv" + counter);
            gridDiv.setAttribute(
                "class",
                "numbers nopadding col-xs-2 col-md-2 col-lg-2 col-sm-2"
            );
            gridDiv.setAttribute("number", counter);
            container.appendChild(gridDiv);
        }
        parentDiv.appendChild(container);
    }
};

TwoZeroFourEight.playGame = function () {
    $("#coverPage").hide();
    $("#gamePage").show();
    $(".header").css("visibility", "visible");
    $("#newNum").draggable({
        revert: "invalid", helper: "clone", start: function (event, ui) {
            $(ui.helper).addClass("ui-helper");
        }
    });

    $(".numbers").not("#newNum").droppable({
        drop: TwoZeroFourEight.checkNumber
    });
    TwoZeroFourEight.placeNum();
};

TwoZeroFourEight.placeNum = function () {
    var number = 0,
        maxNum = 0;
    if (TwoZeroFourEight.firstFlag) {
        TwoZeroFourEight.firstFlag = false;
        randNum = Math.floor(Math.random() * 3);
        number = TwoZeroFourEight.newNumArr[randNum];
    } else {
        for (i = 1; i <= 16; i++) {
            number = parseInt($("#gridDiv" + i).text());
            if (number > maxNum) maxNum = number;
        }
        randNum = Math.floor(Math.random() * TwoZeroFourEight.newNumArr.length);
        number = TwoZeroFourEight.newNumArr[randNum];
        while (number > maxNum) {
            randNum = Math.floor(Math.random() * TwoZeroFourEight.newNumArr.length);
            number = TwoZeroFourEight.newNumArr[randNum];
        }
    }

    document.getElementById("newPara").innerHTML = number;
    document.getElementById("newNum").style.backgroundColor =
        TwoZeroFourEight.colorArr[randNum + 1];
    if (number >= 1024)
        document.getElementById("newPara").style.fontSize = "3vw";
    else
        document.getElementById("newPara").style.fontSize = "4vw";
};

TwoZeroFourEight.checkNumber = function (event, ui) {
    i = 0;
    var div = ui.draggable.children().text();
    //var newDiv=div.context.style='';
    var ele = $(this).prop("id");
    $("#" + ele).css({
        "background-color": TwoZeroFourEight.colorArr[randNum + 1]
    });
    $(this).append(div);
    $(this).droppable("disable");
    $(this).position({
        at: "center",
        of: this
    });

    TwoZeroFourEight.placeNum();
    TwoZeroFourEight.addNumbers(ele);
};

TwoZeroFourEight.addNumbers = function (ele) {
    var i = 0,
        divNo,

        number = 0;
    TwoZeroFourEight.traverseArr = [-4, 1, 4, -1];
    TwoZeroFourEight.vanishArr = [-5, -4, -3, 1, 3, 4, 5, -1];
    divNo = parseInt(document.getElementById(ele).getAttribute("number"));
    if (divNo % 4 == 0) {
        index = TwoZeroFourEight.traverseArr.indexOf(1);
        TwoZeroFourEight.traverseArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(1);
        TwoZeroFourEight.vanishArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(-3);
        TwoZeroFourEight.vanishArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(5);
        TwoZeroFourEight.vanishArr.splice(index, 1);
    }
    if (divNo % 4 == 1) {
        index = TwoZeroFourEight.traverseArr.indexOf(-1);
        TwoZeroFourEight.traverseArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(-1);
        TwoZeroFourEight.vanishArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(-5);
        TwoZeroFourEight.vanishArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(3);
        TwoZeroFourEight.vanishArr.splice(index, 1);


    }
    if (divNo <= 4) {
        index = TwoZeroFourEight.traverseArr.indexOf(-4);
        TwoZeroFourEight.traverseArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(-4);
        TwoZeroFourEight.vanishArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(-3);
        TwoZeroFourEight.vanishArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(-5);
        TwoZeroFourEight.vanishArr.splice(index, 1);


    }
    if (divNo > 12) {
        index = TwoZeroFourEight.traverseArr.indexOf(4);
        TwoZeroFourEight.traverseArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(4);
        TwoZeroFourEight.vanishArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(5);
        TwoZeroFourEight.vanishArr.splice(index, 1);
        index = TwoZeroFourEight.vanishArr.indexOf(3);
        TwoZeroFourEight.vanishArr.splice(index, 1);

    }
    //console.log(TwoZeroFourEight.traverseArr);

    if (TwoZeroFourEight.waitTimer) {
        clearInterval(TwoZeroFourEight.waitTimer);
        TwoZeroFourEight.waitTimer = null;
    }
    TwoZeroFourEight.waitTimer = setInterval(function () {
        i++;
        if (i > TwoZeroFourEight.traverseArr.length) {
            document.getElementById("newNum").style.pointerEvents = "auto";
            clearInterval(TwoZeroFourEight.waitTimer);
            if (TwoZeroFourEight.deleteCtr >= 3) {
                num = parseInt(document.getElementById("deletePara").innerHTML);
                document.getElementById("deletePara").innerHTML = (num + 1);
                TwoZeroFourEight.deleteCtr = 0;
            }

        }
        else {
            document.getElementById("newNum").style.pointerEvents = "none";
            number = parseInt(document.getElementById(ele).innerHTML);
            console.log("***** in addNumbers for " + i + " : " + ele);
            TwoZeroFourEight.setAnimation(divNo, number, ele);
        }

    }, 300);

};

TwoZeroFourEight.setAnimation = function (divNo, number, ele) {
    var i = 0, j = 0, matchCounter = 0;
    console.log()
    if (TwoZeroFourEight.animationTimer) {
        clearInterval(TwoZeroFourEight.animationTimer);
        TwoZeroFourEight.animationTimer = null;
    }
    TwoZeroFourEight.animationTimer = setInterval(function () {
        if (i >= TwoZeroFourEight.traverseArr.length) {
            clearInterval(TwoZeroFourEight.animationTimer);

            TwoZeroFourEight.checkSameNumber(number, ele, matchCounter);
        }
        else {
            console.log("in setAnimarion for " + i + " : " + ele);
            num = $("#gridDiv" + (divNo + TwoZeroFourEight.traverseArr[i])).text();
            // console.log(num);
            if (parseInt(
                document.getElementById("gridDiv" + (divNo + TwoZeroFourEight.traverseArr[i]))
                    .innerHTML
            ) == number
            ) {
                matchCounter++;
                $("#gridDiv" + (divNo)).addClass("zoomIn");
                document.getElementById(
                    "gridDiv" + (divNo + TwoZeroFourEight.traverseArr[i])
                ).innerHTML = "";
                document.getElementById(
                    "gridDiv" + (divNo + TwoZeroFourEight.traverseArr[i])
                ).style.backgroundColor = "#5a595a";
                $("#gridDiv" + (divNo + TwoZeroFourEight.traverseArr[i])).droppable("enable");
            }
        }
        i++;
    }, 50);
}

TwoZeroFourEight.checkSameNumber = function (number, ele, matchCounter) {
    for (j = 0; j < TwoZeroFourEight.traverseArr.length; j++) {

        if (matchCounter > 0) {
            TwoZeroFourEight.deleteCtr++;
            if (matchCounter >= 3) {
                num = parseInt(document.getElementById("deletePara").innerHTML);
                document.getElementById("deletePara").innerHTML = (num + 1);
            }
            matchCounter = 0;
            number = number * 2;
            console.log("in checkSameNum for " + j + " : " + ele);
            document.getElementById(ele).innerHTML = number;
            TwoZeroFourEight.score = TwoZeroFourEight.score + number;
            document.getElementById("currScore").innerHTML = TwoZeroFourEight.score;
        }
    }

    for (k = 0; k < TwoZeroFourEight.newNumArr.length; k++) {
        if (number == TwoZeroFourEight.newNumArr[k]) {
            document.getElementById(ele).style.backgroundColor = TwoZeroFourEight.colorArr[k + 1];
            if (number >= 1024) {
                document.getElementById(ele).style.fontSize = "3vw";
                document.getElementById(ele).style.lineHeight = "15vh";
                if (number == 2048) {
                    TwoZeroFourEight.vanishNumbers(ele);
                }
            }
            else {
                document.getElementById(ele).style.fontSize = "4vw";
            }

            break;
        }
    }

    TwoZeroFourEight.exitCriteria();
}


TwoZeroFourEight.vanishNumbers = function (ele) {
    var i = 0, currDiv;
    currDiv = parseInt(document.getElementById(ele).getAttribute("number"));
    // TwoZeroFourEight.vanishArr.push(0);
    console.log(TwoZeroFourEight.vanishArr);
    TwoZeroFourEight.vanishTimer = setInterval(function () {
        if (i >= TwoZeroFourEight.vanishArr.length) {
            clearInterval(TwoZeroFourEight.vanishTimer);
            document.getElementById(ele).innerHTML = "";
            document.getElementById(ele).style.backgroundColor = "#5a595a";
            $("#" + ele).droppable("enable");
        }
        else {
            document.getElementById("gridDiv" + (currDiv + TwoZeroFourEight.vanishArr[i])).innerHTML = "";
            document.getElementById("gridDiv" + (currDiv + TwoZeroFourEight.vanishArr[i])).style.backgroundColor = "#5a595a";
            $("#gridDiv" + (currDiv + TwoZeroFourEight.vanishArr[i])).droppable("enable");
            i++;
        }
    }, 100);
    //     for (i = 0; i < TwoZeroFourEight.vanishArr.length; i++) {

    //     }
}

TwoZeroFourEight.storeNumbers = function () {
    var i;
    TwoZeroFourEight.refArr = [];
    TwoZeroFourEight.refArr = TwoZeroFourEight.storeArr.slice(0);
    TwoZeroFourEight.storeArr = [];
    for (i = 1; i <= 16; i++) {
        TwoZeroFourEight.storeArr.push(
            document.getElementById("gridDiv" + i).innerHTML
        );
    }
    console.log(TwoZeroFourEight.refArr);
    console.log(TwoZeroFourEight.storeArr);
};

TwoZeroFourEight.undo = function () {
    var i;
    for (i = 1; i <= 16; i++) {
        document.getElementById("gridDiv" + i).innerHTML =
            TwoZeroFourEight.refArr[i - 1];
        TwoZeroFourEight.storeArr = TwoZeroFourEight.refArr.slice(0);
        TwoZeroFourEight.giveColors();
    }
};

TwoZeroFourEight.giveColors = function () {
    var i,
        num,
        ctr = 0;
    for (i = 1; i <= 16; i++) {
        num = document.getElementById("gridDiv" + i).innerHTML;
        if (parseInt(num) <= 4)
            document.getElementById("gridDiv" + i).style.color = "#696868";
        else document.getElementById("gridDiv" + i).style.color = "white";
        if (num == "")
            document.getElementById("gridDiv" + i).style.backgroundColor =
                TwoZeroFourEight.colorArr[0];
        else {
            if (parseInt(num) >= 1024)
                document.getElementById("gridDiv" + i).style.fontSize = "3vw";
            else
                document.getElementById("gridDiv" + i).style.fontSize = "4vw";
            ctr = 1;
            while (parseInt(num / 2) != 1) {
                num = parseInt(num / 2);
                ctr++;
            }
            document.getElementById("gridDiv" + i).style.backgroundColor =
                TwoZeroFourEight.colorArr[ctr];
        }
    }
};

TwoZeroFourEight.reload = function () {
    $(".numbers").empty();
    TwoZeroFourEight.score = 0;
    document.getElementById("currScore").innerHTML = TwoZeroFourEight.score;
    TwoZeroFourEight.loadFlag = true;
    TwoZeroFourEight.placeNum();
};

TwoZeroFourEight.exitCriteria = function () {
    var i;
    setTimeout(function () {
        $(".numbers").removeClass("zoomIn");
    }, 500);

    TwoZeroFourEight.emptyFlag = false;
    for (i = 1; i <= 16; i++) {
        if (document.getElementById("gridDiv" + i).innerHTML == "") {
            TwoZeroFourEight.emptyFlag = true;
            break;
        }
    }
    if (TwoZeroFourEight.emptyFlag == false) {
        document.getElementById("delete").style.pointerEvents = "none";
        setTimeout(function () {
            alert("Game Over");
        }, 500);
    }
};

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

TwoZeroFourEight.GenerateNum = function () {
    var num;
    num = parseInt(document.getElementById("deletePara").innerHTML);
    if (num > 0) {
        document.getElementById("deletePara").innerHTML = (num - 1);
        TwoZeroFourEight.placeNum();
    }
}