$(document).ready(function() {
	/**
	 * Ajoute un bloc dans une colonne dans la liste des résultats.
	 * Le formalisme pour le formulaire select qui est utilisé pour l'envoie
	 * des données vers la base de données est le suivant :
	 * idcolonne;idbloc;nodeid_ref_tpl
	 * Le nodeid de la page est récupérer dans la validation du datatype
	 * à l'aide du ContentObject.
	 */
	$('#mppref_add').click(function(event) {
		var colonne = $('#mppref_colonne option:selected');
		var bloc = $('#mppref_bloc option:selected');
		var refNodeId = $('#mppref_nodeid option:selected');
		var selectList = $('#mppref_list');
		var result = $('#mppref_result');
		var option = '<option value="'
		+ colonne.val() + ';'
		+ bloc.val() + ';'
		+ refNodeId.val() + '">'
		+ colonne.text() + ';  '
		+ bloc.text() + ';  '
		+ refNodeId.text() +
		'</option>';
		selectList.append(option);
		removeAllResult();
		updateResult();
		return false;
	});

	/**
	 * Suppression d'une configuration dans la liste des préférences.
	 * On supprime tout dans le resultat et on met à jour avec les données
	 * restantes s'il en reste.
	 */
	$('#mppref_del').click(function(event) {
		if ($('#mppref_list option').length == 0) {
			alert('Vous devez ajouter des elements avant de supprimer.');
			return false;
		}
		$('#mppref_list option:selected').each(function(index) {
			$(this).remove();
		});
		removeAllResult();
		updateResult();
		return false;
	});

	/**
	 * Action sur l'ordre des elements dans la liste. Lorsque l'on clique sur
	 * le bouton Monter, l'element selectionne est remonter dans la liste du
	 * select multiligne.
	 * On efface tous les resultats et on remet a jour par rapport au nouveau
	 * ordre des elements.
	 */
	$('#mppref_up').click(function(event) {
		if ($('#mppref_list option').length == 0) {
			alert('Des elements sont obligatoires.');
			return false;
		}
		if ($('#mppref_list option:selected').length == 1) {
			var selection = $('#mppref_list option:selected');
			var options = $('#mppref_list option');
			if (selection.index() > 0) {
				var indexPrev = selection.index() - 1;
				var prev = $('#mppref_list option:eq(' + indexPrev + ')');
				prev.before(selection);
				removeAllResult();
				updateResult();
			}
		}
		else {
			alert('Vous devez selectionner un seul element.');
		}
		return false;
	});

	/**
	 * Meme principe que pour le bouton monter. Par contre, il faut faire
	 * attention aux index.
	 */
	$('#mppref_down').click(function(event) {
		if ($('#mppref_list option').length == 0) {
			alert('Des elements sont obligatoires.');
			return false;
		}
		if ($('#mppref_list option:selected').length == 1) {
			var selection = $('#mppref_list option:selected');
			var options = $('#mppref_list option');
			if (selection.index() < options.length - 1) {
				var indexNext = selection.index() + 1;
				var next = $('#mppref_list option:eq(' + indexNext + ')');
				next.after(selection);
				removeAllResult();
				updateResult();
			}
		}
		else {
			alert('Vous devez selectionner un seul element.');
		}
		return false;
	});

	$('#mppref_warn').hide(0);
});

/**
 * Met a jour les champs hidden dans le div des resultats. S'il n'y a rien dans
 * la liste alors il n'y aura rien dans la liste de resultat.
 */
function updateResult()
{
	var hidden = '';
	var result = $('#mppref_result');
	$('#mppref_list option').each(function(index) {
		hidden = '<input type="hidden" name="mppref_prefs[]" value="'
		+ $(this).val() + '" />';
		result.append(hidden);
	});
}

/**
 * Supprime tous les champs input hidden du div de resultat.
 */
function removeAllResult()
{
	$('#mppref_result input').each(function() {
		$(this).remove();
	});
}