var unityInstance ;
var hidden = false;
var loaded = false;
var uniLoaded = false;
var mdivid = 1;
var waitingText = "ضع المؤشر فوق النص لقراءته";
var translating = "جاري العمل على الترجمة";
var BuHamadInterpreter = "مترجم لغة الإشارة القطرية -بو حمد-";
var noTranslationFound = "ستتم إضافة المصطلح لاحقا";

jQuery(document).ready(function ($) {
    ln = document.documentElement.lang;
    if(ln == "en"){
        waitingText = "Hover text for translation";
        translating = "Translating ...";
        BuHamadInterpreter = "BuHamad -Qatari SL interpreter-";
        noTranslationFound = "The translation will be added soon.";
    }
});

var language = "ar";

avtrMode = "";


var renderType = "unity";


function MadaAVTRsetColors(backgroundColor=0,borderColor=0){
    jQuery(document).ready(function ($) {
        $(".egosltext").css("background", backgroundColor);
        $(".btn-floating").css("background-color", backgroundColor);
        $(".egoslrange").css("background-color", backgroundColor);
    
        $(".egosltext").css("border-color", borderColor);
        $(".btn-floating").css("border-color", borderColor);
        $(".egoslrange").css("border-color", borderColor);
    });
}

function MadaAVTRsetPosition(valx=0,valy=0){
    jQuery(document).ready(function ($) {
        ln = document.documentElement.lang;
        pos ="left";
        if(ln == "en")pos = "right";
        $("#mdContainer").css(pos, valx);
        $("#mdContainer").css("bottom", valy);
    });
}


function setAvtrMode(md){
    avtrMode = md;
}

function getMobileOperatingSystem() {

    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection including newer iPads which identify as Mac
    if (/iPad|iPhone|iPod/.test(userAgent) || 
        (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) {
        return "iOS";
    }

    return "unknown";


/*
    var userAgent = navigator.userAgent || navigator.vendor || window.opera;

    // Windows Phone must come first because its UA also contains "Android"
    if (/windows phone/i.test(userAgent)) {
        return "Windows Phone";
    }

    if (/android/i.test(userAgent)) {
        return "Android";
    }

    // iOS detection from: http://stackoverflow.com/a/9039885/177710
    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
        return "iOS";
    }

    return "unknown";
    
    */
}

const os = getMobileOperatingSystem();
function videoFormat(){
    if(os=="iOS")return "mp4";
    else return "webm";
}
var idle = "idle_A."+videoFormat();

function setRenderType(rtype){
    renderType = rtype
}

function setIdle(str){
    idle = str;
}

function setLanguage(lang = "ar"){
    language = lang;
}

function setZoom(zm){
    jQuery(document).ready(function ($) {
        $('#mdContainer').animate({ 'zoom': zm}, 400);
    });
}

    function isTextOnlySpan(node) {
        if (node.nodeType !== Node.ELEMENT_NODE) return false;
        if (node.tagName.toLowerCase() !== 'span') return false;
        // Check if all child nodes are text nodes
        for (let child of node.childNodes) {
            if (child.nodeType !== Node.TEXT_NODE) {
                return false;
            }
        }
        return true;
    }

    /**
     * Merges a list of adjacent <span> elements into a single <span>.
     * @param {Element[]} spans - Array of <span> elements to merge.
     */
    function mergeSpans(spans) {
        if (spans.length < 2) return; // No need to merge

        const firstSpan = spans[0];
        const parent = firstSpan.parentNode;
        if (!parent) return;

        // Determine the reference node for insertion (the next sibling of the last span)
        const lastSpan = spans[spans.length - 1];
        const referenceNode = lastSpan.nextSibling;

        // Create a new span element
        const newSpan = document.createElement('span');

        // Optionally, preserve attributes from the first span
        for (let attr of firstSpan.attributes) {
            newSpan.setAttribute(attr.name, attr.value);
        }

        // Concatenate text content from all spans
        let combinedText = '';
        spans.forEach(span => {
            combinedText += span.textContent;
            // Remove the old span from the DOM
            parent.removeChild(span);
        });

        // Set the combined text to the new span
        newSpan.textContent = combinedText;

        // Insert the new span into the DOM at the reference position
        parent.insertBefore(newSpan, referenceNode);
    }

    /**
     * Recursively traverses the DOM and merges adjacent text-only spans.
     * @param {Element} parent - The parent element to process.
     */
    function traverseAndMerge(parent) {
        if (!parent || !parent.childNodes) return;

        let spansToMerge = [];

        // Convert childNodes to an array to safely modify the DOM while iterating
        const children = Array.from(parent.childNodes);

        children.forEach(child => {
            if (isTextOnlySpan(child)) {
                spansToMerge.push(child);
            } else {
                // If current child is not a text-only span, check if there's a sequence to merge
                if (spansToMerge.length > 1) {
                    mergeSpans(spansToMerge);
                }
                // Reset the array
                spansToMerge = [];
                // Continue traversing recursively
                traverseAndMerge(child);
            }
        });

        // After loop ends, check if there's a remaining sequence to merge
        if (spansToMerge.length > 1) {
            mergeSpans(spansToMerge);
        }
    }

function initMadaSLAVTR(){
    initMadaSLAVTR(borderColor=0, fillColor=0)
}

mergeSpan = true

function initMadaSLAVTR(borderColor=0, fillColor=0){
    
    jQuery(document).ready(function ($) {
        
        if(fillColor!=0){
            $(".egosltext").css("background", "red");
            $(".egosltext").css("background", "black");
            $(".btn-floating").css("background-color", "red");
        }

        
        /*
        $("body").append('<link rel="shortcut icon" href="https://jumlaapi.mada.org.qa/v2//TemplateData/favicon.ico">');
        $("body").append('<link rel="stylesheet" href="https://jumlaapi.mada.org.qa/v2//TemplateData/style.css">');
        
        $("body").append('<script src="https://jumlaapi.mada.org.qa/v2//TemplateData/UnityProgress.js"></script>');
        $("body").append('<script src="https://jumlaapi.mada.org.qa/v2//Build/UnityLoader.js"></script>');
        */
        if(renderType != "video"){
            $.getScript("https://jumlaapi.mada.org.qa/v2//TemplateData/UnityProgress.js", function(){
                $.getScript("https://jumlaapi.mada.org.qa/v2//Build/UnityLoader.js", function(){
                    
                });    
            });
        }

        $("body").append('<link rel="stylesheet" href="https://jumlaapi.mada.org.qa/v2//css/mada-slk.css">');
        
        if(renderType == "video"){
            //console.log("Hello video!");
            //$("body").append('<div  id="mdContainer" class="fixed-action-btn" style="bottom: 0px; "><div id="egobuhamadtext" class="egobuhamadtext" style="display:none;"  >'+BuHamadInterpreter+'</div><div  id="egoload" class="fixed-action-btn" style="bottom: 40px; "><a alt="show sign language interpreter" onclick="changeVisibility()" class="btn-floating btn-large waves-effect waves-light red"><img alt="Sign language avatar" class="icon-bar" src="https://jumlaapi.mada.org.qa/v2//TemplateData/sl.svg"></img></a></div><div  id="egops" class="fixed-action-btn" style="display:none; bottom: 100px;"><a onclick="playEGOSign(\'مرحبا٬ ضع المؤشر فوق النص لقراءته\')" class="btn-floating btn-large waves-effect waves-light red"><img class="icon-bar" alt="more information" src="https://jumlaapi.mada.org.qa/v2//TemplateData/info.svg"></img></a></div><div id="egozoom" class="egoslider-wrapper"><label id="egoZM" for="avtrrange" style="visibility: hidden;">Zoom bar</label><input  oninput="setSLwidth()" class="egoslrange" type="range" id="avtrrange" min="300" max="600" step="1" value="300" orient="vertical" /></div><div id="egosltext" class="egosltext" style="display:none;" >رجاء ضع المؤشر فوق النص لقراءته</div><div class="trbg" id="SLContainer" style="width: 310px; height: 350px; display:none;"><video muted autoPlay playsinline id="egoavtr" width="100%" height="100%" src="https://jumlaapi.mada.org.qa/v2//video/'+avtrMode+'/idle_A.'+videoFormat()+'" type="video/'+videoFormat()+'">Your browser does not support the video tag.</video></div></div>');
            $("body").append('<div  id="mdContainer" class="fixed-action-btn" style="bottom: 0px; "><div class="trbg" id="SLContainer" style="width: 310px; height: 350px; display:none;"><video muted autoPlay playsinline id="egoavtr" width="100%" height="100%" src="https://jumlaapi.mada.org.qa/v2//video/'+avtrMode+'/idle_A.'+videoFormat()+'" type="video/'+videoFormat()+'">Your browser does not support the video tag.</video></div><div id="egobuhamadtext" class="egobuhamadtext" style="display:none;"  >'+BuHamadInterpreter+'</div><div id="egosltext" class="egosltext" style="display:none;" >رجاء ضع المؤشر فوق النص لقراءته</div><div  id="egoload" class="fixed-action-btn" style="bottom: 40px; "><a alt="show sign language interpreter" onclick="changeVisibility()" class="btn-floating btn-large waves-effect waves-light red"><img alt="Sign language avatar" class="icon-bar" src="https://jumlaapi.mada.org.qa/v2//TemplateData/sl.svg"></img></a></div><div  id="egops" class="fixed-action-btn" style="display:none; bottom: 100px;"><a onclick="playEGOSign(\'مرحبا٬ ضع المؤشر فوق النص لقراءته\')" class="btn-floating btn-large waves-effect waves-light red"><img class="icon-bar" alt="more information" src="https://jumlaapi.mada.org.qa/v2//TemplateData/info.svg"></img></a></div><div id="egozoom" class="egoslider-wrapper"><label id="egoZM" for="avtrrange" style="visibility: hidden;">Zoom bar</label><input  oninput="setSLwidth()" class="egoslrange" type="range" id="avtrrange" min="300" max="600" step="1" value="300" orient="vertical" /></div></div>');
            mvideo = document.getElementById("egoavtr")
            mvideo.onended = function() {
                //console.log("Video ended")
                playVideoSign(idle+"|"+waitingText,type="url");
            };
        }else{
            $("body").append('<div  id="mdContainer" class="fixed-action-btn" style="bottom: 0px; "><div id="egobuhamadtext" class="egobuhamadtext" style="display:none;"  >'+BuHamadInterpreter+'</div><div  id="egoload" class="fixed-action-btn" style="bottom: 40px; "><a alt="show sign language interpreter" onclick="changeVisibility()" class="btn-floating btn-large waves-effect waves-light red"><img alt="Sign language avatar" class="icon-bar" src="https://jumlaapi.mada.org.qa/v2//TemplateData/sl.svg"></img></a></div><div  id="egops" class="fixed-action-btn" style="display:none; bottom: 100px;"><a onclick="playEGOSign(\'مرحبا٬ ضع المؤشر فوق النص لقراءته\')" class="btn-floating btn-large waves-effect waves-light red"><img class="icon-bar" alt="more information" src="https://jumlaapi.mada.org.qa/v2//TemplateData/info.svg"></img></a></div><div id="egozoom" class="egoslider-wrapper"><label id="egoZM" for="avtrrange" style="visibility: hidden;">Zoom bar</label><input  oninput="setSLwidth()" class="egoslrange" type="range" id="avtrrange" min="300" max="600" step="1" value="300" orient="vertical" /></div><div id="egosltext" class="egosltext" style="display:none;" >رجاء ضع المؤشر فوق النص لقراءته</div><div class="webgl-content" ><div class="trbg" id="SLContainer" style="width: 310px; height: 350px; display:none;"></div></div></div>');
        }
        if(os == "iOS"){
            $("#SLContainer").css( "zIndex", 996 );
            $("#SLContainer").css( "background-color", "#8a8a8a" );
        }
    });

}

function initMadaFramedSLAVTR(){
    jQuery(document).ready(function ($) {
        
        $("body").append('<link rel="shortcut icon" href="https://jumlaapi.mada.org.qa/v2//TemplateData/favicon.ico">');
        $("body").append('<link rel="stylesheet" href="https://jumlaapi.mada.org.qa/v2//TemplateData/style.css">');
        //$.getScript("https://jumlaapi.mada.org.qa/v2//TemplateData/UnityProgress.js", function(){
        //    $.getScript("https://jumlaapi.mada.org.qa/v2//Build/UnityLoader.js", function(){
        //        unityInstance = UnityLoader.instantiate("SLContainer", "https://jumlaapi.mada.org.qa/v2//Build/BuHamadPlayer.json", {onProgress: UnityProgress});
        //    });    
        //});
        $("body").append('<link rel="stylesheet" href="https://jumlaapi.mada.org.qa/v2//css/mada-slk.css">');
        if(renderType == "video"){
            //console.log("video")
            $("#madaAvtarDiv").append('<div  id="mdContainer" class="" style="width: 100%; height: 100%;"><div class="trbg" id="SLContainer" style="width: 100%; height: 100%; display:block;"><video muted autoPlay playsinline id="egoavtr" width="100%" height="100%" src="https://jumlaapi.mada.org.qa/v2/video/'+avtrMode+'/idle_A.'+videoFormat()+'" type="video/'+videoFormat()+'">Your browser does not support the video tag.</video><div id="egosltext" class="madaSLtext" style="display:block; visibility: hidden;" ></div></div></div>');
        mvideo = document.getElementById("egoavtr")
            mvideo.onended = function() {
                //console.log("Video ended")
                playVideoSign(idle+"|"+waitingText,type="url");
            };
        }else{
            $("#madaAvtarDiv").append('<div  id="mdContainer" class="" style="width: 100%; height: 100%;"><div id="egosltext" class="madaSLtext" style="display:block; visibility: hidden;" ></div><div class="webgl-content" style="width: 100%; height: 100%;"><div class="trbg" id="SLContainer" style="width: 100%; height: 100%; display:block;"></div></div></div>');
        }
    });
}

onEndSPlayEent = function(txt){

}

function SLUpdateText(txt){
    if(txt[0]=='_')txt =" - ";
    txt = txt.split("/#/")
    //console.log(txt.length)
    document.getElementById("egosltext").innerHTML = "<div class='egosltextAnim'>"+txt[0]+"</div>"; //cutString(txt[0],40);
    if(txt[0].length < 40){
        $(".egosltextAnim").css("animation", "none");
        $(".egosltextAnim").css("width", "100%");
    }else{
        //console.log("animation on")
        lns = "slideR";
        ln = document.documentElement.lang;
        if(ln == "en")lns = "slideL";
        $(".egosltextAnim").css("width", "max-content")
        $(".egosltextAnim").css("animation", lns + " 30s linear infinite");
    }
    //if(txt.length>1)console.log(txt[1])
    onEndSPlayEent(txt[0]);
}


/*
window.onload = function() {
    jQuery(document).ready(function ($) {
            // Your code here
        $('*').mouseover(
            function() {

                alert("ok");
            }
        );
    });
}
 */

function setSLwidth(){
    
    sz = document.getElementById("avtrrange").value;
    document.getElementById("SLContainer").style.width = sz+"px";
    document.getElementById("SLContainer").style.height = sz+"px";
    zm = sz/300;
    document.getElementById("egosltext").style.zoom = zm;
    document.getElementById("egobuhamadtext").style.zoom = zm;
    //document.getElementById("egobuhamadtext").style.bottom = (30+sz*0.0006)+"px"

    //document.getElementById("SLContainer").style.height = document.getElementById("avtrrange").value;
}

function cutString(s, n){
    var cut= s.indexOf(' ', n);
    if(cut== -1) return s;
    return s.substring(0, cut)
}


function initSelectablePage(){
    
    jQuery(document).ready(function ($) {
        $("*:not('script, style, noscript')").filter(function() {
            //if(this.textContent == undefined) return false;
            a = $(this).clone().children().remove().end().text().trim();
            ctntxt = a;
            tid = $(this).attr("id");
            if(a.length !== 0 && tid != "egosltext" && tid != "egobuhamadtext" && tid!="egoavtr" && tid!="egoZM"){
                //console.log(" -- txt = "+a);
                return true;
            }
            return false;
        }).wrapInner(function() {return "<div id='mdiv"+ (++mdivid) +"' class='egoselectedtag effect background-left' onmouseout='stopPlaySentence()' onmouseover='schedulePlaySign(\"" + $(this).text().replace(/(\r\n|\n|\r)/gm, "").replace(/[&\/\\#,+()$~%.'":*?<>{}]/g, '') + "\",\"mdiv"+ mdivid+"\")'></div>";});
    });
    
}

var scheduler = null;
var updateText = false;

function schedulePlaySign(str,elemnt){
    if(document.getElementById("egosltext").innerHTML == waitingText){
        updateText = true;
        SLUpdateText(translating)
    }
    scheduler = setTimeout(function(){playEGOSign(str)},1500);
}

function stopPlaySentence(){
    if(updateText)
    SLUpdateText(waitingText)
    clearTimeout(scheduler);
}


function loadAvatar(){
    //alert("ok");
    document.getElementById("SLContainer").style.display = "block";
    document.getElementById("egops").style.display = "block";
    //document.getElementById("egortav").style.display = "block";
    document.getElementById("egozoom").style.display = "block";
    document.getElementById("egosltext").style.display = "block";
    document.getElementById("egobuhamadtext").style.display = "block";
    //document.getElementById("egoload").style.display = "none";
    if(renderType != "video"){
        unityInstance = UnityLoader.instantiate("SLContainer", "https://jumlaapi.mada.org.qa/v2//Build/BuHamadPlayer.json", {onProgress: UnityProgress});
    }else{
        playVideoSign(idle+"|"+waitingText,type="url");
    }
    hidden = false;
    loaded = true;
    traverseAndMerge(document.body);
    initSelectablePage();
}

function changeVisibility(){
    if(!loaded)loadAvatar()
    else if(hidden)showAvatar();
    else hideAvatar();
}

function hideAvatar(){
    document.getElementById("SLContainer").style.display = "none";
    document.getElementById("egops").style.display = "none";
    //document.getElementById("egortav").style.display = "none";
    document.getElementById("egozoom").style.display = "none";
    document.getElementById("egosltext").style.display = "none";
    document.getElementById("egobuhamadtext").style.display = "none";
    //document.getElementById("egoload").style.display = "block";
    hidden = true;

}

function showAvatar(){
    
    document.getElementById("SLContainer").style.display = "block";
    document.getElementById("egops").style.display = "block";
    //document.getElementById("egortav").style.display = "block";
    document.getElementById("egozoom").style.display = "block";
    document.getElementById("egosltext").style.display = "block";
    document.getElementById("egobuhamadtext").style.display = "block";
    //document.getElementById("egoload").style.display = "none";
    hidden = false;
    if(renderType=="video")
    playVideoSign(idle+"|"+waitingText,type="url");
}


var firstplay = true;

function playMADASL(str){
    playEGOSign(str);
}

function playEGOSign(str){
    if(renderType!="video"){
        if(uniLoaded){
            updateText = false;
            if(firstplay){firstplay=false;initAvatar();}
            unityInstance.SendMessage("MvnActors","playEGOSign",str);
        }
    }else{
        updateText = false;
        if(firstplay){firstplay=false;}
        loadAndPlayVideoSign(str)
    }
}

function loadAndPlayVideoSign(str){
    //console.log("translating -> "+str)
    //console.log("language -> "+language)
    cctxt = str.trim()
    //console.log(cctxt)
    $.post("https://jumlaapi.mada.org.qa/v2/getVideoURL.php", { txt: cctxt, lang : language}, function(data) {
        playVideoSign(data)
    });
}

/*
function playVideoSign(str,type="text"){
    //alert("load")
    //console.log(str)
    if(str != "NO_ANIMATION_PATH_FOUND_ON_DATABASE" && str != "NO_SENTENCE_FOUND"){
        res = str.split("|");
        str = res[0];
        
        //console.log("received url : "+str+ " - " + encodeURI(str))
        video = document.getElementById("egoavtr")
        source = document.getElementById("segoavtr")
        fl = source.src.split("/")
        //console.log(fl.slice(-1)+"   "+str)
        
        if(os == "iOS")str = str.raplace("webm","mp4");

        if(fl.slice(-1)!=str){
            video.pause();
            if(type=="text")
            source.setAttribute('src', 'https://jumlaapi.mada.org.qa/v2/getVideo.php?scode='+encodeURI(avtrMode+"/"+str));
            else
            source.setAttribute('src', "https://jumlaapi.mada.org.qa/v2/video/"+avtrMode+"/"+str);
            source.setAttribute('type', 'video/'+videoFormat());
            video.load();
        }
        //alert(source.src);
        video.setAttribute('muted', "");
        video.setAttribute('autoPlay', "");
        video.setAttribute('playsinline', "");
        
        SLUpdateText(res[1])
        
        video.play();
    }else{
        SLUpdateText(noTranslationFound)
    }
}
*/

function playVideoSign(str,type="text-1"){
    //alert("load")
    //console.log(str)
    if(str != "NO_ANIMATION_PATH_FOUND_ON_DATABASE" && str != "NO_SENTENCE_FOUND"){
        res = str.split("|");
        str = res[0];
        
        egoavtr = document.querySelector('#egoavtr');
        fl = egoavtr.src.split("/")
        if(os == "iOS")str = str.replace("webm","mp4");
        if(fl.slice(-1)!=str){
            if(type=="text")
            egoavtr.src = 'https://jumlaapi.mada.org.qa/v2/getVideo.php?scode='+encodeURI(avtrMode+"/"+str);
            else
            egoavtr.src = "https://jumlaapi.mada.org.qa/v2/video/"+avtrMode+"/"+str;
        }
        SLUpdateText(res[1])
        egoavtr.play();
    }else{
        SLUpdateText(noTranslationFound)
    }
}

function rotateMADAAvatar(rx){
    rotateEGOAvatar(rx)
}

function rotateEGOAvatar(rx){
    if(uniLoaded){
        unityInstance.SendMessage("MvnActors","rotateEGOAvatar",rx);
    }
}

function initAvatar(){
    if(uniLoaded){
        unityInstance.SendMessage("MvnActors","setIpServer","jumlaslwp.mada.org.qa:80");
        //alert("169.254.129.4");
    }
}

function SLonSceneLoaded(){
    uniLoaded = true;
}