var BookingForm = {
	
	default_course : null,
	courses : null,
	
	init : function()
	{
		this.createCandidateDropdowns();
		this.attachCandidateEvents();
		this.placesRequired();
		this.updateCandidates();
	},
	
	placesRequired : function()
	{
		$('#js_places-required').change(function() {
			BookingForm.updateCandidates();
		});
	},
		
	updateCandidates : function()
	{
		var required_places = $('#js_places-required select').val();
		
		$('#candidates div.candidate').each(function() {
			var count = parseInt($(this).attr('id').replace('candidate', ''));
			if (count <= required_places) {
				$(this).show();
			} else {
				$(this).hide();
				
				var course_id = BookingForm.default_course;
				$('input[type=text]', this).val('');
				$('input[id*=DateId], .date-select select', this).val(0);
				$('input[id*=CourseId], .course-select select', this).val(course_id);
				$('.course-name', this).text(BookingForm.courses[course_id]['name']);
				$('.date-select select', this).html(BookingForm.dateOptions(course_id));
			}
		});
	},
	
	createCandidateDropdowns : function()
	{
		$('#candidates div.candidate').each(function() {
			
			var course_id = BookingForm.default_course;
			if ($('input[id*=CourseId]', this).val() != '') {
				course_id = $('input[id*=CourseId]', this).val();
			} else {
				$('input[id*=CourseId]', this).val(course_id);
			}
			
			var date_id = 0;
			if ($('input[id*=DateId]', this).val() != '') date_id = $('input[id*=DateId]', this).val();
			
			$('div.select', this).remove();
			$('div.input', this).after('<div class="course-select"></div>');
			$('.course-select', this).append('<p><strong class="course-name">'+BookingForm.courses[course_id]['name']+'</strong> &nbsp;<a href="" class="change">Change course</a></p>');
			$('.course-select', this).append('<div class="select" style="display:none"><select>'+BookingForm.courseOptions(course_id)+'</select><input type="submit" value="OK" /> or <a href="" class="cancel">cancel</a></div>');
		
			$('.course-select', this).after('<div class="date-select"><div class="select"><select>'+BookingForm.dateOptions(course_id, date_id)+'</select></div></div>');
			
			$('input[id*=DateId]', this).val($('.date-select select', this).val());
		});
	},
	
	attachCandidateEvents : function()
	{
		$('#candidates .change').click(function(event) {
			event.preventDefault();
			
			var parent = $(this).parents('.candidate').first();
			$('p', parent).hide();
			$('.course-select .select', parent).show();
		});
		
		$('#candidates .cancel').click(function(event) {
			event.preventDefault();
			
			var parent = $(this).parents('.candidate').first();
			$('p', parent).show();
			$('.course-select .select', parent).hide();
			
			$('.course-select select', parent).val($('input[id*=CourseId]', parent).val());
		});
		
		$('#candidates input[type=submit]').click(function(event) {
			event.preventDefault();
			
			var parent = $(this).parents('.candidate').first();
			$('p', parent).show();
			$('.course-select .select', parent).hide();
			
			var course_id = $('.course-select select', parent).val();
			$('input[id*=CourseId]', parent).val(course_id);
			$('.course-name', parent).text(BookingForm.courses[course_id]['name']);
			$('.date-select select', parent).html(BookingForm.dateOptions(course_id));
			
			$('input[id*=DateId]', parent).val($('.date-select select', parent).val());
		});
		
		$('#candidates .date-select select').change(function(event) {
			var parent = $(this).parents('.candidate').first();
			$('input[id*=DateId]', parent).val($(this).val());
		});
	},
	
	courseOptions : function(selected_id)
	{
		var options = '';
		
		$.each(BookingForm.courses, function(index, course) {
			options += '<option value="'+index+'"';
			if (selected_id == index) options += ' selected="selected"';
			options += '>'+course.name+'</option>';
		});
		
		return options;
	},
	
	dateOptions : function(course_id, selected_id)
	{
		var options = '';
		var course = BookingForm.courses[course_id];
		
		if (!course.arrangement) options += '<option value="0">Select preferred course date...</option>';
		
		$.each(course['dates'], function(index, date) {
			options += '<option value="'+index+'"';
			if (selected_id == index) options += ' selected="selected"';
			options += '>'+date+'</option>';
		});
		
		return options;
	}
};

$(function() { BookingForm.init() });