/*
                     __                      ___                           __                    
         __         /\ \__                  /\_ \                         /\ \     __            
 __  __ /\_\   _ __ \ \ ,_\  __  __     __  \//\ \       __       __      \_\ \   /\_\     ___   
/\ \/\ \\/\ \ /\`'__\\ \ \/ /\ \/\ \  /'__`\  \ \ \    /'_ `\   /'__`\    /'_` \  \/\ \   / __`\ 
\ \ \_/ |\ \ \\ \ \/  \ \ \_\ \ \_\ \/\ \L\.\_ \_\ \_ /\ \L\ \ /\ \L\.\_ /\ \L\ \  \ \ \ /\ \L\ \
 \ \___/  \ \_\\ \_\   \ \__\\ \____/\ \__/.\_\/\____\\ \____ \\ \__/.\_\\ \___,_\ _\ \ \\ \____/
  \/__/    \/_/ \/_/    \/__/ \/___/  \/__/\/_/\/____/ \/___L\ \\/__/\/_/ \/__,_ //\ \_\ \\/___/ 
                                                         /\____/                  \ \____/       
                                                         \_/__/                    \/___/        
Script : mooVirtualRadio.js
petite classe pour utiliser des boutons radios cholis cholis...
04/2008 - virtualgadjo / chris at virtual-gadjo dot com

petit exemple d'utilisation
window.addEvent('domready', function(){
	var radioTest = new mooVirtualRadio ($$('.radioClass'), "img/radioTest.jpg", { wrapHeight: 20, wrapWidth: 20, ziLabels: $$('.ziLabel') });
});

fonctionne avec mootools 1.2
*/

var mooVirtualRadio = new Class ({
	
	Implements: [Events, Options],

	options: {
		onComplete		: Class.empty,
		wrapHeight		: 20,
		wrapWidth		: 20,
		ziLabels		: [],
		rClass          : ''
	},

	initialize: function(ziRadio, radioImg, options) {
		this.setOptions(options);
		this.ziRadio	= ziRadio;
		this.radioMax	= ziRadio.length - 1;
		this.radioImg	= radioImg;
		this.wrapDiv	= [];

		this.ziRadio.each(function(el, i) {

			this.wrapDiv[i]	= new Element ('div', {
				'class'		: this.options.rClass,
				'styles'	: {
					'display'	: 'block',
					'height'	: this.options.wrapHeight,
					'width'		: this.options.wrapWidth,
					'overflow'	: 'hidden'
				}
			});

			this.wrapDiv[i].inject(el, 'before');
			this.wrapDiv[i].grab(el);

			el.setStyle('visibility', 'hidden');

			if (el.getProperty('checked') == true) {
				this.wrapDiv[i].setStyle('background', 'url(' + this.radioImg + ') left -' + this.options.wrapHeight + 'px no-repeat');
			}
			else {
				this.wrapDiv[i].setStyle('background', 'url(' + this.radioImg + ') left top no-repeat');
			}

			this.wrapDiv[i].addEvent('click', function() {
				this.joujou(el, i);
			}.bind(this));

			if (this.options.ziLabels.length != 0) {
				this.options.ziLabels[i].addEvent('click', function() {
					this.joujou(el, i);
				}.bind(this));
			}

		}.bind(this));
	},

	setChecked: function(el, wrapDiv) {
		el.setAttribute('checked', 'checked');
		wrapDiv.setStyle('background', 'url(' + this.radioImg + ') left -' + this.options.wrapHeight + 'px no-repeat');
	},

	setUnchecked: function(el, wrapDiv) {
		el.removeAttribute('checked', 'checked');
		wrapDiv.setStyle('background', 'url(' + this.radioImg + ') left top no-repeat');
	},

	joujou: function(el, i) {
		if (el.getProperty('checked') == false) {
			this.setChecked(el, this.wrapDiv[i]);
			var j;
			for (j = 0; j <= this.radioMax; j ++) {
				if (j != i)
				this.setUnchecked(this.ziRadio[j], this.wrapDiv[j]);
			}
		}
		this.fireEvent('onComplete');
	}

});