jQuery.fn.extend({
	// Chargement d'une page à afficher
	chargeAnagramme : function(nom, callback) {
		// fonction en callback de l'appel ajax

		$.getJSON(nom, callback);
	},
	afficheForm : function(data, textStatus) {
		$("#pointDiaporama")
				.append("<div id=\"diaporama\" style=\"width: 800px\" transition=\""
						+ data.transition
						+ "\"><div id=\"diapo\"><ul></ul></div></diaporama>");
		$("#pointDiaporama").find("#diaporama ul").each(function() {
			if (data.hasIntro) {
				var html = "<li";
				if (data.titreIntro)
					html += " title=\"" + data.titreIntro + "\"";
				html += "><div id=\"tete_anagramme\">" + data.texteIntro
						+ "</div></li>";
				$(this).append(html);
			}
			for (var ndiapos = 0; ndiapos < data.diapos.length; ndiapos++) {
				var html = "<li";
				if (data.diapos[ndiapos].titreDiapo)
					html += " title=\"" + data.diapos[ndiapos].titreDiapo
							+ "\"";
				html += "><div id=\"tete_anagramme\"></div><div id=\"corps_anagramme\"></div></li>";
				$(this).append(html);
				// population de l'entête
				var diapo = $(this).find("li:last");
				if (data.diapos[ndiapos].imageFond) {
					window.alert(data.diapos[ndiapos].imageFond);
					diapo.css("background-image", "url("
									+ data.diapos[ndiapos].imageFond + ")");
					diapo.css("background-position", "right top");
				} else if (data.imageFond) {
					diapo
							.css("background-image", "url(" + data.imageFond
											+ ")");
					diapo.css("background-position", "right top");
				}
				diapo.find("#tete_anagramme").each(function() {
					// titre
					if (data.diapos[ndiapos].titre)
						$(this).append("<h1>" + data.diapos[ndiapos].titre
								+ "</h1>");
					if (data.diapos[ndiapos].titreImage)
						$(this).append("<img src=\""
								+ data.diapos[ndiapos].titreImage
								+ "\"style=\"float: left\" />")
					// anagrammes à trouver
					for (var i = 0; i < data.diapos[ndiapos].anagrammes.length; i++) {
						$(this)
								.append("<span id='anagramme' style='color:"
										+ transformeCouleur(data.diapos[ndiapos].anagrammes[i].couleur)
										+ "'>"
										+ data.diapos[ndiapos].anagrammes[i].nombre
										+ "x "
										+ data.diapos[ndiapos].anagrammes[i].texte
										+ "</span>");
					}
				});

				// Population du corps
				diapo.find("#corps_anagramme").each(function() {
					var result = data.diapos[ndiapos].texte;
					var nomForm = "trous_" + ndiapos;
					$(this).append("<form id='" + nomForm + "'></form>");
					$("#" + nomForm).each(function() {
						for (var i = 0; i < data.diapos[ndiapos].trous.length; i++) {
							var num = parseInt(data.diapos[ndiapos].trous[i].id);
							var champ = "<label for=\"var" + num
									+ "\"></label>";
							var couleur = transformeCouleur(data.diapos[ndiapos].trous[i].couleur);
							var liste = data.diapos[ndiapos].trous[i].reponse
									.split(",");
							champ += "<input name=\"var" + num
									+ "\" class=\"jeux_input\" size=\""
									+ (liste[0].length - 1)
									+ "\"  type=\"text\" id=\"var" + num
									+ "\" style='border-color: " + couleur
									+ "; color: " + couleur + ";'>";
							champ += "<span class=\"val_var" + num
									+ "\" style=\"display: none\">";

							for (var j = 0; j < liste.length; j++) {
								if (j > 0)
									champ += ",";
								champ += liste[j];
							}
							champ += "</span>";
							var test = "(" + data.diapos[ndiapos].trous[i].id
									+ ")";
							result = result.replace(test, champ);
						}
						result += "<B><div align=\"center\" id=\"" + nomForm
								+ "_error\"><br></div></B>";
						result += "<div align=\"center\"><input type=\"submit\" value=\"Valider\" class=\"jeux_bouton\"></div>";
						$(this).append(result);
					});

				});
			}
		});
		$("#diaporama").creeDiaporamaScroll();
		$("#diaporama").ajouteValidate();

		// $(this).sauveData(data);
	}
});

function transformeCouleur(couleur) {
	if (couleur.toLowerCase() == "rouge")
		return "red";
	if (couleur.toLowerCase() == "bleu")
		return "blue";
	if (couleur.toLowerCase() == "vert")
		return "green";
	if (couleur.toLowerCase() == "noir")
		return "black";
	if (couleur.toLowerCase() == "marron")
		return "brown";
	return couleur;
}
function diaporamaVide() {
	return {
		repertoire : {},
		transition : "",
		imageFond : "",
		diapos : [diapoVide()]
	};
}
function diapoVide() {
	return {
		titreDiapo : "",
		titre : "nouveau titre",
		titreImage : "",
		hasIntro : false,
		titreIntro : "",
		texteIntro : "",
		imageFond : "",
		anagrammes : [{
					nombre : 1,
					couleur : "bleu",
					texte : ""
				}],
		texte : "",
		trous : [{
					id : 1,
					couleur : "bleu",
					reponse : [""]
				}]
	};
}