gistfile1.js

var PrettyForms = new Class({
	Implements: [Options, Events],
	options: {
		parentId: 'articlepoll', //only look within this element
		initClass: 'fancyform',  //check for this class on input elements (radio only so far)
		listenClass: 'pollrow',  //the class on the element on which to attach the click event (ie, the row, or label)

                //the following are for making the UE prettier: classes or colors to add/fade to when events happen (* note, the colors here could be replaced morphing from one class to another, but I assumed that is slow- though might not be *)
		listenHoverClass: 'rowhover',      // class to add to the listen element on hover
		listenCheckedClass: 'rowchecked',  // class to add to the listen element when radio is checked.
		listenColor: '#ffffff',            // I use background fading on the row, and this needs a start color. I think there was a problem with dynamically getting this color with IE.
		listenHoverCheckedColor: '#E8FFFB', // color to fade to when hovering over the listen element, and its checked
		listenHoverColor: '#F0F9FF',        // color to fade to when hovering over the listen element
		listenCheckedColor: '#F6FFFC',      // mouse out fade color of the listen element, when checked
                fxDuration: 400,                    //fx duration

		radioClass: 'fancyradio',           // class to add to the replaced radio element
		hoverClass: 'radiohover',           // class to add to the replaced radio element when hovering
		checkedClass: 'radiochecked',       // class to add to the replaced radio element when checked.
                pointerClass: 'cursor-pointer'      // class which changes the cursor to a pointer (finger)
		
	},
	initialize: function(options) {
		this.setOptions(options);
		this.elements = $(this.options.parentId).getElements('input.'+this.options.initClass);
		this.states = [];  //array which stores the current state of the input (though could also be gotten from the input itself)
		this.newElements = []; //array which holds the new inputs (fake inputs)
		this.listenEls = []; //array which holds the listen elements, which trigger the inputs
		this.hfx = [];   //array of fx's on the listen element
		this.disabled = false; //bool for disabling the form.

		if(this.elements) {
			this.elements.each(function(el, ind) {
				if(el.get('type') == 'radio') {
					this.replaceRadio(el, ind);
				}
			}, this);
		}
	},
	replaceRadio: function(el, ind) {
		this.states[ind] = false;
		this.newElements[ind] = new Element('div', {'class':this.options.radioClass});
		if(el.get('checked')) {
			this.newElements[ind].addClass(this.options.checkedClass);
			this.states[ind] = true;
		}
		this.listenEls[ind] = el.getParent('.'+this.options.listenClass);
		this.hfx[ind] = new Fx.Tween(this.listenEls[ind], {duration: this.options.fxDuration, link: 'cancel'});
		if(!this.listenEls[ind]) this.listenEls[ind] = el;
		
		this.listenEls[ind].addClass('cursor-pointer').addEvents({
			'mouseenter': function(e) {
				this.newElements[ind].addClass(this.options.hoverClass);
				this.listenEls[ind].addClass(this.options.listenHoverClass);
				this.hfx[ind].start('background-color', (this.states[ind])?this.options.listenHoverCheckedColor:this.options.listenHoverColor);
			}.bind(this),
			'mouseleave': function(e) {
				this.newElements[ind].removeClass(this.options.hoverClass);
				this.listenEls[ind].removeClass(this.options.listenHoverClass);
				this.hfx[ind].start('background-color', (this.states[ind])?this.options.listenCheckedColor:this.options.listenColor);
			}.bind(this),
			'click' : function(e) {
				if(!this.disabled) {
					if(!this.states[ind]) {
						//it wasnt selected:
						//remove all other selected radios:
						this.states.each(function(state, i) {
							if(i != ind) {
								if(state) {
									//an different selected element, deselect:
									this.unCheckElement(i);
								}
								this.hfx[i].start('background-color', this.options.listenColor);
							}
						}, this);
						//now check this one:
						this.checkElement(ind);
					} else {
						//its already selected:
					}
				}
			}.bind(this)
		});
		//swap:
		this.newElements[ind].inject(this.elements[ind].getParent(), 'top');
		this.elements[ind].setStyle('display', 'none');
	}, 
	checkElement: function(i) {
		this.newElements[i].addClass(this.options.checkedClass);
		this.listenEls[i].addClass(this.options.listenCheckedClass);
		this.states[i] = true;
		this.elements[i].set('checked', true);
	},
	unCheckElement: function(i) {
		this.newElements[i].removeClass(this.options.checkedClass);
		this.listenEls[i].removeClass(this.options.listenCheckedClass);
		this.states[i] = false;
		this.elements[i].set('checked', false);
	},
	
	disabledMode: function() {
		//disable the radios from working (though doesnt add any disabled class, should add that)
		//this.states = [];
		this.disabled = true;
		this.listenEls.each(function(el) { el.removeClass(this.options.pointerClass); });
	},
	
	enabledMode: function() {
		this.disabled = false;
		this.listenEls.each(function(el) { el.addClass(this.options.pointerClass); });
	}
	
});