var gameJackMob = '';
var hvrJackpotMob = '';
var allowClick = true
var imgSortIndex = 0;

let pvInitialPos = 0;
let pvFinalpos = 0;
let pvCont = '';
let pvCover = '';
let pvOverlayDimm = '';
let pvScrollContainer = '';
let pvStartTime = '';
let pvMoveTime = '';
let allowPvScrolling = false;
let hasPvCoverScroll = false;
let pvMoved = 0;
let pvWinHeight = window.innerHeight;
let pvScrollPosition = 0;

var GamesCommon = GamesCommon || (function () {
    return {
        init: function (args) {
            $.extend(this, args);
        }
    }
}());

function GetGamesByGroup(append, gamesByGroupData) {
    $.ajax({
        type: "POST",
        data: gamesByGroupData,
        url: "/DynamicLobbyHelper/GetGamesByGroup",
        success: function (result) {
            var GroupId = result.GroupId;
            var cont = document.getElementById('js_lobby_group_' + GroupId);
            let previewType = cont.dataset.previewType;
            let lobbyUrl = cont.dataset.lobbyurl;
            cont.dataset.hasNext = result.HasNext;
            drawGames('js_lobby_group_' + result.GroupId, result.GamesOutput, append, '', lobbyUrl, previewType);
            if (result.GamesOutput.length < 3 && cont.dataset.page == 0) {
                $(cont).removeClass('scrolled-container-r2').addClass('scrolled-container-r1');
            }
            if (result.GamesOutput.length == 0) {
                $(cont).parents('.js_lobby_groups_cont').addClass('hidden');
            } else {
                $(cont).parents('.js_lobby_groups_cont').removeClass('hidden');
            }
            if (cont && cont.parentNode) {
                cont.parentNode.removeEventListener('scroll', loadGamesByGroupOnScroll);
                cont.parentNode.addEventListener('scroll', loadGamesByGroupOnScroll);
            }
        }
    });
}

function getLandingWidgetGames(widgetGamesData, append) {
    $.ajax({
        type: "POST",
        data: widgetGamesData,
        url: "/DynamicLobbyHelper/GetGamesByGroup",
        success: function (result) {
            let curWidgetInfo = widgetGamesData;
            let gridCont = document.getElementById('js_lg_ws_' + curWidgetInfo.WidgetId);
            document.querySelector('.js_lg_w_names.active[data-widget-id="' + curWidgetInfo.WidgetId + '"]').dataset.hasNext = result.HasNext;

            drawMinInfoGames(gridCont, result.GamesOutput, curWidgetInfo.LobbyUrl, append);

            if (gridCont && gridCont.parentNode) {
                gridCont.parentNode.removeEventListener('scroll', loadLgWgGamesOnScroll);
                gridCont.parentNode.addEventListener('scroll', loadLgWgGamesOnScroll);
            }
        }
    });
}

function drawMinInfoGames(gridCont, games, lobbyUrl, append) {
    const gamesLength = games.length;
    let html = '';
    for (let i = 0; i < gamesLength; i++) {
        html += createMinInfoGameCard(games[i], lobbyUrl);
    }
    if (append) {
        $(gridCont).append(dlAnimate(html));
    } else {
        gridCont.parentNode.scrollLeft = 0;
        $(gridCont).html(dlAnimate(html));
    }
}

function createMinInfoGameCard(game, lobbyUrl) {
    
    let html = '';
    let langHtml = '';
    let gameUrl = lobbyUrl != 'undefined' && lobbyUrl != '' ? `${game.URL}-${lobbyUrl}` : game.URL;
    let cdn = game.UseRmCdn ? GamesCommon.RmCdnUrl : GamesCommon.cdnUrl;
    for (var l = 0; l < game.LanguageIds.length; l++) {
        langHtml += `<div class="lca-card-flag ${game.LanguageIds[l].toLowerCase()}"style="background-image: url(${GamesCommon.cdnUrl}Img/sprites/flags_sprite.png)"></div>`;
        if (l == 2) {
            break;
        }
    }
    html = `<div class="lca-card lca-card--v1 js_dl_games_cont" data-order-id="${game.Order}" data-game-id="${game.Id}" ><div class="lca-card-body"><img class="w-100 lca-card-img animated" src="${cdn + game.Image}" alt="" loading="lazy">` +
        `   <div class="lb_card_topitems absolute flex_center_between">
            <div class="lca-card-flag-wrapper animate">${langHtml}</div>`;
    if (game.Badges) {
        html += game.Badges;
    }
    html += `</div>`;
    if (game.ContributionPercent != undefined) {
        html += '<div class="icon contribution_icon"><i class="dynamic_icon"></i><p>' + game.ContributionPercent + '%</p></div>';
    }
    html += '</div>';
    if ((game.MinMaxLimits[0] != '0' && game.MinMaxLimits[1] != '0') || game.MinMaxLimits[2] != '0') {
        html += `<div class="lca-card-footer d-flex">`;
        if (game.MinMaxLimits[2] > '0') {
            html += `<div class="lca-card-maxwin-wrapper animate"><div class="lca-card-maxwin"><span>${game.MinMaxLimits[2]}</span></div></div>`;
        }
        if (game.MinMaxLimits[0] != '0' && game.MinMaxLimits[1] != '0') {
            html += `<div class="lca-card-price text-right mwAuto"><div class="d-flex gx-1 align-items-center justify-content-end"><span class="lca-limit-count no-rtl-needed">${game.MinMaxLimits[0]}-${game.MinMaxLimits[1]}</span> ${GamesCommon.currencyCode}</div></div>`;
        }
        html += `</div>`;
    }
    html += `<div class="lca-card-hover animate"><div class="lca-card-hover-header"><div class="lca-card-name">${game.Description}</div></div>` +
        `<div class="lca-card-btn-wrapper d-flex align-items-center justify-content-center "><a class="h-bg-primary game__link_real js_dl_play"`;
    html += `data-href="/play/real/${gameUrl}"><span class="dynamic_icon">&#58160</span><span class="lca-card-play-text">${GamesCommon.trns.Play}</span></a>`;
    if (game.HasDemo) {
        html += `<a class="h-bg-secondary game__link_demo" href="/${GamesCommon.language}/play/fun/${gameUrl}">${GamesCommon.trns.Demo}</a>`;
    }
    html += `</div></div></div>`;
    return html;
}

function drawGames(contId, games, append, gridType, lobbyUrl, previewType) {
    let html = '';
    if (games.length > 0) {
        if (GamesCommon.gameCardType == 4) {
            for (var i = 0; i < games.length; i++) {
                html += drawGamesWrapper(games[i], gridType, previewType, lobbyUrl);
                if (previewType == '0' || previewType == '1') {
                    html += drawGamesCardFooterSpec(games[i]);
                }
                html += "</div></div>";
            }
        } else {
            html += createGamesHtmlV1(games, gridType, lobbyUrl, previewType);
        }
    } else {
        if (gamesData.SearchText != '') {
            html += '<div class="lca-filter-no-result lobbyFilter_empty"><span class="ic_search"></span><p class="">' + GamesCommon.trns.NoSearchResults + ' "' + gamesData.SearchText + '"</p></div>';
        } else if (gamesData.GroupTypeId == GamesCommon.favoriteGroupType) {
            html += '<div class="casino_nav_fav_game_not_found lobbyFilter_empty"><img src="' + GamesCommon.cdnUrl + 'Img/icons/redesign/favorite_big_star.svg"/><p>' + GamesCommon.trns.YouHaveNoFavoriteGames + '</p><span>' + GamesCommon.trns.ToAddFavGames + '</span></div>';
        } else if (gamesData.GroupTypeId == GamesCommon.lastPlayedGroupType) {
            html += '<div class="casino_nav_fav_game_not_found lobbyFilter_empty"><p class="last-played-icon dynamic_icon">&#57944</p><span>' + GamesCommon.trns.YouHaveNoLastPlayedGames + '</span></div>';
        } else {
            html += '<div class="lca-no-game lobbyFilter_empty"><span class="ic_no-game"></span><p class="">' + GamesCommon.trns.NoSuchGameFound + '</p></div>';
        }

    }
    if (append) {
        $('#' + contId).append(dlAnimate(html));
    } else {
        $('#' + contId).html(dlAnimate(html));
    }
}

function createGamesHtmlV1(games, gridType, lobbyUrl, prwType) {
    let html = '';
    const length = games.length;
    for (let i = 0; i < length; i++) {
        let imgUrl = games[i].Image;
        let cdn = games[i].UseRmCdn ? GamesCommon.RmCdnUrl : GamesCommon.cdnUrl;
        let gridClass = '';
        let badgesData = games[i].Badges;
        if (gridType == 2 || gridType == 4) {
            imgSortIndex++;
            imgType = getImgType(gridType);
            if (imgType == 'vertical') {
                gridClass = 'lb_card_v';
                imgUrl = games[i].VerticalImage;
            } else if (imgType == 'horizontal') {
                gridClass += 'lb_card_h';
                imgUrl = games[i].HorizontalImage;
            }
        }

        html += `<div class="lb_card relative ${gridClass} js_dl_games"  data-order-id="${games[i].Order}"    data-game-id="${games[i].Id}" data-href="${games[i].URL}-${lobbyUrl}" ` +
            `data-preview-type="${prwType}"><div class="lb_card_body"><img class="lb_card_img" src="${cdn + imgUrl}" alt="${games[i].Description}" loading="lazy"/></div>` +
            `<div class="lb_card_topitems absolute flex_center_between"> ${badgesData} ${createMaxWin(games[i])} ${createLanguages(games[i])}</div>`;

        if (prwType != '2') {
            html += createCardFooter(games[i]);
        }
        html += `</div></div></div>`;
    }
    return html;
}

function createRecommendedGamesHtml(games) {
    let html = '';
    const length = games.length;
    for (let i = 0; i < length; i++) {
        let imgUrl = games[i].Image;
        let cdn = games[i].UseRmCdn ? GamesCommon.RmCdnUrl : GamesCommon.cdnUrl;
        html += `<div class="lb_card relative js_dl_games" ` +
            `data-game-id="${games[i].Id}" ` +
            `data-description="${games[i].Description}" ` +
            `data-has-demo="${games[i].HasDemo}" ` +
            `data-has-jackpot="${games[i].HasJackpot}" ` +
            `data-image="${games[i].Image}" ` +
            `data-likes-count="${games[i].LikesCount}" ` +
            `data-is-favorite="${games[i].IsFavorite}" ` +
            `data-is-liked="${games[i].IsLiked}" ` +
            `data-url="${games[i].URL}" ` +
            `data-use-rm-cdn="${games[i].UseRmCdn}" ` +
            `data-cat-name="${games[i].CatName}" ` +
            `data-collect-data-from-game="true"><div class="lb_card_body"><img class="lb_card_img" src="${cdn + imgUrl}" alt="${games[i].Description}" loading="lazy"/></div>` +
            `<div class="lb_card_topitems absolute flex_center_between"></div>`;

        if (GamesCommon.lobbyPreviewType != '2') {
            html += `<div class="lb_card_footer flex_center_between"> <p class="lb_card_name">${games[i].Description}</p></div>`;
        }
        html += `</div>`;
    }
    return html;
}

function drawGamesWrapper(game, gridType, previewType, lobbyUrl) {
    let langHtml = '';
    for (let l = 0; l < game.LanguageIds.length; l++) {
        langHtml += '<span class="lca-card-flag ' + game.LanguageIds[l].toLowerCase() + '" style="background-image: url(' + GamesCommon.cdnUrl + 'Img/sprites/flags_sprite.png)"></span>';
    }
    let imgType = ''
    let html = '';
    let gridClass = 'lca-card-wrapper-50';
    let cdn = game.UseRmCdn ? GamesCommon.RmCdnUrl : GamesCommon.cdnUrl;
    let imgUrl = game.Image;

    if (gridType == 2 || gridType == 4) {
        imgSortIndex++;
        imgType = getImgType(gridType);
        if (imgType == 'vertical') {
            gridClass = 'lca-card-wrapper-50 lca-card-wrapper-hx2';
            imgUrl = game.VerticalImage;
        } else if (imgType == 'horizontal') {
            gridClass = 'lca-card-wrapper-100';
            imgUrl = game.HorizontalImage;
        }
    }
    html += '<div class="lca-card-wrapper ' + gridClass + '">' +
        '<div data-href="' + game.URL + '-' + lobbyUrl + '" class="js_dl_games js_game_info lca-card" ' +
        ' data-name ="' + game.Description + '"' +
        ' data-catname ="' + game.CatName + '"' +
        ' data-preview-type ="' + previewType + '"' +
        ' data-game-id ="' + game.Id + '"' +
        ' data-hasdemo ="' + game.HasDemo + '"' +
        ' data-hasjackpot ="' + game.HasJackpot + '"' +
        ' data-usermcdn ="' + game.UseRmCdn + '"' +
        ' data-bimage ="' + game.BackgroundImage + '"';
    if (previewType == '2') {
        html += ' data-isLiked ="' + game.IsLiked + '"' +
            ' data-isFavorite ="' + game.IsFavorite + '"' +
            ' data-likesCount ="' + game.LikesCount + '"' +
            ' data-minMaxLimits ="' + game.MinMaxLimits[0] + '-' + game.MinMaxLimits[1] + '-' + game.MinMaxLimits[2] + '"';
    }
    html += ' data-image ="' + game.Image + '"><div class="lca-card-body-wrapper"><img class="lca-card-body-img" src="' + cdn + imgUrl + '" alt="' + game.Description + '" loading="lazy">' +
        '<div class="lca-card-body"><div class="lca-card-header d-flex">';
    if ((previewType == '0' || previewType == '1') && GamesCommon.gameCardType != 4) {
        html += '<p class="m-0 flex-grow-1 no-rtl-needed">' + game.Description + '</p>';
    }

    html += '<div class="lca-card-flag-wrapper">' + langHtml + '</div></div> <div class="lca-card-badge-wrapper">' + game.Badges + '</div></div></div>';

    return html;
}

function drawGamesCardFooterSpec(game) {
    let favClass = '';
    let likeClass = '';
    if (game.IsFavorite) {
        favClass = 'active';
    }
    if (game.IsLiked) {
        likeClass = 'active';
    }
    let html = '<div class="lca-card-footer">';

    if (game.Description != undefined) {
        html += '<p class="lca-card-name m-0 flex-grow-1 no-rtl-needed">' + game.Description + '</p>';
    }


    if (game.MinMaxLimits[0] == '0' && game.MinMaxLimits[1] == '0') {
        html += '<div class="lca-card-price-wrapper"><div class="lca-card-price flex-grow-1"></div>';
    } else {
        html += '<div class="lca-card-price-wrapper"><div class="lca-card-price flex-grow-1"><span class="lca-limit-count no-rtl-needed">' + game.MinMaxLimits[0] + ' - ' + game.MinMaxLimits[1] + '</span> ' + GamesCommon.currencyCode + '</div>';
    }

    if (game.MinMaxLimits[2] > '0') {
        html += '<div class="lca-card-price flex-grow-1 lca-card-maxwin"><span>' + game.MinMaxLimits[2] + '</span></div></div>';
    } else {
        html += '</div>';
    }
    html += '<div class="lca-card-footer-btns d-flex align-items-center justify-content-between">' +
        '<div class="lca-card-likes lca-card-footer-btn d-flex align-items-center js_game_like js_game_like_icon ' + likeClass + '">' +
        '<span class="like_icon"></span>' +
        '<span class="js_game_likes_count">' + game.LikesCount + '</span></div>' +
        '<div class="lca-card-footer-btn lca-card-fav d-flex align-items-center justify-content-center js_game_fav js_game_fav_icon ' + favClass + '"><span class="star_icon"></span></div></div></div>';

    return html;
}

function loadGamesByGroupOnScroll() {
    var childNode = this.firstElementChild;
    if ((this.scrollWidth - this.scrollLeft - 200 <= this.clientWidth) && childNode.classList.contains('js_lobby_groups_widget')) {
        let hasNext = childNode.dataset.hasNext;
        if (hasNext == 'true') {
            childNode.dataset.hasNext = false;
            var data = {
                GroupId: childNode.dataset.id,
                GroupTypeId: childNode.dataset.typeId,
                TakeCount: childNode.dataset.takeCount,
                Page: Number(childNode.dataset.page) + 1,
                LobbyUrl: childNode.dataset.lobbyurl,
                Lang: document.documentElement.lang,
                Device: document.documentElement.dataset.type.toLowerCase(),
                Currency: GamesCommon.currencyCode
            }
            childNode.dataset.page = data.Page;
            GetGamesByGroup(true, data);
        }
    }
}

function loadLgWgGamesOnScroll() {

    let childNode = this.firstElementChild;
    let wtId = childNode.dataset.wtId;
    let heading = document.querySelector('.js_lg_w_names.active[data-widget-id="' + wtId + '"]');
    if ((this.scrollWidth - this.scrollLeft - 200 <= this.clientWidth)) {
        let hasNext = heading.dataset.hasNext;
        if (hasNext == 'true') {
            heading.dataset.hasNext = false;
            var data = {
                GroupId: heading.dataset.id,
                GroupTypeId: heading.dataset.typeId,
                WidgetId: heading.dataset.widgetId,
                TakeCount: heading.dataset.takeCount,
                Page: Number(heading.dataset.page) + 1,
                LobbyUrl: heading.dataset.lobbyurl,
                Lang: document.documentElement.lang,
                Device: document.documentElement.dataset.type.toLowerCase(),
                Currency: GamesCommon.currencyCode
            }
            heading.dataset.page = data.Page;
            getLandingWidgetGames(data, true);
        }
    }
}

function getImgType(gridType) {
    return gridType == 2 ? gridArrangeWithMosaic1() : gridArrangeWithMosaic2();
}

function gridArrangeWithMosaic1() {
    if (imgSortIndex % 5 == 0 && imgSortIndex % 10 != 0) {
        return 'vertical';
    } else if (imgSortIndex % 10 == 0) {
        return 'horizontal';
    }
}

function gridArrangeWithMosaic2() {
    if (imgSortIndex == 6 || imgSortIndex == 16) {
        if (imgSortIndex == 16) {
            imgSortIndex = 0;
        }
        return 'vertical';
    } else if (imgSortIndex == 1 || imgSortIndex == 11) {
        return 'horizontal';
    }
}

function CreateBadges(badgeTypeId) {
    let badges = '';

    for (var b = 0; b < badgeTypeId.length; b++) {
        switch (badgeTypeId[b]) {
            case 1:
                badges += '<span class="lca-card-badge type-1">Top</span>';
                break;
            case 2:
                badges += '<span class="lca-card-badge type-2">HOT</span>';
                break;
            case 3:
                badges += '<span class="lca-card-badge type-3">JackPot</span>';
                break;
            case 4:
                badges += '<span class="lca-card-badge type-4">New</span>';
                break;
            case 5:
                badges += '<span class="lca-card-badge type-5">Soon</span>';
                break;
            case 6:
                badges += '<span class="lca-card-badge type-6">Premium</span>';
                break;
        }
    }
    return badges;
}

function prepareGamePreview(data) {
    var html = '<div class="lca-game-preview game__more_block js_game_info" id="js_game_preview_block" data-href="' + data.Url + '" data-game-id="' + data.GameId + '">' +
        '<img class="game__more_block___backgr_img" src="' + data.bImage + '" loading="lazy" alt="' + data.Name + '">' +
        '<div class="lca-game-preview-header"><div class="close__game__more_block" id="js_close_game_preview"></div></div>';

    if (data.HasJackpot == 'true') {
        html += '<div class="jackpot__value flex flexCol"><span class="special_jackpot">JACKPOTS</span>' +
            '<span id="js_game_jackpot" class="' + GamesCommon.currencyCode + ' "></span></div>';
    }
    html += '<div class="lca-game-preview-card"><div class="lca-game-preview-title">' + data.Name + '</div>';
    if (GamesCommon.gameCardType == 4) {
        html += '<div class="lca-game-preview-title lca-game-preview-cat">' + data.CatName + '</div>';
    }
    html += '<img class="lca-game-preview-img" src="' + data.Image + '" loading="lazy" alt="' + data.Name + '">';

    if (data.PreviewType == '2') {
        html += drawGamesCardFooterSpec(data);
    }
    html += '</div><div class="lca-game-preview-btn-block"><a class="lca-game-preview-btn game__link_play js_dl_play"> <span class="lca-card-play-text">' + GamesCommon.trns.Play + '</span></a>';
    if (data.HasDemo == 'true') {
        html += '<a class="lca-game-preview-btn game__link_demo js_dl_play_demo">' + GamesCommon.trns.Demo + '</a>';
    }
    html += '</div></div>';
    $(html).hide().appendTo($('body')).fadeIn();
    $('body').addClass('disable-scroll');
    if (data.HasJackpot == 'true') {
        startAction();
    }
}

function playReal(gameUrl, e) {
    if (GamesCommon.userId > 0) {
        if (GamesCommon.partnerId != '2') {
            document.location.href = gameUrl;
        } else {
            if (typeof CheckClientVerificationInfo === 'function' && (GamesCommon.isMobileVerified.toLowerCase() == 'false' || GamesCommon.isDocumentVerified.toLowerCase() == 'false')) {
                CheckClientVerificationInfo();
            } else if (typeof insFoundsCheck === 'function') {
                if (insFoundsCheck(e)) {
                    document.location.href = gameUrl;
                }
            } else {
                document.location.href = gameUrl;
            }
        }
    } else {
        if (GamesCommon.hasStaticLoginPage) {
            document.location.href = '/Login/Login?loginHref=' + GamesCommon.language + gameUrl;
        } else {
            closeGamePreview();
            $('#loginHref').val(GamesCommon.language + gameUrl);
            openRightSidebar();
        }
    }

}

function closeGamePreview() {
    var jackelem = document.getElementById('js_game_jackpot');
    if (jackelem != null) {
        stopAction();
    }
    $('body').removeClass('disable-scroll');
    $('#js_game_preview_block').remove();
}

function startAction() {
    getData('/Common/GetCumulativeJackpot', startAnim);

    hvrJackpotMob = setInterval(() => {
        getData('/Common/GetCumulativeJackpot', updateAnim, gameJackMob)
    }, 30050);
};

function getData(url, cFunction, cFparam) {
    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            try {
                var json = JSON.parse(this.responseText);
                cFunction(json, cFparam);
            } catch (e) {
                console.error("Invalid JSON format");
            }
        }
    };
    xhttp.open("POST", url, true);
    xhttp.send();
}

function startAnim(json) {
    if (gameJackMob instanceof FlipJackpotNumbers) {
        gameJackMob.destroy();
    }
    gameJackMob = new FlipJackpotNumbers({
        node: document.querySelector('#js_game_jackpot'),
        from: json.OldSumJackPot,
        seperateOnly: json.DigitsAfterpoint,
    });
    gameJackMob.flipTo({
        to: json.NewSumJackPot,
        direct: false
    });
}

function updateAnim(json, jackpotObject) {
    if (jackpotObject instanceof FlipJackpotNumbers) {
        if (json.OldSumJackPot > json.NewSumJackPot) {
            gameJackMob.destroy();
            gameJackMob = new FlipJackpotNumbers({
                node: jackpotObject.node,
                from: json.NewSumJackPot,
                seperateOnly: json.DigitsAfterpoint,
            });
            gameJackMob.flipTo({
                to: json.OldSumJackPot,
                direct: false
            });
        } else {
            jackpotObject.flipTo({
                to: json.NewSumJackPot,
                direct: false
            });
        }
    }
}

function stopAction() {
    if (gameJackMob instanceof FlipJackpotNumbers) {
        gameJackMob.destroy();
    }
    clearInterval(hvrJackpotMob);
}

function createGameDetailsView(data, lobbyUrl, source) {
    let cdn = data.UseRmCdn ? GamesCommon.RmCdnUrl : GamesCommon.cdnUrl;
    let gameUrl = data.URL;
    if (typeof Lobbies != 'undefined' && source != 'recommended_widget') {
        gameUrl += '-' + Lobbies.lobbyUrl;
    } else if (lobbyUrl) {
        gameUrl += '-' + lobbyUrl;
    }
    
    let gameInfo = '';
    let html = `<div class="lb_card_preview_cover js_anim" id="js_card_pv_cover"><div class="cw_overlay_dimm" id="js_overlay_dimm"></div><div class="lb_card_preview js_card_preview" id="js_card_pv_cont"`;
    if (source != undefined) {
        html += `data-source="${source}"`;
    }
    html += `><img class="lb_card_cover_inner" src="${cdn + data.Image}" alt="${data.Description}"/><div class="lb_card_preview_header" id="js_card_pv_header">` +
        `<div class="lb_card_preview_swipe"></div><h1 class="lb_card_name">${data.Description}</h1><div class="lb_card_preview_close d-flex align-items-center justify-content-end">` +
        `${data.Badges}<button class="lb_card_preview_close_btn" data-role="none" id="js_card_pv_close_btn"><i class="dynamic_icon m-0">&#58216</i></button></div></div>` +
        `<div class="lb_card_preview_content" id="js_lb_card_preview_content"><div class="lb_card_preview_inner" id="js_lb_card_preview"><div class="lb_card relative"><div class="lb_card_body"><img class="lb_card_img" src="${cdn + data.Image}" alt="${data.Description}"/></div><div class="lb_card_topitems absolute flex_center_between">` +
        `<div class="lb_card_provider d-flex align-items-center">`;
    switch (data.CatIconType) {
        case 1:
            html += `<span>${data.CatName}</span>`;
            break;
        case 2:
            html += `<img src="${data.CatImgUrl}" alt="${data.CatName}"/>`;
            break;
        case 3:
            html += `<img class="me-8" src="${data.CatImgUrl}" alt="${data.CatName}"/><span>${data.CatName}</span>`;
            break;
    }

    html += `</div></div><div class="lb_card_footer flex_center_between js_game_info" data-game-id="${data.Id}"><span class="lb_card_like d-flex js_game_like ${data.IsLiked ? "active" : ""}">` +
        `<span class="js_game_likes_count">${data.LikesCount}</span></span><span class="lb_card_favorite d-flex js_game_fav ${data.IsFavorite ? "active" : ""}"></span></div></div>`;
    if (data.HasJackpot) {
        html += `<div class="lb_card_jackpot_value flex_center"><i class="dynamic_icon">&#58451</i><div class="component_jackpot_slider no-rtl-needed" id="js_game_jackpot"></div> ${GamesCommon.currencyCode}</div>`;
    }

    gameInfo += `<ul class="lb_card_bet_info">`;

    if (data.MinMaxLimits[0] != '0') {
        gameInfo += `<li class="flex_center_between"><p>${GamesCommon.trns.MinBetAmount}:</p><div><span>${data.MinMaxLimits[0]}</span> ${GamesCommon.currencyCode}</div></li>`;
    }

    if (data.MinMaxLimits[1] != '0') {
        gameInfo += `<li class="flex_center_between"><p>${GamesCommon.trns.MaxBetAmount}:</p><div><span>${data.MinMaxLimits[1]}</span> ${GamesCommon.currencyCode}</div></li>`;
    }

    if (data.MinMaxLimits[2] != '0') {
        gameInfo += `<li class="flex_center_between"><p>${GamesCommon.trns.MaxWinAmount}:</p><div><span>${data.MinMaxLimits[2]}</span> ${GamesCommon.currencyCode}</div></li>`;
    }

    if (data.LanguageIds.length > 0) {
        gameInfo += `<li class="flex_center_between"><p>${GamesCommon.trns.Language}:</p>${createLanguages(data)}</li>`;
    }

    if (gameInfo != `<ul class="lb_card_bet_info">`) {
        html += gameInfo + `</ul>`;
    }
    html += `</div><div class="lb_card_preview_footer flex_center_between relative">`;

    if (data.HasDemo) {
        html += `<a class="lb_card_button demo_btn" href="/${GamesCommon.language}/play/fun/${gameUrl}">${GamesCommon.trns.Demo}</a>`;
    }
    html += `<a class="lb_card_button play_btn js_dl_play" data-href="/play/real/${gameUrl}"><i class="dynamic_icon play_icon">&#58160</i><span class="lca-card-play-text">${GamesCommon.trns.Play}</span></a></div></div></div></div>`;

    return html;
}

function setGameDetailsViewPosition(cont, contPos, overlayDimm, coverOpacity) {
    Object.assign(overlayDimm.style, {
        '-webkit-transition': 'opacity 300 ms',
        'transition': 'opacity 300ms',
        'opacity': `${coverOpacity}`
    });
    Object.assign(cont.style, {
        'transform': `translateY(${contPos})`,
        '-webkit-transition': 'transform 300 ms',
        'transition': 'transform 300ms',
        '-webktit-backface-visibility': 'hidden',
        'backface-visibility': 'hidden'
    });
}

function drawGameDetailsView(data, lobbyUrl, dataSource) {
    let html = createGameDetailsView(data, lobbyUrl, dataSource);
    $(html).appendTo($('body'));
    if (data.HasJackpot) {
        startAction();
    }
    pvCont = document.getElementById('js_card_pv_cont');
    pvCover = document.getElementById('js_card_pv_cover');
    pvOverlayDimm = document.getElementById('js_overlay_dimm');

    pvScrollContainer = window.innerHeight <= 450 ? document.getElementById('js_lb_card_preview_content') : document.getElementById('js_lb_card_preview');
    preventScroll();
    pvCont.addEventListener('touchstart', pullToCloseInit);
    pvCont.addEventListener('touchmove', pullToCloseUpdate);
    pvCont.addEventListener('touchend', pullToCloseReset);
    setTimeout(() => { pvCover.classList.remove('js_anim'); hasPvCoverScroll = pvScrollContainer.offsetHeight < pvScrollContainer.scrollHeight; }, 300);
}

function pullToCloseInit(e) {
    allowPvScrolling = !isElemOrChildrenSameAsTarget('#js_card_pv_header', e.target) && pvScrollContainer.scrollTop != 0;
    let touch = e.touches && e.touches[0];
    pvInitialPos = e.clientY || touch.pageY;
    pvStartTime = new Date().getTime();
}

function pullToCloseUpdate(e) {
    let touch = e.touches && e.touches[0];
    pvFinalpos = e.clientY || touch.pageY;
    pvMoved = pvFinalpos - pvInitialPos;
    if (!allowPvScrolling && pvMoved > 0) {
        e.preventDefault();
        pvMoveTime = new Date().getTime();
        pvOverlayDimm.style.opacity = `${1 - pvMoved / pvCont.offsetHeight}`;
        Object.assign(pvCont.style, {
            'transform': `translateY(${pvMoved}px)`,
            '-webktit-backface-visibility': 'hidden',
            'backface-visibility': 'hidden'
        });
    }
}

function pullToCloseReset(e) {
    let isCloseBtnClicked = e.target.id == 'js_card_pv_close_btn' || e.target.parentNode.id == 'js_card_pv_close_btn';
    let moveDur = pvMoveTime - pvStartTime;
    if (isCloseBtnClicked || pvMoved > 150 || (moveDur > 0 && moveDur < 300)) {
        closeGameDetailsView();
    } else if (!allowPvScrolling) {
        if (pvMoved > 0) {
            setGameDetailsViewPosition(pvCont, '0px', pvOverlayDimm, '1');
            setTimeout(() => { pvCont.style = ''; pvOverlayDimm.style = ''; }, 300);
        }
    }
}



function closeGameDetailsView() {
    setGameDetailsViewPosition(pvCont, '100%', pvOverlayDimm, '0');
    setTimeout(() => { pvCover.remove(); allowScroll(); }, 300);
};

function preventTouchMoveEvent(e) {
    if (!hasPvCoverScroll) {
        e.preventDefault();
    }
}
function handleOrientatiChange(e) {
    setTimeout(() => {
        pvScrollContainer = window.innerHeight <= 450 ? document.getElementById('js_lb_card_preview_content') : document.getElementById('js_lb_card_preview');
        allowPvScrolling = pvScrollContainer.scrollTop != 0;
        hasPvCoverScroll = pvScrollContainer.offsetHeight < pvScrollContainer.scrollHeight;
    }, 300);
}

function preventScroll() {
    $('body').addClass('disable-scroll');
    document.documentElement.addEventListener('touchmove', preventTouchMoveEvent, { passive: false });
    window.addEventListener('orientationchange', handleOrientatiChange);
};

function allowScroll() {
    $('body').removeClass('disable-scroll')
    document.documentElement.removeEventListener('touchmove', preventTouchMoveEvent, { passive: false });
    window.removeEventListener('orientationchange', handleOrientatiChange);
}

$(document).on('click', '.js_game_fav', function (e) {
    e.stopPropagation();
    if (GamesCommon.userId == 0) {
        if (GamesCommon.hasStaticLoginPage) {
            document.location.href = '/Login/Login';
        } else {
            openRightSidebar();
        }
        return;
    }
    if (allowClick) {
        allowClick = false;
        var favIcon = $(this);
        var gameId = $(this).parents('.js_game_info').attr('data-game-id');
        if (typeof gameId == 'undefined' || gameId == null) {
            gameId = $(this).parents('.js_dl_games_cont').attr('data-game-id');
        }
        if ($(favIcon).hasClass('active')) {
            $.ajax({
                url: "/DynamicLobbyHelper/DeleteFromFavList",
                type: "POST",
                data: { gameId: gameId },
                datatype: "json",
                success: function (result) {
                    if (result.Code > 0) {
                        createToast('error', result.Message);
                    } else {
                        if (GamesCommon.gameCardType == 4 && typeof WidgetBasedPageHelper == 'undefined') {
                            $('div[data-game-id="' + gameId + '"] .js_game_fav_icon').removeClass('active');
                        } else {
                            $(favIcon).removeClass('active');
                        }
                        if ($('div[data-game-id="' + gameId + '"]').attr('data-isfavorite') != undefined) {
                            $('div[data-game-id="' + gameId + '"]').attr('data-isfavorite', 'false');
                        }
                        if ($('div[data-game-id="' + gameId + '"]').attr('data-is-favorite') != undefined) {
                            $('div[data-game-id="' + gameId + '"]').attr('data-is-favorite', 'false');
                        }

                    }
                    allowClick = true;
                }
            });
        } else {
            $.ajax({
                url: "/DynamicLobbyHelper/AddToFavList",
                type: "POST",
                data: { gameId: gameId },
                datatype: "json",
                success: function (result) {
                    if (result.Code > 0) {
                        createToast('error', result.Message);
                    } else {
                        if (GamesCommon.gameCardType == 4 && typeof WidgetBasedPageHelper == 'undefined') {
                            $('div[data-game-id="' + gameId + '"] .js_game_fav_icon').addClass('active');
                        } else {
                            $(favIcon).addClass('active');
                        }
                        if ($('div[data-game-id="' + gameId + '"]').attr('data-isfavorite') != undefined) {
                            $('div[data-game-id="' + gameId + '"]').attr('data-isfavorite', 'true');
                        }
                        if ($('div[data-game-id="' + gameId + '"]').attr('data-is-favorite') != undefined) {
                            $('div[data-game-id="' + gameId + '"]').attr('data-is-favorite', 'true');
                        }
                    }
                    allowClick = true;
                }
            });
        }
    }
});

$(document).on('click', '.js_game_like', function (e) {
    e.stopPropagation();

    if (GamesCommon.userId == 0) {
        if (GamesCommon.hasStaticLoginPage) {
            document.location.href = '/Login/Login';
        } else {
            openRightSidebar();
        }
        return;
    }
    if (allowClick) {
        allowClick = false;
        var likeIcon = $(this);
        var gameId = $(this).parents('.js_game_info').attr('data-game-id');
        if (typeof gameId == 'undefined' || gameId == null) {
            gameId = $(this).parents('.js_dl_games_cont').attr('data-game-id');
        }
        if ($(likeIcon).hasClass('active')) {
            $.ajax({
                url: "/DynamicLobbyHelper/RemoveLike",
                type: "POST",
                data: { gameId: gameId },
                datatype: "json",
                success: function (result) {
                    if (result.Code > 0) {
                        createToast('error', result.Message);
                    } else {
                        var likesCount = $(likeIcon).find('.js_game_likes_count').text();
                        if (GamesCommon.gameCardType == 4 && typeof WidgetBasedPageHelper == 'undefined') {
                            $('div[data-game-id="' + gameId + '"] .js_game_like_icon').removeClass('active');
                        } else {
                            $(likeIcon).removeClass('active');
                        }
                        $('div[data-game-id="' + gameId + '"] .js_game_likes_count').html(Number(likesCount) - 1);
                        if ($('div[data-game-id="' + gameId + '"]').attr('data-likescount') != undefined) {
                            $('div[data-game-id="' + gameId + '"]').attr('data-likescount', Number(likesCount) - 1);
                            $('div[data-game-id="' + gameId + '"]').attr('data-isliked', 'false');
                        }
                        if ($('div[data-game-id="' + gameId + '"]').attr('data-likes-count') != undefined) {
                            $('div[data-game-id="' + gameId + '"]').attr('data-likes-count', Number(likesCount) - 1);
                            $('div[data-game-id="' + gameId + '"]').attr('data-is-liked', 'false');
                        }
                    }
                    allowClick = true;
                }
            });
        } else {
            $.ajax({
                url: "/DynamicLobbyHelper/AddLike",
                type: "POST",
                data: { gameId: gameId },
                datatype: "json",
                success: function (result) {
                    if (result.Code > 0) {
                        createToast('error', result.Message);
                    } else {
                        var likesCount = $(likeIcon).find('.js_game_likes_count').text();
                        if (GamesCommon.gameCardType == 4 && typeof WidgetBasedPageHelper == 'undefined') {
                            $('div[data-game-id="' + gameId + '"] .js_game_like_icon').addClass('active');
                        } else {
                            $(likeIcon).addClass('active');
                        }
                        $('div[data-game-id="' + gameId + '"] .js_game_likes_count').html(Number(likesCount) + 1);
                        if ($('div[data-game-id="' + gameId + '"]').attr('data-likescount') != undefined) {
                            $('div[data-game-id="' + gameId + '"]').attr('data-likescount', Number(likesCount) + 1);
                            $('div[data-game-id="' + gameId + '"]').attr('data-isliked', 'true');
                        }
                        if ($('div[data-game-id="' + gameId + '"]').attr('data-likes-count') != undefined) {
                            $('div[data-game-id="' + gameId + '"]').attr('data-likes-count', Number(likesCount) + 1);
                            $('div[data-game-id="' + gameId + '"]').attr('data-is-liked', 'true');
                        }
                    }
                    allowClick = true;
                }
            });
        }
    }
});

$(document).on('click', '.js_dl_games', function (e) {
    let previewType = this.dataset.previewType;
    let gameInfoFromWrapper = this.dataset.collectDataFromGame;
    let dataSource = 'games_grid';
    if ($(e.target).parents('.js_dl_mLkd_games').length > 0) {
        dataSource = 'most_liked_widget';
    } else if ($(e.target).parents('#js_recommended_games_cont').length > 0) {
        dataSource = 'recommended_widget';
    }
    if (gameInfoFromWrapper == 'true') {
        let gameData = {};
        gameData.Badges = '';
        gameData.Description = this.dataset.description;
        gameData.HasDemo = JSON.parse(this.dataset.hasDemo);
        gameData.HasJackpot = JSON.parse(this.dataset.hasJackpot);
        gameData.Id = JSON.parse(this.dataset.gameId);
        gameData.Image = this.dataset.image;
        gameData.LanguageIds = [];
        gameData.LikesCount = JSON.parse(this.dataset.likesCount);
        gameData.IsFavorite = JSON.parse(this.dataset.isFavorite);
        gameData.IsLiked = JSON.parse(this.dataset.isLiked);
        gameData.MinMaxLimits = ['0', '0', '0'];
        gameData.URL = this.dataset.url;
        gameData.UseRmCdn = JSON.parse(this.dataset.useRmCdn);
        gameData.CatName = this.dataset.catName;
        gameData.CatIconType = GamesCommon.catIconType == 1 || GamesCommon.catIconType == 3 ? 1 : 0;
        gameData.WithoutLobby = true;
        drawGameDetailsView(gameData, null, dataSource);
    } else if (previewType == '0' || previewType == '2') {
        if (GamesCommon.gameCardType == 4) {
            var data = {};
            let cdn = this.dataset.usermcdn == 'true' ? GamesCommon.RmCdnUrl : GamesCommon.cdnUrl;
            data.HasDemo = this.dataset.hasdemo.toLowerCase();
            data.HasJackpot = this.dataset.hasjackpot.toLowerCase();
            data.bImage = cdn + this.dataset.bimage;
            data.Image = cdn + this.dataset.image;
            data.Url = this.dataset.href;
            data.Name = this.dataset.name;
            data.CatName = this.dataset.catname;
            data.GameId = this.dataset.gameId;
            data.PreviewType = previewType;
            if (previewType == '2') {
                let minMaxLimits = this.dataset.minmaxlimits.split('-');
                data.IsLiked = (this.dataset.isliked.toLowerCase() == 'true');
                data.IsFavorite = (this.dataset.isfavorite.toLowerCase() == 'true');
                data.LikesCount = this.dataset.likescount;
                data.MinMaxLimits = [minMaxLimits[0], minMaxLimits[1], minMaxLimits[2]];
            }
            prepareGamePreview(data);
        } else {
            let gameId = this.dataset.gameId;
            GetGameDetails(gameId, dataSource);
        }
    } else {
        var gameUrl = '/play/real/' + $(this).attr('data-href');
        playReal(gameUrl, e);
    }
});

$(document).on('click', '.js_dl_play', function (e) {
    var gameUrl = '/play/real/';
    if (document.getElementById('js_game_preview_block')) {
        gameUrl += $(this).parents('#js_game_preview_block').attr('data-href');
    } else {
        gameUrl = this.dataset.href;
        if (typeof gameUrl == 'undefined') {
            gameUrl = this.getAttribute('href');
        }
    }
    playReal(gameUrl, e);
});

$(document).on('click', '.js_dl_play_demo', function (e) {
    var gameUrl = '/play/fun/';
    if (document.getElementById('js_game_preview_block')) {
        gameUrl += $(this).parents('#js_game_preview_block').attr('data-href');
    } else {
        gameUrl = this.dataset.href;
        if (typeof gameUrl == 'undefined') {
            gameUrl = this.getAttribute('href');
        }
    }
    document.location.href = gameUrl;
});

$(document).on('click', '#js_close_game_preview', function () {
    closeGamePreview();
});

$(document).on('click', '.js_dl_bw_play', function (e) {
    e.preventDefault();
    e.stopPropagation();
    let gameUrl = $(this).attr('data-href');
    playReal(gameUrl, e);
});

document.addEventListener('click', function (e) {
    if (!$(e.target).parents().hasClass('js_dl_games_cont')) {
        $('.js_dl_games_cont').removeClass('hover-effect');
    }
});

$(document).on('click', '.js_dl_games_cont', function (e) {
    if (!$(this).hasClass('hover-effect')) {
        e.preventDefault();
        e.stopPropagation();
        $('.js_dl_games_cont').removeClass('hover-effect');
        $(this).addClass('hover-effect');
    }
});

$(document).on('click', '.js_jacpkpots', function () {
    let hoverBlock = $(this).find('.top_jackpots__hover_block')[0];
    if (!window.js_topJackpot_cover) {
        $('body').append('<div id="js_topJackpot_cover" class="topJackpot-cover"></div>');
    }
    $('body').addClass('ofh');
    $(hoverBlock).css('bottom', '0');
    $('#js_to_top_cont').css('z-index', '0');
});

$(document).on('click', '.js_close_hover', function (e) {
    e.stopPropagation();
    $('body').removeClass('ofh');
    $('#js_topJackpot_cover').remove();
    $('.top_jackpots__hover_block').css('bottom', '-500px');
    $('#js_to_top_cont').removeAttr('style');
});

$(document).on('click', '#js_card_pv_cover', function (e) {
    if (e.clientY < pvCont.offsetTop) {
        closeGameDetailsView();
    }
});