$(document).ready(function() {
	// set initial elements and variables
	let searchField = $('#programs-search');
	let degreeFilter = $('input[name=degree]');
	let collegeFilter = $('input[name=college]');
	let filters = $('.filter-dropdown');
	let degreeValues = [];
	let collegeValue = "";
	let options = {
		valueNames: ['major', 'degree', 'college']
	};
	// initialize the table
	let programsList = new List('programs', options);
	
	// toggle dropdown filters
	$('.programs-main').on('click', '.filter-dropdown .filter-label', function() {
		if($(this).parent().hasClass("active")) {
			active = true;	
		} else {
			active = false;
		}
		
		filters.each(function() {
			if($(this).hasClass("active")) {
				$(this).removeClass("active");
				$(this).find('.filter-content').removeClass("active");
			}
		});
		
		if(!active) {
			$(this).parent().addClass("active");
			$(this).parent().find('.filter-content').addClass("active");
		}
	});
	
	// start the search function
	searchField.on('input', function() {
		programsList.search(searchField.val());
	});
	
	// show no results message
	programsList.on("updated", function() {
		if(programsList.visibleItems.length) {
			$(".no-result").removeClass("show").addClass("hide");
		} else {
			$(".no-result").removeClass("hide").addClass("show");
		}
	});
	
	// filtering process
	$('.filter-dropdown input').change(function() {
		degreeValues = [];
		collegeValue = (collegeFilter.filter(":checked").val()) ? collegeFilter.filter(":checked").val() : "";
		
		// update filter selection count
		var input = $(this).attr("name");
		var dropdown = $(this).parent().parent().parent().parent();
		var count = $('input[name="'+input+'"]:checked').length;
		if(count > 0) {
			dropdown.find('.filter-label .filter-count').text(count);
			dropdown.find('.filter-label .filter-count').addClass("show");
		} else {
			dropdown.find('.filter-label .filter-count').removeClass("show");
		}
		
		// combine all the selected degree values
		degreeFilter.filter(":checked").each(function() {
			degreeValue = $(this).val().split(',');
			$.map(degreeValue, function(val, i) {
				newvalue = $.trim(val).toUpperCase();
				if(newvalue.trim()) {
					degreeValues.push(newvalue);
				}
			});
		});
		
		// start to filter
		programsList.filter(function(item) {
			itemvalue = item.values().degree.split(',');
			var degreeMatch = false;
			if(degreeValues.length) {
				for(i = 0;i < itemvalue.length;i++) {
					if($.inArray(itemvalue[i].replace(/\./g, "").toUpperCase(), degreeValues) !== -1) {
						if(!degreeMatch) {
							degreeMatch = true;
						}
					}
				}
			} else {
				degreeMatch = true;
			}

			if(!degreeValues && !collegeValue) {
				return true;
			} else {
				return (degreeMatch && ((collegeValue == $(item.values().college).find(".name").text().replace(/&amp;/g, "&")) || !collegeValue))
			}
		});
	});
	
	// reset filters and search
	$(".reset").click(function(e) {
		e.preventDefault();
		searchField.val('');
		programsList.filter();
		programsList.search();
		degreeFilter.prop('checked', false);
		collegeFilter.prop('checked', false);
		filters.removeClass("active");
		filters.find('.filter-content').removeClass("active");
		$('.filter-label .filter-count').removeClass("show");
		$(".no-result").removeClass("show").addClass("hide");
	});
});