var c = document.getElementById('myCanvas');
var	elemLeft = c.offsetLeft;
var	elemTop = c.offsetTop;
var	ctx = c.getContext('2d');

var canvasWidth = c.width;
var canvasHeight = c.height;

var attributesList = [];
var levelsDict = [];
var numTrials = 0;
var attributesPerPage = 0;
returnedText = readTextFile("./surveyinfo.txt").split("\n");
for (i = 1; i < returnedText.length; i++)
{
	if (i != returnedText.length - 1)
	{
		attributesList.push(returnedText[i].split(":")[0])
		levelsDict.push(returnedText[i].split(":")[1].split(","))
	}
	else
	{
		numTrials = Number(returnedText[i])
	}
}

if (attributesList.length > 8)
{
	attributesPerPage = 8
}
else
{
	attributesPerPage = attributesList.length
}

console.log(attributesList);
console.log(levelsDict);

ctx.font = "30px Times";

redraw();

function readTextFile(file)
{	
	var allText;
	var rawFile = new XMLHttpRequest();
	rawFile.open("GET", file, false);
	rawFile.onreadystatechange = function ()
	{
		if(rawFile.readyState === 4)
		{
			if(rawFile.status === 200 || rawFile.status == 0)
			{
				allText = rawFile.responseText;
				//alert(allText);
			}
		}
	}
	rawFile.send(null);
	return allText;
}

function ellipse(context, cx, cy, rx, ry){
	context.save(); // save state
	context.beginPath();

	context.translate(cx-rx, cy-ry);
	context.scale(rx, ry);
	context.arc(1, 1, 1, 0, 2 * Math.PI, false);

	context.restore(); // restore to original state
	context.stroke();
}

function redraw() {
	ctx.font = "30px Times";

	ctx.beginPath();
	ctx.fillStyle = "#D3D3D3";
	ctx.fillRect(0,0,canvasWidth,canvasHeight); 
	
	var aFirst = true;
	var bFirst = false;
	
	var isAFirst = Math.floor(Math.random() * 2);
	if (isAFirst === 1)
	{
		aFirst = true;
		bFirst = false;
	}
	else
	{
		aFirst = false;
		bFirst = true;
	}
	
	ctx.beginPath();
	ctx.fillStyle = "black";
	ctx.fillText("Choice A", 303 + Number(aFirst)*187, 40);
	ctx.fillText("Choice B", 303 + Number(bFirst)*187, 40);
	ctx.fillText("Pick one ->", 60, canvasHeight - 30)
	ctx.moveTo(453,0);
	ctx.lineTo(453,720);
	ctx.stroke();
	ctx.moveTo(266,0);
	ctx.lineTo(266,720);
	ctx.stroke();
	for (i = 0; i < 9; i++)
	{
		ctx.moveTo(0,72*(i+1));
		ctx.lineTo(640,72*(i+1));
		ctx.stroke();
	}
	ellipse(ctx, 360,canvasHeight - 40,10,10)
	ellipse(ctx, 545,canvasHeight - 40,10,10)
}

// Add event listener for `click` events.
c.addEventListener('click', function(event) {
	var x = event.pageX - elemLeft;
	var	y = event.pageY - elemTop;
		
	console.log(x)
	console.log(y)
	
	redraw();
}, false);