function showBox(elem){
	$(elem).removeClass('hidden');
}

function hideBox(elem){
	$(elem).addClass('hidden');
}

function ungreyBox(elem){
	$(elem).removeClass('greyed');
}

function greyBox(elem){
	$(elem).addClass('greyed');
}

function showWhen(){
	// clear all the "Length?" data
		$("input[name='availability-length-weeks']").attr("value", "");
		$("input[name='availability-length-lessons']").attr("value", "");
		$("input[name='availability-length-lpw']").attr("value", "");
	// close the "Length?" section
	greyBox('#whenQuestion');
	// and disable the three "Length?" inputs
	$("input[name='availability-length-weeks']").attr('disabled', "disabled");
	$("input[name='availability-length-lessons']").attr('disabled', "disabled");
	$("input[name='availability-length-lpw']").attr('disabled', "disabled");
	// clear all the "When?" data
		// first make sure the two subsections are closed
		$('#availability-when-2').addClass('greyed');
		$('#availability-when-3').addClass('greyed');
		$('#when3-break').removeClass('greyed');
		// make sure all "When?" parts are reset too, the main radios first:
		$("input[name='availability-when']").attr("checked", false);
		// and the dates too:
		$("input[name='availability-when-start']").attr("value", "");
		$("input[name='availability-when-end']").attr("value", "");
		// and finally the drop down of possible months:
		$("select[name='availability-when3-months'] option").removeAttr("selected");
	// now open up the "When?" section
	$('#availability-when-block').removeClass('greyed');
	// and make the "When?" options available to select again
	$("input[name='availability-when']").removeAttr('disabled');
}

function loadWhen(){
	if ($("#courseChoice").attr("value")) {
		// open up the "When?" section
		$('#availability-when-block').removeClass('greyed');
		// and make the "When?" options available to select again
		$("input[name='availability-when']").removeAttr('disabled');
	}
	if ($('input:radio[name=availability-when]:checked').val()) {
		if ($('input:radio[name=availability-when]:checked').val() == "know") {
			$("input[name='availability-when-start']").attr("disabled", false);
			$("input[name='availability-when-end']").attr("disabled", false);
		}
		if ($('input:radio[name=availability-when]:checked').val() == "notsure") {
			$("select[name='availability-when3-months']").attr('disabled', false);
		}
	}
}

function checkWhen(){
	// close both the potentially open boxes
	$('#availability-when-2').addClass('greyed');
	$('#availability-when-3').addClass('greyed');
	$('#when3-break').removeClass('greyed');
	// and disable their three possible inputs
	$("input[name='availability-when-start']").attr("disabled", "disabled");
	$("input[name='availability-when-end']").attr("disabled", "disabled");
	$("select[name='availability-when3-months']").attr('disabled', "disabled");
	// check radio value and open box as appropriate
	if ($('input:radio[name=availability-when]:checked').val() == "know") {
		$('#availability-when-2').removeClass('greyed');
		$("input[name='availability-when-start']").attr("disabled", false);
		$("input[name='availability-when-end']").attr("disabled", false);
		$('#when3-break').addClass('greyed');
	}
	if ($('input:radio[name=availability-when]:checked').val() == "notsure") {
		$('#availability-when-3').removeClass('greyed');
		$("select[name='availability-when3-months']").attr('disabled', false);
	}
	// now check to see if the datepickers should be changed
	checkDatePickers();
	// now check whether it's time to open the "length" question options
	checkCourse();
}

function checkDatePickers(){
	// first let's see the DP value of the course that has been selected
	var courseChoice = $("#courseChoice").attr("value").substring(2,3);
	if (courseChoice == "m") {
		// we can't be sure what class is set at the moment so we have to remove the lot
		$("input[name='availability-when-start']").removeClass("date-pick date-pick-tuesdays date-pick-saturdays date-pick-noweekends");
		$("input[name='availability-when-end']").removeClass("date-pick date-pick-tuesdays date-pick-saturdays date-pick-noweekends");
		// now add the class we want
		$("input[name='availability-when-start']").addClass("date-pick-mondays");
		$("input[name='availability-when-end']").addClass("date-pick-mondays");
		// and re-activate the datepickers in the chosen style
		$('.date-pick-mondays').datePicker({
			clickInput:true,
			renderCallback:function($td, thisDate, month, year){
				if (thisDate.getDayName() == 'Monday') {
					$td.removeClass('disabled');
				} else {
					$td.addClass('disabled');
				}
			}
		});
	} else if (courseChoice == "t") {
		$("input[name='availability-when-start']").removeClass("date-pick date-pick-mondays date-pick-saturdays date-pick-noweekends");
		$("input[name='availability-when-end']").removeClass("date-pick date-pick-mondays date-pick-saturdays date-pick-noweekends");
		$("input[name='availability-when-start']").addClass("date-pick-tuesdays");
		$("input[name='availability-when-end']").addClass("date-pick-tuesdays");
		$('.date-pick-tuesdays').datePicker({
			clickInput:true,
			renderCallback:function($td, thisDate, month, year){
				if (thisDate.getDayName() == 'Tuesday') {
					$td.removeClass('disabled');
				} else {
					$td.addClass('disabled');
				}
			}
		});
	} else if (courseChoice == "s") {
		$("input[name='availability-when-start']").removeClass("date-pick date-pick-mondays date-pick-tuesdays date-pick-noweekends");
		$("input[name='availability-when-end']").removeClass("date-pick date-pick-mondays date-pick-tuesdays date-pick-noweekends");
		$("input[name='availability-when-start']").addClass("date-pick-saturdays");
		$("input[name='availability-when-end']").addClass("date-pick-saturdays");
		$('.date-pick-saturdays').datePicker({
			clickInput:true,
			renderCallback:function($td, thisDate, month, year){
				if (thisDate.getDayName() == 'Saturday') {
					$td.removeClass('disabled');
				} else {
					$td.addClass('disabled');
				}
			}
		});
	} else if (courseChoice == "w") {
		$("input[name='availability-when-start']").removeClass("date-pick date-pick-mondays date-pick-tuesdays date-pick-saturdays");
		$("input[name='availability-when-end']").removeClass("date-pick date-pick-mondays date-pick-tuesdays date-pick-saturdays");
		$("input[name='availability-when-start']").addClass("date-pick-noweekends");
		$("input[name='availability-when-end']").addClass("date-pick-noweekends");
		$('.date-pick-noweekends').datePicker({
			clickInput:true,
			renderCallback:function($td, thisDate, month, year){
				if (thisDate.isWeekend()) {
					$td.addClass('disabled');
				} else {
					$td.removeClass('disabled');
				}
			}
		});
	} else if (courseChoice == "a") {
		$("input[name='availability-when-start']").removeClass("date-pick-mondays date-pick-tuesdays date-pick-saturdays date-pick-noweekends");
		$("input[name='availability-when-end']").removeClass("date-pick-mondays date-pick-tuesdays date-pick-saturdays date-pick-noweekends");
		$("input[name='availability-when-start']").addClass("date-pick");
		$("input[name='availability-when-end']").addClass("date-pick");
		$('.date-pick').datePicker({
			clickInput:true,
			renderCallback:function($td, thisDate, month, year){
				if (thisDate.getDayName() == 'Sunday') {
					$td.addClass('disabled');
				} else {
					$td.removeClass('disabled');
				}
			}
		});
	}
}

function checkCourse(){
	// only proceed if course and "When?" has been chosen, so as not to create JS error when page first loaded
	if ($("#courseChoice").attr("value") && $('input:radio[name=availability-when]:checked').val()){
		// we got a value, let's go!
		var courseChoice = $("#courseChoice").attr("value").substring(0,1);
		// MAX-6 courses
		if (courseChoice == "m") {
			greyBox('#availability-length-lessons');
			$("input[name='availability-length-lessons']").attr('disabled', "disabled");
			greyBox('#availability-length-lpw');
			$("input[name='availability-length-lpw']").attr('disabled', "disabled");
			if ($('input:radio[name=availability-when]:checked').val() == "know") {
				greyBox('#availability-length-weeks');
				$("input[name='availability-length-weeks']").attr('disabled', "disabled");
				greyBox('#whenQuestion');
			} else {
				ungreyBox('#availability-length-weeks');
				$("input[name='availability-length-weeks']").attr('disabled', false);
				ungreyBox('#whenQuestion');
			}
		// 1-1 INTENSIVE courses
		} else if (courseChoice == "i") {
			greyBox('#availability-length-lessons');
			$("input[name='availability-length-lessons']").attr('disabled', "disabled");
			if ($('input:radio[name=availability-when]:checked').val() == "know") {
				greyBox('#availability-length-weeks');
				$("input[name='availability-length-weeks']").attr('disabled', "disabled");
			} else {
				ungreyBox('#availability-length-weeks');
				$("input[name='availability-length-weeks']").attr('disabled', false);
			}
			ungreyBox('#availability-length-lpw');
			$("input[name='availability-length-lpw']").attr('disabled', false);
			ungreyBox('#whenQuestion');
		// 1-1 FLEXIBLE courses
		} else if (courseChoice == "f") {
			greyBox('#availability-length-weeks');
			$("input[name='availability-length-weeks']").attr('disabled', "disabled");
			ungreyBox('#availability-length-lessons');
			$("input[name='availability-length-lessons']").attr('disabled', false);
			ungreyBox('#availability-length-lpw');
			$("input[name='availability-length-lpw']").attr('disabled', false);
			ungreyBox('#whenQuestion');
		} else {
			// close all, for the two x courses or for any error
			greyBox('#whenQuestion');
			greyBox('.whenOptions');
		}
	}
}

function showHelpForm(desiredForm){
	// see which form is currently open
		var currentForm = $('#currentForm').attr("value");
	// now close it
		$("#newHelpForm" + currentForm).slideUp(500);
	// and open our desired form
		$("#newHelpForm" + desiredForm).slideDown(500);
	// stop the form for the current link being a link including changing its style
		$("#sectionLink" + desiredForm).addClass('newHelp-selected');
		$("#sectionLink" + desiredForm).removeAttr("href");
	// and reinstate any previously disabled link
		if (currentForm != "null") {
			$("#sectionLink" + currentForm).attr("href","javascript:showHelpForm(" + currentForm + ");");
			$("#sectionLink" + currentForm).removeClass('newHelp-selected');
		}
	// set the new value for the hidden notifier so we know next time which form is open
		$('#currentForm').attr("value", desiredForm);
}

$(document).ready( function() {
	$('.date-pick').datePicker({
		clickInput:true,
		renderCallback:function($td, thisDate, month, year){
			if (thisDate.getDayName() == 'Sunday') {
				$td.addClass('disabled');
			}
		}
	});
	loadWhen();
	checkCourse();
	checkBoxes();
	var desiredForm = $('#currentForm').attr("value");
	if (desiredForm != "null") {
		$("#sectionLink" + desiredForm).addClass('newHelp-selected');
		$("#sectionLink" + desiredForm).removeAttr("href");
	};
});

// loaded when body loads
function checkBoxes(){
	// if student has chosen Yes to leaving a message
	if (getValue('helpMessageChoice') == "Yes") 			{showBox('#extra-message');}
	// if student has selected Other (and thus ought to leave the extra message)
	if (document.newHelpForm.extra7.checked == true)	{
		setRadioValue(document.newHelpForm.elements['helpMessageChoice'],'Yes');
		showBox('#extra-message');
	}
}

// loaded when Other is selected (and thus student is suggested to leave an extra message)
function checkMessage(){
	if(document.newHelpForm.extra7.checked == true){
		setRadioValue(document.newHelpForm.elements['helpMessageChoice'],'Yes');
		showBox('#extra-message');
	} else {
		if (document.newHelpForm.helpMessage.value.length < 1) {
			setRadioValue(document.newHelpForm.elements['helpMessageChoice'],'No');
			hideBox('#extra-message');
		}
	}
}