// Interface optimizations for the SPI

$(document).ready(function() {
	
	// remove the second and third pages until we're ready for them
	$("body#institute div#why").hide();
	$("body#institute div#overview").hide();
	
	// add and remove the .selected class
	$("#spi-nav a").live("click", function() {
		$("#spi-nav .selected").removeClass('selected');
		$(this).parent().addClass('selected');
	});
	
	// toggle through the different sections
	$("#spi-nav #intro a").live("click", function(){
		$("body#institute div#intro").show();
		$("body#institute div#why").hide();
		$("body#institute div#overview").hide();
	});
	
	$("#spi-nav #why a").live("click", function(){
		$("body#institute div#intro").hide();
		$("body#institute div#why").show();
		$("body#institute div#overview").hide();
	});
	
	$("#spi-nav #overview a").live("click", function(){
		$("body#institute div#intro").hide();
		$("body#institute div#why").hide();
		$("body#institute div#overview").show();
	});
	
	// "paginate" the institute tests
	$("form#institute-test").children().hide();
	
	// set the 'currentQuestion' variable to the first question
	var currentQuestion = $("form#institute-test div:first-child");
	
	// show the currentQuestion
	currentQuestion.show();
	
	// set class "selected" on first button
	var currentQuestionButton = $("#spi-test-nav a#q1");
	currentQuestionButton.addClass("selected");
	
	// get the id of the last question, for disabling the 'next button'
	var lastId = $("#institute-test div:last-child").attr('id');
	
	// clicking the 'next' button will hide the current question and go to the next
	$("button#next-button").live("click", function() {
		currentQuestion.hide();
		currentQuestion = currentQuestion.next();
		currentQuestion.show();
		
		// disable this button when we've reached the last question
		if (currentQuestion.attr('id') == lastId) {
			$(this).attr('disabled', 'disabled');
		}
		
		currentQuestionButton.removeClass("selected");
		currentQuestionButton = $("#spi-test-nav a#" + currentQuestion.attr('id'));
		currentQuestionButton.addClass("selected");
		
		// if the previous button was disabled, it should now be enabled
		$("button#prev-button").removeAttr('disabled')
	});
	
	// clicking the 'prev' button will hide the current question and go to the last one
	$("button#prev-button").live("click", function() {
		currentQuestion.hide();
		currentQuestion = currentQuestion.prev();
		currentQuestion.show();
		
		currentQuestionButton.removeClass("selected");
		currentQuestionButton = $("#spi-test-nav a#" + currentQuestion.attr('id'));
		currentQuestionButton.addClass("selected");
		
		// if the 'next' button was disabled, it should now be enabled
		$("button#next-button").removeAttr('disabled')
		
		// disable this button when we're going back to the first question
		if (currentQuestion.attr('id') == 'q1') {
			$(this).attr('disabled', 'disabled');
		}
	});
	
	// clicking an #spi-test-nav link will change which link has the 'selected' class
	// and switch to the corresponding question
	$("#spi-test-nav a").live("click", function(link) {
		link.preventDefault();
		currentQuestionButton.removeClass("selected");
		currentQuestionButton = $(this);
		currentQuestionButton.addClass("selected");
		
		currentQuestion.hide();
		currentQuestion = $("form#institute-test div#" + $(this).attr('id'));
		currentQuestion.show();
		
		// clean up the disabled next/previous buttons
		if (currentQuestion.attr('id') == 'q1') {
			$("button#prev-button").attr('disabled', 'disabled');
			$("button#next-button").removeAttr('disabled');
		} else if (currentQuestion.attr('id') == lastId) {
			$("button#next-button").attr('disabled', 'disabled');
			$("button#prev-button").removeAttr('disabled');
		} else {
			$("button#next-button").removeAttr('disabled');
			$("button#prev-button").removeAttr('disabled');
		};
	});
	
	// hide these boxes if javascript is not enabled
	$("#spi-test-nav .completed").show();
	
	// put a greyed-out check in the completed column for each question
	$("#spi-test-nav td.completed").append("<img src='/static/images/institute/tests/x.png' />").show();
	
	// check if there is anything in the field for a given question, and if so
	// swap the x for a check
	$("#institute-test input, #institute-test textarea").change(function() {
		var inputObj = $(this);
		
		if (inputObj.attr("type") == 'radio') {
			var qId = inputObj.parent().parent().parent().parent().attr("id");
			$("#spi-test-nav #" + qId + " .completed img").replaceWith("<img src='/static/images/institute/tests/check.png' />");
		} else if (inputObj.val().length > 0) {
			var qId = inputObj.parent().attr("id");
			$("#spi-test-nav #" + qId + " .completed img").replaceWith("<img src='/static/images/institute/tests/check.png' />");
		};
	});
	
	// disable the 'prev' button for first question
	if (currentQuestion.attr('id') == 'q1') {
		$("button#prev-button").attr('disabled', 'disabled');
	};
	
	// disable the 'prev' button for first question
	if (currentQuestion.attr('id') == 'q1') {
		$("button#next-button").removeAttr('disabled');
	};
	
});