/**
 * Fire when DOM is ready
 */
$(document).ready(function() {
	// configure ajax object
	$.ajaxSetup({
		url: "../includes/ajax_controller.php",
		type: "POST",
		dataType: "html",
		timeout: 5000
	});
	
	// bind eventhandler 'selectTraining' to pulldown and pass the eventobject to the handler
	$("select#Training").bind("change", this, selectTraining);
	
	// fire the event initially
	$("select#Training").trigger("change", this);
});

/**
 * Event handler for the 'change' event of the pulldown menu
 * Makes ajax call with selected ID and fetches subform
 */
function selectTraining(evtObj) {
	// get the value of the object that broadcasted the event
	var el	= evtObj.target;
	var id	= $(el).val();
	
	// make ajax call to server
	$.ajax({
		data: "action=getTrainingOptions&id="+ escape(id),
		success: createFormPart
	});
	
	// put loading animation in the container for the time beiing
	var sLoading = '<img src="../media/images/ajax-loader.gif" id="options-loading" alt="Loading&hellip;">';
	$("div#option-container").html(sLoading);
	
	// return false to override default browser action
	return false;
}

/**
 * Creates the subform by putting the given html string in the container
 */
function createFormPart(sFormPart){
	$("div#option-container").html(sFormPart);
}