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


//call on onload
FillBlank.init=function()
{	
	document.getElementById('outerDiv').style.display="none";
	FillBlank.setAllImages();
	FillBlank.backgroundImg();	
}

//setInterval for background images
FillBlank.backgroundImg=function()
{
	document.body.style.backgroundImage="url("+FillBlank.coverPage.image+")";

}

//call to set All Iamges
FillBlank.setAllImages=function()
{
	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";
}
//display images onclick of play
FillBlank.displayData=function()
{
	document.getElementById('coverPage').style.display="none";
	document.getElementById('home').style.visibility="visible";
	document.getElementById('outerDiv').style.display="block";
	document.body.style.backgroundImage="url('image/BG.png')";
	FillBlank.createDynamicDiv();
	FillBlank.getData();

}

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

//create Divs
FillBlank.createDynamicDiv=function()
{
	var outerDiv,div,imgDiv,img,dataDiv,letterDiv,span;
	
	outerDiv=document.getElementById('outerDiv');
	
	letterDiv=document.createElement('div');
	letterDiv.setAttribute("id","letterDiv");
	letterDiv.setAttribute("class","col-xs-10 col-sm-10 col-md-10 col-lg-10 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2");
	
	for(var i=0;i<4;i++)
	{
		div=document.createElement('div');
		div.setAttribute("id","imgData"+(i+1));
		div.setAttribute("class","noPadding col-xs-3 col-sm-3 col-lg-3 col-md-3");
		
		imgDiv=document.createElement('div');
		imgDiv.setAttribute("id","imgDiv"+(i+1));
		div.appendChild(imgDiv); 
		
		img=document.createElement('img');
		img.setAttribute("class","img-responsive col-xs-5 col-sm-5 col-md-5 col-lg-5");
		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));
		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-1 col-sm-offset-1 col-lg-offset-1 col-md-offset-1")
		letterDiv.appendChild(span);
		outerDiv.appendChild(div);
		outerDiv.appendChild(letterDiv);
	}	
}

//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);
	document.getElementById('audioFile').pause();
	FillBlank.nextCnt=0;
	FillBlank.randmData=[];
	getUniqueValArr(FillBlank.wordsData,FillBlank.randmData,4);
	FillBlank.setData();
	FillBlank.DragLetter();
	
}

//set Data
FillBlank.setData=function()
{
	var datadiv;
	var randLet=0;
	var element;
	var 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.match=function(event,ui)
{
	var parentId,idx;
	if($(ui.draggable).text() == $(this).text())
	{
		
		var word=$(ui.draggable).text();
		$(this).text(word);
		$(this).css({"color":"rgba(0, 0, 0,#333)"});
		/*$('#audioFile').attr("src","sounds/CorrectSound.mp3");
		document.getElementById('audioFile').play();*/	
		parentId=(this.parentNode.id);
		idx=document.getElementById(parentId).getAttribute("idx");
		
		setTimeout(function()
		{
			document.getElementById('audioFile').pause();
			document.getElementById('audioFile').src="sounds/"+FillBlank.randmData[idx].sound;
			document.getElementById('audioFile').play();
		},500);
		FillBlank.nextCnt++;
	}
	else
	{
		$("#audioFile").attr('src',"sounds/WrongSound.mp3");
		document.getElementById("audioFile").play();
	}
	
	if(FillBlank.nextCnt==4)
	{
		FillBlank.timeOut=setTimeout(function()
		{
			document.getElementById('audioFile').pause();
			FillBlank.getData();
		},3000)
		
	}
}

