/*
Script : mooVirtualcheck.js
12/2007 - virtualgadjo / chris at virtual-gadjo dot com

permet de remplacer des checkboxes par des images

- en arguments : l'array des checkboxes à personnaliser et le chemin vers l'image de remplacement,

- en options:
	- hauteur (wrapHeight) et largeur (wrapWidth), valables pour le div qui entourera chaque checkbox, la taille de l'image de fond,
	- un tableau ($$('.labelClass') ou autre) pour les labels du jeu de checkboxes concerné, ça permettra qu'ils jouent leur rôle
	de label même avec les checkboxes remplacées. Faire fonctionner les labels si ils ont une classe rend le script
	moins lourd que d'aller vérifier si oui ou pas chaque checkbox a son label

- reste à pondre une image qui fasse la largeur et deux fois la hauteur avec en partie supérieur le fond pour
checkboxes non cochées et en partie inférieure l'image pour les checkboxes cochées.

- et c'est tout, enfin, pas tout à fait, la classe compte le nombre des checkboxes qui sont... checkées,
nombre accessible avec this.numChecked ce qui rend possible d'effectuer des tâches sur le onComplete de la classe
en fonction de la valeur du nombre d'éléments sélectionnés

- instanciation sans labels
new mooVirtualCheck ($$('.fnhcheck'), "img/checktest.gif", { wrapHeight: 20, wrapWidth: 20 });

- instanciation avec labels
new mooVirtualCheck ($$('.fnhcheck'), "img/checktest.gif", { wrapHeight: 20, wrapWidth: 20, ziLabels: $$('.ziLabelClass') });

- exemple avec un nombre obligatoire de case à cocher : rend le submit utilisable si et seulement si le bon nombre
de cases a été coché.

$('zisubmit').setProperty('disabled', 'disabled');
	
var nombreCheck = 3;
	
var checktest	= new mooVirtualCheck($$('.fnhcheck'), "img/checktest.gif", {
	wrapHeight	: 20,
	wrapWidth	: 20,
	ziLabels: $$('.ziLabelClass'),
	onComplete	: function(){
		if (this.numChecked == nombreCheck) {
			$('zisubmit').removeProperty('disabled', 'disabled');
		}
		else {
			$('zisubmit').setProperty('disabled', 'disabled');
		}
	}
});

Petit conseil au passage : ne jamais oublier oublier que javascript n'est là que pour faire joli et donc
de faire le même boulot côté serveur pour ceux qui viendraient sans javascript.
Le formulaire restera du même coup accessible et sécurisé.

Have swing

version pour mootools 1.1
*/

var mooVirtualCheck = new Class ({

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

	initialize: function(ziCheck, checkImg, options) {
		this.setOptions(options);
		this.ziCheck	= ziCheck;
		this.checkImg	= checkImg;
		this.wrapDiv	= [];
		this.numChecked	= null;

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

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

			this.wrapDiv[i].injectBefore(el);
			this.wrapDiv[i].adopt(el);

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

			if (el.getProperty('checked') == true) {
				this.wrapDiv[i].setStyle('background', 'url(' + this.checkImg + ') left -' + this.options.wrapHeight + 'px no-repeat');
				this.numChecked ++;
			}
			else {
				this.wrapDiv[i].setStyle('background', 'url(' + this.checkImg + ') 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.setProperty('checked', 'checked');
		wrapDiv.setStyle('background', 'url(' + this.checkImg + ') left -' + this.options.wrapHeight + 'px no-repeat');
	},

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

	joujou: function(el, i) {
		if (el.getProperty('checked') == false) {
			this.setChecked(el, this.wrapDiv[i]);
		}
		else {
			this.setUnchecked(el, this.wrapDiv[i]);
		}
		this.countCheck();
		this.fireEvent('onComplete');
	},

	countCheck: function() {
		this.numChecked = 0;
		this.ziCheck.each(function(el) {
			if (el.getProperty('checked') == true) {
				this.numChecked ++;
			}
		}.bind(this));
	}

});
mooVirtualCheck.implement(new Options, new Events);