// On referencie toutes les sections
var section = {
	view: {
		text:     '#CONTAINER > section[data-sublink="view"] ',
		element:   document.querySelector('#CONTAINER > section[data-sublink="view"]'),
		searchbar: document.querySelector('#CONTAINER > section[data-sublink="view"] > .searchbar')
	},

	create: {
		text:    '#CONTAINER > section[data-sublink="create"] ',
		element: document.querySelector('#CONTAINER > section[data-sublink="create"]')
	},

	remove: {
		text:    '#CONTAINER > section[data-sublink="remove"] ',
		element: document.querySelector('#CONTAINER > section[data-sublink="remove"]')
	},

	edit: {
		text:    '#CONTAINER > section[data-sublink="edit"] ',
		element: document.querySelector('#CONTAINER > section[data-sublink="edit"]')
	},

	members: {
		text:    '#CONTAINER > section[data-sublink="members"] ',
		element: document.querySelector('#CONTAINER > section[data-sublink="members"]'),

		chooser: {
			text:    '#CONTAINER > section[data-sublink="members"] form#choose-cluster ',
			element: document.querySelector('#CONTAINER > section[data-sublink="members"] form#choose-cluster')
		}
	},

	permissions: {
		text:    '#CONTAINER > section[data-sublink="permissions"] ',
		element: document.querySelector('#CONTAINER > section[data-sublink="permissions"]'),
		searchbar: document.querySelector('#CONTAINER > section[data-sublink="permissions"] > .searchbar'),

		member_view: document.querySelector('#CONTAINER > section[data-sublink="permissions"] > [data-member-view]') != null
	},

};


/* GESTION DE L'AFFICHAGE DES GROUPES
*
*/
if( section.view.element != null ){

	/* (0) On gère le zoom sur un utilisateur via URL */
	if( pageManager.vars.length > 1 && /^(u|m)\d+$/.test(pageManager.vars[1]) ){
		document.location = '#'+pageManager.vars[1];
		if( document.getElementById(pageManager.vars[1]) != null)
			document.getElementById(pageManager.vars[1]).addClass('selected');
	}

	/* (1) On recupere tous les liens vers des sous-sections */
	section.view.link = {
		edit:   document.querySelectorAll(section.view.text + '.link_edit[data-cluster]'),
		remove: document.querySelectorAll(section.view.text + '.link_remove[data-cluster]')
	};

	/* (2) On récupère toutes les actions de groupes */
	section.view.group = {
		rem: document.querySelectorAll(section.view.text + '.rem-member[data-cluster][data-member]'),
		add: document.querySelectorAll(section.view.text + '.add-member[data-cluster]')
	};


	/* (3) Gestion de la recherche instantannee */
	section.view.searchbar.addEventListener('keyup', function(e){

		var search = {
			path: 'clusterDefault/search',
			keywords: section.view.searchbar.value
		};

		// On envoie la requete
		api.send(search, function(result){
			if( result.error == 0 ){ // si aucune erreur

				// On enregistre tous les UID dans un tableau
				var uid_list = [];
				for( var i = 0 ; i < result.clusters.length ; i++ )
					if( result.clusters[i].hasOwnProperty('id_user_cluster') )
						uid_list.push( 'u'+result.clusters[i].id_user_cluster);
					else
						uid_list.push( 'm'+result.clusters[i].id_machine_cluster);

				// On recupere la liste des elements correspondants aux utilisateurs
				var cluster_list = document.querySelectorAll(section.view.text + '> article.inline-box[id]');

				// Pour chaque cluster
				for( var i = 0 ; i < cluster_list.length ; i++ ){
					// Si doit etre visible
					if( uid_list.indexOf(cluster_list[i].id) > -1 )
						cluster_list[i].remClass('hidden');
					// Si ne doit pas etre visible
					else
						cluster_list[i].addClass('hidden');
				}
			}
		});

	}, false);

	var i;


	/* (4) On gere la "redirection" vers la modification */
	for( i = 0 ; i < section.view.link.edit.length ; i++ ){

		section.view.link.edit[i].addEventListener('click', function(e){
			pageManager.vars = [ 'edit', e.target.getData('cluster') ];
			pageManager.refresh();
		}, false);

	}

	/* (5) On gere la "redirection" vers la suppression */
	for( i = 0 ; i < section.view.link.remove.length ; i++ ){

		section.view.link.remove[i].addEventListener('click', function(e){
			pageManager.vars = [ 'remove', e.target.getData('cluster') ];
			pageManager.refresh();
		}, false);

	}

	/* (6) On gere la "suppression" d'un groupe */
	section.view.group.remfunc = function(e){
		var prefix  = e.target.getData('cluster')[0];
		var cluster = e.target.getData('cluster').slice(1);

		// {1} On rédige la requête //
		var request        = {};
		request.path       = (prefix=='u') ? 'userDefault/unlink' : 'machineDefault/unlink';
		request.id_cluster = cluster;

		if( prefix == 'u' ) request.id_user    = e.target.getData('member');
		else                request.id_machine = e.target.getData('member');

		// {2} On envoie la requête //
		api.send(request, function(response){

			// {3} Si erreur, on ne fait rien //
			if( response.error != 0 )
				return false;

			// {4} Si tout s'est bien passé //
			e.target.parentNode.parentNode.removeChild( e.target.parentNode );
		});

	};


	for( i = 0 ; i < section.view.group.rem.length ; i++ )
		section.view.group.rem[i].addEventListener('click', section.view.group.remfunc, false);




	/* (7) On gere la "modification" des membres d'un groupe */
	for( i = 0 ; i < section.view.group.add.length ; i++ ){

		section.view.group.add[i].addEventListener('mouseup', function(e){

			/* (1) Check if already opened */
			var opened = e.target.innerHTML != '+';

			/* (2) Hide all dropdowns */
			for( j = 0 ; j < section.view.group.add.length ; j++ )
				section.view.group.add[j].innerHTML = '+';

			/* (3) Try to show dropdown if not already */
			if( !opened ){


				/* (1) Get the group id/type */
				if( !/^(u|m)(\d+)$/.test(e.target.getData('cluster')) )
					return;

				var cluster_id    = parseInt(RegExp.$2);
				var path = (RegExp.$1 == 'u') ? 'userDefault/getAll' : 'machineDefault/getAll';

				/* (2) Get already members ids */
				var brothers = e.target.parentNode.children[1].children;
				var already  = []; // will contain already ids


				for( j = 0 ; j < brothers.length ; j++ )
					already += parseInt( brothers[j].children[0].getData('member') );

				/* (3) Call list of members */
				api.send({path: path}, function(response){

					// Manage error
					if( response.error != 0 ){
						console.warn('error loading list of members');
						return;
					}
					

					// remove already members
					var members = (path == 'userDefault/getAll') ? response.users : response.machines;


					/* (4) Build dropdown content without already members */
					dropdown = "<div class='dropdown'>";

					for( j = 0 ; j < members.length ; j++ ){
						if( path == 'userDefault/getAll' && already.indexOf(members[j].id_user) > -1 )
							continue;
						if( path == 'machineDefault/getAll' && already.indexOf(members[j].id_machine) > -1 )
							continue;

						if( path == 'userDefault/getAll' )
							dropdown += "<span data-memberid='"+members[j].id_user+"'>"+members[j].username+"</span>";
						else
							dropdown += "<span data-memberid='"+members[j].id_machine+"'>"+members[j].name+"</span>";

					}

					dropdown += "</div>";

					e.target.innerHTML = '+'+dropdown;


					/* (5) Attach events to dropdown elements */
					var dropdownElements = e.target.children[0].children;

					for( j = 0 ; j < dropdownElements.length ; j++ )
						dropdownElements[j].addEventListener('mousedown', function(e2){

						// {1} Get member id/username //
						var request = { id_cluster: cluster_id };
						var memberid = e2.target.getData('memberid');
						var username = e2.target.innerHTML;

						// manage error
						if( memberid === false )
							return;

						// {2} Add member to group //
						if( path == 'userDefault/getAll' ){
							request.path    = 'userDefault/link';
							request.id_user = memberid;
						}else{
							request.path       = 'machineDefault/link';
							request.id_machine = memberid;
						}
						

						// {3} Call link //
						api.send(request, function(response2){
	
							// manage error
							if( response2.error != 0 ){
								console.warn('cannot link user to group');
								return;
							}

							// Remove dropdown (in order to be reloaded with new members);
							e.target.innerHTML = '+';

							// {4} Update display //
							var newMemberRemoveIcon = document.createElement('span');
							newMemberRemoveIcon.setAttribute('class', 'rem-member');
							newMemberRemoveIcon.setAttribute('data-member', memberid);
							newMemberRemoveIcon.setAttribute('data-cluster', e.target.getData('cluster'));
							
							newMemberRemoveIcon.addEventListener('click', section.view.group.remfunc, false);

							var newMember = document.createElement('span');
							newMember.appendChild( document.createTextNode(username) );
							newMember.appendChild(newMemberRemoveIcon);

							e.target.parentNode.children[1].appendChild(newMember);


						});

					}, false);

				});

			}

		}, false);

	}
	

	


}














/* GESTION DE LA CREATION D'UN GROUPE
*
*/
if( section.create.element != null ){

	// On recupere tous les champs
	section.create.input = {
		name:   document.querySelector(section.create.text + '#create_name'),
		class:  document.querySelector(section.create.text + '#create_class'),
		submit: document.querySelector(section.create.text + '#create_submit')
	}


	/* (n) Gestion de l'envoi du formulaire */
	section.create.input.submit.addEventListener('click', function(e){
		// On annule l'envoi de base (PHP)
		e.preventDefault();

		var request = {
			path: 'clusterDefault/create', // On veut creer un utilisateur
			name:  section.create.input.name.value,
			class: section.create.input.class.value
		};

		api.send(request, function(answer){
			if( answer.error == 0 ){ // Tout s'est bien deroule
				console.log('Groupe cree!');

				section.create.input.submit.anim('active', 1500);

				// On vide les champs
				section.create.input.name.value = '';
				section.create.input.class.children[0].selected = 'selected';
			}

		});



	}, false);

}








/* [3] remove -> Suppression de cluster
=========================================================*/
if( section.remove.element != null ){

	/* (1) Definition des champs */
	section.remove.input = {
		search: {
			view:    document.querySelector(section.remove.text + '.remove_search_view'),
			num:    document.querySelector(section.remove.text  + '.remove_search_num'),
			sum:    document.querySelector(section.remove.text  + '.remove_search_sum'),

			keyword: document.querySelector(section.remove.text + '#remove_search_keyword'),
			id:      document.querySelector(section.remove.text + '#remove_search_id'),
			submit:  document.querySelector(section.remove.text + '#remove_search_submit')
		},

		name:   document.querySelector(section.remove.text + '#remove_name'),
		class:   document.querySelector(section.remove.text + '#remove_class'),

		submit: document.querySelector(section.remove.text + '#remove_submit')
	};

	var lastkeywords_remove = '';
	var found_remove        = [];
	var searchindex_remove  = 0;



	/* (2) Gestion de l'auto-remplissage par lien
	---------------------------------------------------------*/
	function autofill_remove(){
		/* (0) Valeurs par défaut */
		var cluster_data = {
			id_cluster:    '',
			class:         '',
			name:          '',
			disable_input: true
		};


		// {1} Si aucun résultat //
		if( found_remove[searchindex_remove] == null ){


			// Mise a jour des indices des resultats
			section.remove.input.search.num.innerHTML = 0;
			searchindex_remove = 0;


		// {2} Si au moins 1 résultat //
		}else{

			var tmpIdCluster;
			var clusterClass = '';

			// Si groupe utilisateur
			if( found_remove[searchindex_remove].hasOwnProperty('id_user_cluster') ){
				tmpIdCluster = found_remove[searchindex_remove].id_user_cluster;
				clusterClass = 0;
			// Sinon groupe machine
			}else if( found_remove[searchindex_remove].hasOwnProperty('id_machine_cluster') ){
				tmpIdCluster = found_remove[searchindex_remove].id_machine_cluster;
				clusterClass = 1;
			}

			// On recupere les données de la user selectionnee
			cluster_data = {
				id_cluster:    tmpIdCluster,
				class:         clusterClass,
				name:          found_remove[searchindex_remove]['name'],
				disable_input: false
			};

			// Mise a jour des indices des resultats
			section.remove.input.search.num.innerHTML = searchindex_remove+1;

		}


		// {3} On auto-remplit le formulaire //
		// On enregistre l'UID du groupe
		section.remove.input.search.id.value = cluster_data.id_cluster;

		// Auto-remplissage du formulaire
		section.remove.input.name.value  = cluster_data.name;

		if( [0,1].indexOf(cluster_data.class) > -1 ) section.remove.input.class.value = cluster_data.class == 0 ? 'utilisateur' : 'machine';
		else                                         section.remove.input.class.value = '';

		// On gere le caractere "inactif" du submit
		section.remove.input.submit.disabled = cluster_data.disable_input;


	}



	/* (3) Gestion de la recherche
	---------------------------------------------------------*/
	section.remove.input.search.submit.addEventListener('click', function(e){
		// On annule l'envoi de base (PHP)
		e.preventDefault();


		/* (1) Si le champ n'est pas vide */
		if( section.remove.input.search.keyword.value != '' ){

			/* (2) Si même mots-clés, on passe au prochain résultat */
			if( section.remove.input.search.keyword.value == lastkeywords_remove ){

				// on affiche le prochain (decalage cyclique)
				searchindex_remove = (searchindex_remove+1) % found_remove.length;
				// On met à jour l'auto-remplissage
				autofill_remove();


			/* (3) Nouveaux mots-clés, on lance la recherche */
			}else{

				/* (4) Redaction de la requete */
				var getClusters = {
					path:     'clusterDefault/search',
					keywords:  section.remove.input.search.keyword.value
				};

				/* (5) On envoie la requête */
				api.send(getClusters, function(getClustersResponse){
					if( getClustersResponse.error == 0 ){ // si pas d'erreur

						// On notifie que la recherche est terminée
						section.remove.input.search.submit.anim('active', 1000);

						/* (6) On met à jour les données des users, et le compteur */
						searchindex_remove                        = 0;
						found_remove                              = getClustersResponse.clusters;
						section.remove.input.search.sum.innerHTML = found_remove.length;

						// On met à jour l'auto-remplissage
						autofill_remove();
					}

					// On met à jour la dernière recherche
					lastkeywords_remove = getClusters.keywords;
				});

			}

		}

	}, false);



	/* (n) Gestion de l'envoi du formulaire */
	section.remove.input.submit.addEventListener('click', function(e){
		// On annule l'envoi de base (PHP)
		e.preventDefault();

		// Si l'id est defini
		if( section.remove.input.search.id.value != '' ){

			var clusterClass = (found_remove[searchindex_remove].hasOwnProperty('id_user_cluster')) ? 0 : 1;

			/* (2) On supprime la cluster */
			var request = {
				path:       'clusterDefault/delete', // On veut supprimer cet utilisateur
				id_cluster: section.remove.input.search.id.value,
				class:      clusterClass
			};

			api.send(request, function(answer){
				if( answer.error == 0 && answer.status == true ){ // Tout s'est bien deroule
					console.log('Groupe supprimee!');

					section.remove.input.submit.anim('active', 1500);

					/* [1] On actualise la recherche
					=========================================================*/
					if( section.remove.input.search.keyword.value.length == 0 ){ // Si aucun champ de recherche, on efface juste l'entrée

						// On supprime toutes les valeurs
						found_remove = [];
						searchindex_remove = 0;

					}else{
						var getClusters = {
							path:     'clusterDefault/search',
							keywords:  section.remove.input.search.keyword.value
						};

						api.send(getClusters, function(getClustersResponse){
							if( getClustersResponse.error == 0 ){ // si pas d'erreur
								searchindex_remove                        = 0;
								found_remove                              = getClustersResponse.clusters;
								section.remove.input.search.sum.innerHTML = found_remove.length;
							}
						});

					}
					autofill_remove();



				}else                          // Erreur
					console.error('ModuleError::'+answer.error);
			});

		}

	}, false);

}










/* [4] edit -> Modification de cluster
=========================================================*/
if( section.edit.element != null ){

	// Definition des champs
	section.edit.input = {
		search: {
			view:    document.querySelector(section.edit.text + '.edit_search_view'),
			num:     document.querySelector(section.edit.text + '.edit_search_num'),
			sum:     document.querySelector(section.edit.text + '.edit_search_sum'),

			keyword: document.querySelector(section.edit.text + '#edit_search_keyword'),
			id:      document.querySelector(section.edit.text + '#edit_search_id'),
			submit:  document.querySelector(section.edit.text + '#edit_search_submit')
		},

		name:            document.querySelector(section.edit.text + '#edit_name'),
		class:           document.querySelector(section.edit.text + '#edit_class'),

		submit:          document.querySelector(section.edit.text + '#edit_submit')
	};

	var lastkeywords_edit = '';
	var found_edit        = [];
	var searchindex_edit  = 0;



	/* (2) Gestion de l'auto-remplissage par lien
	---------------------------------------------------------*/
	function autofill_edit(){
		/* (0) Valeurs par défaut */
		var cluster_data = {
			id_cluster:    '',
			class:         '',
			name:          '',
			disable_input: true
		};


		// {1} Si aucun résultat //
		if( found_edit[searchindex_edit] == null ){


			// Mise a jour des indices des resultats
			section.edit.input.search.num.innerHTML = 0;
			searchindex_edit = 0;


		// {2} Si au moins 1 résultat //
		}else{

			var tmpIdCluster, clusterClass;

			// Si groupe utilisateur
			if( found_edit[searchindex_remove].hasOwnProperty('id_user_cluster') ){
				tmpIdCluster = found_edit[searchindex_remove].id_user_cluster;
				clusterClass = 0;
			// Sinon groupe machine
			}else if( found_edit[searchindex_edit].hasOwnProperty('id_machine_cluster') ){
				tmpIdCluster = found_edit[searchindex_remove].id_machine_cluster;
				clusterClass = 1;
			}

			// On recupere les données de la user selectionnee
			cluster_data = {
				id_cluster:    tmpIdCluster,
				class:         clusterClass,
				name:          found_edit[searchindex_remove]['name'],
				disable_input: false
			};

			// Mise a jour des indices des resultats
			section.edit.input.search.num.innerHTML = searchindex_edit+1;

		}


		// {3} On auto-remplit le formulaire //
		// On enregistre l'UID du groupe
		section.edit.input.search.id.value = cluster_data.id_cluster;

		// Auto-remplissage du formulaire
		section.edit.input.name.value  = cluster_data.name;

		if( [0,1].indexOf(cluster_data.class) > -1 ) section.edit.input.class.value = cluster_data.class == 0 ? 'utilisateur' : 'machine';
		else                                         section.edit.input.class.value = '';

		// On gere le caractere "inactif" du submit
		section.edit.input.submit.disabled = cluster_data.disable_input;


	}




	/* (3) Gestion de la recherche
	---------------------------------------------------------*/
	section.edit.input.search.submit.addEventListener('click', function(e){
		// On annule l'envoi de base (PHP)
		e.preventDefault();


		/* (1) Si le champ n'est pas vide */
		if( section.edit.input.search.keyword.value != '' ){

			/* (2) Si même mots-clés, on passe au prochain résultat */
			if( section.edit.input.search.keyword.value == lastkeywords_edit ){

				// on affiche le prochain (decalage cyclique)
				searchindex_edit = (searchindex_edit+1) % found_edit.length;
				// On met à jour l'auto-remplissage
				autofill_edit();


			/* (3) Nouveaux mots-clés, on lance la recherche */
			}else{

				/* (4) Redaction de la requete */
				var getClusters = {
					path:     'clusterDefault/search',
					keywords: section.edit.input.search.keyword.value
				};

				/* (5) On envoie la requête */
				api.send(getClusters, function(getClustersResponse){
					if( getClustersResponse.error == 0 ){ // si pas d'erreur

						// On notifie que la recherche est terminée
						section.edit.input.search.submit.anim('active', 1000);

						/* (6) On met à jour les données des users, et le compteur */
						searchindex_edit = 0;
						found_edit = getClustersResponse.clusters;
						section.edit.input.search.sum.innerHTML = found_edit.length;

						// On met à jour l'auto-remplissage
						autofill_edit();
					}

					// On met à jour la dernière recherche
					lastkeywords_edit = getClusters.keywords;
				});

			}

		}

	}, false);






	/* (n) Gestion de l'envoi du formulaire */
	section.edit.input.submit.addEventListener('click', function(e){
		// On annule l'envoi de base (PHP)
		e.preventDefault();

		// Si l'id est defini
		if( section.edit.input.search.id.value != '' ){

			var clusterClass = (found_edit[searchindex_edit].hasOwnProperty('id_user_cluster')) ? 0 : 1;

			var request = {
				path: 'clusterDefault/edit', // On veut creer une cluster
				id_cluster: section.edit.input.search.id.value,
				name:       section.edit.input.name.value,
				class:      clusterClass
			};

			api.send(request, function(answer){
				if( answer.error == 0 && answer.status == true ){ // Tout s'est bien deroule
					console.log('Groupe modifiee!');

					section.edit.input.submit.anim('active', 1500);

					/* (1) On actualise le groupe modifié
					---------------------------------------------------------*/
					// On met a jour le cluster
					var request2 = {
						path:       'clusterDefault/getById',
						id_cluster: request.id_cluster,
						class:      clusterClass
					};

					// On récupère la user d'uid donné dans l'URL
					api.send(request2, function(response){
						// Si aucune erreur et un résultat
						if( response.error == 0 ){
							found_edit[searchindex_edit] = response.cluster; // On récupère le résultat
							autofill_edit();                                 // On auto-remplit
						}
					});


				}else // Erreur
					console.error('ModuleError::'+answer.error);
			});

		}

	}, false);



}







/* [5] chargement du groupe courant (depuis url)
=========================================================*/
// gestion automatique au chargement de la page si id_clusterdans url "/groups/.+/(u|m):id_cluster:"
if( pageManager.vars.length >= 2 && /^(u|m)\d+$/.test(pageManager.vars[1]) ){

	var prefix  = pageManager.vars[1][0];
	var cluster = pageManager.vars[1].slice(1);

	var request = {
		path:       'clusterDefault/getById',
		id_cluster: cluster,
		class:      (prefix=='u') ? 0 : 1
	};

	// On récupère la user d'uid donné dans l'URL
	api.send(request, function(response){
		// Si aucune erreur et un résultat
		if( response.error == 0 ){
			found_edit       = [ response.cluster ]; // on récupère le résultat
			searchindex_edit = 0;                    // on remet le compteur à 0
			autofill_edit();                         // on auto-remplit

			/* (2) On pré-remplis le formulaire de suppression */
			found_remove       = [ response.cluster ]; // on récupère le résultat
			searchindex_remove = 0;                    // on remet le compteur à 0
			autofill_remove();                         // on auto-remplit
// On auto-remplit
		}
	});
}


















/* GESTION DU CHOIX DU GROUPE AUQUEL MODIFIER LA COMPOSITION DES MEMBRES
*
*/
if( section.members.element != null && section.members.chooser.element != null ){

	/* [1] Initialisation et gestion statique
	=========================================================*/
	/* (1) On initialise le deflater */
	section.members.chooser.deflater = new FormDeflater(
		section.members.chooser.element,
		['select'],
		['data-name']
	);

	/* (2) On récupère le bouton */
	section.members.chooser.submit = document.querySelector(section.members.chooser.text+'#choose-cluster');



	/* [2] Gestion de l'évènement
	=========================================================*/
	section.members.chooser.submit.addEventListener('click', function(e){

		/* (0) On annule l'action par défaut (PHP) */
		e.preventDefault();

		/* (1) On récupère les données */
		var data = section.members.chooser.deflater.deflate()['cluster'];

		// Vérification du type
		if( !/^(u|m)\d+$/.test(data) )
			return;

		/* (2) Redirection */
		pageManager.vars = [ 'members', data ];
		pageManager.refresh();

	}, false);



}











/* GESTION DE LA MODIFICATION DES MEMBRES
*
*/
if( section.members.element != null && section.members.chooser.element == null ){

	// Si bouton pour revenir au choix de groupe
	section.view.group.change_members = $('members-change-group') || null;

	// on crée/gère le lien
	if( section.view.group.change_members !== null )
		section.view.group.change_members.addEventListener('click', function(e){
			pageManager.vars = [ 'members' ];
			pageManager.refresh();
		}, false);


	/* (1) On initialise le Deflater() */
	section.members.deflater = new FormDeflater(
		section.members.element,
		['input'],
		['data-name']
	);

	/* (2) On enregistre les données initiales */
	section.members.baseData = section.members.deflater.deflate()['members'];

	/* (3) On enregistre les données in-HTML */
	section.members.class     = document.querySelector('#members-member-class').value;
	section.members.idcluster = document.querySelector('#members-member-idcluster').value;


	/* [1] Dès qu'une valeur est modifiée dans le formulaire
	=========================================================*/
	section.members.element.addEventListener('click', function(e){

		/* (0) On récupère les données + initialise les variables */
		var i;
		var linked   = [];
		var unlinked = [];

		var data     = section.members.deflater.deflate()['members'];
		// Si c'est pas un tableau, on le met en tableau
		if( !(data instanceof Array) )
			data = [data];

		/* (1) Si on a ajouté des liens */
		for( i = 0 ; i < data.length ; i++ )
			if( section.members.baseData.indexOf(data[i]) == -1 ) // Si pas dans les données initiales, on ajoute
				linked.push( data[i] );

		/* (2) Si on a supprimé des liens */
		for( i = 0 ; i < section.members.baseData.length ; i++ )
			if( data.indexOf(section.members.baseData[i]) == -1 ) // Si pas dans les données modifiées, on ajoute
				unlinked.push( section.members.baseData[i] );


		/* (3) Gestion de l'ajout de liens */
		for( i = 0 ; i < linked.length ; i++ ){
			// {1} On rédige la requête //
			var linkReq = {};
			linkReq.path = (section.members.class==0) ? 'userDefault/link' : 'machineDefault/link';
			linkReq.id_cluster = section.members.idcluster;

			if( section.members.class == 0 ) linkReq.id_user    = linked[i];
			else                            linkReq.id_machine = linked[i];

			// {2} On envoie la requête //
			api.send(linkReq, function(linkRes){
				if( linkRes.error != 0 )
					console.error('Erreur d\'ajout de membre');
			});
		}



		/* (4) Gestion de la suppression de liens */
		for( i = 0 ; i < unlinked.length ; i++ ){
			// {1} On rédige la requête //
			var unlinkReq = {};
			unlinkReq.path = (section.members.class==0) ? 'userDefault/unlink' : 'machineDefault/unlink';
			unlinkReq.id_cluster = section.members.idcluster;

			if( section.members.class == 0 ) unlinkReq.id_user    = unlinked[i];
			else                            unlinkReq.id_machine = unlinked[i];

			// {2} On envoie la requête //
			api.send(unlinkReq, function(unlinkRes){
				if( unlinkRes.error != 0 )
					console.error('Erreur d\'ajout de membre');
			});
		}


		/* (5) On met à jour les données initiales */
		section.members.baseData = data;


	}, false);

}








/* GESTION DES PERMISSIONS
*
*/
if( section.permissions.element != null && !section.permissions.member_view ){

	/* (1) On récupère toutes les actions de groupes */
	section.permissions.group = {
		rem: document.querySelectorAll(section.permissions.text + '.rem-permission[data-target][data-permission][data-source]'),
		add: document.querySelectorAll(section.permissions.text + '.add-permission[data-target][data-permission]')
	};


	/* (2) Gestion de la recherche instantannee */
	section.permissions.searchbar.addEventListener('keyup', function(e){

		var search = {
			path:     'clusterDefault/search',
			keywords: section.permissions.searchbar.value,
			class:    1
		};

		// On envoie la requete
		api.send(search, function(result){
			if( result.error == 0 ){ // si aucune erreur

				// On enregistre tous les UID dans un tableau
				var uid_list = [];
				for( var i = 0 ; i < result.clusters.length ; i++ )
					uid_list.push( result.clusters[i].id_machine_cluster );

				// On recupere la liste des elements correspondants aux utilisateurs
				var cluster_list = document.querySelectorAll(section.permissions.text + '> article.inline-box[id]');

				// Pour chaque cluster
				for( var i = 0 ; i < cluster_list.length ; i++ ){
					// Si doit etre visible
					if( uid_list.indexOf( parseInt(cluster_list[i].id) ) > -1 )
						cluster_list[i].remClass('hidden');
					// Si ne doit pas etre visible
					else
						cluster_list[i].addClass('hidden');
				}
			}
		});

	}, false);

	var i;

	/* (3) On gere la "suppression" d'une permission */
	section.permissions.group.remfunc = function(e){
		// {1} On rédige la requête //
		var request = {
			path:       'clusterDefault/remPermission',
			id_target: e.target.getData('target'),
			id_source: e.target.getData('source'),
			id_action: e.target.getData('permission')
		};


		// {2} On envoie la requête //
		api.send(request, function(response){

			// {3} Si erreur, on ne fait rien //
			if( response.error != 0 )
				return false;


			// {4} Si tout s'est bien passé //
			e.target.parentNode.parentNode.removeChild( e.target.parentNode );
		});

	};



	for( i = 0 ; i < section.permissions.group.rem.length ; i++ )
		section.permissions.group.rem[i].addEventListener('click', section.permissions.group.remfunc, false);






	/* (4) On gere la "modification" des membres d'une permission d'un groupe */
	for( i = 0 ; i < section.permissions.group.add.length ; i++ ){

		section.permissions.group.add[i].addEventListener('mouseup', function(e){

			/* (1) Check if already opened */
			var opened = e.target.innerHTML != '+';

			/* (2) Hide all dropdowns */
			for( j = 0 ; j < section.permissions.group.add.length ; j++ )
				section.permissions.group.add[j].innerHTML = '+';

			/* (3) Try to show dropdown if not already */
			if( !opened ){

				/* (1) Get the group id/permission */
				if( !/^\d+$/.test(e.target.getData('target')) || !/^\d+$/.test(e.target.getData('permission')) )
					return;

				var cluster_id = parseInt(e.target.getData('target'));
				var permission_id = parseInt(e.target.getData('permission'));

				/* (2) Get already members ids */
				var brothers = e.target.parentNode.children[1].children;
				var already  = []; // will contain already ids


				for( j = 0 ; j < brothers.length ; j++ )
					already += parseInt( brothers[j].children[0].getData('source') );

				/* (3) Call list of user_cluster members */
				api.send({path: 'clusterDefault/getAll', class: 0}, function(response){

					// Manage error
					if( response.error != 0 ){
						console.warn('error loading list of members');
						return;
					}
					

					// remove already authed
					var members = response.clusters;


					/* (4) Build dropdown content without already members */
					dropdown = "<div class='dropdown'>";

					for( j = 0 ; j < members.length ; j++ ){
						if( already.indexOf(members[j].id_user_cluster) > -1 )
							continue;

						dropdown += "<span data-memberid='"+members[j].id_user_cluster+"'>"+members[j].name+"</span>";

					}

					dropdown += "</div>";

					e.target.innerHTML = '+'+dropdown;


					/* (5) Attach events to dropdown elements */
					var dropdownElements = e.target.children[0].children;

					for( j = 0 ; j < dropdownElements.length ; j++ )
						dropdownElements[j].addEventListener('mousedown', function(e2){

						// {1} Get member id/username //
						var memberid = e2.target.getData('memberid');
						var username = e2.target.innerHTML;

						// manage error
						if( memberid === false )
							return;

						// {2} Request : add member to group //
						var request = {
							path: 'clusterDefault/addPermission',
							id_target: cluster_id,
							id_source: memberid,
							id_action: permission_id
						};
						

						// {3} Call link //
						api.send(request, function(response2){
	
							// manage error
							if( response2.error != 0 ){
								console.warn('cannot add permission to group');
								return;
							}

							// Remove dropdown (in order to be reloaded with new members);
							e.target.innerHTML = '+';

							// {4} Update display //
							var newMemberRemoveIcon = document.createElement('span');
							newMemberRemoveIcon.setAttribute('class', 'rem-member');
							newMemberRemoveIcon.setAttribute('data-source', memberid);
							newMemberRemoveIcon.setAttribute('data-target', e.target.getData('target'));
							newMemberRemoveIcon.setAttribute('data-permission', e.target.getData('permission'));
							
							newMemberRemoveIcon.addEventListener('click', section.permissions.group.remfunc, false);

							var newMember = document.createElement('span');
							newMember.appendChild( document.createTextNode(username) );
							newMember.appendChild(newMemberRemoveIcon);

							e.target.parentNode.children[1].appendChild(newMember);

						});

					}, false);

				});

			}

		}, false);

	}

}








/* GESTION DES PERMISSIONS (SELECTION DES MEMBRES)
*
*/
if( section.permissions.element != null && section.permissions.member_view ){

	// Si bouton pour revenir au choix de groupe
	section.view.group.change_permissions = $('permissions-change-group') || null;

	// on crée/gère le lien
	if( section.view.group.change_permissions !== null )
		section.view.group.change_permissions.addEventListener('click', function(e){
			pageManager.vars = [ 'permissions' ];
			pageManager.refresh();
		}, false);


	/* (1) On initialise le Deflater() */
	section.permissions.deflater = new FormDeflater(
		section.permissions.element,
		['input'],
		['data-name']
	);

	/* (2) On enregistre les données initiales */
	section.permissions.baseData = section.permissions.deflater.deflate()['member'];

	/* (3) On enregistre les données in-HTML */
	section.permissions.idtarget = document.querySelector('#permission-choice-idtarget').value;
	section.permissions.idaction = document.querySelector('#permission-choice-idaction').value;


	/* [1] Dès qu'une valeur est modifiée dans le formulaire
	=========================================================*/
	section.permissions.element.addEventListener('click', function(e){

		/* (0) On récupère les données + initialise les variables */
		var i;
		var linked   = [];
		var unlinked = [];

		var data     = section.permissions.deflater.deflate()['member'];
		// Si c'est pas un tableau, on le met en tableau
		if( !(data instanceof Array) )
			data = [data];

		/* (1) Si on a ajouté des liens */
		for( i = 0 ; i < data.length ; i++ )
			if( section.permissions.baseData.indexOf(data[i]) == -1 ) // Si pas dans les données initiales, on ajoute
				linked.push( data[i] );

		/* (2) Si on a supprimé des liens */
		for( i = 0 ; i < section.permissions.baseData.length ; i++ )
			if( data.indexOf(section.permissions.baseData[i]) == -1 ) // Si pas dans les données modifiées, on ajoute
				unlinked.push( section.permissions.baseData[i] );


		/* (3) Gestion de l'ajout de liens */
		for( i = 0 ; i < linked.length ; i++ ){
			// {1} On rédige la requête //
			var linkReq = {};
			linkReq.path = 'clusterDefault/addPermission';
			linkReq.id_target = section.permissions.idtarget;
			linkReq.id_action = section.permissions.idaction;
			linkReq.id_source = linked[i];

			// {2} On envoie la requête //
			api.send(linkReq, function(linkRes){
				if( linkRes.error != 0 )
					console.error('Erreur d\'ajout de membre');
			});
		}



		/* (4) Gestion de la suppression de liens */
		for( i = 0 ; i < unlinked.length ; i++ ){
			// {1} On rédige la requête //
			var unlinkReq = {};
			unlinkReq.path = 'clusterDefault/remPermission';
			unlinkReq.id_target = section.permissions.idtarget;
			unlinkReq.id_action = section.permissions.idaction;
			unlinkReq.id_source = unlinked[i];


			// {2} On envoie la requête //
			api.send(unlinkReq, function(unlinkRes){
				if( unlinkRes.error != 0 )
					console.error('Erreur de retrait de membre');
			});
		}


		/* (5) On met à jour les données initiales */
		section.permissions.baseData = data;


	}, false);

}