var CategoryFilter = Class.create({
	initialize: function(context) {
		this.context = $(context) || $$('body')[0];
		this.filters = this.context.down('.key_filters');
		if(this.filters === undefined) {
			return false;
		}

		// Filter "links" click event to initiate filter...
		document.observe('click', function(e) {
			var element = e.element().up('.key_filter') || e.element();
			if(
				element.hasClassName('key_filter') &&
				(
					element.ancestors().indexOf(this.context) != -1
				)
			) {
				this.filter(element);
				e.stop();
			}
		}.bind(this));

		// Add clear filter link
		if(this.context.down('.key_filter_clear') === undefined) {
			this.filters.insert(
				this.filters.firstDescendant().cloneNode(true)
			);

			var clearFilter;
			if(this.filters.immediateDescendants().last().hasClassName('.key_filter')) {
				clearFilter = this.filters.immediateDescendants().last();
			} else {
				clearFilter = this.filters.immediateDescendants().last().down('.key_filter');
			}
			clearFilter.update('Clear filter');
			clearFilter.classNames().each(function(className) {
				if(className.match(/^key_filter_(\d+)$/)) {
					clearFilter.removeClassName(className);
				}
			}.bind(this));
			clearFilter.addClassName('key_filter_clear');
			this.clearFilter = this.filters.immediateDescendants().last().hide();
		}
	},
	filter: function(element) {
		// Clear existing filters
		this.context.select('.key_filter_selected') .
			without(element.addClassName('key_filter_selected')) .
			invoke('removeClassName', 'key_filter_selected');

		var filter;
		element.classNames().each(function(className) {
			var match = className.match(/^key_filter_(\d+)$/);
			if(match) {
				filter = match[1];
				throw $break;
			}
		});

		if(filter !== undefined) {
			this.context.select('.key_filter_target').each(function(filterTarget) {
				if(filterTarget.hasClassName('key_filter_group_' + filter)) {
					filterTarget.setOpacity(1);
				} else {
					filterTarget.setOpacity(.25);
				}
			});
			this.clearFilter.show();
		} else if(element.hasClassName('key_filter_clear')) {
			this.context.select('.key_filter_target').invoke('setOpacity', 1);
			this.clearFilter.hide();
		}
	}
});

document.observe('dom:loaded', function() {
	$$('.key_filter_context').each(function(filterContext) {
		new CategoryFilter(filterContext);
	});
});