FestivAlgo/interface.js

var process = 0;
var pause = 0;
var reset = 0;
var lire_pending = 0;
var langage_avant_publier = 1;

$(document).ready(function() {
	var TIME = 600;
	
	var langage = 1;
	var time = 0;
	
	var indices = [
		0, 2, 6 , 12,
		20, 22, 26, 31,
		39, 41, 45, 48, 
		56
	];
	var instructions = [
		"Lire", "Afficher", "Si", "Alors", "Sinon", "Fin_Si", "Tant_que", "Fin_Tant_que", "Pour", "Allant_de", "à", "Fin_Pour", "Prend_la_valeur", "Hasard", "ET", "OU", "Partie_entière", "Partie_décimale", "Valeur_absolue", "Fin_programme",
		"?", "∠", "If", "Then", "Else", "IfEnd", "While", "WhileEnd", "For", "To", "Next", "→", "#Ran", "and", "or", "Int", "Frac", "Abs", "Stop", 		
		"Input", "Disp", "If", "Then", "Else", "End", "While", "For(", "End", "→", "rand", "and", "or", "int(", "fPart(", "abs(", "Stop"
	];
	
	function affiche_conversion() {
		$('#conversion_algo').show();
		$('#conversion_casio').show();
		$('#conversion_ti').show();
		if(langage == 1)
		{
			$('#conversion_algo').hide();
			$('#conversion_casio').css('bottom', '-70px').css('right', '264px');
			$('#conversion_ti').css('bottom', '-216px').css('right', '450px');
		}
		else if(langage == 2)
		{
			$('#conversion_casio').hide();
			$('#conversion_ti').css('bottom', '-70px').css('right', '450px');
			$('#conversion_algo').css('bottom', '-216px').css('right', '264px');
		}
		else if(langage == 3)
		{
			$('#conversion_ti').hide();
			$('#conversion_algo').css('bottom', '-70px').css('right', '264px');
			$('#conversion_casio').css('bottom', '-216px').css('right', '450px');
		}
	}
	
	function hide_langage() {
		$('.langage_actuel').hide();
	}
	
	function affiche_langage() {
		hide_langage();
		if(langage == 1)
			$('#langage_algo').show();
		if(langage == 2)
			$('#langage_casio').show();
		if(langage == 3)
			$('#langage_ti').show();
			
		$('#info_contenu').replaceWith("<span id='info_contenu'>Cliquez sur l'une des icônes, puis sélectionnez une instruction.</span>");
	}
	
	function changement_langage() {
		var result;
		
		$('#conversion_algo').click(function(event) {
			if(new Date().getTime() - time > TIME && process == 0)
			{
				$('#executer').unbind('click');
				time = new Date().getTime();
				process = 1;
				result = traduction(langage, 1, 1);
				if(result == "completed")
				{
					langage = 1;
					langage_avant_publier = 1;
					affiche_conversion();
					affiche_langage();
				}
				process = 0;
				boutons();
				$("#saisie").cleditor()[0].disable(false);
			}
		});
		$('#conversion_casio').click(function(event) {
			if(new Date().getTime() - time > TIME && process == 0)
			{
				$('#executer').unbind('click');
				time = new Date().getTime();
				process = 1;
				result = traduction(langage, 2, 1);
				if(result == "completed")
				{
					langage = 2;
					langage_avant_publier = 2;
					affiche_conversion();
					affiche_langage();
				}
				process = 0;
				boutons();
				$("#saisie").cleditor()[0].disable(false);
			}
		});
		$('#conversion_ti').click(function(event) {
			if(new Date().getTime() - time > TIME && process == 0)
			{
				$('#executer').unbind('click');
				time = new Date().getTime();
				process = 1;
				result = traduction(langage, 3, 1);
				if(result == "completed")
				{
					langage = 3;
					langage_avant_publier = 3;
					affiche_conversion();
					affiche_langage();
				}
				process = 0;
				boutons();
				$("#saisie").cleditor()[0].disable(false);
			}
		});
	}
	
	function init_boutons() {
		$('#pause').hide();
	}

	function boutons() {
		$('#executer').click(function() {
			if(process == 0)
			{
				pause = 0;
				process = 1;
				reset = 0;
				execution(langage, 0);
				process = 0;
			}
			if(lire_pending == 1 && pause == 1)
			{
				$('#executer').hide();
				$('#pause').show();
				pause = 0;
				document.getElementById("lire").focus();
			}
		});
		$('#pause').click(function() {
			$('#pause').hide();
			$('#executer').show();
			pause = 1;
		});
		$('#reset').click(function() {
			$('#pause').hide();
			$('#executer').show();
			reset = 1;
			process = 0;
			execution_init();
			$("#saisie").cleditor()[0].disable(false);
		});
	}
	
	function signes() {
		$('#signe1').click(function() {
			addText(" &ge; ");
		});
		$('#signe2').click(function() {
			addText(" &le; ");
		});
		$('#signe3').click(function() {
			addText(" &ne; ");
		});
		$('#signe4').click(function() {
			addText("Racine_Carrée(");
		});
		$('#signe5').click(function() {
			addText("^");
		});
		$('#signe6').click(function() {
			addText("&pi;");
		});
		$('#signe7').click(function() {
			addText("exp(");
		});
		$('#signe8').click(function() {
			addText("ln");
		});
	}
	
	function addText(instext) {
		/*var content = document.getElementById("saisie").value;
		var saut = 0;
		
		if(content.lastIndexOf("<div>") != -1)
			saut = 6;
		if(content.lastIndexOf("<br>") != -1)
			saut = 10;
		
		document.getElementById("saisie").value = content.substring(0, content.length - saut) + " " + instext;
		
		if(content.lastIndexOf("<div>") != -1)
			document.getElementById("saisie").value += "</div>";
			
		$("#saisie").cleditor()[0].updateFrame().focus();*/

		if(navigator.appName=='Microsoft Internet Explorer'){ 
			var content = document.getElementById("saisie").value;
			var saut = 0;
			
			if(content.lastIndexOf("<div>") != -1)
				saut = 6;
			if(content.lastIndexOf("<br>") != -1)
				saut = 10;
			
			document.getElementById("saisie").value = content.substring(0, content.length - saut) + " " + instext;
			
			if(content.lastIndexOf("<div>") != -1)
				document.getElementById("saisie").value += "</div>";
				
			$("#saisie").cleditor()[0].updateFrame().focus();
		}
		else
		{
			document.getElementById("main_iframe").blur();
			document.getElementById("main_iframe").contentWindow.document.execCommand("InsertHTML", false, instext);
			document.getElementById("main_iframe").focus();
		}
    }
		
	function menus_deroulants_init() {
		$('.onglet_deroulant').hide();
		$('.instruction').hide();
		$('#selection').hide();
    }
	
	function menus_deroulants_show() {
			$('.icone').mouseenter(function() {
				var iconeNb, indice_pointeur, ongletNb;
				var id = $(this).attr('id');
				
				$('#selection').hide();
				
				if(id == 'entrees-sorties')
					iconeNb = 0;
				if(id == 'conditions')
					iconeNb = 1;
				if(id == 'boucles')
					iconeNb = 2;
				if(id == 'autres')
					iconeNb = 3;
				
				indice_pointeur = indices[(langage - 1) * 4 + iconeNb];
				ongletNb = indices[(langage - 1) * 4 + iconeNb + 1] - indice_pointeur;
				
				menus_deroulants_init();
				affiche_menu_deroulant(iconeNb, ongletNb, indice_pointeur);	
				selection(iconeNb, ongletNb, id, indice_pointeur);
				menus_deroulants_hide(ongletNb, id);
			});	
    }
	
	function menus_deroulants_hide(ongletNb, id, indice_pointeur) {
		$('#support_menus, .cleditorMain').mouseenter(function() {
				menus_deroulants_init();	
		});	
    }
	
	function affiche_menu_deroulant(iconeNb, ongletNb, indice_pointeur) {
		var i;
		
		$('.onglet_deroulant').css('left', 255 + 69 * iconeNb);
		
		for(i = 1; i <= ongletNb; i++)
		{
			$('#onglet_deroulant' + i).show();
			$('#instruction' + i).replaceWith("<p class='instruction' id='instruction" + i + "'>" + instructions[indice_pointeur + i - 1] + "</p>");
			$('#instruction' + i).css('left', 261 + 69 * iconeNb).show();
		}
    }
	
	function Valeur_top(valeur_top) {
		var onglet_click = 0;

		switch(valeur_top)
			{
				case '-136px':
					onglet_click = 1;
				break;
				case '-107px':
					onglet_click = 2;
				break;
				case '-78px':
					onglet_click = 3;
				break;
				case '-49px':
					onglet_click = 4;
				break;
				case '-20px':
					onglet_click = 5;
				break;
				case '9px':
					onglet_click = 6;
				break;
				case '38px':
					onglet_click = 7;
				break;
				case '67px':
					onglet_click = 8;
				break;
			}
			
		return onglet_click;
	}
	
	function selection(iconeNb, ongletNb, id, indice_pointeur) {
		var i, valeur_top, onglet_click, text, syntaxe, test;
		
		for(i = 1; i <= ongletNb; i++)
		{
			$('#instruction' + i).mouseenter(function() {
				valeur_top = $(this).css('top');
				onglet_click = Valeur_top(valeur_top);

				$('#selection').css('top', -155 + 29 * onglet_click)
					.css('left', 255 + 69 * iconeNb)
					.show();
				
				text = instructions[indice_pointeur + onglet_click - 1];

				switch(text)
				{
					case 'Lire':
					syntaxe = "<span class='mot_cle'>Lire </span><span class='indications'>variable</span>";
					break;

					case 'Afficher':
					syntaxe = "<span class='mot_cle'>Afficher </span><span class='indications'>\"Mon texte\" (ou variable)</span>";
					break;
					
					case 'Si':
					syntaxe = "<span class='mot_cle'>Si </span><span class='indications'>condition</span><br /><span class='mot_cle'>Alors </span><span class='indications'>Instructions</span><br />(<span class='mot_cle'>Sinon </span><span class='indications'>Instructions</span>)<br /><span class='mot_cle'>Fin_Si</span>";
					break;
					
					case 'Tant_que':
					syntaxe = "<span class='mot_cle'>Tant_que </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Fin_Tant_que</span>";
					break;
					
					case 'Fin_Tant_que':
					syntaxe = "<span class='mot_cle'>Tant_que </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Fin_Tant_que</span>";
					break;
					
					case 'Pour':
					syntaxe = "<span class='mot_cle'>Pour </span><span class='indications'>variable </span><span class='mot_cle'>Allant_de </span><span class='indications'>départ </span><span class='mot_cle'>à </span><span class='indications'>arrivée</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Fin_Pour</span>";
					break;
					
					case 'Prend_la_valeur':
					syntaxe = "<span class='indications'>variable </span><span class='mot_cle'>Prend_la_valeur </span><span class='indications'>valeur</span>";
					break;
				
					case 'Hasard':
					syntaxe = "<span class='mot_cle'>Hasard(</span><span class='indications'>(valeur maximale)</span>";
					break;
					
					case 'ET':
					syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>ET </span><span class='indications'>condition 2</span>";
					break;
				
					case 'OU':
					syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>OU </span><span class='indications'>condition 2</span>";
					break;
				
					case 'Partie_entière':
					syntaxe = "<span class='mot_cle'>Partie_entière </span><span class='indications'>(valeur)</span>";
					break;
				
					case 'Partie_décimale':
					syntaxe = "<span class='mot_cle'>Partie_décimale </span><span class='indications'>(valeur)</span>";
					break;
				
					case 'Valeur_absolue':
					syntaxe = "<span class='mot_cle'>Valeur_absolue </span><span class='indications'>(valeur)</span>";
					break;
					
					case 'Fin_programme':
					syntaxe = "<span class='mot_cle'>Fin_programme</span>";
					break;
				
					case '?':
					syntaxe = "<span class='mot_cle'>? </span><span class='indications'>&rarr; variable</span>";
					break;

					case '&ang;':
					syntaxe = "<span class='indications'>\"Mon texte\" (ou variable)</span><span class='mot_cle'>&ang;</span>";
					break;
				
					case 'If':
					syntaxe = "<span class='mot_cle'>If </span><span class='indications'>condition</span><br /><span class='mot_cle'>Then </span><span class='indications'>Instructions</span><br />(<span class='mot_cle'>Else </span><span class='indications'>Instructions</span>)<br /><span class='mot_cle'>IfEnd</span>";
					break;
				
					case 'While':
					syntaxe = "<span class='mot_cle'>While </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>WhileEnd</span>";
					break;
					
					case 'WhileEnd':
					syntaxe = "<span class='mot_cle'>While </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>WhileEnd</span>";
					break;
				
					case 'For':
					syntaxe = "<span class='mot_cle'>For </span><span class='indications'>départ&rarr;variable <span class='mot_cle'>To </span><span class='indications'>arrivée</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>Next</span>";
					break;
				
					case '&rarr;':
					syntaxe = "<span class='indications'>valeur </span><span class='mot_cle'>&rarr; </span><span class='indications'>variable</span>";
					break;
				
					case 'rand':
					syntaxe = "<span class='mot_cle'>rand</span><span class='indications'>(valeur maximale)</span>";
					break;
					
					case 'and':
					syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>and </span><span class='indications'>condition 2</span>";
					break;
				
					case 'or':
					syntaxe = "<span class='indications'>condition 1 </span><span class='mot_cle'>or </span><span class='indications'>condition 2</span>";
					break;
					
					case 'Int':
					syntaxe = "<span class='mot_cle'>Int</span><span class='indications'>(valeur)</span>";
					break;
				
					case 'Frac':
					syntaxe = "<span class='mot_cle'>Frac</span><span class='indications'>(valeur)</span>";
					break;
				
					case 'Abs':
					syntaxe = "<span class='mot_cle'>Abs</span><span class='indications'>(valeur)</span>";
					break;
							
					case 'Stop':
					syntaxe = "<span class='mot_cle'>Stop</span>";
					break;
									
					case 'Input':
					syntaxe = "<span class='mot_cle'>Input </span><span class='indications'>variable</span>";
					break;

					case 'Disp':
					syntaxe = "<span class='mot_cle'>Disp </span><span class='indications'>\"Mon texte\" (ou variable)</span>";
					break;
				
					case 'If':
					syntaxe = "<span class='mot_cle'>If </span><span class='indications'>condition</span><br /><span class='mot_cle'>Then </span><span class='indications'>Instructions</span><br />(<span class='mot_cle'>Else </span><span class='indications'>Instructions</span>)<br /><span class='mot_cle'>End</span>";
					break;
				
					case 'While':
					syntaxe = "<span class='mot_cle'>While </span><span class='indications'>condition</span><br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>End</span>";
					break;
				
					case 'For(':
					syntaxe = "<span class='mot_cle'>For(</span><span class='indications'>variable, départ, arrivée)<br /><span class='indications'>Instructions</span><br /><span class='mot_cle'>End</span>";
					break;

					case '#Ran':
					syntaxe = "<span class='indications'>(valeur maximale)</span><span class='mot_cle'>#Ran</span>";
					break;
					
					case 'int(':
					syntaxe = "<span class='mot_cle'>int(</span><span class='indications'>valeur)</span>";
					break;
				
					case 'fPart(':
					syntaxe = "<span class='mot_cle'>fPart(</span><span class='indications'>valeur)</span>";
					break;
				
					case 'abs(':
					syntaxe = "<span class='mot_cle'>abs(</span><span class='indications'>valeur)</span>";
					break;
				}
			
				$('#info_contenu').replaceWith("<span id='info_contenu'><h3 id='syntaxe_titre'>Syntaxe</h3>" + "<div id='syntaxe'>" + syntaxe + "</div></span>");
			});	
		}
		$('.instruction').click(function() {
			var num;
			
			valeur_top = $(this).css('top');
			menus_deroulants_init(id);

			onglet_click = Valeur_top(valeur_top);
			
			num = indice_pointeur + onglet_click - 1;
			text = instructions[num];
			
			if((num >= 16 && num <= 18) || num == 13 || (num >= 35 && num <= 37) || num == 49)
				text += "()";
			if(num >= 52 && num <= 54)
				text += ")";
			if(num == 32)
				text = "()" + text;
			
			/*if(text == "&ang;")
				text = "&ang;";
			if(text == "&rarr;")
				text = "&rarr;";*/
			
			addText(text + " ");
		});
    }
	
	function default_code()
	{
		if((document.cookie.indexOf('exemple=') == -1 || readCookie('exemple') == "init") && document.cookie.indexOf('last_algo=') != -1 && document.cookie.indexOf('last_language=') != -1 && (readCookie('last_language') == 1 || readCookie('last_language') == 2 || readCookie('last_language') == 3)){
			langage = readCookie('last_language');
			
			var t;
			switch(langage)
			{
				case "1": t = 1; break;
				case "2": t = 2; break;
				case "3": t = 3; break;
			}
			langage = t;

			var code = unescape(readCookie('last_algo'));

			document.getElementById("saisie").value = code;
			$("#saisie").cleditor()[0].updateFrame().focus();
			
			affiche_conversion();
			affiche_langage();
		}
	}

	$("#saisie").cleditor().focus(); // transforme le textarea en éditeur html
	$('#debug').hide();
	$('#disable').hide();
	menus_deroulants_init('');
	affiche_langage();
    changement_langage();
	affiche_conversion(); 
	init_boutons();
	boutons();
	signes();
	menus_deroulants_show();
	copie_contenu();
	default_code();
	alert_mobile();
});

function copie_contenu() {
	$('#publier').click(function() {
		var texte;
		
		if(langage_avant_publier == 1)
			texte = document.getElementById('saisie').value;
		else
			texte = traduction(langage_avant_publier, 1, 0);
			
		while(texte.indexOf(";") != -1)
			texte = texte.replace(";","@");
		createCookie("algorithme",texte,1);
	});
}

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value;
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function alert_mobile() {
	if(/iPhone|iPod|Android|opera mini|blackberry|palm os|palm|hiptop|avantgo|plucker|xiino|blazer|elaine|iris|3g_t|windows ce|opera mobi|windows ce; smartphone;|windows ce;iemobile/i.test(navigator.userAgent)){
		alert("Cette interface ne fonctionne pas encore sur mobile. Merci de vous procurer un ordinateur pour l'utiliser.");
	}
}