Element.addMethods( {
	getFullClassNames: function(element, className) {
		return element.className.split(' ').select(function(i) {
			return i.startsWith(className);
		});
	}
});

var interactiveRules = {
	'#form input[class*=show-]:click' : function(elem, event) {
		$(elem).getFullClassNames('show-').each(function(className) {
			var target = $(className.substring(5));
			target.show();
			target.fire('elem:show', { target: target });
		});
	},
	
	'#form input[class*=hide-]:click' : function(elem, event) {
		$(elem).getFullClassNames('hide-').each(function(className) {
			var target = $(className.substring(5));
			target.show();
			target.fire('elem:hide', { target: target });
		});
	}
}

Event.observe(window, 'load', function() {

	$(document.documentElement).select('.autoload').each(function(elem) {
		if (elem.checked) {
			$(elem).getFullClassNames('hide-').each(function(className) {
				$(className.substring(5)).hide();
			});
		
			$(elem).getFullClassNames('show-').each(function(className) {
				$(className.substring(5)).show();
			});
		}
	});

	$(document.documentElement).select('.toggleable').each(function(toggleable) {
		toggleable.observe('elem:show', function(data) {
			data.target.show();
			data.target.getFullClassNames('hide-').each(function(className) {
				$(className.substring(5)).hide();
			});
			data.target.getFullClassNames('show-').each(function(className) {
				$(className.substring(5)).show();
			});
		});
	});
	
	$(document.documentElement).select('.toggleable').each(function(toggleable) {
		toggleable.observe('elem:hide', function(data) {
			data.target.hide();
			data.target.getFullClassNames('hide-').each(function(className) {
				$(className.substring(5)).hide();
			});
			data.target.getFullClassNames('show-').each(function(className) {
				$(className.substring(5)).show();
			});
		});
	});
	
	EventSelectors.start(interactiveRules);
	
});