var ShapesEverywhere={};
var Utils = {};
Utils.Path='';
Utils.mobileDeviceFlag=false;
var questionId=0,startTime=0,scoredMarks=0,totalMarks=10,resId=0,level=1,label=null, scoreFlag = false, attemptFlag=false;
var dragCount=0;
var bgSoundCount=0;
var rotation = 0 ;
$(document).ready(function()
{
	$(".se-pre-con").fadeOut("slow");
	if ((navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) && !(window.location.href.includes('http')))
		Utils.mobileDeviceFlag = true;
	//if(Utils.mobileDeviceFlag) 
		//Utils.Path=Android.getMediaPath("ShapesEverywhere"); 
	setTimeout(function()
	{
		document.getElementById("playSound").src=Utils.Path+"sounds/Row_01.mp3";
		if (ShapesEverywhere.titleTimer) {
				clearTimeout(ShapesEverywhere.titleTimer);
				ShapesEverywhere.titleTimer = null;
			}
			ShapesEverywhere.titleTimer =setTimeout(function()
		{
			document.getElementById("playSound").play();
		},1500);
		ShapesEverywhere.init();
	},100);
});

ShapesEverywhere.init=function()
{
	$("#coverPage").show();
	$("#gamePage,#endPage").hide();
	$(".header").not("#logo").css("visibility","hidden");
	$("#ParentChildDiv").css("visibility","hidden");
	$(".pictureClass").css("visibility","hidden");
	ShapesEverywhere.createAcknowledgement();
	ShapesEverywhere.setImages();
}
//Initialization of variables.
ShapesEverywhere.initializeVariables=function()
{
	ShapesEverywhere.count=0;
	ShapesEverywhere.dragFlag=false;
	ShapesEverywhere.shapeClickFlag=false;
	dragCount=0;
	attemptFlag=false;
	scoreFlag=false;
}
//Sets the images to all buttons and image tags.
ShapesEverywhere.setImages=function()
{
	document.body.style.backgroundImage="url("+Utils.Path+"images/Cover.gif)";
	document.getElementById('play').src=Utils.Path+"images/Play.png";
	document.getElementById('homeImage').src=Utils.Path+"images/Home.png";
	document.getElementById('logoImage').src=Utils.Path+"images/Hindi.png";
	document.getElementById('next').src=Utils.Path+"images/Next.png";
	document.getElementById('replayImg').src=Utils.Path+"images/replay.png";//
	document.getElementById('clearBord').src=Utils.Path+"images/replay.png";
	document.getElementById('creditImg').src=Utils.Path+"images/Credits.png";
	document.getElementById('parentImg').src=Utils.Path+"images/Buttons-B.png";
	document.getElementById('childImg').src=Utils.Path+"images/Buttons-A.png";
	document.getElementById('muteSound').src=Utils.Path+"images/Sound.png";
}

//displays the gamepage.
ShapesEverywhere.playGame=function()
{
	scoreFlag=false;
	scoredMarks=0;
	/* if(bgSoundCount==0)
	{ */
	//	bgSoundCount++;
	clearTimeout(ShapesEverywhere.titleTimer);
		document.getElementById("playSoundBack").src=Utils.Path+"sounds/instruction/03_Goat.mp3";
		document.getElementById('muteSound').src=Utils.Path+"images/Sound.png";
		ShapesEverywhere.muteFlag = false;
		document.getElementById("playSoundBack").loop=true;
		document.getElementById("playSoundBack").play(); 
//	}
	document.body.style.backgroundImage="url("+Utils.Path+"images/BG-Level-1.png)";
	$('#coverPage,#endPage,#replayNcredit').hide();
	$("#soundDiv,#clearDiv").css("visibility","hidden");
	$("#gamePage").show();
	$(".header").css("visibility","visible");
	$("#pictureDiv").show();
	$("#nextDiv").css({"pointerEvents":"auto","display":"block"});
	ShapesEverywhere.initializeVariables();
	ShapesEverywhere.nextQue();
	/*  */
}

ShapesEverywhere.nextQue=function()
{
	clearTimeout(ShapesEverywhere.videoTimer);
	$("#next").removeClass("blink_me");
	document.getElementById("playSound").pause();
	//$("#demoVideo").pause(); 
	const video = document.querySelector("#demoVideo");
	video.pause();
	ShapesEverywhere.count++;
			if(ShapesEverywhere.count==1)
			{
				$("#shapesDemoDiv").show();
				$(".practiceClass").hide();
				video.play();
				if (ShapesEverywhere.videoTimer) {
					clearTimeout(ShapesEverywhere.videoTimer);
					ShapesEverywhere.videoTimer = null;
				}
				ShapesEverywhere.titvideoTimerleTimer =setTimeout(function()
			{
				$("#next").addClass("blink_me")
			},22000);
			}
			else if(ShapesEverywhere.count==2)
			{
				d = new Date();  //date object
	startTime = d.getDate() + "-" + (d.getMonth() + 1) + "-" + d.getFullYear() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();  //to get the current date
				$("#ParentChildDiv,#clearDiv,#muteSoundDiv").css("visibility","visible");
			//	instructionAudio
			$("#ParentChildDiv").show();
				shapeName="triangle"; 
			//	ShapesEverywhere.createSelectedShape();
				$("#shapesDemoDiv").hide();
				$(".practiceClass").show();
				document.getElementById("MainShapesDiv1").innerHTML="";
				document.getElementById("MainShapesDiv2").innerHTML="";
				ShapesEverywhere.createDivs(MainShapesDiv1,MainShapesDiv2,"shape" , 7, 'paddingClass nopadding');
				document.getElementById("dropBordDiv").style.backgroundImage= Utils.Path + "url('images/Level-3.png')";
				setTimeout(function()
					{
					$('#childImg').addClass("highlighteClass");
					/* document.getElementById("playSound").src=Utils.Path+"sounds/instruction/Akk2.mp3";
					document.getElementById("playSound").play();  */
					},500);
				ShapesEverywhere.dragdrop();
				scoredMarks=-1;
				scoreFlag=true;
			}
			else if(ShapesEverywhere.count==3 && dragCount>0)// show photo top: 15vh; 
			{

				$(".glyphicon,.ui-icon").css("display","none","pointerEvents","none");
				$("#ParentChildDiv,#clearDiv,.shapesImg").css("visibility","hidden","pointerEvents","none");
				$(".shapePointer,.shapesImgDiv").css("pointerEvents","none");
				$("#dropBordDiv").css("top","13vh");
				for(var i=0;i<7;i++)
					$("#shape"+i).css("background-image","none");
				if(dragCount>0)
				{
					document.getElementById("playSound").src=Utils.Path+"sounds/Row_20.mp3";
					document.getElementById("playSound").play(); 
					$("#next").addClass("blink_me")
				}

			}
		else if(ShapesEverywhere.count==4)
		{
			scoredMarks=10;
			scoreFlag=true;
			$("#photoTextDiv").show();
			$("#ParentChildDiv").hide();
			document.getElementById("playSound").src=Utils.Path+"sounds/Camerashuttersound.mp3";
			document.getElementById("playSound").play(); 
			$(".pictureClass").css("visibility","visible");
			ShapesEverywhere.addScore();
			scoreFlag=false;
		}
		else
		{
			$(".pictureClass").css("visibility","hidden");
			$("#photoTextDiv").hide();
			$("#ParentChildDiv").show();
			$("#pictureDiv").hide();
			$("#soundDiv,#clearDiv,#muteSoundDiv").css("visibility","hidden");
			$("#ParentChildDiv").css("visibility","hidden");
			$("#endPage,#replayNcredit").show();
			$("#nextDiv").css({"pointerEvents":"none","display":"none"});
			$("#pictureDiv").css({"pointerEvents":"none"});
			$("#gameOver").text(ShapesEverywhere.hardCodedData.gameOver);
			if(scoreFlag)
			ShapesEverywhere.addScore();
		}
		
}
ShapesEverywhere.dragdrop=function()
{
	$( ".drag" ).draggable(
		{
			start: function( event, ui ) {
				document.getElementById("playSound").pause(); 
				
			dragCount++;
			if(ShapesEverywhere.dragFlag)
				ShapesEverywhere.dragFlag=false;
			else
				ShapesEverywhere.dragFlag=true;
			divId=$(this).parent().prop("id");
			imgId=$(this).prop("id");
			console.log(imgId);
			imgData=$("#"+divId).data("shapeData");
			console.log(divId+" , "+imgData);
			
			newImage = document.createElement("img");
			newImage.setAttribute("id",imgId+""+dragCount);
			newImage.setAttribute("class", "img-responsive drag shapesImg nopadding col-sm-8 col-md-8 col-lg-8 col-xs-8 col-xs-offset-2 col-md-offset-2 col-lg-offset-2 col-sm-offset-2");
			newImage.setAttribute("src", Utils.Path +"images/" + imgData+".png");
			document.getElementById(divId).appendChild(newImage);
		//	newImage.setAttribute("onclick","ShapesEverywhere.resizeShape(this.id)");
			$("#"+imgId+""+dragCount).css("position","absolute","display","block");
			//$($("#"+imgId).siblings()[2]).hide();
			ShapesEverywhere.dragdrop();
			/* if(dragCount<6)
			{
				ShapesEverywhere.dragdrop();
			}
			else
			{
				$(".drag").css("pointer-events","none");
			} */
		},
		stop: function( event, ui ) {
			/* if(dragCount>=6)
				$("#next").addClass("blink_me"); */
			$(this).removeClass("shapesImg");
			$(this).addClass("shapePointer");
			$(".highlighteClass").removeClass("highlighteClass");
			console.log(this.id);
			//document.getElementById(this.id).setAttribute("onclick","ShapesEverywhere.resizeShape(this.id)");
			ShapesEverywhere.shapeClickFlag=false;
			 if(ShapesEverywhere.dragFlag)
			{
				$('#parentImg').addClass("highlighteClass");
			//	document.getElementById("playSound").src=Utils.Path+"sounds/instruction/Akk3.mp3";
			}
			else
			{
				$('#childImg').addClass("highlighteClass");
			//	document.getElementById("playSound").src=Utils.Path+"sounds/instruction/Akk2.mp3";
			} 
			attemptFlag=true;
		},
			containment : "html",
		});
}
//create shapes divs
ShapesEverywhere.createDivs = function (parentDiv1,parentDiv2,id, numberOfDivs,  classname) {
	var temp = 8, newDiv, newImage;
	for (var i = 0; i < numberOfDivs; i++) {
		newDiv = document.createElement("div");
		newDiv.setAttribute("id", id+i);
		newDiv.setAttribute("class", " backgroundClass shapesImgDiv " + classname + " col-xs-" + temp + " col-md-" + temp + " col-lg-" + temp + " col-sm-" + temp);
		if(i<4)
			parentDiv1.appendChild(newDiv);
		else
			parentDiv2.appendChild(newDiv);
		document.getElementById(id+i).style.backgroundImage= Utils.Path + "url('images/frame.png')";
		$("#"+id+i).data("shapeData", ShapesEverywhere.imgArr[i].shapeName);
		//$("#"+id+i).height($("#"+id+i).width()-20);
	//	$(".shapesImgDiv").css("height","20vh");

		newImage = document.createElement("img");
		newImage.setAttribute("id", id+"img" + i);
		newImage.setAttribute("class", "img-responsive drag shapesImg nopadding col-sm-8 col-md-8 col-lg-8 col-xs-8 col-xs-offset-2 col-md-offset-2 col-lg-offset-2 col-sm-offset-2");
		newImage.setAttribute("src", Utils.Path +"images/" + ShapesEverywhere.imgArr[i].imageName);
		$("#"+id+"img" + i).data("ImgData", ShapesEverywhere.imgArr[i].imageName);
		//newImage.setAttribute("onclick","ShapesEverywhere.resizeShape(this.id)");
		newDiv.appendChild(newImage);
	}
}
ShapesEverywhere.resizeShape=function(ele)
{
	rotation = 0 ;
	$("#"+ele).resizable();
	$("#"+ele).parent().draggable();
	console.log($(ele).siblings());
	$(".left").removeClass("left");
	$(".right").removeClass("right");
	
	if(ShapesEverywhere.shapeClickFlag)
	{
		$(".glyphicon,.ui-icon").css("display","none");
		$($("#"+ele).siblings()[2]).show();
		/* $($("#"+ele).siblings()[3]).show();
		$($("#"+ele).siblings()[4]).show(); */
		ShapesEverywhere.shapeClickFlag=false;
		newDiv = document.createElement("div");
	//	newDiv.setAttribute("id", "rotateLeft");
		newDiv.setAttribute("class", "glyphicon glyphicon-refresh");
		newDiv.setAttribute("onclick", "ShapesEverywhere.rotateRight(this.id)");
	//	node=$("#"+ele).siblings()[0];
		$($("#"+ele).parent()).append(newDiv); 
		$($("#"+ele).siblings()[3]).css({"position":"absolute","right":"0vw"});

		newDiv1 = document.createElement("div");
	//	newDiv1.setAttribute("id", "rotateLeft");
		newDiv1.setAttribute("class", "glyphicon glyphicon-refresh");
		newDiv1.setAttribute("onclick", "ShapesEverywhere.rotateLeft(this.id)");
	//	node=$("#"+ele).siblings()[0];
		$($("#"+ele).parent()).append(newDiv1); 
		$($("#"+ele).siblings()[4]).css({"position":"absolute","left":"0vw"});
		$($("#"+ele).siblings()[4]).hide();
		$($("#"+ele).siblings()[3]).hide();
	}
	else
	{
		$(".glyphicon,.ui-icon").css("display","none");
		$($("#"+ele).siblings()[2]).hide();
		/* $($("#"+ele).siblings()[3]).hide();
		$($("#"+ele).siblings()[4]).hide(); */
		ShapesEverywhere.shapeClickFlag=true;
	}
	$(".left").removeClass("left");
	$(".right").removeClass("right");
	$($("#"+ele).siblings()[3]).addClass("left");
	$($("#"+ele).siblings()[4]).addClass("right");
	ShapesEverywhere.dragdrop();
}
ShapesEverywhere.rotateLeft=function(obj)
{
	rotation -= 2;
	if(rotation === -360){
		rotation = 0 ;
	}
	$(".left").parent().css("transform","rotate("+rotation+"deg)");
}
ShapesEverywhere.rotateRight=function(obj)
{
	rotation += 2;
	if(rotation === 360){
		rotation = 0 ;
	}
	$(".left").parent().css("transform","rotate("+rotation+"deg)");
}
//create multiple shapes on click perticular shape
ShapesEverywhere.selectShape=function(Object)
{
	shapeName=$("#"+Object).data("shapeData");
	document.getElementById("shapesDivs").innerHTML="";
	$("#shapesDivs").css("visibility","visible");
}

ShapesEverywhere.playSound=function()
{
	document.getElementById("playSound").pause();
	document.getElementById("playSound").src="sounds/instruction/instructionAudio.mp3";
	document.getElementById("playSound").play();
}
ShapesEverywhere.muteAudio=function()
{
	if(!ShapesEverywhere.muteFlag){
		ShapesEverywhere.muteFlag = true;
		document.getElementById('muteSound').src=Utils.Path+"images/mute.png";
		document.getElementById("playSoundBack").pause();
	}
	else{
		ShapesEverywhere.muteFlag = false;
		document.getElementById('muteSound').src=Utils.Path+"images/Sound.png";
	//	document.getElementById("playSoundBack").src=Utils.Path+"sounds/instruction/01_ToyPiano.mp3";
	//document.getElementById("playSoundBack").loop=true;
	document.getElementById("playSoundBack").play(); 
	}
}
ShapesEverywhere.clearBord=function()
{
	dragCount=0;
	document.getElementById("MainShapesDiv1").innerHTML="";
	document.getElementById("MainShapesDiv2").innerHTML="";
	ShapesEverywhere.createDivs(MainShapesDiv1,MainShapesDiv2,"shape" , 7, 'paddingClass nopadding');
	ShapesEverywhere.dragdrop();
}
//addScore for android.
ShapesEverywhere.addScore=function()
{
	attemptFlag=false;
	console.log(Utils.mobileDeviceFlag);
	console.log(resId,questionId,scoredMarks,totalMarks,level,startTime,label);
	if(Utils.mobileDeviceFlag==true)
		Android.addScore(resId,questionId,scoredMarks,totalMarks,level,startTime,label);
}
ShapesEverywhere.replay=function()
{
	$("#acknowledgementDiv").hide();
	$(".highlighteClass").removeClass("highlighteClass");
	$("#next").removeClass("blink_me");
	$("#MainShapesDiv1,#MainShapesDiv2,#clearDiv,#muteSoundDiv").css("visibility","visible");
	$(".shapePointer,.shapesImgDiv,#pictureDiv").css("pointerEvents","auto");
	ShapesEverywhere.playGame();
}

ShapesEverywhere.createAcknowledgement=function()
{
	var i=0,div;
	$("#acknowledgementDiv").empty();
	//console.log(Object.keys(ShapesEverywhere.AcknowledgementPageData).length)
	for(i=0;i<Object.keys(ShapesEverywhere.AcknowledgementPageData).length;i++)
	{
		div=document.createElement('div');
		div.className="fontClass firstLetter col-xs-12 col-sm-12 col-md-12 col-lg-12";
		div.innerHTML=Object.keys(ShapesEverywhere.AcknowledgementPageData)[i]+" : "+Object.values(ShapesEverywhere.AcknowledgementPageData)[i];
		acknowledgementDiv.appendChild(div);
	}
	div=document.createElement('div');
	div.className="fontClass firstLetter col-xs-12 col-sm-12 col-md-12 col-lg-12";
	div.innerHTML=ShapesEverywhere.hardCodedData.createdOn;
	div.style.marginBottom="2vh";
	acknowledgementDiv.appendChild(div);
	//document.getElementById("acknowledgementDiv").style.display="block";
}

ShapesEverywhere.showAcknowledgement=function()
{
	$("#acknowledgementDiv").show();
}
ShapesEverywhere.callhome=function()
{
	if(attemptFlag){
		scoredMarks=10;
		ShapesEverywhere.addScore();
	}
	location.reload();
	
}
//document.getElementById('demoVideo').addEventListener('ended',myHandler,false);
   /*  function myHandler(e) {
		$("#next").addClass("blink_me")
    } */
