Layr

var LayrList = Class.create({
	initialize: function() {
		this.list = new Array();
	},
	add: function (controllerInput, value, operator, element, attributes) {
		if(typeof this.list[controllerInput] == 'undefined') {
			this.list[controllerInput] = new Array();
			this.setupObserver($(controllerInput));
		}
		this.list[controllerInput].push(new Layr(controllerInput, value, operator, element, attributes));
		this.list[controllerInput].last().check();
	},
	setupObserver : function(elm) {
		Event.observe(elm, 'change', this.check.bindAsEventListener(this), false);
	},
	check: function(ev) {
		eventElementId = Event.findElement(ev).id;
		this.list[eventElementId].each(function(element) {
			element.reset();
		});
		this.list[eventElementId].each(function(element) {
			element.check();
		});
	}
});

var Layr = Class.create({
	initialize: function(controllerInput, value, operator, element, attributes) {
		this.controllerInput = $(controllerInput);
		this.value = value;
		this.operator = operator;
		this.element = $(element);
		this.attributeList = attributes.split(" | ");
		this.elementClassList = this.element.classNames();
		this.customClasses = new Array();
	},
	check: function () {
		valueToCheck = this.controllerInput.getValue();
		isMatch = false;
		switch (this.operator){
			case "=":
				if(valueToCheck == this.value) {
					isMatch = true;
				}
				break;
			case "!=":
				if(valueToCheck != this.value) {
					isMatch = true;
				}
				break;
			default:
				break;
		}
		if(isMatch) {
			this.setAttributes();
		}
	},
	setAttributes: function ()
	{
		for (var index = 0; index < this.attributeList.length; ++index) {
			var attribute = this.attributeList[index];
			switch (attribute) {
				case "disabled":
					if(typeof this.element.disable == 'function') {
						this.element.disable();
					}
					this.element.addClassName(attribute);
					this.customClasses.push(attribute);
					break;
				case "hidden":
					this.element.hide();
					break;
				default:
					this.element.addClassName(attribute);
					this.customClasses.push(attribute);
					break;
			}
		}
	},
	reset: function () {
		if(this.customClasses.length > 0) {
			for (var index = 0; index < this.customClasses.length; ++index) {
				var element = this.customClasses[index];
				if(typeof element == 'string') {
					this.element.removeClassName(element);
				}
			}
		}
		this.customClasses = new Array();
		if(typeof this.element.enable == 'function') {
			this.element.enable();
		}
		this.element.show();
	}
});

var list = new LayrList();

/**
* list.add(controllerInput, value, operator, element, attributes)
*
* controllerInput: Id of the input whose value should be checked
* value: The value that must match the controllerInput's value to have an effect on the elemet
* element: Element that's affected by changes to the controllerInput
* attributes: Attributes (disabled, hidden or class names seperated by ' | ' that should be set if the values match
*
* In this example the following would happen:
* Each time the 'change' event is invoked for the input with the id 'controllerInput', the class checks wether its value
* is not equals 3 and if that is so, then the element 'test' is hidden, if its value equals 1, then the class 'class_xy' is added to the element 'test',
* if its value equals 2, then the element 'test' is disabled
* If the condition is not matched, the element is set back to enabled and visible and all added classes are removed again
*
* Available operators are '=' and '!='
*
**/
Event.observe(window, 'load',function(){ list.add('controllerInput', '3', '!=', 'test', 'hidden'); }, false);
Event.observe(window, 'load',function(){ list.add('controllerInput', '1', '=', 'test', 'class_xy'); }, false);
Event.observe(window, 'load',function(){ list.add('controllerInput', '2', '=', 'test', 'disabled'); }, false);