// starting date=13 February 2025
var Utils={};
var EnglishReader={};
Utils.Path='';
Utils.mobileDeviceFlag=false;
EnglishReader.replayFlag=false;
EnglishReader.levelTextArr=[/*"Level 1 - Words",*/"Level 1 - Sentences","Level 2 - Words","Level 2 - Sentences","Level 3 - Words","Level 3 - Sentences","Mixed Sentences","Mixed Paragraphs"];
EnglishReader.L1Arr=[/*"L1",*/"L1","L2","L2","L3","L3","L3","L3"];
EnglishReader.moduleArr=["Module 1", "Module 2"];
ctr=1;
$(document).ready(function () {
	if ((navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) && !(window.location.href.includes('http')))
		Utils.mobileDeviceFlag=true;
	document.body.style.backgroundColor = "white";
	$("#StoryPage").hide();
	setTimeout(function () {
	EnglishReader.init();	
	}, 100);
});
EnglishReader.init=function()
{
	$("#StoryPage").hide();
	$("#levelPage").hide();
	$("#modulePage").show();
	EnglishReader.initializeVariables();
	EnglishReader.setAllImages();
	EnglishReader.createModuleDivs();
	EnglishReader.addDiv();
}
EnglishReader.initializeVariables=function(){
	EnglishReader.level=0; 
	EnglishReader.textCounter=0;
	EnglishReader.playFlag=true;
}
EnglishReader.setAllImages=function(){
	// document.getElementById("playPause").src= Utils.Path + "images/skin/play.png";
	// document.getElementById("back").src= Utils.Path + "images/skin/Pre.png";
	 document.getElementById("logo").src= Utils.Path + "images/skin/logo.png";
	// document.getElementById("level1").innerHTML=EnglishReader.hardcodedData.level1;
	// document.getElementById("level2").innerHTML=EnglishReader.hardcodedData.level2;
	document.getElementById("buttonDiv").style.backgroundColor="#fdbc40"
	document.getElementById("msg1Span").innerHTML=EnglishReader.hardcodedData.msg1Text;
	document.getElementById("msg3Span").innerHTML=EnglishReader.hardcodedData.msg3Text;
	var screenWidth= window.innerWidth;
	console.log(screenWidth);
	// if(screenWidth<=576)
	document.getElementById("header").style.backgroundImage = "url(" + Utils.Path + "images/skin/ENGLISH_READING_header.png" + ")";
	// else if(screenWidth<=768 && screenWidth>576)
	// 	document.getElementById("header").style.backgroundImage = "url(" + Utils.Path + "images/skin/top_band_768_english.png" + ")";
	// else if(screenWidth>=992)
	// 	document.getElementById("header").style.backgroundImage = "url(" + Utils.Path + "images/skin/top_band_1440x250_english.png" + ")";

}

EnglishReader.createModuleDivs=function(){
	for(i=0;i<2;i++){
		let newDiv = document.createElement("div");
		newDiv.classList.add("custom-box");
		newDiv.classList.add("card");
		newDiv.setAttribute("id","module"+(i+1));
		newDiv.setAttribute("module",i);
		newDiv.innerText = EnglishReader.moduleArr[i];

		// if(i<2)
			newDiv.setAttribute("onclick","EnglishReader.selectModule(this.id)");
		// Create top-right text
		// let topRight = document.createElement("span");
		// topRight.classList.add("top-right-text");
		// topRight.innerText = EnglishReader.L1Arr[i];

		// Create bottom-left text
		// let bottomLeft = document.createElement("span");
		// bottomLeft.classList.add("bottom-left-text");
		// bottomLeft.innerText = EnglishReader.levelTextArr[i];

		// Append texts to the new div
		// newDiv.appendChild(topRight);
		// newDiv.appendChild(bottomLeft);

		// Append new div to the container
		document.getElementById("modulePage").appendChild(newDiv);
	}

}

EnglishReader.addDiv=function() {
	for(i=0;i<EnglishReader.levelTextArr.length;i++){
		let newDiv = document.createElement("div");
		newDiv.classList.add("custom-box");
		newDiv.setAttribute("id","level"+(i+1));
		newDiv.setAttribute("data",i);
		// if(i<2)
			newDiv.setAttribute("onclick","EnglishReader.selectLevel(this.id)");
		// Create top-right text
		let topRight = document.createElement("span");
		topRight.classList.add("top-right-text");
		topRight.innerText = EnglishReader.L1Arr[i];

		// Create bottom-left text
		let bottomLeft = document.createElement("span");
		bottomLeft.classList.add("bottom-left-text");
		bottomLeft.innerText = EnglishReader.levelTextArr[i];

		// Append texts to the new div
		newDiv.appendChild(topRight);
		newDiv.appendChild(bottomLeft);

		// Append new div to the container
		document.getElementById("levelPage").appendChild(newDiv);
	}
	
}

EnglishReader.selectModule=function(ele){
	module=document.getElementById(ele).getAttribute("module");
	console.log(module)
	if(module==0){
		$("#StoryPage").hide();
		$("#levelPage").show();
		$("#modulePage").hide();
	}
	addBreadcrumb(ele);
}
EnglishReader.selectLevel=function(ele){
	$("#StoryPage").show();
	$("#levelPage").hide();
	$("#modulePage").hide();

	$("#mainDiv").css('height', '70%');
	EnglishReader.level=document.getElementById(ele).getAttribute("data");
	EnglishReader.showStory();
	addBreadcrumb(ele);
}

EnglishReader.showStory=function(){
	
	var screenWidth= window.innerWidth;
	if(EnglishReader.level==1 || EnglishReader.level==3){
		if(screenWidth<=576)
			$("#textDiv").css("font-size","20vw");
		else if(screenWidth<=768 && screenWidth>576)
			$("#textDiv").css("font-size","15vw");
		else if(screenWidth>576 && screenWidth<992)
			$("#textDiv").css("font-size","13vw");
		else if(screenWidth>=992)
			$("#textDiv").css("font-size","10vw");
	}
	else{
		if(screenWidth<=576)
			$("#textDiv").css("font-size","8vw");
		else if(screenWidth<=768 && screenWidth>576)
			$("#textDiv").css("font-size","7vw");
		else if(screenWidth>576 && screenWidth<992)
			$("#textDiv").css("font-size","6vw");
		else if(screenWidth>=992)
			$("#textDiv").css("font-size","5vw");
	}
	rnoArr=[]
	EnglishReader.textArr=[]
	for(i=0;i<10;i++){
		rno=Math.floor(Math.random()*(EnglishReader.jsonData[EnglishReader.level].wordData).length)
		while(rnoArr.includes(rno))
			rno=Math.floor(Math.random()*(EnglishReader.jsonData[EnglishReader.level].wordData).length)
		EnglishReader.textArr.push(EnglishReader.jsonData[EnglishReader.level].wordData[rno])
		rnoArr.push(rno)
	}
	// EnglishReader.textArr=EnglishReader.jsonData[EnglishReader.level].wordData;
	console.log(EnglishReader.textArr)
	document.getElementById("textDiv").innerHTML=EnglishReader.textArr[EnglishReader.textCounter].text;
	$("#backDiv").css("opacity","0.5");
	$("#backDiv").css("pointer-events","none");
	// EnglishReader.playText();
	var ele=document.getElementById("playPauseDiv");
	const icon = ele.querySelector('i');
	icon.classList.add("fa-regular", "fa-circle-play");

	if(EnglishReader.replayFlag){
		EnglishReader.replayFlag=false;
		icon.classList.remove("fa-solid", "fa-rotate-left");
		icon.classList.add("fa-regular", "fa-circle-play");
	}
}

EnglishReader.playText=function(){
	if(EnglishReader.replayFlag){
		EnglishReader.replayFlag=false;
		EnglishReader.textCounter=0;
		var ele=document.getElementById("playPauseDiv");
		const icon = ele.querySelector('i');
		icon.classList.remove("fa-solid", "fa-rotate-left");
		icon.classList.add("fa-regular", "fa-circle-play");
		rnoArr=[]
		EnglishReader.textArr=[]
		for(i=0;i<10;i++){
			rno=Math.floor(Math.random()*(EnglishReader.jsonData[EnglishReader.level].wordData).length)
			while(rnoArr.includes(rno))
				rno=Math.floor(Math.random()*(EnglishReader.jsonData[EnglishReader.level].wordData).length)
			EnglishReader.textArr.push(EnglishReader.jsonData[EnglishReader.level].wordData[rno])
			rnoArr.push(rno)
		}
	// EnglishReader.textArr=EnglishReader.jsonData[EnglishReader.level].wordData;
	document.getElementById("textDiv").innerHTML=EnglishReader.textArr[EnglishReader.textCounter].text;
	
		var sound=Utils.Path + "sounds/"+EnglishReader.textArr[EnglishReader.textCounter].sound;
		$("#textDiv").show();
		$("#msgDiv").hide();
		$("#nextDiv").css("opacity","1");
		$("#nextDiv").css("pointer-events","auto");
	}
	else{
		clearTimeout(EnglishReader.pauseTimer);
		EnglishReader.pauseTimer=null
		var sound=Utils.Path + "sounds/"+EnglishReader.textArr[EnglishReader.textCounter].sound;
		if(EnglishReader.playFlag){
			EnglishReader.playFlag=false;
			// document.getElementById("playPause").src= Utils.Path + "images/skin/pause.png";
			var ele=document.getElementById("playPauseDiv");
			const icon = ele.querySelector('i');
			icon.classList.remove("fa-regular", "fa-circle-play");
			icon.classList.add("fa-regular", "fa-circle-pause");
			$("#textDiv").css("color","#fdbc40");
			EnglishReader.loadmetaDataFlag=true;
			EnglishReader.getDuration(sound)
		}
		else{
			EnglishReader.playFlag=true
			document.getElementById("playSound").pause()
			// document.getElementById("playPause").src= Utils.Path + "images/skin/play.png";
			var element=document.getElementById("playPauseDiv")
			var  icon = element.querySelector('i');
			icon.classList.remove("fa-regular", "fa-circle-pause");
			icon.classList.add("fa-regular", "fa-circle-play");
			$("#textDiv").css("color","black");
		}
	}
}
EnglishReader.getDuration = function (sound) {
	var duration = 0;
	$('#playSound').prop('src', sound);
	document.getElementById("playSound").play()
	if (EnglishReader.loadmetaDataFlag) {
		$('#playSound').on("loadedmetadata", function () {
			EnglishReader.loadmetaDataFlag = false;
			$('#playSound').unbind("loadedmetadata");
			duration = $('#playSound').prop('duration');
			EnglishReader.pauseText(duration);
		}
		);
	}
	else
		$('#playSound').unbind("loadedmetadata");
}

EnglishReader.pauseText=function(duration){
	EnglishReader.pauseTimer=setTimeout(function(){
		EnglishReader.playFlag=true
	document.getElementById("playSound").pause()
	// document.getElementById("playPause").src= Utils.Path + "images/skin/play.png";
	ele=document.getElementById("playPauseDiv")
	var  icon = ele.querySelector('i');
	icon.classList.remove("fa-regular", "fa-circle-pause");
	icon.classList.add("fa-regular", "fa-circle-play");
	$("#textDiv").css("color","black");
	},1000*duration);
	
}

EnglishReader.nextText=function(){
	document.getElementById("playSound").pause()
	EnglishReader.playFlag=true
	// document.getElementById("playPause").src= Utils.Path + "images/skin/play.png";
	var element=document.getElementById("playPauseDiv")
	var  icon = element.querySelector('i');
	icon.classList.remove("fa-regular", "fa-circle-pause");
	icon.classList.add("fa-regular", "fa-circle-play");
	$("#textDiv").css("color","black");
	clearTimeout(EnglishReader.pauseTimer);
	EnglishReader.pauseTimer=null
	EnglishReader.textCounter++;
	if(EnglishReader.textCounter==((EnglishReader.textArr.length))){
		$("#textDiv").hide();
		$("#msgDiv").show();
		$("#nextDiv").css("opacity","0.5");
		$("#nextDiv").css("pointer-events","none");
		$("#backDiv").css("opacity","0.5");
		$("#backDiv").css("pointer-events","none");
		ele=document.getElementById("playPauseDiv")
		var  icon = ele.querySelector('i');
		icon.classList.remove("fa-regular", "fa-circle-play");
		icon.classList.add("fa-solid", "fa-rotate-left");
		EnglishReader.replayFlag=true;
		// EnglishReader.playText();
	}
	else{
		document.getElementById("textDiv").innerHTML=EnglishReader.textArr[EnglishReader.textCounter].text;
		$("#backDiv").css("opacity","1");
		$("#backDiv").css("pointer-events","auto");
		// EnglishReader.playText();
	}
}

EnglishReader.prevText=function(){
	document.getElementById("playSound").pause()
	EnglishReader.playFlag=true
	// document.getElementById("playPause").src= Utils.Path + "images/skin/play.png";
	ele=document.getElementById("playPauseDiv")
	var  icon = ele.querySelector('i');
	icon.classList.remove("fa-regular", "fa-circle-pause");
	icon.classList.add("fa-regular", "fa-circle-play");
	$("#textDiv").css("color","black");
	clearTimeout(EnglishReader.pauseTimer);
	EnglishReader.pauseTimer=null
	EnglishReader.textCounter--;
	if(EnglishReader.textCounter==0){
		$("#backDiv").css("opacity","0.5");
		$("#backDiv").css("pointer-events","none");
	}
	document.getElementById("textDiv").innerHTML=EnglishReader.textArr[EnglishReader.textCounter].text;
	$("#nextDiv").css("opacity","1");
	$("#nextDiv").css("pointer-events","auto");
	// EnglishReader.playText();
}



EnglishReader.callHome=function(){
	// document.getElementById("playSound").pause();
	// $("#StoryPage").hide();
	// $("#levelPage").hide();
	// $("#modulePage").show();
	// EnglishReader.initializeVariables()
	// $("#mainDiv").css('height', '100%');
	// $("#nextDiv").css("opacity","1");
	// $("#nextDiv").css("pointer-events","auto");
	// EnglishReader.textCounter=0;
	// $("#textDiv").show();
	// $("#msgDiv").hide();
	location.reload();
}

const breadcrumb = document.getElementById("breadcrumbDiv");

function showPage(id) {
	document.getElementById("playSound").pause()
	text=document.getElementById(id).innerHTML;
	if(text=="Home"){
		$("#StoryPage").hide();
		$("#levelPage").hide();
		$("#modulePage").show();
		// location.reload();
	}
	else if(EnglishReader.moduleArr.includes(text)){
		$("#StoryPage").hide();
		$("#levelPage").show();
		$("#modulePage").hide();
	}
	else if(EnglishReader.levelTextArr.includes(text)){
		$("#StoryPage").show();
		$("#levelPage").hide();
		$("#modulePage").hide();
	}
}

function addBreadcrumb(ele) {
  var crumb = document.createElement("span");
  crumb.className = "crumb";
  crumb.setAttribute("id","crumb"+ctr);
  ctr++;
  if(ele=="module1")
	var text= document.getElementById(ele).innerHTML;
  else
  	var text= document.getElementById(ele).children[1].innerHTML;
  crumb.textContent = text;
  crumb.setAttribute("onclick","showPage(this.id)");
  document.getElementById("breadcrumbDiv").appendChild(crumb);
}

document.getElementById("breadcrumbDiv").addEventListener("click", function (e) {
    if (e.target.classList.contains("crumb")) {
        const pageId = e.target.getAttribute("data-page");

        // Remove all breadcrumb items after the clicked one
        let next = e.target.nextElementSibling;
        while (next) {
            next.remove();
            next = e.target.nextElementSibling;
        }

        // Hide all divs and show the selected one
        // document.querySelectorAll(".page").forEach(page => {
        //     page.style.display = (page.id === pageId) ? "block" : "none";
        // });
    }
});

