var isAppExpired = true; //This app is expired and cant 
var housepartyactive = 0;
var endImageThumb = '';
var endImgLoaded = 0;
var bgImagesRec = 0;
var bgImagesArr = [];
var runningProgress = 0;
var resumeAt = 0;
var topCreateContainer;
var oldDataUrl;
var api = null;
var copyVideo = true;
var playingVideoElement;
var videoAsset = {
    maskShowing: false
};
var env = "-d";
var hasLowRes = true;
var setAutoPlay = false;
var getVideoList = {};
var headImages = [];
var isFullScreen = false;
var transYMouth = [];
var isVideocompleted = 0;
var socialImage = "https://host-d.oddcast.com/elfyourself2019/images/poster_image_elves.jpg";
var IsPlayeInterrupted = 0;
var IsPlayerAI = 0;
var arrJsonVideoGlobal = "";
var selectedAIOptionJs = 0;
var innerAIOptionJs = 0;
var styleAIData = [];
var arrayAIData = {};
var setNewVideo = [];
var checkNewVideo = 1;

videoAsset = {
    'hatImages': '',
    'headImages': '',
    'noOfHeads': '',
    'greetings': '',
    'headScale': '',
    'scale': 2,
    "mouthTransY": '',
    'trackingXML': '',
    'videoId': '',
    'videoIndex': '',
    'videoURL': '',
    'videoURLHighRes': '',
    'videoURLLowRes': "",
    'bgImages': []
}

function getHeadImages(res, greeting, mouthPoints) {
    console.log('22222222');
    headImages = [];
    transYMouth = [];
    var headImg = res.data;
    if (headImg.length > 0) {
        for (i = 0; i < headImg.length; i++) {
            var imgUrl = headImg[i]['url'];
            headImages.push(imgUrl);
            transYMouth.push(40);
        }
    }

    
    //InitAndSpeedDetect(function (res) {
        // console.log('changeVideo Video1',videoNumber)
        changeVideoAIStyle(videoNumber,selectedAIOptionJs,0,1);
    //});
    setNoOfHeads(headImg.length);
    videoAsset.mouthTransY = mouthPoints;
    if (api != null) { 
        api.closeVideo();
        updateGreeting(greeting);
    }
    var scrollTo = document.querySelector('.video-list-main');
    if(scrollTo !== null){ scrollTo.scrollTop = 0; }
    var countPositionVideo = 0;
    var scrollInt = setInterval(function(){
        if(countPositionVideo > 10){
            clearInterval(scrollInt);
        }
        var positionVideo = $(".video-list[list-index='" + videoNumber + "']").position();
        $('.video-list').removeClass('videodance-activeclass');
        $(".video-list[list-index='" + videoNumber + "']").addClass('videodance-activeclass');
        if (positionVideo && positionVideo !== undefined) {
            clearInterval(scrollInt);
            if (positionVideo.top < 0) {
                positionVideo.top = positionVideo.top * -1
            }
            scrollTo.scrollTop = positionVideo.top - 440;
        }
        countPositionVideo++;
    },500)

}

function elf_insertVideoPlayerHtml() {
    //var cWidth = $("#background-video-section").width();
    var cWidth = $(".background-video-section").width();
    var cHeight = cWidth / 1.78;
    var vidMainH = cHeight + 7;
    $('.preview-overlay').css({
        'height': cHeight,
        'width': cWidth,
        'margin': '3px',
        'border-radius': '6px'
    })
    $("#video-frame").css({
        "border": "3px solid white",
        "height": vidMainH,
        "background-color": '#000',
        'width': cWidth + 6,
        "padding": "0"
    });
    $(".video-content.inner-main-div").css({
        "height": vidMainH
    });
    var insertVidhtml = '<div id="video-loading" style="display: none;">\n\
        <img style="width:14%;max-width:128px;" src="' + base_url + '/images/init_loader.gif">\n\
      </div>\n\
   <div id="VideoDiv" style="width:' + cWidth + 'px;height:' + cHeight + 'px;">\n\
    <div id="buttonDiv">\n\
     <span onclick="pauseOrPlay();" class="btnC" id="play-pause-container"><img id="pauseOrPlay" src="../images/play.png" title="Play"><img style="display:none;" id="playOrPause" src="../images/pause.png" title="Pause"></span>\n\
     <span class="btnC" onclick="restart()"><img src="../images/replay.png" title="Restart"></span>\n\
     <span class="progress">\n\
      <div class="progressBar" id="progressBar">\n\
       <div class="timeBar" id="timeBar" min="0" max="100" style="width:0%; height:100%;"> &nbsp; </div>\n\
      </div>\n\
     </span>\n\
     <span class="btnC" onclick="launchIntoFullscreen()" id="fullscreen" is-full="1"><img src="../images/full.png" title="Full Screen"></span>\n\
     <span class="btnC" onclick="muteAudio();"><img id="vol" title="volume" src="../images/volume.png"></span>\n\
    </div>\n\
    <img src="" id="endImg" style="display:none" />\n\
    </div>';
    $(".dancing-main-div").css("opacity", 1);
    $("#video-frame").html(insertVidhtml);
    $('#buttonDiv .btnC').css({
        'width': '6%'
    });
    $('#buttonDiv').css({
        'padding': '5px 0',
        'max-width': '66%',
        'margin': '0 17%'
    });
    videoClickingEvent();

    init();
    windowResize();
    
    //$('.row-video').css({"display":'inline-block'});
}

function shuffleArray(arra1, callback) {
    var ctr = arra1.length,
        temp, index;

    // While there are elements in the array
    while (ctr > 0) {
        // Pick a random index
        index = Math.floor(Math.random() * ctr);
        // Decrease ctr by 1
        ctr--;
        // And swap the last element with it
        temp = arra1[ctr];
        arra1[ctr] = arra1[index];
        arra1[index] = temp;
    }
    callback(arra1);
}

function videoListingHtml(callback) {
    if (getVideoList && getVideoList.data) {
        var listArr = [];
        var NewVideoslistArr = [];
        var data = getVideoList.data;
        data = Object.entries(data).map(([key, value]) => value);
        data = data.sort((a, b) => {
            const nameA = a.name.toUpperCase();
            const nameB = b.name.toUpperCase();

            if (nameA < nameB) {
                return -1;
            }
            if (nameA > nameB) {
                return 1;
            }
            return 0;
        });
        if(Array.isArray(getVideoList.data)){
            var dataLength = data.length;
        }
        else{
            var dataLength = Object.keys(getVideoList.data).length
        }
        console.log('dataLength +++',dataLength)
        var i = 0;
        var listIndex = '14';
        var firstVideo = ''
        var listingHtml = '';
        var fullListing = [];
        var fullListingFinal = [];
        var fullFrontListingFinal = [];
        var count = 1;
        var newVideosCount = 0;
        var aiVideoCheck = 0;
        var newImage = '';
        var aiImage = '';
        var videoTitles = [];
        var videoFrontTitles = [];
        for (i = 0; i <= dataLength; i++) {
            if(data[i] && data[i]['is_ar'] == 0){
            newImage = '';
            aiImage = '';
            aiVideoCheck = 0;
            if(data[i] && data[i]['is_new_dance']) {
                var index_dt = parseInt(data[i]['index']);
                var thumb = data[i]['thumb'];
                var title = data[i]['name'];
                videoTitles.push(title);
                if( data[i].videos.length > 5 ){
                    aiImage = '<img class="newAiThumb" src="' + base_url + '/images/ribbon_new_ai.png" list-index="' +
                        index_dt + '" />';
                    aiVideoCheck = 1;
                }
                if (data[i]['is_new_dance'] === '1') {
                    newImage = '<img class="newImageThumb" src="' + base_url + '/ccs6/customhost/1384/misc/video_thumb/ribbon_new_left.png" list-index="' + index_dt + '" />';
                    newVideosCount++;
                }else{
                    videoFrontTitles.push(title);
                }
                if (title == "Happy Days") {
                    // var activeClas = 'videodance-activeclass';
                    var activeClas = '';
                    if( data[i].videos.length > 5 ){
                       IsPlayerAI = 1; 
                    }
                }else{
                    var activeClas = '';
                }
                
                if (data[i]['is_new_dance'] === '1') {
                    NewVideoslistArr.push('<div id="video-list' + count +
                        '" style="background-image: url(' + base_url +
                        '/images/init_loader.gif);background-size: 30%;background-position-x: center;background-position-y: center;background-repeat: no-repeat;" class="video-list stateemptyEvent '+activeClas+'" list-ai="'+aiVideoCheck+'"  list-index="' +
                        index_dt + '">\n\<a>\n\<img src="' + thumb +
                        '" class="background-list" crossOrigin="anonymous" list-index="' + index_dt + '">' + newImage + aiImage +
                        '\n\</a>\n\</div>');


                }else{
                    if (title == "House Party") {
                        listArr.push('<div id="video-list' + count +
                            '" list-ai="'+aiVideoCheck+'" class="video-list houseparty stateemptyEvent" style="background-image: url(' +
                            base_url +
                            '/images/init_loader.gif);background-size: 30%;background-position-x: center;background-position-y: center;background-repeat: no-repeat;"  list-index="' +
                            index_dt +
                            '">\n\<a>\n\<img src="' + thumb +
                            '" class="background-list" crossOrigin="anonymous" list-index="' + index_dt +
                            '">' + newImage + aiImage +
                            '\n\</a>\n\<span class="tooltiptext">Supports Bakground Photos</span>\n\</div>');
                    }else{
                        listArr.push('<div id="video-list' + count +
                            '" list-ai="'+aiVideoCheck+'" style="background-image: url(' + base_url +
                            '/images/init_loader.gif);background-size: 30%;background-position-x: center;background-position-y: center;background-repeat: no-repeat;" class="video-list stateemptyEvent '+activeClas+'"  list-index="' +
                            index_dt + '">\n\<a>\n\<img src="' + thumb +
                            '" class="background-list" crossOrigin="anonymous" list-index="' + index_dt + '">' + newImage + aiImage +
                            '\n\</a>\n\</div>');
                    }
                }
                if (title == "House Party") {
                    listingHtml += '<div id="video-list' + count +
                            '" list-ai="'+aiVideoCheck+'" class="video-list houseparty stateemptyEvent"  list-index="' + index_dt + '">\n\
                        <a>\n\
                        <img src="' + thumb + '" class="background-list" crossOrigin="anonymous" list-index="' + index_dt + '">' +
                                    newImage + aiImage + '\n\
                        </a>\n\
                        </div>';
                                fullListing.push('<div id="list-image" list-ai="'+aiVideoCheck+'" class="list-image houseparty stateemptyEvent" list-index="' + index_dt + '">\n\
                                <a>\n\
                        <img src="' + thumb + '" class="background-list" crossOrigin="anonymous" list-index="' + index_dt + '">' + newImage + aiImage + '\n\
                        </a>\n\
                    </div>');
                }else{
                     listingHtml += '<div id="video-list' + count +
                            '" list-ai="'+aiVideoCheck+'" class="video-list stateemptyEvent"  list-index="' + index_dt + '">\n\
                        <a>\n\
                        <img src="' + thumb + '" class="background-list" crossOrigin="anonymous" list-index="' + index_dt + '">' +
                                    newImage + aiImage + '\n\
                        </a>\n\
                        </div>';
                                fullListing.push('<div id="list-image" list-ai="'+aiVideoCheck+'" class="list-image stateemptyEvent" list-index="' + index_dt + '">\n\
                                <a>\n\
                        <img src="' + thumb + '" class="background-list" crossOrigin="anonymous" list-index="' + index_dt + '">' + newImage + aiImage + '\n\
                        </a>\n\
                    </div>');
                }
                    
                
                count++;
            }
        }

        }
        // listArr.unshift(firstVideo);
        var videoTitlesSorted = [].concat(videoTitles);
        var videoFrontTitlesSorted = [].concat(videoFrontTitles);
        videoTitlesSorted.sort();
        videoFrontTitlesSorted.sort();

        console.log('videoFrontTitlesSorted',videoFrontTitlesSorted)
        console.log('videoTitles',videoTitles)
        console.log('listArr',listArr)

        for(var q=0;q < videoFrontTitlesSorted.length; q++){
            var posn = videoFrontTitles.indexOf(videoFrontTitlesSorted[q]);
            console.log('posn',posn)
            fullFrontListingFinal.push(listArr[posn])
        }

        console.log('fullFrontListingFinal',fullFrontListingFinal)

        shuffleArray(listArr, function (res) {
            var mid = parseInt(res.length/2);
            var ranMid = Math.floor(Math.random() * Math.floor(3));
            ranMid--;
            mid += ranMid;
            //res.unshift(firstVideo)
            res.splice(mid,0,firstVideo)
            listingHtml = res.join("");
        })


        for(var q=0;q < videoTitlesSorted.length; q++){
            var posn = videoTitles.indexOf(videoTitlesSorted[q]);
            fullListingFinal.push(fullListing[posn])
        }
        fullFrontListingFinal = fullFrontListingFinal.join("")
        fullFrontListingFinal = NewVideoslistArr.concat(fullFrontListingFinal)
        fullListingFinal = fullListingFinal.join("")
        var fullList = '<div class="fillListingParent" >' + fullListingFinal + '</div>';
        
        $(".video-list-main").html(fullFrontListingFinal);
        $(".full-video-list").html(fullList);
        console.log('1111111');
        videoClickingEvent();
        callback("success");
    }
}

function videoClickingEvent() {
    /* $('#play-pause-container').unbind("click");
    $('#play-pause-container').on("click",function(){
    pauseOrPlay();
    }) */
    // $('.share-btn').unbind('click');
    // $('.share-btn').on('click', () => {
    //     resumeAt = api.videoElement.currentTime;
    //     goToByTime(api.videoElement.duration);
    //         var canvas = document.getElementById('OverlayCanvas');
    //         oldDataUrl = canvas.toDataURL();
    // })
    var images = [];
    $('.replayBtn').unbind('click');
    $('.replayBtn').on('click', function () {
        isVideocompleted = 0; 
        $('.download-photo').hide();
        restart();
    })
    $('.elf_saveImg').unbind('click');
    $('.elf_saveImg').on('click', function () {
        var bgFbImg = [];
        bgImagesRec = 0;
        $('#elf_fbInsta').hide();
        $('.elf_saveImages').hide();
        setTimeout(function () {
            $('.elf_fbInsta-content').html('');
        }, 500);
        var params = {
            "action": "multiple",
            "resize": 1,
        }
        var files = '';
        const canvas = document.createElement('canvas');
        canvas.width = 200;
        canvas.height = 200;
        const ctx = canvas.getContext('2d');
        $('.add-photo').hide();
        $('#video-loading').css('vertical-align', 'middle');
        // document.getElementById("video-loading").style.verticalAlign = 'middle';
        if(document.getElementById('video-loading') !== null && document.getElementById('video-frame') !== null)
        {
            document.getElementById("video-frame").style.display = 'table';
            document.getElementById("video-loading").style.display = 'table-cell';
        }
        $('#sharepopeventstop,#downloadPopEventstop,#getnftModal,#getnftModal,#elfai-logo-main').addClass('sharingdisable');
        // Set width and height
        $.each(images, (j, imgs) => {
            files = "file[" + j + "]";
            var scale = Math.max(canvas.width / imgs.width, canvas.height / imgs.height);
            var x = (canvas.width / 2) - (imgs.width / 2) * scale;
            var y = (canvas.height / 2) - (imgs.height / 2) * scale;
            ctx.drawImage(imgs, x, y, imgs.width * scale, imgs.height * scale);
            bgFbImg.push(canvas.toDataURL('image/png'));
            params[files] = canvas.toDataURL('image/png');
            if (j + 1 === images.length) {
                videoAsset.bgImages = bgFbImg;
                $('.add-photo').hide();
                $('#holdOnSec').hide();
                $('.video-list').removeClass('videodance-activeclass');
                var listIndex = $('.video-list.houseparty').attr(
                    "list-index");
                setVideoObj(listIndex);
                $('.video-list.houseparty').addClass('videodance-activeclass');

                elf_imagesForVideo(params, function callback(res) {
                    var bgImgRecFb = []
                    $.each(res, (i, val) => {
                        if (val.success) {
                            bgImgRecFb.push(val.url);
                        }
                        if (i + 1 === videoAsset.bgImages.length) {
                            bgImagesRec = 1;
                            videoAsset.bgImages = bgImgRecFb;
                            bgImagesArr = bgImgRecFb;
                            //localStorage.setItem('bgImages', JSON.stringify(videoAsset.bgImages))
                        }

                    })
                })

            }
        })

    });
    $('.forPlayer img').unbind('click');
    $('.forPlayer img').on('click', function () {
        if ($(this).hasClass("elf_selected")) {
            $(this).removeClass('elf_selected');
            var index = images.indexOf($(this).attr('src'));
            images.splice(index, 1);
            $(this).css('border', 'unset')
        } else {
            if (images.length < 6) {
                images.push(this);
                $(this).addClass('elf_selected');
                $(this).css('border', '5px solid green')
            } else {
                $('.elf_errorMessage').text('You can only select upto 6 photos');
                $('.elf_errorMessage').css({
                    'color': 'red',
                    'text-align': 'center'
                })
                setTimeout(function () {
                    $('.elf_errorMessage').text('');
                }, 2000)
            }
        }
    })
    $('.getFacebookImages').unbind('click');
    $('.getFacebookImages').on('click', function () {
        elf_fblogin(function (res) {
            $('.elf_fbInsta-content').html(res);
            $('.elf_fbInsta-content').addClass('forPlayer');
            $('#elf_fbInsta').show();
            $('.forPlayer img').attr('crossorigin', "anonymous")
            $('.elf_saveImages').show();
            images = [];
            videoClickingEvent();
        })
    })
    $(".clearPhotos").unbind('click');
    $(".clearPhotos").on('click', function () {
        $('.uploadImg').val('');
        videoAsset.bgImages = [];
        bgImagesArr = [];
        //localStorage.setItem('bgImages', '')
        $('.dance-photo').hide();
        $('.video-list').removeClass('videodance-activeclass');
        var listIndex = $('.video-list.houseparty').attr("list-index");
        setVideoObj(listIndex);
        $('.video-list.houseparty').addClass('videodance-activeclass');
    })
    $(".newPhotos").unbind('click');
    $(".newPhotos").on('click', function () {
        videoAsset.bgImages = [];
        bgImagesArr = [];
        //localStorage.setItem('bgImages', '')
        $('.uploadImg').val('');
        $('.dance-photo').hide();
        $('.add-photo').show();
    })
    $(".letsDance").unbind('click');
    $(".letsDance").on('click', function () {
        $('.dance-photo').hide();
        $('.video-list').removeClass('videodance-activeclass');
        var listIndex = $('.video-list.houseparty').attr("list-index");
        setVideoObj(listIndex);
        $('.video-list.houseparty').addClass('videodance-activeclass');
    })
    $(".uploadImg").unbind('change');
    $(".uploadImg").change(function () {
        if (this.files && this.files[0]) {
            if (this.files.length > 6) {
                alert("Only 6 photos allowed. Please select again.")
                $('.uploadImg').val('');
            } else {
                var continueFiles = true
                for (var k = 0; k < this.files.length; k++) {
                    var filed = this.files[k];
                    var FileName = filed.name;
                    var FileExt = FileName.substr(FileName.lastIndexOf('.') + 1);
                    if ((FileExt.toUpperCase() === "JPG") || (FileExt.toUpperCase() === "PNG") || (FileExt
                        .toUpperCase() === "JPEG")) {
                        // continueFiles = true;
                    } else {
                        continueFiles = false
                    }
                }
                if (continueFiles) {
                    bgImagesRec = 0;
                    var reader;
                    videoAsset.bgImages = [];
                    bgImagesArr = [];
                    //localStorage.setItem('bgImages', '')
                    var that = this;
                    var imgArr = [];
                    var files = "";
                    var params = {
                        "action": "multiple",
                        "resize": 1,
                    }
                    var imgs = [];

                    $('.add-photo').hide();
                    $('#holdOnSec').hide();
                    if(document.getElementById('VideoDiv') !== null)
                    {
                        document.getElementById("VideoDiv").style.display = 'none';
                    }
                    isVideocompleted = 0; 
                    $('.download-photo').css('display', 'none');
                    if(document.getElementById('video-loading') !== null && document.getElementById('video-frame') !== null)
                    {
                        document.getElementById("video-frame").style.backgroundColor = '#000';
                        document.getElementById("video-loading").style.verticalAlign = 'middle';
                        document.getElementById("video-frame").style.display = 'table';
                        document.getElementById("video-loading").style.display = 'table-cell';
                    }
                    $('#sharepopeventstop,#downloadPopEventstop,#getnftModal,#getnftModal,#elfai-logo-main').addClass('sharingdisable');
                    $.each(this.files, (i, val) => {
                        reader = new FileReader();
                        reader.onload = function (e) {

                            var img1 = new Image();
                            img1.onload = function () {
                                var canvas = document.createElement('canvas');
                                canvas.width = "200";
                                canvas.height = "200";
                                ctx = canvas.getContext('2d');
                                var scale = Math.max(canvas.width / img1.width, canvas.height /
                                    img1.height);
                                var x = (canvas.width / 2) - (img1.width / 2) * scale;
                                var y = (canvas.height / 2) - (img1.height / 2) * scale;
                                ctx.drawImage(img1, x, y, img1.width * scale, img1.height *
                                    scale);
                                files = "file[" + i + "]";
                                params[files] = canvas.toDataURL();
                                imgs.push(canvas.toDataURL());


                            };
                            img1.src = e.target.result;

                        }
                        reader.readAsDataURL(that.files[i]);


                    })
                    var ImgsInterval = setInterval(() => {
                        if (imgs.length == that.files.length) {
                            clearInterval(ImgsInterval);
                            videoAsset.bgImages = imgs
                            $('.add-photo').hide();
                            $('#holdOnSec').hide();
                            $('.video-list').removeClass('videodance-activeclass');
                            var listIndex = $('.video-list.houseparty').attr("list-index");
                            setVideoObj(listIndex);
                            $('.video-list.houseparty').addClass('videodance-activeclass');
                            elf_imagesForVideo(params, function callback(res) {
                                var bgILS = []; // background images for localstorage
                                $.each(res, (i, val) => {
                                    if (val.success) {
                                        bgILS.push(val.url);
                                        if (i + 1 == res.length) {
                                            videoAsset.bgImages = bgILS;
                                            bgImagesArr = bgILS;
                                            bgImagesRec = 1;
                                            //localStorage.setItem('bgImages', JSON.stringify(videoAsset.bgImages))
                                        }
                                    }
                                })
                            })
                        }
                    }, 100);
                } else {
                    var error = "Please make sure your files are images.";
                    alert(error);
                }
            }
        }
    });


    $(".single-section-inline img").unbind('click');
    $(document).on("click",'.single-section-inline img', function () {

        document.getElementById('enableAIStyleModal').style.display = "none";
        var getListId = parseInt($('.videodance-activeclass').attr('list-index'));

        if( selectedAIOptionJs == $(this).attr('data-style') ){
            var setVideoPlayA = 0;
        }else{
            var setVideoPlayA = 1;
        }
        selectedAIOptionJs = $(this).attr('data-style');

        if( setVideoPlayA == 1 ){

            arrayAIData[getListId] = selectedAIOptionJs;

            isVideocompleted = 0; 
            playingVideoElement.pause();
            $('#VideoDiv').css('display', 'none');
            $('.download-photo').css('display', 'none');

            $('#sharepopeventstop,#downloadPopEventstop,#getnftModal,#elfai-logo-main').addClass('sharingdisable');

            if (document.getElementById("video-frame"))
                document.getElementById("video-frame").style.backgroundColor = '#000';
            if (document.getElementById("video-loading"))
                document.getElementById("video-loading").style.verticalAlign = 'middle';
            if (document.getElementById("video-frame"))
                document.getElementById("video-frame").style.display = 'table';
            if (document.getElementById("video-loading"))
                document.getElementById("video-loading").style.display = 'table-cell';
            videoNumber = getListId;

            var styleAIKey = parseInt(selectedAIOptionJs);
            // if( selectedAIOptionJs == 'original' ){
            //     styleAIKey = 0;
            // }else if( selectedAIOptionJs == 'artistic' ){
            //     styleAIKey = 1;
            // }else if( selectedAIOptionJs == 'robots' ){
            //     styleAIKey = 2;
            // }else if( selectedAIOptionJs == 'neon' ){
            //     styleAIKey = 3;
            // }

            // console.log('getListId',getListId);
            // console.log('styleAIKey',styleAIKey);
            changeVideoAIStyle(getListId,styleAIKey,1);
            $('.selected-elf-img').remove();
            var html_append_style = '<img src="' + base_url + '/images/btn_check.png" class="selected-elf-img" />';
            var p_tag = $(this).parents('.single-section-inline').find('p').html();
            p_tag = p_tag.substring(0, 13); // Get the first 13 characters
            $(this).parents('.single-section-inline').append(html_append_style);
            $('.ai-inner-image .inner-btn-text .inner-section-img').attr('src',$(this).parents('.single-section-inline').find('img').attr('src'));
            $('.ai-inner-image .inner-btn-text p').html(p_tag);
            // changeVideoAIStyle(getListId,0);
            // callback("success");
        }
    });

    $(".uploadImages").unbind('click');
    $('.uploadImages').on('click', () => {
        $('#holdOnSec').show();
        $('.elf_saveImages').show();
        videoClickingEvent();
    })
    $(".openFiles").unbind('click');
    $('.openFiles').on('click', () => {
        $('.uploadImg').click();
    })
    $(".danceBtnEffect .noImages").unbind('click');
    $('.danceBtnEffect .noImages').on('click', () => {
        $('.add-photo').hide();
        $('.video-list').removeClass('videodance-activeclass');
        //$('.video-list img').removeAttr("style");
        bgImagesRec = 1;
        var listIndex = $('.video-list.houseparty').attr("list-index");
        setVideoObj(listIndex);
        $('.video-list.houseparty').addClass('videodance-activeclass');
    })
    $('.video-list').unbind("click");
    $('.video-list').on("click", function () {
        var getAICheck = $(this).attr('list-ai');
        IsPlayerAI = parseInt(getAICheck)
        selectedAIOptionJs = 0;
        if ($(this).hasClass('houseparty')) {
            if (api != null) { 
                api.closeVideo();
            }
            housepartyactive = 1;
            if(document.getElementById('video-loading') !== null)
            {
                document.getElementById("video-loading").style.display = "none";
            }
            $('#sharepopeventstop,#downloadPopEventstop,#getnftModal,#elfai-logo-main').addClass('sharingdisable');
            isVideocompleted = 0; 
            if (videoAsset.bgImages.length == 0) {
                $('.add-photo').show();
                $('.download-photo').css('display', 'none')
                if (api != null) { 
                    api.closeVideo();
                }
                if(document.getElementById('video-frame') !== null && document.getElementById('VideoDiv') !== null)
                {
                    document.getElementById("VideoDiv").style.display = 'none';
                    document.getElementById("video-frame").style.backgroundColor = '#000';
                }
            } else {
                $('.dance-photo').show();
                $('.download-photo').css('display', 'none')
                if (api != null) { 
                    api.closeVideo();
                }
                if(document.getElementById('video-frame') !== null && document.getElementById('VideoDiv') !== null)
                {
                    document.getElementById("VideoDiv").style.display = 'none';
                    document.getElementById("video-frame").style.backgroundColor = '#000';
                }
            }
        } else {
            housepartyactive = 0;
            $('.add-photo').hide();
            $('.video-list').removeClass('videodance-activeclass');
            //$('.video-list img').removeAttr("style");
            var listIndex = $(this).attr("list-index");
            setVideoObj(listIndex);
            $(this).addClass('videodance-activeclass');
            //$(this).find("img").css("border-color", "#fff");
            $('.list-image').removeClass('videodance-activeclass');
            $(".list-image[list-index='" + listIndex + "']").addClass('videodance-activeclass');
        }

    })
    $('.list-image').unbind("click");
    $('.list-image').on("click", function () {

        var scrollTo = document.querySelector('.video-list-main');
        scrollTo.scrollTop = 0;
        selectedAIOptionJs = 0;
        if ($(this).hasClass('houseparty')) {
            $('#VideoDiv').css('display', 'none');
        $('#sharepopeventstop,#downloadPopEventstop,#getnftModal,#elfai-logo-main').addClass('sharingdisable');

            housepartyactive = 1;
            if(document.getElementById('video-loading') !== null)
            {
                document.getElementById("video-loading").style.display = "none";
            }
            if (api != null) { 
                api.closeVideo();
            }
            $('#sharepopeventstop,#downloadPopEventstop,#getnftModal,#elfai-logo-main').addClass('sharingdisable');
            isVideocompleted = 0; 
            if (videoAsset.bgImages.length == 0) {
                $('.add-photo').show();
                $('.download-photo').css('display', 'none')
                if (api != null) { 
                    api.closeVideo();
                }
                var listIndex = $(this).attr("list-index");
                if(document.getElementById('video-frame') !== null && document.getElementById('VideoDiv') !== null)
                {
                    document.getElementById("VideoDiv").style.display = 'none';
                    document.getElementById("video-frame").style.backgroundColor = '#000';
                }
                $('#background-video-full-list').removeClass('slider-expand');
                $('#background-video-full-list').css('overflow', 'hidden');
                var positionVideo = $(".video-list[list-index='" + listIndex + "']").position();
                if (positionVideo.top < 0) {
                    positionVideo.top = positionVideo.top * -1
                }
                scrollTo.scrollTop = positionVideo.top - 300;
            } else {
                $('.dance-photo').show();
                $('.download-photo').css('display', 'none')
                if (api != null) { 
                    api.closeVideo();
                }
                var listIndex = $(this).attr("list-index");
                if(document.getElementById('video-frame') !== null && document.getElementById('VideoDiv') !== null)
                {
                    document.getElementById("video-frame").style.backgroundColor = '#000';
                    document.getElementById("VideoDiv").style.display = 'none';
                }
                $('#background-video-full-list').removeClass('slider-expand');
                $('#background-video-full-list').css('overflow', 'hidden');
                var positionVideo = $(".video-list[list-index='" + listIndex + "']").position();
                if (positionVideo.top < 0) {
                    positionVideo.top = positionVideo.top * -1
                }
                scrollTo.scrollTop = positionVideo.top - 300;
            }
        } else { 
            housepartyactive = 0;
            $('.add-photo').hide();
            $('.list-image').removeClass('videodance-activeclass');
            //$('.list-image img').removeAttr("style");
            var listIndex = $(this).attr("list-index");
            setVideoObj(listIndex);
            //$(this).find("img").css("border-color", "#fff");
            $(this).addClass('videodance-activeclass');
            $('#background-video-full-list').removeClass('slider-expand');
            $('#background-video-full-list').css('overflow', 'hidden');

            var positionVideo = $(".video-list[list-index='" + listIndex + "']").position();
            $('.video-list').removeClass('videodance-activeclass');
            $(".video-list[list-index='" + listIndex + "']").addClass('videodance-activeclass');
            if (positionVideo.top < 0) {
                positionVideo.top = positionVideo.top * -1
            }
            scrollTo.scrollTop = positionVideo.top - 300;
        }
    });
    $('#progressBar').unbind("click");
    $('#progressBar').on("click", function (e) {
        var barW = $(this).width();
        var persentage = e.originalEvent.offsetX * 100 / barW;
        var forwardVideo = api.videoElement.duration * persentage / 100;
        if (forwardVideo < 1) {
            forwardVideo++;
        }
        goToByTime(forwardVideo);
        if(document.getElementById('timeBar') !== null)
        {
            document.getElementById("timeBar").style.width = persentage + "%";
        }
        if (!playingVideoElement.paused) {
            playingVideoElement.play();
            if(document.getElementById('pauseOrPlay') !== null && document.getElementById("playOrPause") !== null)
            {
                document.getElementById("pauseOrPlay").style.display = "none";
                document.getElementById("playOrPause").style.display = "block";          
            }
        }
    });
    $('#logo_image').unbind("click");
    $('#logo_image').on("click", function (e) {
        if (api != null) 
        {   
            api.closeVideo();
        }
    });
    var isOnMouse = 1;
    var setIn = '';
    $('#VideoDiv').unbind("mousemove");
    $("#VideoDiv").on("mousemove", function (e) {
        if (setIn != "") {
            clearInterval(setIn);
        }
        $("#buttonDiv").show();
        setIn = setInterval(function () {
            isOnMouse = 0;
            $("#buttonDiv").fadeOut(1000);
            clearInterval(setIn);
        }, 3000);
    }).mouseleave(function () {
        $("#buttonDiv").fadeOut("slow");
    });
    var cWidth = $("#video-frame").width();
    var controlW = cWidth * 60 / 100;
    var marginLeftRight = cWidth * 20 / 100;
    // $("#buttonDiv").css({ "width": controlW, "margin-left": marginLeftRight, "margin-right": marginLeftRight });
}

function setVideoObj(videoId) {
    isVideocompleted = 0; 
    $('#VideoDiv').css('display', 'none');
    $('.download-photo').css('display', 'none');
    
    $('#sharepopeventstop,#downloadPopEventstop,#getnftModal,#elfai-logo-main').addClass('sharingdisable');

    if (document.getElementById("video-frame"))
        document.getElementById("video-frame").style.backgroundColor = '#000';
    if (document.getElementById("video-loading"))
        document.getElementById("video-loading").style.verticalAlign = 'middle';
    if (document.getElementById("video-frame"))
        document.getElementById("video-frame").style.display = 'table';
    if (document.getElementById("video-loading"))
        document.getElementById("video-loading").style.display = 'table-cell';
    // console.log('changeVideo Video2',videoNumber)
    videoNumber = videoId;
    changeVideoAIStyle(videoId,0);
}



function readyToPlayCallback() {
    //sdocument.getElementById("buttonDiv").style.display="block";
    //pauseOrPlay();
}

function startVideo() {
    if (api != null && IsPlayeInterrupted == 0) {
        hasLowRes = false;
        var filterString = (videoAsset.videoId == 5) ? "charleston" : null;
        videoAsset.videoURL = hasLowRes ? videoAsset.videoURLLowRes : videoAsset.videoURLHighRes;
        api.loadVideoURL(
            videoAsset.videoURL,
            function (videoElement) { // needs to be on gui thread on mobile?
                api.loadTrackingData(
                    videoAsset.trackingXML, //"House_Party_5h_2Ddata.xml",
                    function () {
                        //todo - loading of heads, hats, background, greeting text, offsets and scale, will go in here
                        playingVideoElement = videoElement;

                        api.useOnscreenTimeCode(32);
                        //mouthImage = videoAsset.videoId == 7 ? ["http://host"+ env +".oddcast.com/ccs6/customhost/1342/misc/mouths_spritesheet.png"] : null;
                        mouthImage = videoAsset.videoId == 7 ? ["//host" + env +
                            ".oddcast.com/ccs6/customhost/1384/misc/mouths_spritesheet.png"
                        ] : null;

                        fineTuneHeads();
                        api.setImageUrls( //load heads
                            "head",
                            //["images/head-1.png","images/head-2.png","images/head-3.png","images/head-4.png","images/head-5.png"],
                            videoAsset.headImages,
                            function () {
                                videoAssetBgImages = videoAsset.videoId == 14 ? videoAsset.bgImages :
                                    [];
                                api.setImageUrls( //load backgrounds
                                    "image",
                                    //["images/background-1.png","images/background-2.png","images/background-1.png","images/background-2.png","images/background-1.png","images/background-2.png"],
                                    videoAssetBgImages,
                                    function () {
                                        api.setImageUrls( //load hats
                                            "hat",
                                            //["images/hats/hat_elf.png"],
                                            videoAsset.hatImages,
                                            function () {
                                                api.setImageUrls( //load mouth
                                                    "mouth",
                                                    mouthImage,
                                                    function () {
                                                        api.setGreetingMessage(videoAsset
                                                            .greetings, 4.0, 0.065,
                                                            "font=Open Sans;fontEffect=bold;textAlign=center;textColor=#ffffff;xPercent=0.5;yPercent=0.90;bgColor=#000000;bgAlpha=0.5;bgWidth=10.0;bgHeight=1.5;bgHeightShift=1.4"
                                                        );
                                                        api.setVideoFrameOffset(videoAsset
                                                            .offset);
                                                        api.setScale("heads", videoAsset
                                                            .headScale
                                                        ); //default scale of head
                                                        api.setTransY("heads", videoAsset
                                                            .headTransY
                                                        ); //raise head with a negative value, lower with a positive value - in pixels relative to the 1024 wide video.

                                                        if (mouthImage != null) {
                                                            for (i = 0; i < videoAsset
                                                                .headImages.length; i++) {
                                                                //api.setScale("mouth1", 0.5);   //default scale of mouth images
                                                                api.setTransY("mouth" + (i +1), videoAsset.mouthTransY[i]); //raise head with a negative value
                                                            }
                                                        }

                                                        if (window.readyToPlayCallback !=
                                                            null)
                                                            readyToPlayCallback();
                                                        
					                                    var imgloaded = setInterval(() => {
                                                            if(endImgLoaded === 1 && housepartyactive !== 1){
                                                                clearInterval(imgloaded);
                                                                $('#sharepopeventstop,#downloadPopEventstop,#getnftModal,#elfai-logo-main').removeClass('sharingdisable');
                                                                if(document.getElementById('VideoDiv') !== null && document.getElementById('video-loading') !== null)
                                                                {
                                                                    document.getElementById("VideoDiv").style.display = 'block';
                                                                    document.getElementById("video-loading").style.display = 'none';
                                                                }
                                                            }
					                                    }, 100);
                                                        // if(!mobileAndTabletcheck() && setAutoPlay) {

                                                        if (setAutoPlay) {
                                                            //playingVideoElement.play();
                                                            if (videoAsset.videoId === "1" || videoAsset.videoId === "5")
                                                                skip(1);
                                                            else
                                                                skip(0);
                                                            if( housepartyactive !== 1){
                                                                var promise = playingVideoElement.play();
                                                            }
                                                            if (promise !== undefined) {
                                                                promise.then(function (_) {
                                                                    // Autoplay started!
                                                                    document
                                                                        .getElementById(
                                                                            "video-loading"
                                                                        ).style
                                                                        .display =
                                                                        'none';
                                                                    try {
                                                                        document
                                                                            .getElementById(
                                                                                "video-external-play"
                                                                            )
                                                                            .style
                                                                            .display =
                                                                            'none';
                                                                    } catch (e) { }
                                                                }).catch(function (
                                                                    error) {
                                                                    // Autoplay was prevented.
                                                                    // Show a "Play" button so that user can start playback.
                                                                    
                                                                    if(document.getElementById('poster-outer') !== null && document.getElementById('buttonDiv') !== null){ document.getElementById('poster-outer').style.display = "block"; document.getElementById('buttonDiv').style.visibility = "hidden"; }
                                                                    if(document.getElementById('video-loading') !== null)
                                                                    {
                                                                        document.getElementById("video-loading").style.display ='none';
                                                                    }

                                                                    try {
                                                                        if(document.getElementById('video-external-play') !== null)
                                                                        {
                                                                            document.getElementById("video-external-play").style.display ='block';
                                                                        }
                                                                        pauseOrPlay();
                                                                    } catch (e) { }
                                                                    //pauseOrPlay();

                                                                    try {
                                                                            let image = document.createElement("img");
                                                                            image.src = socialImage;
                                                                            image.style.width = "100%";
                                                                            image.style.position = "absolute";
                                                                            image.style.zIndex = "1";
                                                                            let buttonDiv = document.getElementById("buttonDiv");
                                                                            //buttonDiv.after(image);
                                                                    } catch (e) {
                                                                        if (window.console) { console.log(
                                                                            'Failed to show poster image'
                                                                        ); }
                                                                    }

                                                                });
                                                            }
                                                        }

                                                        if (!setAutoPlay) {
                                                            if (videoAsset.videoId === "1" || videoAsset.videoId === "5")
                                                                skip(1);
                                                            else
                                                                skip(0);
                                                        }
                                                        if(housepartyactive === 0)
                                                        pauseOrPlay();
                                                    },
                                                    function (url, error) {
                                                     if (window.console) { console.log(url + "  " + error); }
                                                    },
                                                    filterString
                                                );
                                            },
                                            function (url, error) {
                                                if (window.console) { console.log(url + "  " + error); }
                                            }, filterString
                                        );
                                    },
                                    function (url, error) {
                                        if (window.console) { console.log(url + "  " + error); }
                                    }, filterString
                                );
                            },
                            function (url, error) {
                                if (window.console) { console.log(url + "  " + error); }
                            }, filterString
                        );
                    },
                    function (url, error) {
                        if (window.console) { console.log(error); }
                    }
                );
            },
            function (url, error) {
                if (window.console) { console.log(error); }
            }
        );
    }
}
var incDigit = 0
// video controls
function pauseOrPlay() {
    if (playingVideoElement != null) {
        if (playingVideoElement.paused) {
            try {
                if(document.getElementById('pauseOrPlay') !== null && document.getElementById("playOrPause") !== null)
                {
                    document.getElementById("pauseOrPlay").style.display = "block";
                    document.getElementById("playOrPause").style.display = "none";          
                }
            } catch (e) { }

            var promise1 = playingVideoElement.play();
            if (promise1 !== undefined) {
                promise1.then(function (_) {
                    $('#playButton').hide();
                    if(document.getElementById('pauseOrPlay') !== null && document.getElementById("playOrPause") !== null)
                    {
                        document.getElementById("pauseOrPlay").style.display = "none";
                        document.getElementById("playOrPause").style.display = "block";          
                    }
                }).catch(function (error) {
                    // Autoplay was prevented.
                    // Show a "Play" button so that user can start playback.
                    $('#playButton').show();
                    if(document.getElementById('poster-outer') !== null && document.getElementById('buttonDiv') !== null){ document.getElementById('poster-outer').style.display = "block"; document.getElementById('buttonDiv').style.visibility = "hidden";}
                    try {
                        //embed code function called.
                        pauseorPlay();
                    } catch (e) {
                        if (window.console) { console.log("Error: ", e.message); }
                    }
                });
            }

        } else {
            try {
                if(document.getElementById('pauseOrPlay') !== null && document.getElementById("playOrPause") !== null)
                {
                    document.getElementById("pauseOrPlay").style.display = "block";
                    document.getElementById("playOrPause").style.display = "none";          
                }
            } catch (e) { }
            playingVideoElement.pause();
        }
    }
}
var maskShowing = 0;

function showMask2() {
    maskShowing = api.debug_showMask2(maskShowing + 1);
}

function incMaxEdges(inc) {
    api.debug_incMaxEdges(inc);
}

function incMaxShapes(inc) {
    api.debug_incMaxShapes(inc);
}

function nextMaskFrame(inc) {
    api.debug_getNextMaskFrame(inc);
}

function fullScreen() {
    if (playingVideoElement != null) {

    }
}

//1 fullscreen, 2 fullbrowser, 0 regular brwoser
function isFullScreen() {
    if (api == null) return 0;
    return api.isFullScreen();
}

function toggleCopyVideo() {
    copyVideo = !copyVideo;
    api.setCopyVideo(copyVideo);
}
function launchIntoFullscreenE() {
    var isFull = $("#fullscreen").attr("is-full");
    if (isFull == 1) {
        $("#VideoDiv").css({
            "width": '680px',
            "height": '382px'
        });
        isFullScreen = true;
        api.toFullScreen(0);
        $("#fullscreen").attr("is-full", 0)
    } else {
        $("#fullscreen").attr("is-full", 1)
        closeFullscreen();
        isFullScreen = false;
    }
}
function GoInFullscreen() {
    if($(window).width() < $(window).height()){
        var cWidth = $(window).width();
        cWidth = (cWidth*98)/100;
        var cHeight = cWidth / 1.78;
    }
    else{
        var cHeight = $(window).height();
        cHeight = (cHeight*98)/100;
        var cWidth = cHeight * 1.78;
    $('.replace_video_here').css({
        'top':'0'
    })
    }
    $('#custom-footer').hide();
    $('.replace_video_here').css({
        'position':'fixed',
        'left':'0.5%',
        'width':cWidth,
        'height':cHeight,
        'z-index':'9'
    })
    $(".forCreateYourOwn").css({
        "width": cWidth,
        "height": cHeight
    });
            
}

function enterIosSafariFullScreen(){
    if($(window).width() < $(window).height()){
        var cWidth = $(window).width();
        var cHeight = cWidth / 1.78;
        var laftCss = '0';
    }
    else{
        var cHeight = $(window).height();
        var cWidth = cHeight * 1.78;
        $('.replace_video_here').css({
            'top':'1%'
        })
        var laftCss = ($(window).width()-cWidth)/2+'px'
    }
    $('#custom-footer').hide();
    $('.replace_video_here').css({
        'position':'fixed',
        'left':laftCss,
        'width':cWidth,
        'height':cHeight,
        'z-index':'9',
        "border":'unset'
    })
    $(".forCreateYourOwn").css({
        "width": cWidth,
        "height": cHeight,
    });
}
function exitIosSafariFullScreen(){
    if($(window).width() > $(window).height()){
        $('.replace_video_here').css({
            'position':'relative',
            'left':'unset',
            'width':'unset',
            'height':'unset',
            'z-index':'unset',
            'top':'unset',
            "border":'3px solid #fff'
        })
        $('#custom-footer').show();
        $(".forCreateYourOwn").css({
            "width": $('.create-own-video-content').width()-6,
            "height": ($('.create-own-video-content').width()-6)/1.78
        });
    }
    else{
        $('.replace_video_here').css({
            'position':'relative',
            'left':'unset',
            'width':'unset',
            'height':'unset',
            'z-index':'unset',
            'top':'unset',
            "border":'3px solid #fff'
        })
        $('#custom-footer').show();
        $(".forCreateYourOwn").css({
            "width": $(window).width()*0.927,
            "height": ($(window).width()*0.927)/1.78
        });
    }
}
function launchIntoFullscreen() {
    var isFull = $("#fullscreen").attr("is-full");
    
    if (isFull == 1) {
        topCreateContainer = $('.createyourowncontainer').css('top');
        var btnControlW = $("#buttonDiv").width();
        
        isFullScreen = true;
        if(/iPhone/.test(navigator.platform)){
            //enterIosSafariFullScreen();
            $("#fullscreen").css("pointer-events","none");
            setTimeout(() => {
                enterIosSafariFullScreen();
                $("#fullscreen").css("pointer-events","unset");
            },1100);
        }
        else{
        api.toFullScreen(0);
        }
        $("#fullscreen").attr("is-full", 0)
    } else {
        setTimeout(() => {
            $('.createyourowncontainer').css('top', topCreateContainer);
            if (typeof resizing == "function") {
                resizing();
            }
        }, 300);

        $("#fullscreen").attr("is-full", 1)
        if(/iPhone/.test(navigator.platform)){
            exitIosSafariFullScreen();
        }
        else{
        closeFullscreen();
        }
        isFullScreen = false;
    }
}
window.addEventListener("orientationchange", function(event) {
    if (typeof resizing == "function") 
    resizing();

    
    if (isFullScreen) {
        if(/iPhone|iPod|iPad/.test(navigator.platform)){
            enterIosSafariFullScreen();
            setTimeout(() => {
                enterIosSafariFullScreen();
                resizing();
            },1100);
        }
    } else {

        if(/iPhone|iPod|iPad/.test(navigator.platform)){
            exitIosSafariFullScreen();
        
            resizing();
        }
    }
});
function closeFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

function launchIntoFullBrowser() {
    api.toFullScreen(2)
}

function exitFull() {
    api.toFullScreen(-1);
}

function muteAudio() {
    if (api.videoElement.muted) {
        api.videoElement.muted = false;
        $("#vol").attr("src", "../images/volume.png");
    } else {
        api.videoElement.muted = true;
        $("#vol").attr("src", "../images/mute.png");
    }
}

function closeVideo() {
    if (api != null) {
        api.closeVideo();
    }
    playingVideoElement = null;
}

function dispose() {
    if (api != null) {
        api.dispose();
    }
    api = null;
}

function setNoOfHeads(num) {
    videoAsset.noOfHeads = num;
}

function skip(value) {
    api.videoElement.currentTime += value;
}

function updateGreeting(greetings) {
    videoAsset.greetings = greetings;
    api.setGreetingMessage(videoAsset.greetings, 4.0, 0.065,
        "font=Open Sans;fontEffect=bold;textAlign=center;textColor=#ffffff;xPercent=0.5;yPercent=0.90;bgColor=#000000;bgAlpha=0.5;bgWidth=10.0;bgHeight=1.5;bgHeightShift=1.4"
    );
}

function goToByTime(t) {
    api.videoElement.currentTime = t;
}

function restart() {
    if (playingVideoElement.paused) {
        if (videoAsset.videoId === "1")
            // skip(1);
            goToByTime(1);
        else
            // skip(0);
            goToByTime(0);
        playingVideoElement.play();
        if(document.getElementById('pauseOrPlay') !== null && document.getElementById("playOrPause") !== null)
        {
            document.getElementById("pauseOrPlay").style.display = "none";
            document.getElementById("playOrPause").style.display = "block";          
        }
    } else {
        goToByTime(1);
    }
}

function fineTuneHeads() {
    switch (parseInt(videoAsset.videoId)) {
        //80s
        case 9:
            switch (headImages.length) {
                case 1:
                    videoAsset.headImages = [headImages[0], headImages[0], headImages[0], headImages[0], headImages[
                        0]];
                    break;
                case 2:
                    // videoAsset.headImages = [headImages[0], headImages[0], headImages[0], headImages[1], headImages[1]];
                    videoAsset.headImages = [headImages[0], headImages[1], headImages[0], headImages[0], headImages[
                        1]];
                    break;
                case 3:
                    // videoAsset.headImages = [headImages[0], headImages[1], headImages[0], headImages[1], headImages[2]];
                    videoAsset.headImages = [headImages[0], headImages[1], headImages[2], headImages[2], headImages[
                        1]];
                    break;
                case 4:
                    videoAsset.headImages = [headImages[0], headImages[1], headImages[2], headImages[3], headImages[
                        0]];
                    break;
            }
            break;

        //Hanukka
        case 13:
            switch (headImages.length) {
                case 1:
                    videoAsset.headImages = [headImages[0], headImages[0], headImages[0], headImages[0], headImages[
                        0]];
                    break;
                case 2:
                    videoAsset.headImages = [headImages[0], headImages[1], headImages[0], headImages[0], headImages[
                        1]];
                    break;
                case 3:
                    videoAsset.headImages = [headImages[0], headImages[1], headImages[2], headImages[2], headImages[
                        1]];
                    break;
                case 4:
                    videoAsset.headImages = [headImages[0], headImages[1], headImages[2], headImages[3], headImages[
                        0]];
                    break;
            }
            break;

        //mashup
        case 16:
            switch (headImages.length) {
                case 1:
                    videoAsset.headImages = [headImages[0], headImages[0]];
                    break;
            }
            break;

        //Secret Santa
        case 17:
            switch (headImages.length) {
                case 1:
                    videoAsset.headImages = [headImages[0], headImages[0]];
                    break;
            }
            break;
    }
    //videoAsset.noOfHeads = videoAsset.headImages.length;
}

function showExpired() {
    if(document.getElementById('VideoDiv') !== null)
    {
        document.getElementById("VideoDiv").innerHTML =
        "<img src='//host-d.oddcast.com/elfyourself/images/elvesleft.jpg'>";
    }

    try {
        if(document.getElementById('video-loading') !== null)
        {
            document.getElementById("video-loading").visibility = "hidden";
            document.getElementById("video-loading").style.display = "none";
        }
    } catch (e) {
        if (window.console) { console.log(e.message); }
    }

    setTimeout(removeButtonDiv(), 1000);

}

function removeButtonDiv() {
    var elementButtonDiv = document.getElementById("buttonDiv");
    try {
        elementButtonDiv.removeAttribute("style");
    } catch (e) {
        if (window.console) { console.log(e.message); }
    }

    try {
        elementButtonDiv.innerHTML = '';
    } catch (e) {
        if (window.console) { console.log(e.message); }
    }

    try {
        elementButtonDiv.removeAttribute("id");
    } catch (e) {
        if (window.console) { console.log(e.message); }
    }
}

function init() {
    dispose();
    api = new com.oddcast.app.videoOverlay.VideoOverlayEngine().getAPI();
    api.init2("VideoDiv", copyVideo);
    // startVideo(); //only for desktop?
    var inProgressTime = -1;
    api.videoElement.ontimeupdate = function () { // video playing
        runningProgress = api.videoElement.currentTime * 100 / api.videoElement.duration;
        if (inProgressTime > 0) {
            if(document.getElementById('timeBar') !== null)
            {  
                document.getElementById("timeBar").style.width = runningProgress + "%";
            }
        }
        if (runningProgress > 99) {
            if(document.getElementById('pauseOrPlay') !== null && document.getElementById("playOrPause") !== null)
            {
                document.getElementById("pauseOrPlay").style.display = "block";
                document.getElementById("playOrPause").style.display = "none";          
            }
        }
        if (runningProgress == 100) { // when video finishes.
            isVideocompleted = 1;
            setTimeout(function () {
                if(isVideocompleted == 1){ $('.download-photo').css('display', 'block'); }
            }, 2000)
        }
        inProgressTime++;
        try {
            if(document.getElementById('currentTime') !== null && document.getElementById('totalTime') !== null)
            {
                document.getElementById("currentTime").innerHTML = api.videoElement.currentTime;
                document.getElementById("totalTime").innerHTML = api.videoElement.duration;
            }
        } catch (e) {

        }
    };
}

function InitAndSpeedDetect(callback) {

    // var imageAddr = "//content.oddcast.com/ccs6/customhost/1384/misc/bandwidth_test_image.jpg";
    // var imageAddr = "//content-vd.oddcast.com/ccs6/customhost/1384/misc/bandwidth_test_image2.jpg";
    var imageAddr = "../images/bandwidth_test_image2.jpg"
    var downloadSize = 32159; //bytes
    // var downloadSize = 223941 ;
    var limitToDecide = 2500; //2000 kbps

    MeasureConnectionSpeed();
    function MeasureConnectionSpeed() {
        var startTime, endTime;
        var download = new Image();

        download.onload = function () {
            endTime = (new Date()).getTime();
            var duration = (endTime - startTime) / 1000;
            var bitsLoaded = downloadSize * 8;
            var speedBps = (bitsLoaded / duration).toFixed(2);
            var speedKbps = (speedBps / 1024).toFixed(2);
            if (speedKbps < limitToDecide) {
                hasLowRes = true;
            }
            else {
                hasLowRes = false;
            }
            callback("success");
        }

        download.onerror = function (err, msg) {
            //hasLowRes	= true;
        }
			
        startTime = (new Date()).getTime();
        var cacheBuster = "?nnn=" + startTime;
        download.src = imageAddr + cacheBuster;
    }


};

function changeVideoAIStyle(index,index_style = 0,changeI = 0, firstload = 0) {
    index = parseInt(index);
    index_style = parseInt(index_style);
    changeI = parseInt(changeI);
    firstload = parseInt(firstload);
    // console.log('changeVideoAIStyle',index)
    // console.log('index_style',index_style)
    // console.log('changeI',changeI)
    // console.log('firstload',firstload)
    if (api != null && IsPlayeInterrupted == 0) 
    {
        if( (index_style != 0) && (firstload == 1) ){
            console.log('edit back')
            var checkAIIndex = index_style;
        }else{
            var checkAIIndex = 0;
            $.each(arrayAIData, (ind_ss, val_ss) => {
                if( ind_ss == index ){
                    index_style = val_ss;
                    checkAIIndex = val_ss;
                    selectedAIOptionJs = val_ss;
                }
            });
        }
        

        api.closeVideo();
        endImgLoaded = 0;
        housepartyactive = 0;
        isVideocompleted = 0; 
        // endImageThumb = '';
        styleAIData = [];
        setNewVideo = [];
        $('#VideoDiv').css('display', 'none');
        $('.download-photo').css('display', 'none');
        $('#sharepopeventstop,#downloadPopEventstop,#getnftModal,#elfai-logo-main,#elfai-logo-main').addClass('sharingdisable');

        if (document.getElementById("video-frame"))
            document.getElementById("video-frame").style.backgroundColor = '#000';
        if (document.getElementById("video-loading"))
            document.getElementById("video-loading").style.verticalAlign = 'middle';
        if (document.getElementById("video-frame"))
            document.getElementById("video-frame").style.display = 'table';
        if (document.getElementById("video-loading"))
            document.getElementById("video-loading").style.display = 'table-cell';

        
        videoAsset.videoId = index;
        var headCount = headImages.length;

        var loadList = setInterval(function () {
            if (Object.keys(getVideoList).length !== 0) {

                if ( checkNewVideo == 1 ) {

                    var data = getVideoList.data;
                    if(Array.isArray(getVideoList.data)){
                        var dataLength = data.length;
                    }
                    else{
                        var dataLength = Object.keys(getVideoList.data).length
                    }
                    for (i = 0; i <= dataLength; i++) {
                        if(data[i] && data[i]['is_ar'] == 0){
                            if (data[i]['is_new_dance'] === '1') {
                                setNewVideo.push(data[i]['index']);
                            }
                        }
                    }
                    var randomIndex = Math.floor(Math.random() * setNewVideo.length);
                    var randomElement = setNewVideo[randomIndex];
                    index = parseInt(randomElement);
                    videoAsset.videoId = index;
                    checkNewVideo = 2;
                    videoNumber = index;

                    setTimeout(function () {
                        // console.log('videoAsset.setNewVideo',setNewVideo)
                        // console.log('videoAsset.randomIndex',randomIndex)
                        // console.log('videoAsset.videoId',index)
                        $('.video-list').removeClass('videodance-activeclass');
                        $(".video-list[list-index='" + index + "']").addClass('videodance-activeclass');

                        if ($(".video-list[list-index='" + index + "']").position().top > 180) {

                            // Calculate the new scroll position relative to the current scroll position
                            var scrollToPosition =
                                $(".video-list[list-index='" + index + "']").position().top +
                                $(".video-list-main").scrollTop() - $(".video-list-main").height() / 2 + 80;
                        
                            console.log('manish work', scrollToPosition);
                        
                            // Animate the scroll within the parent div
                            $(".video-list-main").animate({
                                scrollTop: scrollToPosition
                            }, 2000);
                        }

                    }, 500);
                }
                var get_video_list_ai = getVideoList.data[index].videos;
                for( q_ai in get_video_list_ai ){
                    var innerget_video_list_ai = get_video_list_ai[q_ai];
                    for( innerq_ai in innerget_video_list_ai ){
                        styleAIData.push(innerget_video_list_ai[innerq_ai].style);
                        var setstylevar = innerget_video_list_ai[innerq_ai].style.id;
                        if( setstylevar == '' || setstylevar == undefined ){
                            setstylevar = 0;
                        }
                        var setnoOfHeads = parseInt(innerget_video_list_ai[innerq_ai].noOfHeads);
                        var setstyletype = parseInt(setstylevar);
                        if( (setnoOfHeads == headCount) && (setstyletype == index_style) ){
                            clearInterval(loadList);
                            var arrJsonVideo = innerget_video_list_ai;
                            for (key in arrJsonVideo) {
                                arrJsonVideo[key].videoId = index;
                                if (arrJsonVideo[key].videoId == videoAsset.videoId) {
                                    videoAsset.videoIndex = key;
                                    
                                    videoAsset.videoURLLowRes = arrJsonVideo[videoAsset.videoIndex].videoURLLowRes;
                                    arrJsonVideoGlobal = arrJsonVideo[videoAsset.videoIndex];
                                    videoAsset.videoURLHighRes = arrJsonVideo[videoAsset.videoIndex].videoURL;
                                    videoAsset.videoURL = hasLowRes ? arrJsonVideo[videoAsset.videoIndex].videoURLLowRes :
                                        arrJsonVideo[
                                            videoAsset.videoIndex].videoURL;
                                    
                                    videoAsset.trackingXML = arrJsonVideo[videoAsset.videoIndex].trackingXml;
                                    videoAsset.offset = arrJsonVideo[videoAsset.videoIndex].offset;
                                    videoAsset.headScale = arrJsonVideo[videoAsset.videoIndex].scale;
                                    
                                    videoAsset.headImages = headImages;

                                    if (arrJsonVideo[videoAsset.videoIndex].poster_image == "" || arrJsonVideo[videoAsset.videoIndex].poster_image == null) {
                                        endImgLoaded = 1;
                                    }
                                    else{
                                        endImgLoaded = 1;
                                    }

                                    videoAsset.hatImages = [];
                                    if (arrJsonVideo[videoAsset.videoIndex].hatUrl1.length > 0) {
                                        var hatImg = arrJsonVideo[videoAsset.videoIndex].hatUrl1;
                                        hatImg = hatImg.replace("http://", "https://");
                                        videoAsset.hatImages.push(hatImg);

                                    }

                                    if (arrJsonVideo[videoAsset.videoIndex].hatUrl2.length > 0) {
                                        var hatImg = arrJsonVideo[videoAsset.videoIndex].hatUrl2;
                                        hatImg = hatImg.replace("http://", "https://");
                                        videoAsset.hatImages.push(hatImg);
                                    }

                                    var videoURLLowRes = videoAsset.videoURLLowRes;
                                    var videoURLHighRes = videoAsset.videoURLHighRes;
                                    var videoURL = videoAsset.videoURL;
                                    var trackingXML = videoAsset.trackingXML;
                                    videoAsset.videoURLLowRes = videoURLLowRes.replace("http://", "https://");
                                    videoAsset.videoURLHighRes = videoURLHighRes.replace("http://", "https://");
                                    videoAsset.videoURL = videoURL.replace("http://", "https://");
                                    videoAsset.trackingXML = trackingXML.replace("http://", "https://");
                                }
                            }
                            // console.log('videoAsset',videoAsset)
                            startVideo();
                        }
                    }
                }
                if( changeI == 0 ){
                    styleAIData = [...new Map(styleAIData.map(entry => [JSON.stringify(entry), entry])).values()];
                    var html_append_style = '';
                    var errorImg = base_url+'/images/square_ai_img.png';
                    $.each(styleAIData, (ind_s, val_s) => {
                        html_append_style += '<div class="single-section-inline"><div class="img-brd1"><div class="img-brd2"><div class="img-brd3"><img src="'+val_s.thumb+'" onerror="this.src=`'+errorImg+'`;" data-style="'+val_s.id+'" /></div></div></div><p>'+val_s.name+'</p>';
                        if( (index_style != 0) && (firstload == 1) ){
                            if( val_s.id == checkAIIndex ){
                                var text_ai_select = val_s.name.substring(0, 13);
                                html_append_style += '<img src="' + base_url + '/images/btn_check.png" class="selected-elf-img" />';
                                $('.ai-inner-image .inner-btn-text .inner-section-img').attr('src',val_s.thumb);
                                $('.ai-inner-image .inner-btn-text p').html(text_ai_select);
                            }
                        }else{
                            if( ind_s == checkAIIndex ){
                                var text_ai_select = val_s.name.substring(0, 13);
                                html_append_style += '<img src="' + base_url + '/images/btn_check.png" class="selected-elf-img" />';
                                $('.ai-inner-image .inner-btn-text .inner-section-img').attr('src',val_s.thumb);
                                $('.ai-inner-image .inner-btn-text p').html(text_ai_select);
                            }
                        }
                        html_append_style += '</div>';
                    });
                    $('.model-section-inline').html(html_append_style);
                }
            }
        }, 100);
    }
}

function changeVideo(index) {
    // console.log('changeVideo',index)
    if (api != null && IsPlayeInterrupted == 0) 
    {

        api.closeVideo();
        endImgLoaded = 0;
        housepartyactive = 0;
        isVideocompleted = 0; 
        // var DivId = 'video-list' + (parseInt(index) + 1)
        // document.getElementById(DivId).classList.add("videodance-activeclass");
        // endImageThumb = '';
        //localStorage.setItem('thumbnail', '')
        // document.getElementById("VideoDiv").style.display = 'none';
        $('#VideoDiv').css('display', 'none');
        $('.download-photo').css('display', 'none');
        $('#sharepopeventstop,#downloadPopEventstop,#getnftModal,#elfai-logo-main').addClass('sharingdisable');

        if (document.getElementById("video-frame"))
            document.getElementById("video-frame").style.backgroundColor = '#000';
        if (document.getElementById("video-loading"))
            document.getElementById("video-loading").style.verticalAlign = 'middle';
        if (document.getElementById("video-frame"))
            document.getElementById("video-frame").style.display = 'table';
        if (document.getElementById("video-loading"))
            document.getElementById("video-loading").style.display = 'table-cell';

        //document.getElementById("pauseOrPlay").src = "../images/play.png";
        videoAsset.videoId = index;
        var headCount = headImages.length;
        var loadList = setInterval(function () {
            if (Object.keys(getVideoList).length !== 0) {
                clearInterval(loadList);
                var arrJsonVideo = getVideoList.data[index].videos[headCount - 1];
                for (key in arrJsonVideo) {
                    arrJsonVideo[key].videoId = index;
                    if (arrJsonVideo[key].videoId == videoAsset.videoId) {
                        videoAsset.videoIndex = key;
                        //Below code for low resoulution check.
                        videoAsset.videoURLLowRes = arrJsonVideo[videoAsset.videoIndex].videoURLLowRes;
                        arrJsonVideoGlobal = arrJsonVideo[videoAsset.videoIndex];
                        videoAsset.videoURLHighRes = arrJsonVideo[videoAsset.videoIndex].videoURL;
                        videoAsset.videoURL = hasLowRes ? arrJsonVideo[videoAsset.videoIndex].videoURLLowRes :
                            arrJsonVideo[
                                videoAsset.videoIndex].videoURL;
                        //videoAsset.videoURL		= arrJsonVideo[videoAsset.videoIndex].videoURL;
                        videoAsset.trackingXML = arrJsonVideo[videoAsset.videoIndex].trackingXml;
                        videoAsset.offset = arrJsonVideo[videoAsset.videoIndex].offset;
                        videoAsset.headScale = arrJsonVideo[videoAsset.videoIndex].scale;
                        //videoAsset.scale	= arrJsonVideo[videoAsset.videoIndex].scale;
                        videoAsset.headImages = headImages;
                        if (arrJsonVideo[videoAsset.videoIndex].poster_image == "" || arrJsonVideo[videoAsset.videoIndex].poster_image == null) {
                            endImgLoaded = 1;
                        }
                        else{
                            endImgLoaded = 1;
                            /* var endCanvas = document.createElement('canvas');
                            var endCtx = endCanvas.getContext('2d');
                            var endImg = new Image();
                            endImg.crossOrigin="anonymous";
                            endImg.onload = function () {
                                endCanvas.width = endImg.width;
                                endCanvas.height = endImg.height;
                                endCtx.drawImage(endImg, 0, 0);
                                endImgLoaded = 1;
                                if(document.getElementById('endImg') !== null)
                                {
                                    document.getElementById('endImg').src = endCanvas.toDataURL();
                                }
                            }
                            endImg.src = arrJsonVideo[videoAsset.videoIndex].poster_image; */
                      }
                        videoAsset.hatImages = [];
                        if (arrJsonVideo[videoAsset.videoIndex].hatUrl1.length > 0) {
                            var hatImg = arrJsonVideo[videoAsset.videoIndex].hatUrl1;
                            hatImg = hatImg.replace("http://", "https://");
                            //videoAsset.hatImages.push(arrJsonVideo[videoAsset.videoIndex].hatUrl1);
                            videoAsset.hatImages.push(hatImg);

                        }

                        if (arrJsonVideo[videoAsset.videoIndex].hatUrl2.length > 0) {
                            var hatImg = arrJsonVideo[videoAsset.videoIndex].hatUrl2;
                            hatImg = hatImg.replace("http://", "https://");
                            videoAsset.hatImages.push(hatImg);
                            //videoAsset.hatImages.push(arrJsonVideo[videoAsset.videoIndex].hatUrl2);
                        }

                        var videoURLLowRes = videoAsset.videoURLLowRes;
                        var videoURLHighRes = videoAsset.videoURLHighRes;
                        var videoURL = videoAsset.videoURL;
                        var trackingXML = videoAsset.trackingXML;
                        videoAsset.videoURLLowRes = videoURLLowRes.replace("http://", "https://");
                        videoAsset.videoURLHighRes = videoURLHighRes.replace("http://", "https://");
                        videoAsset.videoURL = videoURL.replace("http://", "https://");
                        videoAsset.trackingXML = trackingXML.replace("http://", "https://");
                    }
                }
                startVideo();
            }
        }, 100);
    }
}



function showMask() {
    videoAsset.maskShowing = api.debug_showMask(!videoAsset.maskShowing);
}

function editVideo(videoId, headImages, bgImages, greetings, mouthTransY, setAutoPlayFlag) {
    if (isAppExpired)
        return showExpired();
    setAutoPlay = setAutoPlayFlag || false;

    function elf_ajaxCall(url, params, method, callback, errorcallback) {
        jQuery.ajax({
            type: method,
            enctype: 'multipart/form-data',
            url: url,
            data: params,
            success: function (result) {
                callback(result);
            },
            error: function (e) {
                if (window.console) { console.log("error", e); }
                errorcallback(e);
            }
        });
    }
    closeVideo();
    var url = "//" + base_url + "/api/api.php?action=getVideos_v2&app_id=" + door_id;
    elf_ajaxCall(url, '', 'get', function (response) {
        if (response) {
            var getVideoList = response;
            arrJsonVideo = getVideoList.data[videoId].videos[headImages.length - 1]
            videoAsset.videoId = videoId;
            videoAsset.headImages = window.headImages = headImages;
            videoAsset.noOfHeads = headImages.length;
            videoAsset.mouthTransY = mouthTransY;
            for (key in arrJsonVideo) {

                if (arrJsonVideo[key].videoIndex == videoAsset.videoId && arrJsonVideo[key].noOfHeads ==
                    videoAsset.noOfHeads) {
                    videoAsset.videoIndex = key;
                    videoAsset.videoURLLowRes = arrJsonVideo[videoAsset.videoIndex].videoURLLowRes;
                    videoAsset.videoURL = videoAsset.videoURLHighRes = arrJsonVideo[videoAsset.videoIndex]
                        .videoURL;
                    //videoAsset.videoURL		= hasLowRes ? arrJsonVideo[videoAsset.videoIndex].videoURLLowRes : arrJsonVideo[videoAsset.videoIndex].videoURL;
                    //videoAsset.videoURL		= arrJsonVideo[videoAsset.videoIndex].videoURL;
                    videoAsset.trackingXML = arrJsonVideo[videoAsset.videoIndex].trackingXml;
                    videoAsset.offset = arrJsonVideo[videoAsset.videoIndex].offset;
                    videoAsset.scale = arrJsonVideo[videoAsset.videoIndex].scale;
                    videoAsset.hatImages = [];

                    if (arrJsonVideo[videoAsset.videoIndex].hatUrl1.length > 0) {
                        videoAsset.hatImages.push(arrJsonVideo[videoAsset.videoIndex].hatUrl1);
                    }

                    if (arrJsonVideo[videoAsset.videoIndex].hatUrl2.length > 0) {
                        videoAsset.hatImages.push(arrJsonVideo[videoAsset.videoIndex].hatUrl2);
                    }
                }
            }

            videoAsset.bgImages = window.bgImages = bgImages;
            videoAsset.greetings = window.greetings = greetings;
            videoAsset.offset = arrJsonVideo[videoAsset.videoIndex].offset;
            videoAsset.headScale = arrJsonVideo[videoAsset.videoIndex].scale;
            videoAsset.headTransY = arrJsonVideo[videoAsset.videoIndex].y;

            //InitAndSpeedDetect(function (res) {
                init();
                setTimeout(function () {
                    startVideo();
                }, 1000);
                videoClickingEvent();
            //});
        }
    });
}