$(document).ready( function() {
    
    // any time a filter drop-down changes...
    $("select.filter").change(function () {
    	var classes = "";
    	var description = "";
	
	// collect the selected filters
	$("select.filter").each(function() {
	    if ($(this).val() != '*') {
		classes += "." + $(this).val();
		if (description != '') description += ', ';
		description += $.trim($(this).find("option:selected").text()); 
	    }
	});
	
	if (classes == "") {
	    // if no filters selected, show all items
	    $("table.item-list tr").show();
	} else {
	    // otherwise, hide everything...
	    $("table.item-list tr").hide();
	    // then show only the matching items
	    rows = $("table.item-list tr" + classes);
	    if (rows.size() > 0) {
		rows.show();
	    }
	}
	
	// count up the matching items
	if (description != '') {
	    description += " (" + $("table.item-list tr:visible").size() + ")";
	}
	
	// print a description of the active filter
	$("#filter-description").html(description);
    }).change(); // here in case a drop-down has been pre-selected
    
    // just a nice little hover effect
    $("table.item-list tr").hover(
        function() {
            $(this).addClass("hover");
        },
        function() {
            $(this).removeClass("hover");
        }
    );
});