addLoadEvent(function () {
	FindASpecialist.init();
});

var FindASpecialist = (function () {

	// HTML elements to be used throughout function
	var categorySelectEl;
	var subcategorySelectEl;
	var subcategoryLiEl;
	var searchResultsEl;

	// Preload AJAX loading icon image
	var ajaxLoadingIconEl = document.createElement('img');
	ajaxLoadingIconEl.setAttribute('src',	'../images/icons/loading.gif');
	ajaxLoadingIconEl.setAttribute('id',	'buyersGuide_ajaxLoadingIcon');

	// Default HTML of <select>s
	var defaultSelectInnerHtml = '<option value="0">- Select -</option>';

	return {

		init : function () {

			// Grab elements from DOM which are used throughout class
			categorySelectEl				= $('selectCategory');
			subcategorySelectEl			= $('selectSubcategory');
			subcategoryLiEl					= $('liSubcategory');
			
			if (!categorySelectEl) return false;
			
			// Hide the AJAX loading icon and insert it into the DOM to be shown when appropriate
			ajaxLoadingIconEl.style.display = 'none';

			// Execute categorySelection function when a new category selection is made
			categorySelectEl.onchange = function () {
				FindASpecialist.categorySelection();
			}

			// Fetch subcategories if a pre-populated category selection exists onload
			if (categorySelectEl.value !== '0') {
				selectedCategoryId = categorySelectEl.value;
				FindASpecialist.fetchSubcategories();
			}
		},

		// A new category selection is made
		categorySelection : function () {

			// Store new selection value
			selectedCategoryId = categorySelectEl.value;

			
			// If a valid new category selection has been made
			if (selectedCategoryId !== '0') {

				// Fetch relevant subcategories from the database
				FindASpecialist.fetchSubcategories();
			}
			
			// If the "- Select -" <option> has been selected, default the subcategory <select>'s HTML and
			// disable it, then add "findASpecialist_awaitingSelection" class from subcategory <select>'s <li>
			else {
				subcategorySelectEl.innerHTML = defaultSelectInnerHtml;
				subcategorySelectEl.setAttribute('disabled', 'disabled');
				addClass(subcategoryLiEl, "findASpecialist_awaitingSelection");
			}
		},

		// Fetch relevant subcategories from the database via an XMLHttpRequest
		fetchSubcategories : function () {

			// Make XMLHttpRequest
			Ajax.getText('../xhr/find-a-specialist/get-subcategories-by-category-id.asp?id=' + selectedCategoryId,
				// Function executed on callback
				function (responseText) {

					// Eval to cast JSON response text into an object; in this case, an array of strings
					var subcategories = eval('(' + responseText + ')');

					// Populate subcategories <select> using subcategories object
					FindASpecialist.populateSubcategories(subcategories);
				}
			);
		},

		// Subcategories relevant to the category have been fetched, so populate subcategories <select>
		populateSubcategories : function (subcategories) {
			var innerHtml = '';

			// Loop through supplied subcategories array, adding each string therein as an <option> of the
			// subcategories <select>
			for (var i = 0; i < subcategories.length; i++) {
				// persist selected value by grabbing hidden field session variable
				var isSelected = '';
				if ($('selectedCounty').value == subcategories[i]['id']) isSelected = ' selected="selected"';
			
				// Add <option> to <select>, with value attribute equal to index of the subcategory, labelling it
				// as the subcategory name, for example, "Aeroacoustics"
				innerHtml += '<option value="' + subcategories[i]['id'] + '"'+isSelected+'>' + subcategories[i]['subcategory'] + '</option>';
			}

			// Remove "buyersGuide_awaitingSelection" class from subcategory <select>'s <li>
			removeClass(subcategoryLiEl, "findASpecialist_awaitingSelection");

			// Append options to and undisable the <select>
			// if on the main page include a label, if on the home page do not
			var countyLabel = '';
			if ($('specialistPage').value == 'main') countyLabel = '<label for="selectSubcategory">&nbsp;</label>';

			subcategorySelectEl.parentNode.innerHTML = '' + countyLabel + '<select id="selectSubcategory" name="subcategory">' +
				defaultSelectInnerHtml + innerHtml + '</select>';

			// If there's one bug which drives me insane, it's IE 6's and 7's inability to modify the innerHTML of a <select>
			// element. It means you need to modify a parent element, and in doing so, you're removing the select from the DOM
			// and thereby relinquishing node refrences and event handlers. Grrrr!!! This means we need to relocate the node
			// and then reassign the onchange event handler, as below.

			// Re-establish node reference and execute subcategorySelection function when a new subcategory selection is made
			subcategorySelectEl = $('selectSubcategory');
			subcategorySelectEl.onchange = function () {
				FindASpecialist.subcategorySelection();
			}
		},
		
		// A new subcategory selection is made
		subcategorySelection : function () {
			// Store new subselection ID
			selectedSubcategoryId = subcategorySelectEl.value;
		}
	}
})();