var FillBlank={};
FillBlank.count=0;
FillBlank.wordCnt=0;
FillBlank.loadmetaDataFlag=false;

//call on onload
FillBlank.init=function()
{	
	document.getElementById('outerDiv').style.display="none";
	document.getElementById('levelDiv').style.display="none";
	document.getElementById('footer').style.display="none";
	document.getElementById('level1').setAttribute('index',1);
	document.getElementById('level2').setAttribute('index',2);
	FillBlank.setAllImages();
}

//call to set All Iamges
FillBlank.setAllImages=function()
{
	document.body.style.backgroundImage="url("+FillBlank.coverPage.image+")";
	document.getElementById('home').src="image/Home.png";
	document.getElementById('logo').src="image/pratham.png";
	document.getElementById('play').src="image/Play.png";
	document.getElementById('next').src="image/Next.png";
	document.getElementById('level1').src="image/level1.png";
	document.getElementById('level2').src="image/level2.png";
}
//display images onclick of play
FillBlank.displayData=function()
{
	document.getElementById('coverPage').style.display="none";
	document.getElementById('home').style.visibility="visible";
	document.getElementById('letterDiv').style.visibility="hidden";
	document.getElementById('levelDiv').style.display="block";
	document.body.style.backgroundImage="url('image/BG.png')";
}
FillBlank.selectLevel=function(id)
{
	FillBlank.levelIndex=document.getElementById(id).getAttribute("index");
	document.getElementById('footer').style.display="block";
	if(FillBlank.levelIndex==1)
	{
		document.getElementById('outerDiv').style.display="none";
		document.getElementById('letterDiv').style.visibility="hidden";
		document.getElementById('levelDiv').style.display="none";
		document.getElementById('level1Div').style.display="block";
		FillBlank.createDivLev1();
		FillBlank.setDataLev1();
	}
	else
	{
		document.getElementById('outerDiv').style.display="block";
		document.getElementById('letterDiv').style.visibility="visible";
		document.getElementById('levelDiv').style.display="none";
		FillBlank.createDynamicDiv();
		FillBlank.getData();
	}
}

FillBlank.createDivLev1=function()
{
	var i,j,div,imgDiv,ansWordDiv,wordDiv;
	for(j=0;j<2;j++)
	{
		div=document.createElement('div');
		div.setAttribute("id","Div"+(j+1));
		if(j==1)
			div.setAttribute("class","outerDiv col-xs-4 col-sm-4 col-lg-4 col-md-4 col-xs-offset-2 col-sm-offset-2 col-lg-offset-2 col-md-offset-2");
		else
			div.setAttribute("class","outerDiv col-xs-6 col-sm-6 col-lg-6 col-md-6");
		
		level1Div.appendChild(div);
	}
	for(i=0;i<3;i++)
	{
		imgData=document.createElement('div');
		imgData.setAttribute("id","imgData"+(i+1));
		imgData.setAttribute("class","noPadding col-xs-12 col-sm-12 col-lg-12 col-md-12");
		imgData.setAttribute("onclick","FillBlank.getClickedId(this.id)");
		
		imgDiv=document.createElement('div');
		imgDiv.setAttribute("id","imgDiv"+(i+1));
		imgDiv.setAttribute("class","imgDiv col-xs-6 col-sm-6 col-lg-6 col-md-6");
		
		img=document.createElement('img');
		img.setAttribute("id","image"+(i+1));
		img.setAttribute("class","images col-xs-12 col-sm-12 col-lg-12 col-md-12");
		imgDiv.appendChild(img);
		
		ansWordDiv=document.createElement('div');
		ansWordDiv.setAttribute("id","ansWordDiv"+(i+1));
		ansWordDiv.setAttribute("class","ansWordDiv col-xs-4 col-sm-4 col-lg-4 col-md-4 col-xs-offset-2 col-md-offset-2 col-lg-offset-2 col-sm-offset-2"); 
		
		wordDiv=document.createElement('div');
		wordDiv.setAttribute("id","wordDiv"+(i+1));
		wordDiv.setAttribute("class","wordDiv col-xs-12 col-sm-12 col-lg-12 col-md-12");
		wordDiv.setAttribute("onclick","FillBlank.checkAnswer(this.id)");
		
		imgData.appendChild(imgDiv);
		imgData.appendChild(ansWordDiv);
		Div1.appendChild(imgData);
		Div2.appendChild(wordDiv);
	}
}

FillBlank.setDataLev1=function()
{
	FillBlank.data=[],word=[];
	getUniqueValArr(FillBlank.wordsData,FillBlank.data,3);
	for(var i=0;i<3;i++)
	{
		document.getElementById("image"+(i+1)).src="image/"+FillBlank.data[i].img;
		document.getElementById("image"+(i+1)).setAttribute("name",FillBlank.data[i].word);
		document.getElementById("image"+(i+1)).setAttribute("idx",i);
		
		word.push(FillBlank.data[i].word);
	}
	shuffle(word);
	for(var j=0;j<3;j++)
	{
		document.getElementById("wordDiv"+(j+1)).innerHTML=word[j];
		$('.wordDiv').css("pointer-events","none");
	}
}

FillBlank.getClickedId=function(id)
{
	FillBlank.imageClickedId=id;
	$('.wordDiv').css("pointer-events","auto");
}

FillBlank.checkAnswer=function(id)
{
	var imgName,source;
	imgName=document.getElementById(FillBlank.imageClickedId).children[0].children[0].getAttribute('name');//to get image attribute
	if(imgName==document.getElementById(id).innerHTML)
	{
		document.getElementById(FillBlank.imageClickedId).children[1].innerHTML=document.getElementById(id).innerHTML;
		FillBlank.parentId=document.getElementById(FillBlank.imageClickedId).children[0].children[0].id;//to get image id
		source="sounds/CorrectSound.mp3";
		FillBlank.loadmetaDataFlag=true;
		FillBlank.getDuration(source);
	}
	else
	{
		document.getElementById('audioFile').src="sounds/WrongSound.mp3";
		document.getElementById('audioFile').play();
	}
}
//create Divs
FillBlank.createDynamicDiv=function()
{
	var outerDiv,div,imgDiv,img,dataDiv,letterDiv,span;
	
	outerDiv=document.getElementById('outerDiv');
	letterDiv=document.getElementById('letterDiv');
	
	for(var i=0;i<4;i++)
	{
		div=document.createElement('div');
		div.setAttribute("id","imgData"+(i+1));
		div.setAttribute("class","noPadding col-xs-6 col-sm-6 col-lg-6 col-md-6");
		div.style.marginBottom="4%";
		
		imgDiv=document.createElement('div');
		imgDiv.setAttribute("id","imgDiv"+(i+1));
		imgDiv.setAttribute("class","col-xs-6 col-sm-6 col-lg-6 col-md-6 col-xs-offset-2 col-sm-offset-2 col-lg-offset-2 col-md-offset-2");
		div.appendChild(imgDiv); 
		
		img=document.createElement('img');
		img.setAttribute("class","img-responsive col-xs-10 col-sm-10 col-lg-10 col-md-10");
		img.setAttribute("id","image"+(i+1));
		img.setAttribute("onclick","FillBlank.blowSound(this.id)");
		
		imgDiv.appendChild(img);
		
		dataDiv=document.createElement('div');
		dataDiv.setAttribute("id","data"+(i+1));
		dataDiv.setAttribute("class","col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-offset-2 col-sm-offset-2 col-lg-offset-2 col-md-offset-2");
		div.appendChild(dataDiv);
		
		span=document.createElement('span');
		span.setAttribute("id","letter"+(i+1));
		span.setAttribute("class","letter col-xs-1 col-sm-1 col-lg-1 col-md-1 col-xs-offset-2 col-sm-offset-2 col-lg-offset-2 col-md-offset-2");
		letterDiv.appendChild(span);
		outerDiv.appendChild(div);
	}	
}

//check kana matra
FillBlank.checkKanaMatra=function()
{
	FillBlank.splitStr=[];
	var text=FillBlank.randmData[FillBlank.count].word;
	FillBlank.splitStr=text.split("");
	for(var i=0;i<text.length;i++)
	{
		while(FillBlank.KanhaMatraArr.includes(FillBlank.splitStr[i]))
		{
			FillBlank.splitStr[i-1]=FillBlank.splitStr[i-1]+FillBlank.splitStr[i];
			FillBlank.splitStr.splice(i,1);
		}	
	}	
}

//getData
FillBlank.getData=function()
{
	clearTimeout(FillBlank.timeOut);
	clearTimeout(FillBlank.playWordTime);
	$('.letter').css("pointer-events","auto");
	document.getElementById('audioFile').pause();
	FillBlank.nextCnt=0;
	FillBlank.randmData=[];
	getUniqueValArr(FillBlank.wordsData,FillBlank.randmData,4);
	if(FillBlank.levelIndex==1)
	{
		$('.ansWordDiv').empty();
		FillBlank.setDataLev1();
	}
	else
	{
		FillBlank.setData();
		FillBlank.DragLetter();
	}
	
}

//set Data
FillBlank.setData=function()
{
	var datadiv,randLet=0,element,letterToShuffle=[];
	$('.text').remove();
	$('.ranLet').remove();
	
	for(var i=0;i<4;i++)
	{
		document.getElementById('image'+(i+1)).src="image/"+FillBlank.randmData[i].img;
		document.getElementById("image"+(i+1)).setAttribute("index",i);
		
		FillBlank.checkKanaMatra();
		FillBlank.count++;
		
		if(FillBlank.count==4)
		{
			FillBlank.count=0;
		}
		
		datadiv=document.getElementById('data'+(i+1));
		document.getElementById('data'+(i+1)).setAttribute("idx",i);
		for(var j=0;j<FillBlank.splitStr.length;j++)
		{
			span=document.createElement('span');
			span.setAttribute("id","wordSpan"+FillBlank.wordCnt);
			span.setAttribute("class","text");
			span.innerHTML=FillBlank.splitStr[j];
			datadiv.appendChild(span);
			FillBlank.wordCnt++;
		}
		
		randLet=Math.floor(Math.random()*FillBlank.splitStr.length);
		element=document.getElementById("data"+(i+1)).children[randLet];
		while(element.innerHTML==" ")
		{
			randLet=Math.floor(Math.random()*FillBlank.splitStr.length);
			element=document.getElementById("data"+(i+1)).children[randLet];
		}
		element.style.color="rgba(0, 0, 0, 0)";
		element.setAttribute("class","ranLet");	
		letterToShuffle.push(FillBlank.splitStr[randLet]);
		$(element).droppable(
		{
			drop:FillBlank.match
			
		});
	}
	shuffle(letterToShuffle);
	for(var k=0;k<4;k++)
	{
		document.getElementById('letter'+(k+1)).innerHTML=letterToShuffle[k];
	}
}

//play sound on image click
FillBlank.blowSound=function(id)
{
	var index;
	index=document.getElementById(id).getAttribute("index");
	document.getElementById('audioFile').src="sounds/"+FillBlank.randmData[index].sound;
	document.getElementById('audioFile').play();
}


//drag and drop
FillBlank.DragLetter=function()
{
	$(".letter").draggable({helper:'clone',revert:'invalid'});
}

FillBlank.getDuration=function(src)
{
	var duration=0;
	$('#audioFile').on("loadedmetadata", function()
	{
		if(FillBlank.loadmetaDataFlag)
		{
			FillBlank.loadmetaDataFlag=false;
			duration=$('#audioFile').prop('duration');
			FillBlank.playWordSound(duration);
		}	
   });
   $('#audioFile').prop('src',src);
}

FillBlank.playWordSound=function(duration)
{
	var idx;
	document.getElementById("audioFile").play();
	if(FillBlank.playWordTime)
	{
		clearTimeout(FillBlank.playWordTime);
		FillBlank.playWordTime=null;
	}
	FillBlank.playWordTime=setTimeout(function()
	{	
		idx=document.getElementById(FillBlank.parentId).getAttribute("idx");
		if(FillBlank.levelIndex==1)
			document.getElementById('audioFile').src="sounds/"+FillBlank.data[idx].sound;
		else
			document.getElementById('audioFile').src="sounds/"+FillBlank.randmData[idx].sound;
		document.getElementById('audioFile').play();
	},duration*1000);
}

FillBlank.match=function(event,ui)
{
	var parentId,idx,source,source2;
	FillBlank.parentId=0;
	if($(ui.draggable).text() == $(this).text())
	{
		
		var word=$(ui.draggable).text();
		$(this).text(word);
		$(this).css({"color":"rgba(0, 0, 0,#333)"});
		$(this).droppable('destroy');
		FillBlank.parentId=(this.parentNode.id);
		source="sounds/CorrectSound.mp3";
		FillBlank.loadmetaDataFlag=true;
		FillBlank.getDuration(source);
		FillBlank.nextCnt++;
	}
	else
	{
		$("#audioFile").attr('src',"sounds/WrongSound.mp3");
		document.getElementById("audioFile").play();
	}
	
	if(FillBlank.nextCnt==4)
	{
		$('.letter').css("pointer-events","none");
		if(FillBlank.timeOut)
		{
			clearTimeout(FillBlank.timeOut);
			FillBlank.timeOut=null;
		}
		FillBlank.timeOut=setTimeout(function()
		{
			document.getElementById('audioFile').pause();
			FillBlank.getData();
		},3000)
		
	}
}

//call on Home button clicked
FillBlank.callHome=function()
{
	location.reload();
}	
