Event.observe(window, "load", init);

var widthShrinker, heightShrinker, counter;
var currentCount = score = currentImage = 0;
var heightDelta = widthDelta = 1.1;
var nextImage = new Image();
var maxScorePerQuestion = 10;
var correctAnswers = new Array();
var answers = new Array();

function init()
{
	new Insertion.Top("stage", '<img src="" alt="" id="nextImage">');
	nextImage = $("nextImage");
	Event.observe(nextImage, "load", initShrinker);
	new Insertion.Top("stage", '<img src="" alt="" id="image">');
	if (questions.length) {
		getNextImage();
	} else {
		$("header").innerHTML = "Sorry, there are no questions today";
		$("answers").addClassName('hide');
		$("inBetweenImage").setStyle({ display: "none" });
	}
}

function getNextImage()
{
	$("header").innerHTML = 'The Quiz - Caption ' + (currentImage + 1) + ' of ' + questions.length;
	$("answers").addClassName('hide');
	$("image").setStyle({ display: "none" });
	$("inBetweenImage").setStyle({ display: "block" });
	$("top").setStyle({ display: "none" });
	$("bottom").setStyle({ display: "none" });
	$("left").setStyle({ display: "none" });
	$("right").setStyle({ display: "none" });
	nextImage.src = questions[currentImage].image;
}

function initShrinker()
{
	$("inBetweenImage").setStyle({ display: "none" });
	$("image").setStyle({ display: "block" });
	$("answers").removeClassName('hide');
	
	$("image").src = nextImage.src;
	$("image").width = nextImage.width;
	$("image").height = nextImage.height;
	
	$("top").setStyle({
		display: "block",
		position: "absolute",
		top: getTop($("image")) + "px",
		left: getLeft($("image")) + "px",
		width: $("image").width + "px",
		height: ($("image").height / 2) + "px"
	});
	$("top").height = $("image").height / 2;
	$("bottom").setStyle({
		display: "block",
		position: "absolute",
		top: (getTop($("image")) + ($("image").height / 2)) + "px",
		left: getLeft($("image")) + "px",
		width: $("image").width + "px",
		height: ($("image").height / 2) + "px"
	});
	$("bottom").height = $("image").height / 2;
	$("bottom").top = getTop($("image")) + ($("image").height / 2);
	$("left").setStyle({
		display: "block",
		position: "absolute",
		top: getTop($("image")) + "px",
		left: getLeft($("image")) + "px",
		width: ($("image").width / 2) + "px",
		height: $("image").height + "px"
	});
	$("left").width = $("image").width / 2;
	$("right").setStyle({
		display: "block",
		position: "absolute",
		top: getTop($("image")) + "px",
		left: (getLeft($("image")) + ($("image").width / 2)) + "px",
		width: ($("image").width / 2) + "px",
		height: $("image").height + "px"
	});
	$("right").width = $("image").width / 2;
	$("right").left = getLeft($("image")) + ($("image").width / 2);
	
	heightDelta = 1.1;
	widthDelta = 1.1;
	currentCount = 0;
	
	var first = Math.round(Math.random() * 2);
	switch (first) {
		case 0:
			$("answer1").innerHTML = questions[currentImage].title;
			$("answer1").ids = questions[currentImage].id;
			$("answer2").innerHTML = questions[currentImage].alt1;
			$("answer2").ids = questions[currentImage].id1;
			$("answer3").innerHTML = questions[currentImage].alt2;
			$("answer3").ids = questions[currentImage].id2;
			break;
		case 1:
			$("answer1").innerHTML = questions[currentImage].alt1;
			$("answer1").ids = questions[currentImage].id1;
			$("answer2").innerHTML = questions[currentImage].title;
			$("answer2").ids = questions[currentImage].id;
			$("answer3").innerHTML = questions[currentImage].alt2;
			$("answer3").ids = questions[currentImage].id2;
			break;
		case 2:
			$("answer1").innerHTML = questions[currentImage].alt1;
			$("answer1").ids = questions[currentImage].id1;
			$("answer2").innerHTML = questions[currentImage].alt2;
			$("answer2").ids = questions[currentImage].id2;
			$("answer3").innerHTML = questions[currentImage].title;
			$("answer3").ids = questions[currentImage].id;
			break;
	}
	
	setTimeout(startShrinker, 1000);
}

function startShrinker()
{
	Event.observe($("answer1"), "click", answered);
	Event.observe($("answer2"), "click", answered);
	Event.observe($("answer3"), "click", answered);
	
	widthShrinker = setInterval(widthTick, 50);
	heightShrinker = setInterval(heightTick, 50);
	counter = setInterval(count, 100);
}

function widthTick()
{
	shrinkLeft();
	shrinkRight();
}

function heightTick()
{
	shrinkTop();
	shrinkBottom();
}

function shrinkTop()
{
	$("top").height -= heightDelta;
	if ($("top").height < 0) $("top").height = 0;
	$("top").setStyle({
		height: Math.ceil($("top").height) + "px"
	});
	if ($("top").height == 0) clearInterval(heightShrinker);
}

function shrinkBottom()
{
	$("bottom").top += heightDelta;
	$("bottom").height -= heightDelta;
	if ($("bottom").height < 0) $("bottom").height = 0;
	$("bottom").setStyle({
		top: Math.ceil($("bottom").top) + "px",
		height: Math.ceil($("bottom").height) + "px"
	});
	if ($("bottom").height == 0) clearInterval(heightShrinker);
}

function shrinkLeft()
{
	$("left").width -= widthDelta;
	if ($("left").width < 0) $("left").width = 0;
	$("left").setStyle({
		width: Math.ceil($("left").width) + "px"
	});
	if ($("left").width == 0) clearInterval(widthShrinker);
}

function shrinkRight()
{
	$("right").left += widthDelta;
	$("right").width -= widthDelta;
	if ($("right").width < 0) $("right").width = 0;
	$("right").setStyle({
		left: Math.ceil($("right").left) + "px",
		width: Math.ceil($("right").width) + "px"
	});
	if ($("right").width == 0) clearInterval(widthShrinker);
}

function getTop(obj)
{
	var curtop = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curtop += obj.offsetTop
			obj = obj.offsetParent;
		}
	} else if (obj.y) {
		curtop += obj.y;
	}
	return curtop;
}

function getLeft(obj)
{
	var curleft = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curleft += obj.offsetLeft;
			obj = obj.offsetParent;
		}
	} else if (obj.x) {
		curleft += obj.x;
	}
	return curleft;
}

function count()
{
	currentCount = currentCount + 0.1;
	$("counter").innerHTML = "Time taken: " + currentCount.toFixed(2);
}

function answered(event)
{
	clearInterval(widthShrinker);
	clearInterval(heightShrinker);
	clearInterval(counter);
	Event.stopObserving($("answer1"), "click", answered);
	Event.stopObserving($("answer2"), "click", answered);
	Event.stopObserving($("answer3"), "click", answered);
	
	var target = Event.element(event);
	correctAnswers.push(questions[currentImage].id);
	answers.push(target.ids);
	if (
		questions[currentImage].title == target.innerHTML ||
		questions[currentImage].title == target.data // safari sends through a text node
	) { // correct
		if (currentCount <= maxScorePerQuestion && currentCount >= 0.5) {
			score += maxScorePerQuestion - (currentCount/2);
		}
	} else { // wrong
		
	}
	currentCount = 0;
	$("counter").innerHTML = "Time taken: " + currentCount.toFixed(2);
	currentImage++;
	/* test bypass
	currentImage = 10;
	score = 70;
	//*/
	if (questions[currentImage] == undefined || currentImage >= questions[currentImage].length) {
		stop();
	} else {
		getNextImage();
	}
}

function stop()
{
	
	// show results form
	$("quizcol").addClassName('hide');
	
	var userdata = '<input type="hidden" name="answers" value="' + correctAnswers +'"><input type="hidden" name="y_answers" value="' + answers +'"><input type="hidden" name="score" value="' + score +'">';
	$("userdata").innerHTML = userdata;
	if ($("userdata2")) $("userdata2").innerHTML = userdata;
	$("register").addClassName('show');
	$("rightnav").addClassName('show');
	$("headerreg").innerHTML = "You scored " + parseInt(score) + " out of " + (maxScorePerQuestion * 10);
	
	
	if (score <= 39) {
		$("scorerepsonse").innerHTML = "Oh dear. Your score, based on the number of correct answers and speed of response, is far from impressive. Find out where it all went wrong by signing-in below."
	} else if (score <= 69) {
		$("scorerepsonse").innerHTML = "Not bad. Your score, based on the number of correct answers and speed of response, is pretty good but needs improvement. Sign-in below to peruse the highs (and lows) of your answers."
	} else {
		$("scorerepsonse").innerHTML = "Well done! Your score, based on the number of correct answers and speed of response, is superb. To further bask in the glory of it all, sign-in below."
	}
	
}