<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta name="description" content="Traceur de fonctions mathématiques en JavaScript"/>
		<meta name="author" content="Yannick Vessaz"/>
		<meta name="revised" content="2010/09/25"/>
		<title>Traceur de fonctions mathématiques</title>
		<link rel="stylesheet" type="text/css" href="Style/default.css"/>
		<script type="text/javascript" src="JavaScript/ColorPicker.js"></script>
		<script type="text/javascript" src="JavaScript/Etude.js"></script>
		<script type="text/javascript" src="JavaScript/Interface.js"></script>
		<script type="text/javascript" src="JavaScript/Outils.js"></script>
		<script type="text/javascript" src="JavaScript/Sauvegardes.js"></script>
		<script type="text/javascript" src="JavaScript/AffichageStandard.js"></script>
		<script type="text/javascript" src="JavaScript/Affichage3D.js"></script>
		<script type="text/javascript" src="JavaScript/AffichageUniboard.js"></script>
		<script type="text/javascript" src="JavaScript/AffichageXPM.js"></script>
		<script type="text/javascript">
// <![CDATA[
		// --- Variables nécessaires au fonctionnement du widget ---
			var largeur = 500
			var hauteur = 400
			var graphique = ""
			var image = ""
			var tableau = new Array()
			var ligne = new Array()
			var j = 0

			var interdit = new Array(";", "interdit", "'", '"', "eval", "new", "uniboard", "=", "document", "window", "alert")

			var menuActuel = ""
			var mouseDown = false
			var outil = "point"

			var pointX = new Array()
			var pointY = new Array()
			var pente = new Array()
			var pente2 = new Array()
			var precision = 0.02

			var couleurFonction = "rgb(193,255,0)"
			var r = 255
			var g = 0
			var b = 0
			var couleurEchelle = "rgba(255,255,255,0.8)"
			var couleurGrille = "rgba(255,255,255,0.1)"
			var couleurAxes = "rgba(0,0,0,0.5)"

			var decalageX = 0
			var decalageY = 0

			var lineWidth = 3
			//alert(navigator.appName+" ; "+navigator.appVersion+" ; "+navigator.userAgent)

		// ------------- Fonctions du widgets -------------
		// Lance la procédure pour dessiner la fonction qui se trouve dans l'input en haut du widget.
		// Permet aussi d'actualiser le graphique.
			function actualiserGraph(){
				evaluer(document.getElementById("inputEq").value)
			}

		// Cette fonction détermine si la fonction entrée est valide ou non.
		// Elle retourne "true" si la fonction ne comporte pas de caractères interdits et "false" dans le cas contraire.
			function check(eq){
			   for(var i=0; i<interdit.length; i++){
			      var condition = ""
			      for(var k=0; k<interdit[i].length; k++){
				 if(k==0){
				    condition = condition + "eq.charAt(j) == interdit[i].charAt(0)"
				 }
				 else{
				    condition = condition + "&& eq.charAt(j+"+k+") == interdit[i].charAt("+k+")"
				 }
			      }
			      //alert(interdit[i]+" ; "+condition)
			      for(var j=0; j<eq.length; j++){
				 if(eval(condition)){
					document.getElementById("spanFctInterdite").innerHTML = interdit[i]
					afficherMenu("fctInterdite")
				    //alert("------- Erreur -------\nImpossible de dessiner la fonction ... \nExpression ou carractère invalide : "+interdit[i]+"")
				    return false
				 }
			      }
			   }
			   return true
			}

		// Cette fonction permet de choisir la méthode d'affichage entre:
		// 1) Image au format XPM
		// 2) Affichage directe dans uniboard
		// 3) Autres Méthodes d'affichages (svg ou canvas)
			function evaluer(eq){
				if(check(eq)){
					try{
						if(historique[0]!=eq && eq!="1000"){
							for(var i=0;i<historique.length;i++){
								if(historique[i]==eq){
									historique.splice(i, 1)
								}
							}
							historique.unshift(eq)
							actualiserHistorique()
						}
						if(fonction3D){
						dessiner3D(eq)
						}
						else if(document.getElementById("selectMethodeAffichage").value == "xpm"){
						evaluerXPM(eq)
						}
						else if(document.getElementById("selectMethodeAffichage").value == "uniboard"){
						evaluerUniboard(eq)
						}
						else if(document.getElementById("selectMethodeAffichage").value == "canvas" || document.getElementById("selectMethodeAffichage").value == "canvas2"){
							evaluerCanvas(eq)
						}
						else{
							evaluerSVG(eq)
						}
					}
					catch(err){
						afficherMenu("erreurFct")
					}
				}
			}

		// ---- Fonctions Mathématiques et constantes ----
		// (rempalce sin() par Math.sin(), cos() par Math.cos(), tan() par Math.tan(), etc.
			var pi = 4 * atan(1)
			var e = exp(1)

			function sin(valeur){
			   return Math.sin(valeur)
			}
			function cos(valeur){
			   return Math.cos(valeur)
			}
			function tan(valeur){
			   return Math.tan(valeur)
			}
			function cot(valeur){
			   return 1/Math.tan(valeur)
			}
			function sec(valeur){
			   return 1/cos(valeur)
			}
			function csc(valeur){
			   return 1/sin(valeur)
			}

			function asin(valeur){
			   return Math.asin(valeur)
			}
			function acos(valeur){
			   return Math.acos(valeur)
			}
			function atan(valeur){
			   return Math.atan(valeur)
			}
			function acot(valeur){
			   return Math.atan(1/valeur)
			}
			function asec(valeur){
			   return Math.acos(1/valeur)
			}
			function acsc(valeur){
			   return Math.asin(1/valeur)
			}

			var arcsin = asin
			var arccos = acos
			var arctan = atan
			var arccot = acot
			var arcsec = asec
			var arccsc = acsc

			function sinh(valeur){
			   return (Math.exp(valeur)-Math.exp(-valeur))/2
			}
			function cosh(valeur){
			   return (Math.exp(valeur)+Math.exp(-valeur))/2
			}
			function tanh(valeur){
			   return (Math.exp(valeur)-Math.exp(-valeur))/(Math.exp(valeur)+Math.exp(-valeur))
			}
			function coth(valeur){
			   return (Math.exp(valeur)+Math.exp(-valeur))/(Math.exp(valeur)-Math.exp(-valeur))
			}
			function sech(valeur){
			   return 1/cosh(valeur)
			}
			function csch(valeur){
			   return 1/sinh(valeur)
			}

			function asinh(valeur){
			   return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)+1))
			}
			function acosh(valeur){
			   return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)-1))
			}
			function atanh(valeur){
			   return Math.log((1+valeur)/(1-valeur))/2
			}
			function acoth(valeur){
			   return Math.log((valeur+1)/(valeur-1))/2
			}

			var arcsinh = asinh
			var arccosh = acosh
			var arctanh = atanh
			var arccoth = acoth

			function sqrt(valeur){
			   return Math.sqrt(valeur)
			}
			function pow(valeur1, valeur2){
			   return Math.pow(valeur1, valeur2)
			}
			function root(valeur1, valeur2){
			   if(valeur2%2==1 && valeur1<0){
			      return -Math.pow(-valeur1, (1/valeur2))
			   }
			   else{
			      return Math.pow(valeur1, (1/valeur2))
			   }
			}

			function exp(valeur){
			   return Math.exp(valeur)
			}
			function log(valeur){
			   return Math.log(valeur)/Math.log(10)
			}
			function ln(valeur){
			   return Math.log(valeur)
			}

			function abs(valeur){
			   return Math.abs(valeur)
			}
			function sign(valeur){
				if(valeur<0){
					return -1
				}
				else if(valeur>0){
					return 1
				}
				else{
					return undefined
				}
			}

			function round(valeur){
			   return Math.round(valeur)
			}
			function ceil(valeur){
			   return Math.ceil(valeur)
			}
			function floor(valeur){
			   return Math.floor(valeur)
			}
			function random(){
			   return Math.random()
			}
// ]]>
		</script>
	</head>
	<body onload="evaluer(1000);checkCouleurs3D();loadOptions();majAuto()" onkeypress="keyPress(event)">
		<!-- ..... Haut du Widget ..... -->
		<span id="haut">
			<span id="texteFonction">Fonction : </span><input id="inputEq" onkeypress='if(event.keyCode==13) evaluer(this.value)' onkeyup="document.getElementById('fonctionActuelle').innerHTML = this.value"/> 
			<input type="button" onclick='evaluer(document.getElementById("inputEq").value)' value="Afficher"/><input type="button" style="width:21px;" onclick="menuFonctions()" value="+"/>
		</span>
 		<!--<div id="miniMax" onclick="miniMax()">-</div>  ▶▼ -->
		<div id="boutonAgrandir" class="miniBouton" onclick="agrandirAffichage()">^</div>
 		<!--<div id="boutonFermer" class="miniBouton" onclick="close()"></div>-->
		<br/>

		<!-- ..... Millieu du Widget ..... -->
		<!-- Zone d'affichage -->
		<div id="affichage" onmousedown="sourisDown()" onmouseup="sourisUp()" onmousemove="sourisMove(event)" ondblclick="doubleClick(event.ctrlKey)"></div>
		<!-- Zone de boutons gauche -->
		<div id="gauche">
			Axe des X de: <br/>
			<input id="borneXGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> à <input id="borneXDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> <br/>
			Axe des Y de: <br/>
			<input id="borneYGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> à <input id="borneYDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/>
			<br/>Zoom: <br/>
			<input type="button" style="width:45%;" onclick='zoom(1.25)' value="-"/><input type="button" style="width:45%; position:relative; left: 9px;" onclick='zoom(0.8)' value="+"/><br/><br/>
			Couleur: <br/>
			<div id="buttonColor" title="couleurFonction" onclick="colorPicker(this.id); afficherMenu('menuCouleur')"></div>
			<br/><br/>
			<hr/>
			<br/>
			Menus:
			<input type="button" class="boutonGauche" onclick='document.getElementById("etudeFct").innerHTML = document.getElementById("inputEq").value;afficherMenu("menuOutils")' value="Outils"/>
			<input type="button" class="boutonGauche" onclick='afficherMenu("menuOptions")' value="Options"/>
			<input type="button" class="boutonGauche" onclick='afficherMenu("menuAide")' value="Aide"/>
			<input type="button" class="boutonGauche" onclick='afficherMenu("menuCredits")' value="À propos"/>

			<!-- ..... Menus ..... -->
			<div id="menu" class="menu">
				<div id="contenuMenu" class="contenuMenu"></div>
				<div class="barreBasMenu">
					<input type="button" onclick='cacherMenu()' value="Fermer"/>
				</div>
			</div>
		</div>
		<div id="gauche3D">
			<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuCredits")' value="À propos"/>
			<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuAide")' value="Aide"/>
			<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuOptions")' value="Options"/>
			<input type="button" style="width:30px;" onclick='zoom3D(0.8)' value="-"/><input type="button" style="width:30px;" onclick='zoom3D(1.25)' value="+"/>
		</div>

		 <!-- Options -->
		<div id="menuOptions" class="menu">
			<table class="ongletMenu">
				<tr>
					<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions")'>Widget</td>
					<td onclick='afficherMenu("menuOptions2D")'>2D</td>
					<td onclick='afficherMenu("menuOptions3D")'>3D</td>
				</tr>
			</table>
			<div class="contenuMenu avecBordures">
				<h3>Options du widget</h3>

				Thème du widget : <select id="selectTheme" onchange="changerTheme(this.value)">
					<option value="noir">Noir</option>
					<option value="bleu">Bleu</option>
					<option value="blanc">Blanc</option>
				</select><br/>
				<br/><br/><br/>
				<span class="gras">Gèrer les options :</span><br/>
				<input type="button" class="boutonSauvegarde" onclick="saveOptions()" value="Sauvegarder"/><input type="button" class="boutonSauvegarde" onclick="loadOptions()" value="Charger"/> <input class="boutonSauvegarde2" type="button" onclick="delOptions()" value="Supprimer"/><input class="boutonSauvegarde2" type="button" onclick="alertOptions()" value="Afficher"/><br/>
				<span class="texteSecondaire">Sauvegarder les options du widget dans les cookies, charger les options depuis les cookies ou supprimer les options actuellement enregistrées.</span>
				<br/><br/>
				<label for="checkMaJ">Mise à jour automatique à l'ouverture du widget</label> <input type="checkbox" id="checkMaJ" onclick="checkboxMaJ()"/>
				<br/>
				<div id="cacheCookies"><br/><br/><h1>Les cookies sont désactivés, impossible de sauvegarder les options...</h1></div>
				<div id="cacheMaJ">Vous utilisez la dernière version du widget en ligne.</div>
				<input type="button" onclick='reset()' value="Recharger le widget" style="position:absolute; bottom:20px; width:140px; height:32px;"/>
				<input type="button" onclick='miseAjour()' value="Mise à jour" style="position:absolute; bottom:20px; left:160px; width:140px; height:32px;"/>
			</div>
			<div class="barreBasMenu"><input type="button" onclick="cacherMenu(); actualiserGraph()" value="Valider"/></div>
		</div>

		 <div id="menuOptions2D" class="menu">
			<table class="ongletMenu">
				<tr>
					<td onclick='afficherMenu("menuOptions")'>Widget</td>
					<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions2D")'>2D</td>
					<td onclick='afficherMenu("menuOptions3D")'>3D</td>
				</tr>
			</table>
			<div class="contenuMenu avecBordures">
				<h3>Options 2D</h3>
				Méthode d'affichage du graphique :<select id="selectMethodeAffichage">
					<option value="canvas">canvas (lignes)</option>
					<option value="canvas2">canvas (points)</option>
					<option value="svg">svg</option>
					<option value="svg2">svg (1 image)</option>
					<option value="xpm">xpm</option>
					<option value="uniboard">uniboard</option>
				</select> <br/>
				Zoom par défaut: 
				<input value="5" class="smallInput" id="zoomDefaut"/>
				<input type="button" onclick='reinitialiserZoom(document.getElementById("zoomDefaut").value)' value="Réinitialiser le zoom"/> <br/>
				<br/>
				<input type="checkbox" id="checkGrille" checked="true" onclick="actualiserGraph()"/><label for="checkGrille"> Afficher la grille</label> <br/>
				<input type="checkbox" id="checkAxes" checked="true" onclick="actualiserGraph()"/><label for="checkAxes"> Afficher les axes</label> <br/>
				<input type="checkbox" id="checkEchelle" checked="true" onclick="actualiserGraph()"/><label for="checkEchelle"> Afficher l'échelle</label> <br/>
				Épaisseur de la fonction: <input id="inputTaille" class="smallInput" value="3" onkeypress='if(event.keyCode==13) actualiserGraph()' style=""/>
				<div class="boutonPlus" type="button" onclick="boutonPlus('inputTaille', 1); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputTaille', 1); actualiserGraph()">-</div> <br/>
				<br/>
				Décalage du graphique: 
				x=<input value="0" class="smallInput" id="inputDecalageX" onkeyup="decalageX = parseFloat(this.value)"/>
				y=<input value="0" class="smallInput" id="inputDecalageY" onkeyup="decalageY = parseFloat(this.value)"/>
				<br/>
				Précision des calculs du graphique:
				<input value="0.02" class="smallInput" id="inputPrecision" onkeyup="precision = parseFloat(this.value)"/>
				<div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">-</div> <br/>
				<br/>
			</div>
			<div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Valider"/></div>
		</div>

		 <div id="menuOptions3D" class="menu">
			<table class="ongletMenu">
				<tr>
					<td onclick='afficherMenu("menuOptions")'>Widget</td>
					<td onclick='afficherMenu("menuOptions2D")'>2D</td>
					<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions3D")'>3D</td>
				</tr>
			</table>
			<div class="contenuMenu avecBordures">
				<h3>Options 3D</h3>
				Style d'affichage : 
				<select id="selectAffichage3D">
					<option value="surfaces"> surfaces </option>
					<option value="points"> points </option>
				</select> <input type="button" onclick='reinitialiserZoom(5)' value="Réinitialiser l'affichage"/> <br/>
				<br/>
				Précision de la fonction : <input value="0.2" class="smallInput" id="inputPrecision3D" onkeyup="precisionFonction3D = parseFloat(this.value)"/>
				<div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">-</div> <br/>
				<br/>
				Utilisation des couleurs<br/>
				rouge :
				<select onchange="checkCouleurs3D()" id="selectRouge3D">
					<option value="plus">valeur positive</option>
					<option value="moins">valeur négative</option>
					<option value="tout">valeur générale</option>
				</select>
				<br/>
				vert :
				<select onchange="checkCouleurs3D()" id="selectVert3D">
					<option value="moins">valeur négative</option>
					<option value="plus">valeur positive</option>
					<option value="tout">valeur générale</option>
				</select>
				<br/>
				bleu :
				<select onchange="checkCouleurs3D()" id="selectBleu3D">
					<option value="tout">valeur générale</option>
					<option value="plus">valeur positive</option>
					<option value="moins">valeur négative</option>
				</select>
				<br/>
				Valeur générale : <input class="smallInput" id="couleur3Dgenerale" type="texte" value="0" onkeyup="checkCouleurs3D()"/> (entre 0 et 255)
				<br/>
				<span id="apercuCouleur3D"></span>
			</div>
			<div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Valider"/></div>
		</div>

		 <!-- Aide -->
		<div id="menuAide" class="menu">
			<table class="ongletMenu">
				<tr>
					<td class="ongletMenuActuel" onclick='afficherMenu("menuAide")'>Utilisation</td>
					<td onclick='afficherMenu("menuAideExemples")'>Exemples</td>
					<td onclick='afficherMenu("menuAideAutres")'>Autres</td>
				</tr>
			</table>
			<div class="contenuMenu avecBordures">
				<h1>Fonctionnement</h1>
				<p>Ce widget vous permet de dessiner des fonctions mathématiques. Entrez une fonction dans le champ en haut du widget et cliquez sur le bouton "Afficher". </p>
				<p>Vous pouvez saisir les fonctions mathématiques suivantes : <br/>
					<h2>Les opérations de base</h2>
					<ul>
						<li>Addition -> <span class="gras">+</span></li>
						<li>Soustraction -> <span class="gras">-</span></li>
						<li>Multiplication -> <span class="gras">*</span></li>
						<li>Division -> <span class="gras">/</span></li>
						<li>Modulo -> <span class="gras">%</span></li>
					</ul>
					<h2>Les fonctions trigonométriques</h2>
					<ul>
						<li>Sinus -> <span class="gras">sin(x)</span></li>
						<li>Cosinus -> <span class="gras">cos(x)</span></li>
						<li>Tangente -> <span class="gras">tan(x)</span></li>
						<li>Cotangente -> <span class="gras">cot(x)</span></li>
						<li>Secante -> <span class="gras">sec(x)</span></li>
						<li>Cosecante -> <span class="gras">csc(x)</span></li>
					</ul>
					<ul>
						<li>Arcsinus -> <span class="gras">arcsin(x)</span> ou <span class="gras">asin(x)</span></li>
						<li>Arccosinus -> <span class="gras">arccos(x)</span> ou <span class="gras">acos(x)</span></li>
						<li>Arctangente -> <span class="gras">arctan(x)</span> ou <span class="gras">atan(x)</span></li>
						<li>Arccotangente -> <span class="gras">arccot(x)</span> ou <span class="gras">acot(x)</span></li>
					</ul>
					<h2>Les fonctions hyperboliques</h2>
					<ul>
						<li>Sinus hyp -> <span class="gras">sinh(x)</span></li>
						<li>Cosinus hyp -> <span class="gras">cosh(x)</span></li>
						<li>Tangente hyp -> <span class="gras">tanh(x)</span></li>
						<li>Cotangente hyp -> <span class="gras">coth(x)</span></li>
						<li>Secante hyp -> <span class="gras">sech(x)</span></li>
						<li>Cosecante hyp -> <span class="gras">csch(x)</span></li>
					</ul>
					<ul>
						<li>Arcsinus hyp -> <span class="gras">arcsinh(x)</span> ou <span class="gras">asinh(x)</span></li>
						<li>Arccosinus hyp -> <span class="gras">arccosh(x)</span> ou <span class="gras">acosh(x)</span></li>
						<li>Arctangente hyp -> <span class="gras">arctanh(x)</span> ou <span class="gras">atanh(x)</span></li>
						<li>Arccotangente hyp -> <span class="gras">arccoth(x)</span> ou <span class="gras">acoth(x)</span></li>
					</ul>
					<h2>Les racines et les puissances</h2>
					<ul>
						<li>Racine carrée -> <span class="gras">sqrt(x)</span></li>
						<li>Puissances -> <span class="gras">pow(x, y)</span> <span class="texteSecondaire">Élève x à une puissance y</span></li>
						<li>Racines -> <span class="gras">root(x, y)</span> <span class="texteSecondaire">Racine y<span style="vertical-align:super;">ème</span> d'un nombre x</span></li>
					</ul>
					<h2>Les exponentielles et logarithmes</h2>
					<ul>
						<li>e<span style="vertical-align:super;">x</span> -> <span class="gras">exp(x)</span></li>
						<li>logarithme naturel -> <span class="gras">ln(x)</span></li>
						<li>logarithme de base 10 -> <span class="gras">log(x)</span></li>
					</ul>
					<h2>La valeur absolue d'un nombre</h2>
					<ul>
						<li>|x| -> <span class="gras">abs(x)</span></li>
					</ul>
					<h2>Les arrondis</h2>
					<ul>
						<li><span class="gras">round(x)</span> -> arrondit à l'entier le plus proche</li>
						<li><span class="gras">ceil(x)</span> -> arrondit à l'entier supérieur</li>
						<li><span class="gras">floor(x)</span> -> arrondit à l'entier inférieur</li>
					</ul>					
				</p> <br/>
				<hr/>
				<h1>Constantes</h1>
				<p>Quelques constantes sont aussi disponibles : <br/>
					<ul>
						<li><span class="gras">pi</span> = 4 * atan(1) ≈  3,141592653589793</li>
						<li><span class="gras">e</span> = exp(1) ≈ 2.718281828459045</li>
					</ul>
				</p>
				<br/>
				<hr/>
				<h1>Touches clavier</h1>
				<p style="font-size:90%;">
					esc (échap) -> recharger le widget <br/>
					ctrl + flèche gauche -> déplacer le graphique à gauche <br/>
					ctrl + flèche haut -> déplacer le graphique en  haut <br/>
					ctrl + flèche droite -> déplacer le graphique à droite <br/>
					ctrl + flèche bas -> déplacer le graphique en bas <br/>
					<br/>
				</p>
				<br/>
				<input type="button" value="Guide d'utilisation" onclick="navigateur('Guide_Utilisateur.html')" style="position:absolute;bottom:0px;left:0px;"/>
			</div>
			<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Fermer"/></div>
		</div>

		<div id="menuAideExemples" class="menu">
			<table class="ongletMenu">
				<tr>
					<td onclick='afficherMenu("menuAide")'>Utilisation</td>
					<td class="ongletMenuActuel" onclick='afficherMenu("menuAideExemples")'>Exemples</td>
					<td onclick='afficherMenu("menuAideAutres")'>Autres</td>
				</tr>
			</table>
			<div class="contenuMenu avecBordures">
				<span class="texteSecondaire">(Vous pouvez cliquer sur un exemple pour l'afficher. Pensez à ajuster la précision du graphique dans les options si nécessaire)</span>
				<br/><br/>
				<hr/>
				<h1>Fonctions 2D</h1>
				<p>
					<span class="survol" onclick="document.getElementById('inputEq').value = '0.5*x+1' ; actualiserGraph()">0.5*x+1</span> <br/>
					<span class="survol" onclick="document.getElementById('inputEq').value = 'pow(x,2)-3' ; actualiserGraph()">pow(x,2)-3</span> <br/>
					<span class="survol" onclick="document.getElementById('inputEq').value = '1/x' ; actualiserGraph()">1/x</span> <br/>
					<span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)' ; actualiserGraph()">atan(x)</span> <br/>
					<span class="survol" onclick="document.getElementById('inputEq').value = '(x+1/x)/1.2' ; actualiserGraph()">(x+1/x)/1.2</span> <br/>
					<span class="survol" onclick="document.getElementById('inputEq').value = 'sin(10*x*x)*0.5' ; actualiserGraph()">sin(10*x*x)*0.5</span> <br/>
					<span class="survol" onclick="document.getElementById('inputEq').value = 'log(pow(x-2,2))' ; actualiserGraph()">log(pow(x-2,2))</span> <br/>
					<span class="survol" onclick="document.getElementById('inputEq').value = '(x*x-5*x+5)*exp(x)/5' ; actualiserGraph()">(x*x-5*x+5)*exp(x)/5</span> <br/>

					<span class="survol" onclick="document.getElementById('inputEq').value = 'random()' ; evaluer('random()')">random()</span> <br/>
				</p>
				<br/><br/>
				<hr/>
				<h1>Fonctions 3D</h1>
				<p>
					<span class="survol" onclick="document.getElementById('inputEq').value = 'sin(x)+cos(y)' ; actualiserGraph()">sin(x)+cos(y)</span> <br/>
					<span class="survol" onclick="document.getElementById('inputEq').value = 'sqrt(10-x*x)' ; actualiserGraph()">sqrt(10-x*x)</span> <br/>
					<span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)+atan(y)' ; actualiserGraph()">atan(x)+atan(y)</span> <br/>
				</p>
				<br/>
			</div>
			<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Fermer"/></div>
		</div>

		<div id="menuAideAutres" class="menu">
			<table class="ongletMenu">
				<tr>
					<td onclick='afficherMenu("menuAide")'>Utilisation</td>
					<td onclick='afficherMenu("menuAideExemples")'>Exemples</td>
					<td class="ongletMenuActuel" onclick='afficherMenu("menuAideAutres")'>Autres</td>
				</tr>
			</table>
			<div class="contenuMenu avecBordures">
				<h4>Enregistrer le graphique</h4>
				Dans certains navigateurs, lorsque vous utilisez la méthode d'affichage "Canvas", vous pouvez sauvegarder le graphique en cliquant avec le bouton de droite de la souris sur celui-ci et en séléctionnant "Enregistrer l'image".
				Vous pouvez aussi sauvegarder le graphique 3D.
				<br/><br/>
				<h4>Décalage</h4>
					Si le graphique n'est pas à la bonne place (il dépasse de la zone prévue), ajustez le "décalage du graphique" dans le menu des options.
					Pour Konqueror, il faut utiliser un décalage de x=122 et y=48.
			</div>
			<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Fermer"/></div>
		</div>

		 <!-- Crédits -->
		<div id="menuCredits" class="menu">
			<div class="contenuMenu" style="text-align:justify;">
				<br/>
				<table id="credits">
					<tr>
						<td>
							<img src="icon.png"/>
							<h3>Widget réalisé par</h3> 
							Yannick Vessaz <br/>
							<a href='mailto:yannick.vessaz@gmail.com'>yannick.vessaz@gmail.com</a>
						</td>
					</tr>
				</table>
				<span class="texteSecondaire">
					<br/><br/>
					Si vous voulez rapporter un bug, avez une suggestion par rapport au widget ou voulez simplement poser une question, merci de me contacter par <a href='mailto:yannick.vessaz@gmail.com'>e-mail</a>.
					<br/><br/>
					Les images d'arrière-plan du widget on été tirées des thèmes du bureau "plasma-desktop" de l'environnement <a href="http://kde.org">KDE</a>.
				</span>
				<span id="version" class="texteSecondaire" style="position:absolute;bottom:10px;left:15px;">version 1.3</span>
			</div>
			<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Fermer"/></div>
		</div>

		 <!-- Outils -->
		<div id="menuOutils" class="menu">
			<div class="contenuMenu">
				<h3 style="margin-top:0px; margin-bottom:15px;">Outils</h3> 
				Action de la souris:<br/>
				<input type="button" class="choixOutil" onclick="choixOutil('deplacement');cacherMenu()" value="Déplacement"/>
				<input type="button" class="choixOutil" onclick="choixOutil('tangente');cacherMenu()" value="Tangente"/>
				<input type="button" class="choixOutil" onclick="choixOutil('point');cacherMenu()" value="Point"/>
				<br/><br/>
				Dessiner la dérivée de la fonction:<br/>
				<label for="checkDerivee"> f'(x) </label><input type="checkbox" id="checkDerivee" onclick="actualiserGraph()"/><label for="checkDerivee2"> f''(x) </label><input type="checkbox" id="checkDerivee2" onclick="actualiserGraph()"/>
				<br/><br/>
				Aire sous la fonction:<br/>
				De <input value="-5" class="smallInput" id="aireG"/> à <input value="5" class="smallInput" id="aireD"/> <input type="button" onclick='calculerAire()' value="Calculer"/> <span id="outputAire"></span>
				<div style="float: right;"><label for="checkAire">Dessiner </label><input type="checkbox" id="checkAire" onclick="actualiserGraph()"/></div>
				<br/><br/>
				Calculer un point de la fonction:<br/>
				x=<input value="0" class="smallInput" id="inputX" onkeypress='if(event.keyCode==13) execute(document.getElementById("inputEq").value)'/>
				<input type="button" onclick='execute(document.getElementById("inputEq").value)' value="Évaluer"/>
				<span id="outputX"></span>
				<br/><br/>
				Étudier la fonction : <br/>
				f(x) = <span id="etudeFct"></span> <input type="button" value="Démarrer l'étude" onclick='etudier(document.getElementById("inputEq").value);afficherMenu("menuEtude")'/>
				<br/><br/>
				Tests d'affichage<br/>
				<input type="button" onclick='cacherMenu(); testXPM()' value="Test XPM"/><input type="button" onclick='cacherMenu(); testSVG()' value="Test SVG"/><input type="button" onclick='cacherMenu(); testCanvas()' value="Test Canvas"/>
			</div>
			<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Fermer"/></div>
		</div>

		 <!--Etude de fonction -->
		<div id="menuEtude" class="menu">
			<div class="contenuMenu">
				<h3>Étude de fonction</h3>
				Ensemble de définition : <span id="etudeEDF">...</span> <br/>
				Parité : <span id="etudeParite">...</span> <br/>
				Zéros de la fonction : <span id="etudeZeros">...</span> <br/>
				<table>
					<tr id="etudeSigne">
						<td>Signe : ...</td>
					</tr>
				</table>
				Asymptotes <br/>
				AH gauche : <span id="etudeAHG">...</span> <br/>
				AH droite : <span id="etudeAHD">...</span> <br/>
				AV : <span id="etudeAV">...</span>
                <span id="etudeMin">...</span>
                <span id="etudeMax">...</span>
                <span id="etudeI">...</span> <br/><br/>
				<span class="texteSecondaire" style="font-size:10px;">L'outil permettant d'étudier les fonctions n'est pas fiable à 100%. Pensez à vérifier les résultats de l'étude avant d'en faire une quelconque utilisation.</span>
			</div>
			<div class="barreBasMenu"><input type="button" onclick="etudier(document.getElementById('inputEq').value)" value="Actualiser" style="position:relative;right:310px;"/> <input type="button" onclick='cacherMenu()' value="Fermer"/></div>
		</div>

		 <!-- Fonctions multiples -->
		<div id="menuFonctions" class="menu">
			<table class="ongletMenu">
				<tr>
					<td class="ongletMenuActuel" onclick='afficherMenu("menuFonctions")'>Fonctions</td>
					<td onclick='afficherMenu("menuHistorique")'>Historique</td>
				</tr>
			</table>
			<div class="contenuMenu avecBordures">
				<em>Actuelle</em><br/>
				f(x) = <span id="fonctionActuelle">x</span> <input type="button" value="+" onclick="ajouterFonction(document.getElementById('fonctionActuelle').innerHTML)"/>
				<br/><br/>
				<em>Supplémentaires</em><br/>
				<span id="fonctionsSupp">aucune ...</span>
			</div>
			<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Fermer"/></div>
		</div>

		 <!-- Historique -->
		<div id="menuHistorique" class="menu">
			<table class="ongletMenu">
				<tr>
					<td onclick='afficherMenu("menuFonctions")'>Fonctions</td>
					<td class="ongletMenuActuel" onclick='afficherMenu("menuHistorique")'>Historique</td>
				</tr>
			</table>
			<div class="contenuMenu avecBordures" id="divHistorique">
				<span id="spanHistorique"></span>
			</div>
			<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Fermer"/></div>
		</div>

		 <!-- Couleur -->
		<div id="menuCouleur" class="menu">
			<div class="contenuMenu">
				<em>Choix de la couleur:</em> <br/><br/>
				<div id="colorSV" onmousemove="if(mouseDown==true){colorSV(event)}" onmousedown="colorSV(event); mouseDown = true" onmouseup="mouseDown = false">
					<svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
					<svg:defs id="defs1">
					<svg:linearGradient id="linearGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
					<svg:stop
						style="stop-color:#000000;stop-opacity:1;"
						offset="0%" />
					<svg:stop
						style="stop-color:#000000;stop-opacity:0;"
						offset="100%" />
					</svg:linearGradient>
					<svg:linearGradient id="linearGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
					<svg:stop
						style="stop-color:#ffffff;stop-opacity:0;"
						offset="0%" />
					<svg:stop
						style="stop-color:#ffffff;stop-opacity:1;"
						offset="100%" />
					</svg:linearGradient>
					</svg:defs>
					<svg:rect
					style="fill:url(#linearGradient2);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
					width="255"
					height="255"
					x="0"
					y="0"
					ry="0" />
					<svg:rect
					style="fill:url(#linearGradient1);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
					width="255"
					height="255"
					x="0"
					y="0"
					ry="0" />
					<svg:line
					id="ligneValeur"
					x1="255"
					y1="0"
					x2="255"
					y2="255"
					style="stroke:rgb(0,0,0);stroke-width:2"/>
					<svg:line
					id="ligneSaturation"
					x1="0"
					y1="0"
					x2="255"
					y2="0"
					style="stroke:rgb(0,0,0);stroke-width:2"/>
					</svg:svg>
				</div>
				<div id="colorT" onmousemove="if(mouseDown==true){colorT(event)}" onmousedown="colorT(event); mouseDown = true" onmouseup="mouseDown = false">
					<svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
					<svg:defs id="defs2">
					<svg:linearGradient id="linearGradient3" x1="0%" y1="100%" x2="0%" y2="0%">
					<svg:stop
						style="stop-color:#ff0000;stop-opacity:1;"
						offset="0%" />
					<svg:stop
						style="stop-color:#ff00ff;stop-opacity:1;"
						offset="16.66%" />
					<svg:stop
						style="stop-color:#0000ff;stop-opacity:1;"
						offset="33.33%" />
					<svg:stop
						style="stop-color:#00ffff;stop-opacity:1;"
						offset="50%" />
					<svg:stop
						style="stop-color:#00ff00;stop-opacity:1;"
						offset="66.66%" />
					<svg:stop
						style="stop-color:#ffff00;stop-opacity:1;"
						offset="83.33%" />
					<svg:stop
						style="stop-color:#ff0000;stop-opacity:1;"
						offset="100%" />
					</svg:linearGradient>
					</svg:defs>
					<svg:rect
					style="fill:url(#linearGradient3);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
					width="255"
					height="255"
					x="0"
					y="0"
					ry="0" />
					<svg:line
					id="ligneTeinte"
					x1="0"
					y1="0"
					x2="20"
					y2="0"
					style="stroke:rgb(0,0,0);stroke-width:2"/>
					</svg:svg>
				</div>
				<table id="colorValues">
					<tr>
						<td>Teinte: </td><td><input id="inputTeinte" class="smallInput" value="0" onkeypress=''/></td>
					</tr><tr>
						<td>Valeur: </td><td><input id="inputValeur" class="smallInput" value="0" onkeypress=''/></td>
					</tr><tr>
						<td>Saturation: </td><td><input id="inputSaturation" class="smallInput" value="0" onkeypress=''/></td>
					</tr><tr>
						<td>Rouge: </td><td><input id="inputRouge" class="smallInput" value="255" onkeypress=''/></td>
					</tr><tr>
						<td>Vert: </td><td><input id="inputVert" class="smallInput" value="0" onkeypress=''/></td>
					</tr><tr>
						<td>Bleu: </td><td><input id="inputBleu" class="smallInput" value="0" onkeypress=''/></td>
					</tr><tr>
						<td>Opacité: </td><td><input id="inputOpacity" class="smallInput" value="1" onkeypress=''/></td>
					</tr><!--<tr>
						<td><input id="inputCouleur" style="width: 70%" value="cyan" onkeypress='couleurFonction = this.value; if(event.keyCode==13) actualiserGraph()'/></td>
					</tr>-->
				</table>
				<div id="apercuCouleur" title="Nouvelle Couleur"></div><div id="apercuCouleur2" title="Ancienne Couleur"></div>
			</div>
			<div class="barreBasMenu"><input type="button" onclick="if(idColor=='buttonColor'){cacherMenu()}else{afficherMenu('menuFonctions')}; actualiserGraph()" value="Valider"/></div>
		 </div>

		 <!-- Erreurs Fonctions interdites -->
		<div id="fctInterdite" class="miniMenu">
			<br/>
			<h1>------- Erreur -------</h1>
			<br/>
			Impossible de dessiner la fonction ...
			<br/><br/>
			Expression ou carractère invalide : <br/>
			<span id="spanFctInterdite" style="font-style:italic;"></span>
			<br/><br/>
			<input type="button" onclick="cacherMenu()" value="Ok"/>
		</div>

		 <!-- Autres erreurs -->
		<div id="erreurFct" class="miniMenu">
			<h1>------- Erreur -------</h1>
			Une erreur s'est produite pendant les calculs nécessaires à afficher la fonction. Vérifiez la fonction que vous vouliez dessiner et appuyez à nouveau sur "afficher".
			<br/>
			Une description ainsi que des exemples des différentes fonctions que vous pouvez entrer se trouve dans l'aide.
			<br/><br/>
			<input type="button" onclick="afficherMenu('menuAide')" value="Aide"/>
			<input type="button" onclick="cacherMenu()" value="Ok"/>
		</div>

		 <!-- Menu des mises à jour -->
		<div id="mAj" class="menu">
			<h1>Mise à jour</h1>
			Version en cours d'utilisation : <br/><span id="thisVersion"></span><br/>
			Dernière version disponible en ligne : <br/><span id="newVersion"></span><br/>
			<br/>
			Ce widget est également utilisable dans un navigateur internet sur le site : <em>http://gyb.educanet2.ch/tm-widgets/yannick</em><br/>
			<br/>
			Vous pouvez remplacer la version en cours d'utilisation par la version du widget en ligne. Notez que ceci ne met pas à jour le widget. Il faudra réitérer cette procédure la prochaine fois que vous l'utiliserez.<br/>
			<input type="button" onclick="document.location.href='http://gyb.educanet2.ch/tm-widgets/yannick/GraphMe.wgt/Grapheur.xhtml'" value="Utiliser la dernière version"/><br/>
			<input type="button" onclick="cacherMenu()" value="Garder ma version"/>
		</div>

		 <!-- Erreur mise à jour -->
		<div id="erreurMaJ" class="miniMenu">
			<br/>
			<h1>------- Erreur -------</h1>
			<br/><br/>
			Il est impossible de mettre à jour le widget vers la version en ligne car vous utilisez déjà la version en ligne.
			<br/><br/><br/>
			<input type="button" onclick="cacherMenu()" value="Ok"/>
		</div>

		 <!-- Info options sauvegardées -->
		<div id="infoSauvegarde" class="alertMenu">
			<br/>
			<h1>Options sauvegardées!</h1>
			<br/>
			<input type="button" onclick="document.getElementById('infoSauvegarde').style.display = 'none'" value="Ok"/>
		</div>

		 <!-- Demande mise à jour auto -->
		<div id="demandeMaJ" class="miniMenu">
			<br/>
			<h1>Mise à jour automatique</h1>
			<br/><br/>
			Voulez-vous vraiment utiliser la dernière version du widget disponible ?
			<br/><br/><br/>
			<input type="button" onclick="cacherMenu()" value="Non"/>
			<input type="button" onclick="document.location.href='http://gyb.educanet2.ch/tm-widgets/yannick/GraphMe.wgt/Grapheur.xhtml'" value="Oui"/>
		</div>

		<!-- ..... Flèches de déplacement ..... -->
		<div class="flecheDeplacement" id="flecheHaut" onclick="if(fonction3D){zoom3D(1.25)}else{deplacerY(1)}" onmousemove="sourisMove(event)">▲</div>
		<div class="flecheDeplacement" id="flecheGauche" onclick="deplacerX(-1)" onmousemove="sourisMove(event)">◀</div>
		<div class="flecheDeplacement" id="flecheBas" onclick="if(fonction3D){zoom3D(0.8)}else{deplacerY(-1)}" onmousemove="sourisMove(event)">▼</div>
		<div class="flecheDeplacement" id="flecheDroite" onclick="deplacerX(1)" onmousemove="sourisMove(event)">▶</div>

		<!-- ..... Bas du Widget ..... -->
		<div class="info" id="info"></div>
		<div id="point">o</div>
		<div id="tangente"></div>

		<!-- .... Autres .... -->
		<div id="onglet3D" onclick="activer3D()">3D</div>
	 </body>
	<!-- .............................. Widget réalisé par Yannick Vessaz .............................. -->
	<!-- .............................. e-mail: yannick.vessaz@gmail.com  .............................. -->
</html>