/*	Declaration Section  */

/*  Global Variables  */
var tracing = [];
tracing.language = "";
tracing.level = 0;
tracing.store = 0;
tracing.cnt = 0;
tracing.currentI = 0;
tracing.scrollOffset = 100;
tracing.maxScroll = 0;
tracing.jsonData = [];
tracing.displayHeight = 0;
tracing.textHeightInCanvas;
tracing.scrollDivMargin = 0;
tracing.canvas;
tracing.language;
tracing.fontFlag = false;


var startTime, scoredMarks, totalMarks = 0, somethingDone = false, deviceFlag = 0;
/*  Canvases and Inner-canvases  */
tracing.can1 = document.getElementById("canvas1");
tracing.caninner1 = document.getElementById("canvasinner1");

/*  Execution section  */
$(document).ready(function () {
	tracing.language = "Odiya";
	setFontFamilyForLang("fonts/Lohit-Oriya.ttf");
	deviceFlag = 0;

	Utils = {};
	/* Comment these lines(both ifs) for ekstep intigration */
	/*  Checking the host type: Desktop/Tablet  */
	if ((navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) && !(window.location.href.includes('http')))
		Utils.mobileDeviceFlag = true;
		/* For Tablet */ deviceFlag = 1;
	if (deviceFlag) {
		// Tablet 
		// Utils.Path = Android.getMediaPath("TracingGame");
		//Utils.Path="";
	}
	tracing.setImagesThroughScript();
	tracing.allEventListenersRegistration();	  						/*Registered Event Listeners here */
	$(".se-pre-con").fadeOut("slow");
});


// set font family to body for selected lang. if required.
setFontFamilyForLang = function (fontFilePath) {
	var newStyle = "<style>" +
		"@font-face {  " +
		"font-family: 'CustomFontFamily';" +
		"src: url('" + fontFilePath + "') format('truetype');" +
		"}  </style>";
	$("head").append(newStyle);
	$("body").css("font-family", "CustomFontFamily");
};

tracing.setFontFamilyForLang = function (fontFilePath) {
	var newStyle = "<style>" +
		"@font-face {  " +
		"font-family: 'CustomFontFamily';" +
		"src: url('" + fontFilePath + "') format('truetype');" +
		"}  </style>";
	$("head").append(newStyle);
	$("body").css("font-family", "CustomFontFamily");
};

tracing.setImagesThroughScript = function () {
	Utils.Path = "";
	/* Setting images through Script rather than html/css */
	/* Setting images through Script rather than html/css */
	$("#introGif").prop("src", Utils.Path + "Images/Aakar.png");          /*Playing Intro gif*/
	$("#HomeImage").prop("src", Utils.Path + "Images/home.png");
	$("#logoImage").prop("src", Utils.Path + "Images/logo.png");
	$("#BackScroll").prop("src", Utils.Path + "Images/previousScroll.png");
	$("#NextScroll").prop("src", Utils.Path + "Images/nextScroll.png");
	$("#Aakar").prop("src", Utils.Path + "Images/Star.gif");
	$("#SON").prop("src", Utils.Path + "Images/Star.gif");
	$("#Akshar").prop("src", Utils.Path + "Images/" + tracing.language + "/ka_forLevel.gif");
	$("#Akshar1").prop("src", Utils.Path + "Images/" + tracing.language + "/ka_forLevel.gif");
	$("#Ank").prop("src", Utils.Path + "Images/1.gif");
	$("#Ank1").prop("src", Utils.Path + "Images/" + tracing.language + "/1_ForLevel.gif");
	$("#Capital").prop("src", Utils.Path + "Images/capital_A.gif");
	$("#COS").prop("src", Utils.Path + "Images/capital_A.gif");
	$("#Small").prop("src", Utils.Path + "Images/small_a.gif");
	$(".soundButtons").prop("src", Utils.Path + "Images/Speaker-icon.png");
	$(".restartButtons").prop("src", Utils.Path + "Images/restart.png");
	$(".clearButtons").prop("src", Utils.Path + "Images/erase.png");
	$("#play").prop("src", Utils.Path + "Images/play.png");
	$(".Pratham,#container").hide();
	$(".Next").prop("src", Utils.Path + "Images/next.png");
};

tracing.previousScroll = function () {													/* Setting offset for backscroll */
	if (tracing.scrollOffset > 0) {
		var left = $("#scrollbar").scrollLeft(tracing.scrollOffset -= 100);
	}
};

tracing.nextScroll = function () {														/* Setting offset for nextscroll */
	if (tracing.scrollOffset < tracing.maxScroll) {
		var right = $("#scrollbar").scrollLeft(tracing.scrollOffset += 100);
	}
};

tracing.startlevel = function () {
	var cntx = tracing.can1.getContext("2d");
	$("#HomeImage").css("visibility", "visible");
	// tracing.level=Number($(this).prop("id").substring(4));
	tracing.level = 2;
	/* Storing JSON data */
	if (tracing.level == 1) {
		tracing.jsonData = languagewiseJSON[tracing.language].imgShapeMapping;
	}
	else if (tracing.level == 2) {
		$("#selectType").hide();
		$("#outerMainpage").show();
		$("#mainpage").show();
		tracing.jsonData = languagewiseJSON[tracing.language].imgTextMapping;
		tracing.displayHeight = 80;
		tracing.scrollDivMargin = 5;
		tracing.maxScroll = 2500;
		tracing.fontFlag = true;
	}
	else if (tracing.level == 3) {
		tracing.jsonData = EnglishImgNumberMapping;
		tracing.displayHeight = 80;
		tracing.scrollDivMargin = 20;
		/* Checking Host browser */
		if (navigator.userAgent.search("Chrome") > -1) {
			tracing.maxScroll = 800;
		} else {
			tracing.maxScroll = 1000;
		}
	}
	else if (tracing.level == 4) {
		tracing.jsonData = imgCapitalMapping;
		tracing.displayHeight = 80;
		tracing.scrollDivMargin = 20;
		tracing.maxScroll = 3700;
	}
	else if (tracing.level == 5) {
		tracing.jsonData = imgSmallMapping;
		tracing.displayHeight = 80;
		tracing.scrollDivMargin = 20;
		tracing.maxScroll = 3700;
	}
	else if (tracing.level == 6) {
		tracing.jsonData = languagewiseJSON[tracing.language].imgNumberMapping;
		tracing.displayHeight = 80;
		tracing.scrollDivMargin = 20;
		/* Checking Host browser */
		if (navigator.userAgent.search("Chrome") > -1) {
			tracing.maxScroll = 800;
		} else {
			tracing.maxScroll = 1000;
		}
	}

	if (tracing.level == 2 || tracing.level == 6)
		cntx.font = "20vw CustomFontFamily";
	else
		cntx.font = "20vw Century Gothic";

	$("#heading").show();
	$("#level1").show();
	$("#mainpage").hide();
	$('body').css('background-color', 'rgb(179, 179, 179)');
	$('body').css('background-image', 'none');
	tracing.canvas = document.getElementById('canvasinner1');
	tracing.fitToContainer(tracing.canvas);
	$("#canvasinner1").sketch({ defaultColor: "rgb(132, 194, 37)", defaultSize: "20" });
	sketch1 = $("#canvasinner1").sketch();
	var audio = new Audio(Utils.Path + languagewiseJSON[tracing.language].levelSoundMapping[tracing.level - 1].soundURL);
	if (tracing.level == 1) {
		tracing.canvasReset();
	} else if (tracing.level == 2 || tracing.level == 3 || tracing.level == 4 || tracing.level == 5 || tracing.level == 6) {
		$("#outerScrollbar").css("visibility", "visible");
		$("#canvas1").prop('height', $("#showGif1").height());
		$("#canvas1").prop('width', $("#showGif1").width());
		tracing.setScroll();
	}
	var audio = new Audio(Utils.Path + tracing.jsonData[tracing.currentI].soundURL);
	audio.play();
};

tracing.fitToContainer = function (canvas) {
	canvas.style.width = '100%';
	canvas.style.height = '100%';
	canvas.width = canvas.offsetWidth;
	canvas.height = canvas.offsetHeight;
}

tracing.canvasReset = function () {													/* setting canvas for particular shape */
	var cntx = tracing.can1.getContext("2d");
	cntx.font = "bold 10px";
	cntx.strokeStyle = "#FFFFFF";
	if (tracing.cnt > 10)
		tracing.cnt = 0;
	$("#showGif1").css('background-image', 'url("' + Utils.Path + tracing.jsonData[tracing.cnt].imgURL + '")');
	cntx.beginPath();

	tracing.QuestionId = tracing.cnt;
	var d = new Date();
	startTime = d.getDate() + "-" + (d.getMonth() + 1) + "-" + d.getFullYear() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

	switch (tracing.cnt) {
		case 0: {			/* Standing Line */
			cntx.moveTo(tracing.can1.width / 2, tracing.can1.height - 15);
			cntx.lineTo(tracing.can1.width / 2, tracing.can1.height - 130);
			cntx.setLineDash([10, 10]);
		} break;
		case 1: {			/* Sleeping Line */
			cntx.moveTo(60, tracing.can1.height / 2);
			cntx.lineTo(tracing.can1.width - 50, tracing.can1.height / 2);
			cntx.setLineDash([10, 10]);
		} break;
		case 2: {			/* Slanting Line */
			cntx.moveTo(60, tracing.can1.height - 110);
			cntx.lineTo(tracing.can1.width - 50, tracing.can1.height - 30);
			cntx.setLineDash([10, 10]);
		} break;
		case 3: {			/* Circle */
			cntx.arc(tracing.can1.width / 2, tracing.can1.height / 4 + 40, 55, 0, 2 * Math.PI);
			cntx.setLineDash([10, 10]);
		} break;
		case 4: {			/* SemiCircle Right */
			cntx.arc(tracing.can1.width / 2, tracing.can1.height / 4 + 40, 55, 0.6 * Math.PI, 1.4 * Math.PI, true);
			cntx.setLineDash([10, 10]);
		} break;
		case 5: {			/* SemiCircle Left */
			cntx.arc(tracing.can1.width / 2, tracing.can1.height / 4 + 40, 55, 0.4 * Math.PI, 1.6 * Math.PI, false);
			cntx.setLineDash([10, 10]);
		} break;
		case 6: {			/* Diamond */
			cntx.moveTo(tracing.can1.width / 2, 15);
			cntx.lineTo(tracing.can1.width * 0.75 - 20, 80);
			cntx.lineTo(tracing.can1.width / 2, 140);
			cntx.lineTo(tracing.can1.width * 0.25 + 20, 80);
			cntx.lineTo(tracing.can1.width / 2, 15);
			cntx.setLineDash([5, 10]);
		} break;
		case 7: {			/* Rectangle */
			cntx.moveTo(tracing.can1.width * 0.25, 40);
			cntx.lineTo(tracing.can1.width * 0.75, 40);
			cntx.lineTo(tracing.can1.width * 0.75, 120);
			cntx.lineTo(tracing.can1.width * 0.25, 120);
			cntx.lineTo(tracing.can1.width * 0.25, 40);
			cntx.setLineDash([5, 10]);
		} break;
		case 8: {			/* Square */
			cntx.moveTo(tracing.can1.width * 0.35, 30);
			cntx.lineTo(tracing.can1.width * 0.65, 30);
			cntx.lineTo(tracing.can1.width * 0.65, 120);
			cntx.lineTo(tracing.can1.width * 0.35, 120);
			cntx.lineTo(tracing.can1.width * 0.35, 30);
			cntx.setLineDash([5, 10]);
		} break;
		case 9: {			/* Triangle */
			cntx.moveTo(tracing.can1.width / 2, 30);
			cntx.lineTo(tracing.can1.width * 0.75, 120);
			cntx.lineTo(tracing.can1.width * 0.25, 120);
			cntx.lineTo(tracing.can1.width / 2, 30);
			cntx.setLineDash([5, 10]);
		} break;
		case 10: {			/* Star */
			tracing.drawStar(cntx, tracing.can1.width / 2, 80, 5, 60, 30);	/* drawStar(context,X,Y,numberOfSpikes,outerRadius,innerRadius); */
		}
	}
	cntx.stroke();
	tracing.currentI = tracing.cnt;
};
/* Generic function for drawing star */
tracing.drawStar = function (cntx, cx, cy, spikes, outerRadius, innerRadius) {
	var rot = Math.PI / 2 * 3;
	var x = cx;
	var y = cy;
	var step = Math.PI / spikes;

	cntx.moveTo(cx, cy - outerRadius)
	for (i = 0; i < spikes; i++) {
		x = cx + Math.cos(rot) * outerRadius;
		y = cy + Math.sin(rot) * outerRadius;
		cntx.lineTo(x, y)
		rot += step

		x = cx + Math.cos(rot) * innerRadius;
		y = cy + Math.sin(rot) * innerRadius;
		cntx.lineTo(x, y)
		rot += step
	}
	cntx.lineTo(cx, cy - outerRadius);
	cntx.closePath();
};

tracing.setTextForLevel = function () {
	tracing.addScoreToDB(0);
	var d = new Date();
	startTime = d.getDate() + "-" + (d.getMonth() + 1) + "-" + d.getFullYear() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

	var cntx = tracing.can1.getContext("2d");
	cntx.setLineDash([5, 5]);
	tracing.setCanvasFontSizeAndLineHeightAsPerWidth(cntx);

	if (tracing.level == 2 || tracing.level == 6)
		cntx.font = "20vw CustomFontFamily";
	else
		cntx.font = "20vw Century Gothic";

	cntx.textAlign = "center";
	var position = Math.floor(Math.random() * tracing.jsonData.length) + 0;
	while (position == tracing.store) {
		position = Math.floor(Math.random() * tracing.jsonData.length) + 0;
	}
	tracing.store = position;
	var img = "url(" + Utils.Path + tracing.jsonData[position].imgURL + ")";
	tracing.currentI = position;
	$("#showGif1").css('background-image', img);
	cntx.strokeStyle = "#FFFFFF";
	cntx.strokeText(tracing.jsonData[position].textToDraw, tracing.can1.width / 2, tracing.textHeightInCanvas + tracing.displayHeight);
	tracing.QuestionId = position + 1;
	var audio = new Audio(Utils.Path + tracing.jsonData[tracing.currentI].soundURL);
	audio.play();
};

tracing.clearLevel = function () {
	tracing.caninner1.getContext("2d").clearRect(0, 0, tracing.caninner1.width, tracing.caninner1.height); sketch1.actions = [];
};

tracing.setScroll = function () {
	var temp = "";
	for (i = 0; i < tracing.jsonData.length; i++) {
		temp += "<div id='div" + i + "' class='scrollElementCls' style='margin-right:" + tracing.scrollDivMargin + "%; color:rgb(256, 256, 256);' onclick='tracing.genericTextLevel(" + i + ")'><h2 class='scrollElementCls' >" + tracing.jsonData[i].textToDraw + "</h2></div>";
	}
	$("#scrollbar").html("" + temp);
	if (tracing.level == 2 || tracing.level == 6)
		$(".scrollElementCls").css("font-family", "CustomFontFamily");
	else
		$(".scrollElementCls").css("font-family", "Century Gothic");
	tracing.genericTextLevel(0);
};

tracing.genericTextLevel = function (i) {
	tracing.addScoreToDB(0);
	var d = new Date();
	startTime = d.getDate() + "-" + (d.getMonth() + 1) + "-" + d.getFullYear() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

	tracing.clearLevel();
	tracing.can1.getContext("2d").clearRect(0, 0, tracing.can1.width, tracing.can1.height);
	tracing.currentI = i;
	var cntx = tracing.can1.getContext("2d");
	cntx.setLineDash([5, 5]);
	tracing.setCanvasFontSizeAndLineHeightAsPerWidth(cntx);

	if (tracing.level == 2 || tracing.level == 6)
		cntx.font = "20vw CustomFontFamily";
	else
		cntx.font = "20vw Century Gothic";

	cntx.textAlign = "center";
	$("#showGif1").css('background-image', 'url(' + Utils.Path + tracing.jsonData[i].imgURL + ')');
	cntx.strokeStyle = "#FFFFFF";

	if (tracing.fontFlag == true) {
		setTimeout(function () {
			cntx.strokeText(tracing.jsonData[0].textToDraw, tracing.can1.width / 2, tracing.textHeightInCanvas + tracing.displayHeight);
			tracing.fontFlag = false;
		}, 200);
	}
	else {
		cntx.strokeText(tracing.jsonData[i].textToDraw, tracing.can1.width / 2, tracing.textHeightInCanvas + tracing.displayHeight);
	}
	tracing.QuestionId = i + 1;

	var audio = new Audio(Utils.Path + tracing.jsonData[tracing.currentI].soundURL);
	audio.play();
};

tracing.setCanvasFontSizeAndLineHeightAsPerWidth = function (cntx) {
	var w = window.innerWidth;
	if (w <= 400) {
		cntx.font = "100px Century Gothic";
		tracing.textHeightInCanvas = tracing.can1.height / 4;
	}
	else if (w > 400 && w <= 600) {
		cntx.font = "130px Century Gothic";
		tracing.textHeightInCanvas = tracing.can1.height / 4;
	}
	else if (w > 600 && w <= 700) {
		cntx.font = "140px Century Gothic";
		tracing.textHeightInCanvas = tracing.can1.height / 4;
	}
	else if (w > 700 && w <= 800) {
		cntx.font = "150px Century Gothic";
		tracing.textHeightInCanvas = tracing.can1.height / 3;
	}
	else if (w > 800 && w <= 900) {
		cntx.font = "160px Century Gothic";
		tracing.textHeightInCanvas = tracing.can1.height / 3;
	}
	else if (w > 900 && w <= 1000) {
		cntx.font = "170px Century Gothic";
		tracing.textHeightInCanvas = tracing.can1.height / 3;
	}
	else if (w > 1000 && w <= 1200) {
		cntx.font = "170px Century Gothic";
		tracing.textHeightInCanvas = tracing.can1.height / 2;
	}
	else if (w > 1200 && w <= 1400) {
		cntx.font = "280px Century Gothic";
		tracing.textHeightInCanvas = tracing.can1.height / 2;
	}
	else if (w > 1400) {
		cntx.font = "350px Century Gothic";
		tracing.textHeightInCanvas = tracing.can1.height / 2;
	}
}

tracing.setMarker = function (r, g, b, element) {
	$(".description>a").removeClass("blink_me");
	$(element).addClass("blink_me");
	sketch1.color = "rgb(" + r + "," + g + "," + b + ")";
};

tracing.resetGame = function () {
	$("#outerScrollbar").css("visibility", "hidden");
	$("#showGif1").css("background-image", "");
	tracing.can1.getContext("2d").clearRect(0, 0, tracing.can1.width, tracing.can1.height);
	try {
		sketch1.actions = [];
	}
	catch (err) {
		console.log(err);
	}
	$("#outerMainpage").hide();
	$("#selectType").show();
};

/*  Event listeners registration  */
tracing.allEventListenersRegistration = function () {
	$("#HomeImage").on("click", function () {
		tracing.addScoreToDB(0);
		location.reload(true);
	});
	$("#shapeOrNumber,#capitalOrSmall,#alphabetsOrNumber").on("click", function () {
		$("#HomeImage").css("visibility", "visible");
		$("#selectType").hide();
		$("#outerMainpage").show();
		$("#mainpage").show();
		$("#level1").hide();
		if (this.id == "shapeOrNumber") {
			$("#part1,#part2,#part3,#part4,#part5,#part6").show();
			$("#part4,#part5,#part2,#part6").hide();
		} else if (this.id == "capitalOrSmall") {
			$("#part1,#part2,#part3,#part4,#part5,#part6").show();
			$("#part1,#part3,#part2,#part6").hide();
		} else {
			$("#part1,#part2,#part3,#part4,#part5,#part6").show();
			$("#part1,#part3,#part4,#part5").hide();
		}
	});
	$("#part1,#part2,#part3,#part4,#part5,#part6").on("click", tracing.startlevel);
	$("#prevArrow").on("click", tracing.previousScroll);
	$("#nextArrow").on("click", tracing.nextScroll);
	$("#forClear").on("click", tracing.clearLevel);
	$("#forRestart").on("click", function () {
		$('#showGif1').css('background-image', 'url("' + Utils.Path + tracing.jsonData[tracing.currentI].imgURL + '?x=' + Date.now() + '")');
	});
	$("#forNext").on("click", function () {
		tracing.addScoreToDB(0);
		var d = new Date();
		startTime = d.getDate() + "-" + (d.getMonth() + 1) + "-" + d.getFullYear() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();

		tracing.clearLevel();
		tracing.can1.getContext("2d").clearRect(0, 0, tracing.can1.width, tracing.can1.height);
		if (tracing.level == 1) {
			tracing.canvasReset(++tracing.cnt);
		} else if (tracing.level == 2 || tracing.level == 3 || tracing.level == 4 || tracing.level == 5 || tracing.level == 6) {
			tracing.setTextForLevel();
		}
	});
	$("#forSound").on("click", function () {
		var audio = new Audio(Utils.Path + tracing.jsonData[tracing.currentI].soundURL);
		audio.play();
	});
	$("#play").on("click", function () {
		$("#intro,#selectType,#part5,#part4,#part3,#part1,#mainpage").hide();
		$("#container,#level1").show();
		$("#HomeImage").css("visibility", "hidden");
		tracing.startlevel();
	});
};

tracing.addScoreToDB = function (scoredMarks) {
	if (somethingDone == true) {
		console.log(tracing.QuestionId, scoredMarks, totalMarks, tracing.level, startTime);
		if (deviceFlag)
			Android.addScore(resId, tracing.QuestionId, scoredMarks, totalMarks, tracing.level, startTime);
		somethingDone = false;
	}
}