$(document).ready(function () {
    initGetSdgGameJson();
    cardShuffle();
    initSdgGameNextStep();
    initTeachSwiper();
    initReverseCard();
    initCheckAnswer();
    initSdgHelp();
    initSdgShare();
    setRankingCleanSize();
});
$(window).resize(function () {
    setRankingCleanSize();
});
var sdgGameJson,
    totalScore = 0,
    selectedSdg,
    selectedLevel;
var  basicPath = "/asset/";
function initGetSdgGameJson() {
    $.getJSON(basicPath + "json/sdg-game-question.json", function (result) {
        sdgGameJson = result;
    });
}
function cardShuffle() {
    var sdgList = [],
        sdgGenList = [];
    // random set 6 sdg
    while (sdgList.length < 6) {
        var thisNumber = Math.floor(Math.random() * 17 + 1);
        if (sdgList.indexOf(thisNumber) == -1) {
            sdgList.push(thisNumber);
        }
    }
    // random the card index
    while (sdgList.length > 0) {
        var thisNumber = Math.floor(Math.random() * sdgList.length),
            needSplice = false;
        if (sdgGenList.indexOf(sdgList[thisNumber]) != -1) {
            needSplice = true;
        }
        sdgGenList.push(sdgList[thisNumber]);
        if (needSplice) {
            sdgList.splice(thisNumber, 1);
        }
    }
    var cardLabel = "reverse the card";
    var cardTemplate =
        '<button class="sdg-game__card" aria-label="' +
        cardLabel +
        '" data-sdg="{{sdg-number}}">';
    cardTemplate += '<div class="sdg-game__card-cover"></div>';
    cardTemplate +=
        '<div class="sdg-game__card-img" style="background-image: url(' + basicPath + 'images/education-knowledge/sdg-game/sdg-{{sdg-number}}.svg);"></div>';
    cardTemplate += "</button>";
    var cardHtml = "";
    $.each(sdgGenList, function (index, value) {
        cardHtml += cardTemplate.replaceAll("{{sdg-number}}", value);
    });
    cardHtml += '<div class="sdg-game__complete-card-holder"></div>';
    $(".sdg-game__card-container").html(cardHtml);
}
function initSdgGameNextStep() {
    $(".sdg-game__to-teaching-btn").click(function (e) {
        e.preventDefault();
        $(".sdg-game").css("min-height", $(".sdg-game").height());
        $(".sdg-game__landing").fadeOut(300);
        setTimeout(function () {
            $(".sdg-game__game").fadeIn(300);
            teachSwiper.update();
            setRankingCleanSize();
        }, 300);
        $(".sdg-game").css("min-height", "");
    });
    // Start Game
    $(".sdg-game__start-btn").click(function (e) {
        e.preventDefault();
        $(".sdg-game__teach").fadeOut(300);
        sdgGameCountdown();
    });
    // to Help section
    $(".sdg-game__popup-continue").click(function (e) {
        e.preventDefault();
        $(".sdg-game").css("min-height", $(".sdg-game").height());
        $(".sdg-game__game").fadeOut(300);
        if ($(window).width() <= 768) {
            $("html, body").animate({
                scrollTop:
                    $(".sdg-game").offset().top - $(".header").outerHeight(),
            });
        }
        setTimeout(function () {
            $(".sdg-game__help").fadeIn(300);
            $(".sdg-game").css("min-height", "");
            setRankingCleanSize();
        }, 300);
    });
    // Restart Game
    $(".sdg-game__popup-restart").click(function (e) {
        e.preventDefault();
        resetGame();
    });
    // compare card
    $(".sdg-game__card-compare").click(function () {
        $(".sdg-game__card-compare").fadeOut(500);
        showQuestion(selectedCard);
    });
}
function resetGame() {
    $(".sdg-game").css("min-height", $(".sdg-game").height());
    $(".sdg-game__game").fadeOut(300);
    canReverse = true;
    totalScore = 0;
    setTimeout(function () {
        $(".sdg-game__game-time").text("15:00");
        $(".sdg-game__game-timeline-process").css("width", "100%");
        $(".sdg-game__teach, .sdg-game__card-container").show();
        $(
            ".sdg-game__popup, .sdg-game__question, .sdg-game__card-compare"
        ).hide();
        $(".sdg-game__game-ranking-img-clean").css("width", "0%");
        sdgGameResetCountdown();
        cardShuffle();
        $(".sdg-game__landing:not(.sdg-game__thank)").fadeIn(300);
        $(".sdg-game").css("min-height", "");
    }, 300);
}
var sdgGameCountdownTimeout,
    sdgGameCountdownTimeBasic = 15 * 60 * 1000,
    sdgGameCountdownTime = sdgGameCountdownTimeBasic;
function sdgGameCountdown() {
    sdgGameCountdownTimeout = setInterval(function () {
        if (sdgGameCountdownTime > 0) {
            sdgGameCountdownTime -= 1000;
            var date = new Date(sdgGameCountdownTime),
                minutesText = date.getMinutes(),
                secondText = date.getSeconds();
            if (minutesText < 10) {
                minutesText = "0" + minutesText;
            }
            if (secondText < 10) {
                secondText = "0" + secondText;
            }
            var timeText = minutesText + ":" + secondText,
                processBarWidth =
                    (sdgGameCountdownTime / sdgGameCountdownTimeBasic) * 100 +
                    "%";
            $(".sdg-game__game-time").text(timeText);
            $(".sdg-game__game-timeline-process").css("width", processBarWidth);
        } else {
            clearInterval(sdgGameCountdownTimeout);
            canReverse = false;
            $(".sdg-game__popup-textarea").hide();
            $(".sdg-game__popup-timeup").show();
            $(".sdg-game__popup").fadeIn(300);
        }
    }, 1000);
}
function sdgGameResetCountdown() {
    sdgGameCountdownTimeout, (sdgGameCountdownTimeBasic = 15 * 60 * 1000);
    sdgGameCountdownTime = sdgGameCountdownTimeBasic;
}
var teachSwiper;
function initTeachSwiper() {
    teachSwiper = new Swiper(".sdg-game__teach-item-container", {
        slidesPerView: 4,
        spaceBetween: 20,
        pagination: {
            el: ".sdg-game__teach-pagination",
            clickable: true,
        },
        breakpoints: {
            1279: {
                slidesPerView: 3,
                slidesPerGroup: 3,
                spaceBetween: 24,
            },
            991: {
                slidesPerView: 2,
                slidesPerGroup: 2,
                spaceBetween: 24,
            },
            767: {
                slidesPerView: 1,
                slidesPerGroup: 1,
                spaceBetween: 24,
            },
        },
    });
}
var sdgGameReverseCardTimeout;
var canReverse = true;
function initReverseCard() {
    $(".sdg-game__card-container").on("click", ".sdg-game__card", function (e) {
        e.preventDefault();
        if (
            $(this).is(".active") ||
            $(this).is(".complete") ||
            $(".sdg-game__card.active").length >= 2 ||
            !canReverse
        ) {
            return false;
        }
        clearTimeout(sdgGameReverseCardTimeout);
        if ($(".sdg-game__card.active").length < 2) {
            $(this).addClass("active");
            var delay = 5000;
            if ($(".sdg-game__card.active").length == 2) {
                delay = 2500;
            }
            sdgGameReverseCardTimeout = setTimeout(function () {
                $(".sdg-game__card").removeClass("active");
            }, delay);
        }
        if ($(".sdg-game__card.active").length == 2) {
            compareCard();
        }
    });
}
var selectedCard;
function compareCard() {
    var card1 = $(".sdg-game__card.active").eq(0).attr("data-sdg"),
        card2 = $(".sdg-game__card.active").eq(1).attr("data-sdg");
    if (card1 == card2) {
        canReverse = false;
        selectedCard = card1;
        clearTimeout(sdgGameReverseCardTimeout);
        $(".sdg-game__card.active").addClass("complete").removeClass("active");
        $(".sdg-game__card-compare-img").css(
            "background-image",
            "url(" + basicPath + "images/education-knowledge/sdg-game/sdg-" +
                card1 +
                ".svg)"
        );
        var sdgJsonNo = parseInt(card1) - 1;
        $(".sdg-game__card-compare-desc").css(
            "background-color",
            sdgGameJson[sdgJsonNo]["color"]
        );
        $(".sdg-game__card-compare-desc p").html(
            sdgGameJson[sdgJsonNo]["desc"][lang]
        );
        setTimeout(function () {
            $(".sdg-game__card-compare").fadeIn(500);
        }, 1000);
        /* setTimeout(function () {
            $(".sdg-game__card-compare").fadeOut(500);
            showQuestion(card1);
        }, 3000); */
    }
}
var questionNo,
    questionDetail,
    totalAnswer = 0,
    correctAnswer = 0;
function showQuestion(sdgNo) {
    var sdgJsonNo = parseInt(sdgNo) - 1,
        optionHtml = "";
    correctAnswer = 0;
    questionNo = Math.floor(
        Math.random() * sdgGameJson[sdgJsonNo]["question"].length
    );
    questionDetail = sdgGameJson[sdgJsonNo]["question"][questionNo];
    $(".sdg-game__question-title").text(questionDetail["title"][lang]);
    if (questionDetail["muti"] == true) {
        $(".sdg-game__question-multiple-text").show();
    } else {
        $(".sdg-game__question-multiple-text").hide();
    }
    $.each(questionDetail["option"][lang], function (index, value) {
        thisIndex = index + 1
        optionHtml +=
            '<button class="sdg-game__question-option" data-answer="' +
            thisIndex +
            '">' +
            value +
            "</button>";
    });
    $(".sdg-game__question-option-container").html(optionHtml);
    totalAnswer = questionDetail["anwser"].length;
    $(".sdg-game__game-left").css(
        "min-height",
        $(".sdg-game__game-left").height()
    );
    $(".sdg-game__card-container").fadeOut(500);
    $(".sdg-game__question-img").css(
        "background-image",
        "url(" + basicPath + "images/education-knowledge/sdg-game/sdg-" + sdgNo + ".svg)"
    );
    setTimeout(function () {
        $(".sdg-game__question").fadeIn(500);
        $(".sdg-game__game-left").css("min-height", "");
        $(".sdg-game__complete-card-holder").append(
            '<span class="sdg-game__complete-card" style="background-image:url(' + basicPath + 'images/education-knowledge/sdg-game/sdg-' +
                sdgNo +
                '.svg);"></span>'
        );
    }, 500);
}
function initCheckAnswer() {
    $(".sdg-game__question-option-container").on(
        "click",
        ".sdg-game__question-option",
        function (e) {
            e.preventDefault();
            if ($(this).is(".correct") || $(this).is(".wrong")) {
                return false;
            }
            var thisOption = $(this),
                thisAnswer = parseInt($(this).attr("data-answer")),
                isCorrect = false;
            $.each(questionDetail["anwser"], function (index, value) {
                if (thisAnswer == value) {
                    thisOption.addClass("correct");
                    correctAnswer++;
                    isCorrect = true;
                }
                if (correctAnswer == totalAnswer) {
                    $(".sdg-game__game-ranking-plus").addClass("active");
                    setTimeout(function () {
                        $(".sdg-game__game-ranking-plus").removeClass("active");
                    }, 1500);
                    totalScore += 20;
                    var completeCount =
                        $(".sdg-game__card.complete").length / 2;
                    $(".sdg-game__game-ranking-img-clean").css(
                        "width",
                        (completeCount / 6) * 100 + "%"
                    );
                    if (completeCount == 6) {
                        // complete all card
                        clearInterval(sdgGameCountdownTimeout);
                        $(".sdg-game__popup-textarea").hide();
                        $(".sdg-game__popup-finish").show();
                        $(".sdg-game__popup").fadeIn(300);
                    } else {
                        $(".sdg-game__game-left").css(
                            "min-height",
                            $(".sdg-game__game-left").height()
                        );
                        $(".sdg-game__question").fadeOut(500);
                        canReverse = true;
                        setTimeout(function () {
                            $(".sdg-game__card-container").fadeIn(500);
                            $(".sdg-game__game-left").css("min-height", "");
                        }, 500);
                    }
                }
            });
            if (!isCorrect) {
                thisOption.addClass("wrong");
                setTimeout(function () {
                    thisOption.removeClass("wrong");
                }, 2000);
            }
        }
    );
}
function initSdgHelp() {
    $(".sdg-game__help-btn").click(function (e) {
        e.preventDefault();
        if ($(this).is(".active")) {
            return false;
        }
        $(".sdg-game__help-btn").removeClass("active");
        $(this).addClass("active");
        $(".sdg-game__help-next-btn").removeClass("disabled");
    });
    $(".sdg-game__help-next-btn").click(function (e) {
        e.preventDefault();
        selectedSdg = $(".sdg-game__help-btn.active").attr("data-sdg")
        var imgUrl = $(".sdg-game__help-btn.active .sdg-game__help-img-2").attr(
                "src"
            ),
            imgAlt = $(".sdg-game__help-btn.active .sdg-game__help-img-2").attr(
                "alt"
            );
        $(".sdg-game__thank-sdg-img").attr("src", imgUrl).attr("alt", imgAlt);
        $(".sdg-game").css("min-height", $(".sdg-game").height());
        $(".sdg-game__help").fadeOut(300);
        if ($(window).width() <= 768) {
            $("html, body").animate({
                scrollTop:
                    $(".sdg-game").offset().top - $(".header").outerHeight(),
            });
        }
        setTimeout(function () {
            $(".sdg-game__level").fadeIn(300);
            $(".sdg-game").css("min-height", "");
            setRankingCleanSize();
        }, 300);
    });
    //Level
    $(".sdg-game__level-btn").click(function (e) {
        e.preventDefault();
        if ($(this).is(".active")) {
            return false;
        }
        var level = $(this).attr("data-level")
        selectedLevel = level
        $(".sdg-game__level-btn").removeClass("active");
        $(this).addClass("active");
        $(".sdg-game__level-next-btn").removeClass("disabled");
        $(".sdg-game__level-content").fadeOut(300)
        setTimeout(function(){
            $(".sdg-game__level-content[data-level=" + level + "]").fadeIn(300)
        }, 300)
        $(".sdg-game__thank-level-title").text($(".sdg-game__level-content[data-level=" + level + "] .sdg-game__level-btn-title").text());
    });
    $(".sdg-game__level-next-btn").click(function (e) {
        e.preventDefault();
        $(".sdg-game").css("min-height", $(".sdg-game").height());
        $(".sdg-game__level").fadeOut(300);
        if ($(window).width() <= 768) {
            $("html, body").animate({
                scrollTop:
                    $(".sdg-game").offset().top - $(".header").outerHeight(),
            });
        }
        setTimeout(function () {
            $(".sdg-game__thank").fadeIn(300);
            $(".sdg-game").css("min-height", "");
        }, 300);
    });
}
function initSdgShare() {
    $(".sdg-game__share-btn").click(function (e) {
        e.preventDefault();
        var pageShareTitle = $("title").text();
        var pageShareContent = window.location.href;
        var href = "";
        var type = "default";
        var pageUrl = window.location.href.split('?')[0]
        if ($(this).is(".facebook")) {
            type = "facebook";
            href = "https://www.facebook.com/sharer/sharer.php?u=" + pageUrl + "%3Fsdg%3D" + selectedSdg + "%26level%3D" + selectedLevel + "%26score%3D" + totalScore;
        } else if ($(this).is(".email")) {
            type = "email";
            href =
                "mailto:?subject=" +
                pageShareTitle +
                "&body=" +
                pageShareTitle +
                "%0A" +
                pageUrl + "%3Fsdg%3D" + selectedSdg + "%26level%3D" + selectedLevel + "%26score%3D" + totalScore;
        } else if ($(this).is(".twitter")) {
            type = "twitter";
            href =
                "http://twitter.com/share?text=" +
                pageShareTitle +
                ": " +
                "&url=" +
                pageUrl;
        }
        PopupCenter(href, "shareWindow_" + $windowCount, 600, 500, type);
        $windowCount++;
    });
}
function setRankingCleanSize() {
    $(".sdg-game__game-ranking-img-clean").each(function () {
        var size = $(this).prev("img").width();
        $(this).css("background-size", size);
    });
}