// variables globales
var extension1, extension2, type_extension = "point";

window.onload = function ()
{
	ajoutDivDemonstration();
	creationObjets ();
	gestionEvenements ();	
	ajoutMenus (0);
	document.getElementById("menusites").style.display = "none";
	document.getElementById("menufaire").style.display = "none";
	initMenus ();
	colorerItemMenu ("DEVexe");
	ajoutBordBasDePage (2);
	ajoutEventImpression ();
	document.getElementById("tel").href = "demonstrations/demonstration-objet-extension-element.zip";
	document.getElementById("tel").type = "application/zip";
	prechargerImages ("images/fleche-grise-gauche-on.gif", "images/fleche-grise-haut-on.gif","../images/puce-telecharger-on.png", "../images/puce-imprimer-on.png");
}

function creationObjets ()
{
	extension1 = new ExtensionElement ("extension1", 0, 400, 20, 0, 220, 11, 15);	
	extension2 = new ExtensionElement ("extension2", 400, 400, 0, 0, 220, 11, 15);
}

function gestionEvenements ()
{
	document.getElementById('agrandir').onclick = function () { a(); return false; };
	document.getElementById('diminuer').onclick = function () { b(); return false; };
	
	document.getElementById('point').onclick = function () { type_extension = 'point' };
	document.getElementById('ligne').onclick = function () { type_extension = 'ligne' };

	function a ()
	{
		if (!extension1.enMvt && !extension2.enMvt)
		{
			if (type_extension == "point")
			{
				if (!extension1.on && !extension2.on) {extension1.etendre()}
				else if (!extension1.on && extension2.on)
				{
					extension2.replier();
					setTimeout ("extension1.etendre()", 1000);
				}
			}			
			else
			{
				if (!extension2.on && !extension1.on) {extension2.etendre()}
				else if (!extension2.on && extension1.on)
				{
					extension1.replier();
					setTimeout ("extension2.etendre()", 1000);
				}
			}
		}
	}
	
	function b ()
	{
		if (!extension1.enMvt && !extension2.enMvt)
		{
			if (extension1.on) { extension1.replier() }
			if (extension2.on) { extension2.replier() }
		}
	}
}

function ajoutDivDemonstration ()
{	
	var el = document.createElement ('div');
	el.setAttribute ('id', 'extension1');
	el.style.display = "none";
	document.getElementById ('demo').appendChild(el);
	el.innerHTML="<div id='fermeture_extension1' onclick='extension1.replier()'><\/div><h6>Une feuille d’érable en automne<\/h6><img src='images/erable-jaune-vert.gif' width='146' height='146' alt='Une feuille d&rsquo;&eacute;rable jaune et verte' \/><p style='left: 170px;'><strong>ÉRABLE<\/strong> [e<small>R<\/small>abl] n. m. — 1265&nbsp;; <span style='font-family: georgia'>bas latin <em>acerbulus<\/em>, du latin <em>acer<\/em> «&nbsp;érable&nbsp;», et p.-ê. gaulois <em>abolo<\/em> «&nbsp;sorbier&nbsp;»<br>&bull; Grand arbre à feuilles lobées et pétiolées <em>(acéracées)<\/em>, dont le fruit est muni d’une longue aile membraneuse. <em>Le feuillage rou&shy;ge des érables en automne.<\/em> &rarr; <strong>syco&shy;more<\/strong>.<\/span><\/p>";
	
	el = document.createElement ('div');
	el.setAttribute ('id', 'extension2');	
	el.style.display = "none";
	document.getElementById ('demo').appendChild(el);
	el.innerHTML="<div id='fermeture_extension2' onclick='extension2.replier()'><\/div><h6>Une feuille d’érable en automne<\/h6><img src='images/erable-jaune-vert.gif' width='146' height='146' alt='Une feuille d&rsquo;&eacute;rable jaune et verte' \/><p style='left: 172px;'><strong>ÉRABLE<\/strong> [e<small>R<\/small>abl] n. m. — 1265&nbsp;; <span style='font-family: georgia'>bas latin <em>acerbulus<\/em>, du latin <em>acer<\/em> «&nbsp;érable&nbsp;», et p.-ê. gaulois <em>abolo<\/em> «&nbsp;sorbier&nbsp;» &bull; Grand arbre à feuilles lobées et pétiolées <em>(acéracées)<\/em>, dont le fruit est muni d’une longue aile membraneuse. <em>Le feuillage rou&shy;ge des érables en automne.<\/em> &rarr; <strong>syco&shy;more<\/strong>.<\/span><\/p>";

	el = document.createElement ('p');
	el.setAttribute ('class', 'demonstration');
	el.setAttribute ('className', 'demonstration');	 // IE
	el.innerHTML="<span class='lettrine'>D</span><span style='text-transform: uppercase;'>émonstration</span><br />où l’on <a href='#' id='agrandir'>déroulera</a> et <a href='#' id='diminuer'>repliera</a> une feuille d’érable depuis <input name='type' id='point' type='radio' checked='checked' /> <label for='point'>un point</label> ou <input name='type' id='ligne' type='radio' /> <label for='ligne'>une ligne</label>.";
	document.getElementById('demo').appendChild(el);

	el = document.createElement ('p');
	el.setAttribute ('class', 'decoFlorale');
	el.setAttribute ('className', 'decoFlorale');	// IE
	el.innerHTML = "<img src='images/deco-en-carre.gif' alt='image d&eacute;corative' width='69' height='70' />";
	document.getElementById('demo').appendChild(el);	
}