document.write("<div id='subst_tool' style='position:absolute;top:320;left:0;width:180;height:320'></div>");

var myDiv = document.getElementById("subst_tool");

var titleImg = document.createElement("img");
titleImg.src = "http://www.schneider-electric.co.in/gc_1_0/images/structure/substitution.gif";
myDiv.appendChild(titleImg);
var w = document.body.clientWidth;

 
	function wResize() 
	{
				

		var ww = document.body.clientWidth;
		if (ww > 1000)
		{
 		ww /= 2;
 		ww += 320;
 		myDiv.style.left = ww;
		}

		else
		{
		myDiv.style.left = 820;		
		}
	}

wResize();  // use by onResizeHandler window.onresize=onResizeHandler;


var language = 'en'; 
var country = 'en'; 
var scopeId = 'Z001'; 
var mediaId = 'ecat'; 
var mediaType = 'ECAT'; 
var targetId = 'null'; 
var cpltURL = null;
var popup_state = 'yes'; 
var width = '800px'; 
var height = '800px'; 
var style = 'livesite'; 
var title = 'no'; 
var baseURL = 'http://www.ops-ecat.schneider-electric.com/substitution/'; 
var compURL = 'http://www.ops-ecat.schneider-electric.com/cut.CompletionServlet/CompletionServlet';
var isIntegrated = 'no';
var completionMaxResult=10;
var completionMinSearch=2;
var productLink = new Array();

// global variable for completion
var _oldInputFieldValue=""; // valeur précédente du champ texte
var _currentInputFieldValue=""; // valeur actuelle du champ texte
var _resultCache=new Object(); // mécanisme de cache des requêtes
var _completeDiv = null; // la div contenant la liste de suggestions
var _documentForm=null; // le formulaire contenant notre champ texte
var _inputField=null; // le champ texte lui-même
var _submitButton=null; // le bouton submit de notre formulaire
var _completeDivRows = 0;
var _maxWidthNeeded=0;  // max size of reference + description needed
var _eventKeycode = null;
var _lastKeyCode=null;
var _completeDivDivList = null;
var _highlightedSuggestionIndex = -1;
var _highlightedSuggestionDiv = null;
var _cursorUpDownPressed = null;


function SubstTool()
{
};


SubstTool.insert = function(containerId)
{
	// Recovery of the main container
	var mainContainer = document.getElementById("subst_tool");
	
	if(mainContainer == null)
	{
		mainContainer = document.body;
	}
	
	var link = document.createElement("link");
	link.href = baseURL+"styles/" + style + ".css";
	link.rel = "stylesheet";
	link.type = "text/css";
	mainContainer.appendChild(link);
	
	// Creation of the main table
	var mainTable = document.createElement("table");
	if(isIntegrated=='yes'){
		mainTable.className="mainTableIntegrated";
	}else{
		mainTable.className="mainTable";
	}
	mainContainer.appendChild(mainTable);
	
	var mainTbody = document.createElement("tbody");
	mainTable.appendChild(mainTbody);
	
	if(title == "yes")
	{
		var trBalise = document.createElement("tr");
		mainTbody.appendChild(trBalise);
		var tdBalise = document.createElement("td");
		trBalise.appendChild(tdBalise);
		var titleDiv = document.createElement("div");
		titleDiv.id = "subst_title";
		titleDiv.innerHTML = "Substitution tools";
		titleDiv.title = "Search substitution products for a given product";
		tdBalise.appendChild(titleDiv);
	}
	
	var mainTr = document.createElement("tr");
	mainTbody.appendChild(mainTr);
	
	var mainTd = document.createElement("td");

	if(isIntegrated=='yes'){
		mainTd.className="mainTdIntegrated";
	}else{
		mainTd.className="mainTd";
	}

	mainTr.appendChild(mainTd);
		
	// Creation of the search input
	var searchInput = document.createElement("input");
	searchInput.type = "text";
	if(isIntegrated=='yes'){
		searchInput.className="searchInputIntegrated";
	}else{
		searchInput.className="searchInput";
	}
	searchInput.id = "subst_ref";
		
	mainTd.appendChild(searchInput);
	
	mainTd = document.createElement("td");
	mainTd.style.padding = "0px";
	mainTd.style.margin = "0px";
	mainTd.style.align = "left";
	mainTr.appendChild(mainTd);
	
	// Creation of the search button
	var searchButton = document.createElement("input");
	searchButton.type = "button";
	searchButton.id = "subst_ok";
	searchButton.value = "OK";
	searchButton.onclick = SubstTool.search;
	mainTd.appendChild(searchButton);
	
	var mainDiv = document.createElement("div");
	mainDiv.id = "subst_main";
	if(isIntegrated=='yes'){
		mainDiv.className="subst_mainIntegrated";
		var spacerDiv20 = document.createElement("div");
		spacerDiv20.className = "substSpacer20";
		mainDiv.appendChild(spacerDiv20);
		
	}else{
		mainDiv.className="subst_main";
	}

	mainContainer.appendChild(mainDiv);
	
	// Creation of the result div
	var resultDiv = document.createElement("div");
	resultDiv.id = "subst_result";
	resultDiv.style.height = "300px";
	resultDiv.style.overflow = "auto";
	mainDiv.appendChild(resultDiv);
	initAutoComplete(mainContainer,	document.getElementById('subst_ref'),document.getElementById('subst_ok'));
};


SubstTool.search = function()
{
	var reference = escape(document.getElementById("subst_ref").value.toUpperCase());
	if((reference != null)&&(reference != ""))
	{
		// clean iframe result
		SubstTool.resetIFrameResult();

		// Recovery of the result div
		var resultDiv = SubstTool.getEmptyResultDiv();
		
		// Creation of the wait image
		var waitImg = document.createElement("img");
		waitImg.src = baseURL+"images/wait.gif";
		resultDiv.appendChild(waitImg);
		
		// Creation of the URL of the script
		var url = baseURL+"search.do";
		url += "?ref=" + reference;
		url += "&scp=" + scopeId;
		url += "&lg=" + language;
		url += "&med=" + mediaId;
		
		if(mediaType != null)
		{
			url += "&typ=" + mediaType;
		}
		
		if(targetId != null)
		{
			url += "&tgt=" + targetId;
		}
		
		if(cpltURL != null)
		{
			url += "&cplt=" + escape(cpltURL);
		}
		if(language != null)
		{
			url += "&lg=" + language;
		}
		if(country!=null){
			url += "&cty=" + country;	
		}
		
		// Search of the new product list
		SubstTool.executeScript(url);
	}
	else
	{
		SubstTool.displayAlert('No commercial reference!');
	}
};


SubstTool.displayResult = function(productSetList, stillExist)
{
	// Recovery of the result div
	var resultDiv = SubstTool.getEmptyResultDiv();
	var rootResultDiv = SubstTool.getEmptyResultDiv();
	
	if(isIntegrated=='yes'){ // for nice contour
		var container1TL =document.createElement("div");
		container1TL.className="container1TL";
		var container1TR =document.createElement("div");
		container1TR.className="container1TR";
		var container1T =document.createElement("div");
		container1T.className="container1T";
		container1TR.appendChild(container1T);
		container1TL.appendChild(container1TR);
		rootResultDiv.appendChild(container1TL);

		var container1L =document.createElement("div");
		container1L.className="container1L";
		var container1R =document.createElement("div");
		container1R.className="container1R";
		var container1content =document.createElement("div");
		container1content.className="container1content";
		container1R.appendChild(container1content);
		container1L.appendChild(container1R);
		rootResultDiv.appendChild(container1L);
		
		resultDiv=container1content;
}

	
	var natureLinkDiv = document.createElement("div");
	natureLinkDiv.className = "natureLink";

	if(stillExist){
		natureLinkDiv.innerHTML = "<b>This product is still commercialized</b>";
	}else{
		if(productSetList[0].closingDate.length > 0)
		{
			natureLinkDiv.innerHTML = "<b>Reason for substitution:</b>&nbsp;&nbsp;" + productSetList[0].natureLink + "<br><b>Substitution date:</b>&nbsp;&nbsp;" + productSetList[0].closingDate; 
		}
		else
		{
			natureLinkDiv.innerHTML = "<b>Reason for substitution:</b>&nbsp;&nbsp;" + productSetList[0].natureLink ;
		}
	}
	resultDiv.appendChild(natureLinkDiv);
	
	
	//var spacerDiv = document.createElement("div");
	//spacerDiv.className = "substSpacer";
	//resultDiv.appendChild(spacerDiv);
		
	if(!((productSetList.length == 1) && (productSetList[0].productList.length == 0)))
	{
		if(isIntegrated!='yes'){
			var productSetHR = document.createElement("hr");
			resultDiv.appendChild(productSetHR);
		}
		
		
		if(!stillExist){

			spacerDiv = document.createElement("div");
			spacerDiv.className = "substSpacer";
			resultDiv.appendChild(spacerDiv);

			var substMsgDiv = document.createElement("div");
			substMsgDiv.className = "substMsg"
			substMsgDiv.innerHTML = "This product is replaced by: ";
			resultDiv.appendChild(substMsgDiv);
		}
		var onlyOne= productSetList.length==1 && productSetList[0].productList.length==1 && isIntegrated=='yes';
		//spacerDiv = document.createElement("div");
		//spacerDiv.className = "substSpacer";
		//resultDiv.appendChild(spacerDiv);
		
		for(var i = 0 ; i < productSetList.length ; i++)
		{	
			for(var j = 0 ; j < productSetList[i].productList.length ; j++)
			{

				// update url for product reference
				SubstTool.updateProductLink (productSetList[i].productList[j].url, productSetList[i].productList[j].reference);

				var productSetDiv = document.createElement("div");
				productSetDiv.id = "productSet";
				resultDiv.appendChild(productSetDiv);
				
				var refSpan = document.createElement("span");
				refSpan.className = "reference"; 
				var refDescSpan = document.createElement("span");
				refDescSpan.className = "description"; 
				refSpan.innerHTML = productSetList[i].productList[j].reference ;
				if(isIntegrated=='yes' && productSetList[i].productList[j].desc && productSetList[i].productList[j].desc!="null"){ 
					refDescSpan.innerHTML +=" &nbsp; - &nbsp; "+productSetList[i].productList[j].desc ;
				}
				
				if(productSetList[i].productList[j].url && (productSetList[i].productList[j].url).indexOf(".warning") < 0){
					var refLink = document.createElement("a");
					refLink.className = "reference";
					refLink.href = "javascript:SubstTool.displayProduct('" + productSetList[i].productList[j].reference + "')";
					if(onlyOne){
						SubstTool.displayProduct(productSetList[i].productList[j].reference);
					}
				}else{
					var refLink = document.createElement("span");
					refLink.className = "reference";
					if(!productSetList[i].productList[j].url || productSetList[i].productList[j].url=="no_url.warning"){
						refLink.title='No data sheet for this product.';
					}else{
						refLink.title='No indexation, please contact your administrator.';
					}
				}
				refLink.appendChild(refSpan);
				refLink.appendChild(refDescSpan);
				productSetDiv.appendChild(refLink);
		productSetDiv.style.backgroundColor = "#EAEAEA";
		productSetDiv.style.padding = "2 4 2 4";
				
				if(!stillExist){				
					var qtySpan = document.createElement("span");
					qtySpan.className = "quantity";
					qtySpan.innerHTML = "&nbsp;&nbsp;(quantity:&nbsp;" + productSetList[i].productList[j].quantity + ")";
					productSetDiv.appendChild(qtySpan);
				}
				
				
				if(j < (productSetList[i].productList.length -1))
				{
					var operatorET = document.createElement("div");
			operatorET.style.backgroundColor = "#EAEAEA";
			operatorET.style.padding = "0 2 0 2";

					operatorET.className = "operator";
					operatorET.innerHTML = "+";
					productSetDiv.appendChild(operatorET);
				}
				
			}
			
			if(i < (productSetList.length -1))
			{
				var operatorOU = document.createElement("div");
				operatorOU.className = "operator";
				operatorOU.innerHTML = "OR";
			operatorOU.style.height = "18px";
				resultDiv.appendChild(operatorOU);
				
				//spacerDiv = document.createElement("div");
				//spacerDiv.className = "substSpacer";
				//resultDiv.appendChild(spacerDiv);
			}
		}
		
		//spacerDiv = document.createElement("div");
		//spacerDiv.className = "substSpacer";
		//resultDiv.appendChild(spacerDiv);
	}
		
	var commentHR = document.createElement("hr");
	resultDiv.appendChild(commentHR);

	//spacerDiv = document.createElement("div");
	//spacerDiv.className = "substSpacer";
	//resultDiv.appendChild(spacerDiv);
	
	var commentDiv = document.createElement("div");
	commentDiv.className = "comment";
	
	if(isIntegrated!='yes' && (productSetList[0].comments != null) && (productSetList[0].comments.length > 100))
	{
		var comentSubstringDiv = document.createElement("div");
		comentSubstringDiv.id = "subst_comment_substring";
		comentSubstringDiv.innerHTML = productSetList[0].comments.substring(0,180)+"...";
		commentDiv.appendChild(comentSubstringDiv);
		
		var comentFullDiv = document.createElement("div");
		comentFullDiv.id = "subst_comment";
		comentFullDiv.style.display = "none";
		comentFullDiv.innerHTML = productSetList[0].comments;
		commentDiv.appendChild(comentFullDiv);
		
		// Creation of the main table
		var linkTable = document.createElement("table");
		linkTable.style.width = "96%";
		commentDiv.appendChild(linkTable);

		var linkTbody = document.createElement("tbody");
		linkTable.appendChild(linkTbody);

		var linkTr = document.createElement("tr");
		linkTbody.appendChild(linkTr);
		
		var linkTd = document.createElement("td");
		linkTd.style.width = "100%";
		linkTd.id = "msg_link";
		linkTd.align = "right";
		linkTr.appendChild(linkTd);
		
		var showDiv = document.createElement("div");
		showDiv.id = "subst_show";
		showDiv.onclick = function()
			{
				document.getElementById('subst_comment_substring').style.display='none';
				document.getElementById('subst_comment').style.display='';
				document.getElementById('subst_show').style.display='none';
				document.getElementById('subst_hide').style.display='';
			}
		linkTd.appendChild(showDiv);
		
		var spanShow = document.createElement("span");
		spanShow.innerHTML = "View all";
		showDiv.appendChild(spanShow);
		
		var imgDown = document.createElement("img");
		imgDown.alt = "down";
		imgDown.src = baseURL+"images/icon_down.gif";
		showDiv.appendChild(imgDown);
		
		var hideDiv = document.createElement("div");
		hideDiv.id = "subst_hide";
		hideDiv.style.display = "none";
		hideDiv.onclick = function()
			{
				document.getElementById('subst_comment_substring').style.display='';
				document.getElementById('subst_show').style.display='';
				document.getElementById('subst_comment').style.display='none';
				document.getElementById('subst_hide').style.display='none';
			}
		linkTd.appendChild(hideDiv);
		
		var spanHide = document.createElement("span");
		spanHide.innerHTML = "Hide";
		hideDiv.appendChild(spanHide);
		
		var imgUp = document.createElement("img");
		imgUp.alt = "up";
		imgUp.src = baseURL+"images/icon_up.gif";
		hideDiv.appendChild(imgUp);
	}
	else
	{
			commentDiv.innerHTML = productSetList[0].comments;
	}
	
	if(productSetList[0].comments != null && productSetList[0].comments != "undefined" && productSetList[0].comments != "null" )
		{resultDiv.appendChild(commentDiv);}

	if(isIntegrated=='yes'){ // for nice contour
		var container1BL =document.createElement("div");
		container1BL.className="container1BL";
		var container1BR =document.createElement("div");
		container1BR.className="container1BR";
		var container1B =document.createElement("div");
		container1B.className="container1B";
		container1BR.appendChild(container1B);
		container1BL.appendChild(container1BR);
		rootResultDiv.appendChild(container1BL);	
	}

};


SubstTool.displayProduct = function(reference)
{
	if(productLink[reference] != null && productLink[reference] != "undefined" && productLink[reference] != "null")
	{
		if(productLink[reference].indexOf(".warning") < 0)
		{
			SubstTool.openProductSheet(productLink[reference]);
		}
		else
		{
			SubstTool.displayAlert('No data sheet for this product.');
		}
	}
	else
	{
		// Creation of the URL of the script
		var url = baseURL+"geturl.do";
		url += "?ref=" + reference;
		url += "&scp=" + scopeId;
		url += "&med=" + mediaId;
		
		if(mediaType != null)
		{
			url += "&typ=" + mediaType;
		}
		
		if(targetId != null)
		{
			url += "&tgt=" + targetId;
		}
		
		if(cpltURL != null)
		{
			url += "&cplt=" + escape(cpltURL);
		}
		if(language != null)
		{
			url += "&lg=" + language;
		}
		if(country!=null){
			url += "&cty=" + country;	
		}
		
		// Recovery of the URL of the product sheet
		SubstTool.executeScript(url);
		
		SubstTool.openProductSheet(productLink[reference]);
	}
};

SubstTool.resetIFrameResult = function()
{
	var resultIframe =document.getElementById("result_iframe");
	if(resultIframe && isIntegrated=='yes'){
		resultIframe.src="blank.html";
	}
}
SubstTool.openProductSheet = function(url)
{

	if(popup_state == "yes")
	{
		SubstTool.openPopup(url)
	}
	else
	{
		if(isIntegrated=='yes'){
		var resultIframe =document.getElementById("result_iframe");
		if(!resultIframe){
			resultIframe=document.createElement("iframe");
			resultIframe.id="result_iframe";
			var result_integrated = document.getElementById("subst_result_int");
			if(result_integrated == null){
				result_integrated=document.createElement("div");
				document.getElementById("subst_result").appendChild(result_integrated);
			}
			result_integrated.appendChild(resultIframe);
			resultIframe.style.width = "100%";
			resultIframe.style.height= "100%";
			resultIframe.align = "center";
			resultIframe.frameborder="0";
			resultIframe.style.border="none";
		}
			var index = url.indexOf("browse.do");
			url=url.substring(index,url.length);
			resultIframe.src=url;
			}else{
		window.location.href = url;

		}
	}

};


SubstTool.openPopup = function(url)
{
	var left = (screen.availWidth - width) / 2;
	var top = (screen.availHeight - height) / 2;
	
	var popup_state = window.open(url, "subst", "width=" + width + ", height=" + height + ", top=" + top + ", left=" + left + ", scrollbars=yes, menubar=no, status=no, resizable=yes");
};


SubstTool.getEmptyResultDiv = function()
{
	// Recovery of the result div
	var resultDiv = document.getElementById("subst_result");
	
	// Emptying of the result div
	while(resultDiv.hasChildNodes())
	{
		resultDiv.removeChild(resultDiv.firstChild);
	}
	
	return resultDiv;
};


SubstTool.executeScript = function(src)
{
//	var script = document.getElementById("subst_script");
//	if(script != null)	{var parentNode = script.parentNode; if(parentNode)	{parentNode.removeChild(script);}}

	var script = document.createElement("script");
	script.id = "subst_script";
	script.src = src;
	script.type = "text/javascript";
	document.body.appendChild(script);
};


SubstTool.displayMessage = function(value)
{
	// Recovery of the result div
	var resultDiv = SubstTool.getEmptyResultDiv();
	
	// Displaying of the message
	var resultSpan = document.createElement("a");
	resultDiv.appendChild(resultSpan);
	resultSpan.innerHTML = value;
};


SubstTool.displayAlert = function(value)
{
	// Displaying of the alert
	alert(value);
};

SubstTool.updateLink = function(referenceList)
{
	for (i = 0; i <= referenceList.length-1; i++)
	{
		// Creation of the URL of the script
		var url = baseURL+"geturl.do";
		url += "?ref=" + referenceList[i];
		url += "&scp=" + scopeId;
		url += "&med=" + mediaId;
		
		if((mediaType != null) && (mediaType != "null"))
		{
			url += "&typ=" + mediaType;
		}
		
		if((targetId != null) && (targetId != "null"))
		{
			url += "&tgt=" + targetId;
		}
		
		if((cpltURL != null) && (cpltURL != "null"))
		{
			url += "&cplt=" + escape(cpltURL);
		}
		
		// Recovery of the URL of the product sheet
		SubstTool.executeScript(url);
	}
};

SubstTool.updateProductLink = function(url, ref)
{
	productLink[ref] = url;
};



// *** completion ***


function initAutoComplete(form,field,submit){
  	_documentForm=form;
 	_inputField=field;
 	_submitButton=submit;

	if(_inputField){
		_currentInputFieldValue=_inputField.value; 
	}else{_currentInputFieldValue="";}
	_oldInputFieldValue=_currentInputFieldValue;  
	cacheResults("",new Array());
	creeAutocompletionDiv();
	hideCompleteDiv();

	//setTimeout("mainLoop()",200);
	mainLoop();

	document.onkeydown=onKeyDownHandler;  
 	_inputField.onkeyup=onKeyUpHandler;  
  	_inputField.onblur=onBlurHandler;
  	window.onresize=onResizeHandler;

	return true;
}


// tourne en permanence pour suggérer suite à un changement du champ texte
function mainLoop(){
  if(_oldInputFieldValue!=_currentInputFieldValue && _currentInputFieldValue.length >= completionMinSearch){
    var valeur=escapeURI(_currentInputFieldValue);
    var suggestions=_resultCache[_currentInputFieldValue];
    if(suggestions){ // la réponse était encore dans le cache
      metsEnPlaceDiv(valeur,suggestions)
    }else{
		//clean suggestion
		while(_completeDiv.childNodes.length>0) {
  			_completeDiv.removeChild(_completeDiv.childNodes[0]);
 		 }
		_maxWidthNeeded=0;
	
      callSuggestions(valeur) // appel distant
    }
    _inputField.focus()
  }
  _oldInputFieldValue=_currentInputFieldValue;
  setTimeout("mainLoop()",200); // la fonction se redéclenchera dans 200 ms
  return true
}

// échappe les caractères spéciaux
function escapeURI(La){
  if(encodeURIComponent) {
    return encodeURIComponent(La);
  }
  if(escape) {
    return escape(La)
  }
}


function callSuggestions(valeur){ 
	var scriptElem = document.createElement("script");
	scriptElem.type="text/javascript";
	scriptElem.src=compURL+"?ref="+valeur+"&scp="+scopeId+"&maxR="+completionMaxResult;
	_documentForm.appendChild(scriptElem);
}





// Mécanisme de caching des réponses
function cacheResults(debut,suggestions){
  _resultCache[debut]=suggestions
}

function setStylePourElement(c,name){
  c.className=name;
}

// calcule le décalage à gauche
function calculateOffsetLeft(r){
  return calculateOffset(r,"offsetLeft")
}

// calcule le décalage vertical
function calculateOffsetTop(r){
  return calculateOffset(r,"offsetTop")
}

function calculateOffset(r,attr){
  var kb=0;
  while(r){
    kb+=r[attr];
    r=r.offsetParent
  }
  return kb
}

// calcule la largeur du champ
function calculateWidth(){
	var result=_inputField.offsetWidth;
	var maxWidth=window.innerWidth;
	if(!maxWidth){
		maxWidth=document.body.offsetWidth;
	}
	maxWidth=maxWidth- calculateOffsetLeft(_inputField) -20;
	if(_maxWidthNeeded > result && maxWidth > result){
		result=(_maxWidthNeeded > maxWidth ? maxWidth : _maxWidthNeeded);
	}
	if(!result){
		result=147;
	}
	return result ;
}

function setCompleteDivSize(){
  if(_completeDiv && _inputField){
 //   _completeDiv.style.left=calculateOffsetLeft(_inputField)+"px";
   // _completeDiv.style.top=calculateOffsetTop(_inputField)+_inputField.offsetHeight-1+"px";
	_completeDiv.style.top="39px";
    _completeDiv.style.width=calculateWidth()+"px";
  }
}


function creeAutocompletionDiv() {
  _completeDiv=document.createElement("DIV");
  document.getElementById("subst_main").appendChild(_completeDiv);
  _completeDiv.id="completeDiv";
  _completeDiv.style.zIndex="1";
  setCompleteDivSize();
  setStylePourElement(_completeDiv,"AutoCompleteDivListeStyleInit");
}


// Cache complètement les choix de complétion
function hideCompleteDiv(){
	if(_completeDiv && _completeDiv!=null){
  		_completeDiv.style.visibility="hidden";
	}
}

// Rends les choix de completion visibles
function showCompleteDiv(){
	if(_completeDiv && _completeDiv!=null){
  _completeDiv.style.visibility="visible";
  setCompleteDivSize();
}
}

function metsEnPlaceDiv(valeur, liste){
  	while(_completeDiv && _completeDiv!=null && _completeDiv.childNodes && _completeDiv.childNodes.length>0) {
  	  _completeDiv.removeChild(_completeDiv.childNodes[0]);
 	 }
	_maxWidthNeeded=0;
  	// mise en place des suggestions
 	 for(var f=0; f < liste.length; ++f){
		var nouveauDiv=document.createElement("DIV");
   	 	setStylePourElement(nouveauDiv,"AutoCompleteDiv");
		nouveauDiv.onmousedown=divOnMouseDown;
   	 	nouveauDiv.onmouseover=divOnMouseOver;
    	nouveauDiv.onmouseout=divOnMouseOut;
    	var nouveauSpan=document.createElement("SPAN");
    	var nouveauSpanDesc=document.createElement("SPAN");
    	nouveauSpan.innerHTML=liste[f][0]; // le texte de la suggestion
		setStylePourElement(nouveauSpan,"AutoCompleteSpanPdt");
    	nouveauSpanDesc.innerHTML="&nbsp;&nbsp;"+liste[f][1]; // le texte de la description
		setStylePourElement(nouveauSpanDesc,"AutoCompleteSpanDesc");
    	nouveauDiv.appendChild(nouveauSpan);
    	nouveauDiv.appendChild(nouveauSpanDesc);
    	_completeDiv.appendChild(nouveauDiv)
		
		// to know width needed for the suggestion, after correct width is calculated 
		_completeDiv.style.width="100%"; 
		if(_maxWidthNeeded < (nouveauSpanDesc.offsetWidth+nouveauSpan.offsetWidth)){
			_maxWidthNeeded=nouveauSpanDesc.offsetWidth + nouveauSpan.offsetWidth;
		}

  	}
	_maxWidthNeeded=_maxWidthNeeded+10
	_completeDivRows=liste.length; 
  	if(_completeDivRows > 0) {
		_completeDiv.height=16*_completeDivRows+4;
		showCompleteDiv();
	} else {
  	  	hideCompleteDiv();
  	}
}


// Handler pour le keydown du document
var onKeyDownHandler=function(event){
  // accès evenement compatible IE/Firefox
  if(!event&&window.event) {
    event=window.event;
  }
  // on enregistre la touche ayant déclenché l'évènement
  if(event) {
    _lastKeyCode=event.keyCode;
  }
}


// Handler pour le keyup du champ texte
var onKeyUpHandler=function(event){
  // accès evenement compatible IE/Firefox
  if(!event&&window.event) {
    event=window.event;
  }
  _eventKeycode=event.keyCode;
  // Dans les cas touches touche haute(38) ou touche basse (40)
  if(_eventKeycode==40||_eventKeycode==38) {
    // on autorise le blur du champ (traitement dans onblur)
    blurThenGetFocus();
  }
  // taille de la selection
  var N=rangeSize(_inputField);
  // taille du texte avant la sélection (sélection = suggestion d'autocomplétion)
  var v=beforeRangeSize(_inputField);
  // contenu du champ texte
  var V=_inputField.value;
  if(_eventKeycode!=0){
    if(N>0&&v!=-1) {
      // on recupere uniquement le champ texte tapé par l'utilisateur
      V=V.substring(0,v);
    }
    // 13 = touche entrée
    if(_eventKeycode==13||_eventKeycode==3){
      var d=_inputField;
      // on mets en place l'ensemble du champ texte en repoussant la sélection
      if(_inputField.createTextRange){
        var t=_inputField.createTextRange();
        t.moveStart("character",_inputField.value.length);
        _inputField.select()
      } else if (d.setSelectionRange){
        _inputField.setSelectionRange(_inputField.value.length,_inputField.value.length)
      }
		hideCompleteDiv();
		SubstTool.search();
    } else {
      // si on a pas pu agrandir le champ non sélectionné, on le mets en place violemment.
      if(_inputField.value!=V) {
        _inputField.value=V
      }
    }
  }
  // si la touche n'est ni haut, ni bas, on stocke la valeur utilisateur du champ
  if(_eventKeycode!=40&&_eventKeycode!=38) {
  	_currentInputFieldValue=V;
  }
  if(handleCursorUpDownEnter(_eventKeycode)&&_eventKeycode!=0) {
    // si on a pressé une touche autre que haut/bas/enter
    PressAction();
  }
}
// Change la suggestion sélectionnée.
// cette méthode traite les touches haut, bas et enter
function handleCursorUpDownEnter(eventCode){
  if(eventCode==40){
    highlightNewValue(_highlightedSuggestionIndex+1);
    return false
  }else if(eventCode==38){
    highlightNewValue(_highlightedSuggestionIndex-1);
    return false
  }else if(eventCode==13||eventCode==3){
    return false
  }
  return true
}



// gère une touche pressée autre que haut/bas/enter
function PressAction(){
  _highlightedSuggestionIndex=-1;
  var suggestionList=_completeDiv.getElementsByTagName("div");
  var suggestionLongueur=suggestionList.length;
  // on stocke les valeurs précédentes
  // nombre de possibilités de complétion
  _completeDivRows=suggestionLongueur;
  // possiblités de complétion
  _completeDivDivList=suggestionList;
  // si le champ est vide, on cache les propositions de complétion
  if(_currentInputFieldValue=="" || _currentInputFieldValue.length < completionMinSearch||suggestionLongueur==0){
    hideCompleteDiv();
  }else{
    showCompleteDiv()
  }
  var trouve=false;
  // si on a du texte sur lequel travailler
  if(_currentInputFieldValue.length>0){
    var indice;
    // T vaut true si on a dans la liste de suggestions un mot commencant comme l'entrée utilisateur
    for(indice=0; indice < suggestionLongueur; indice++){
      if(getSuggestion(suggestionList.item(indice)).toUpperCase().
	  		indexOf(_currentInputFieldValue.toUpperCase())==0) {
        trouve=true;
        break
      }
    }
  }
  // on désélectionne toutes les suggestions
  for(var i=0; i < suggestionLongueur; i++) {
    setStylePourElement(suggestionList.item(i),"AutoCompleteDiv");
  }
  // si l'entrée utilisateur (n) est le début d'une suggestion (n-1) on sélectionne cette suggestion avant de continuer
  if(trouve){
    _highlightedSuggestionIndex=indice;
    _highlightedSuggestionDiv=suggestionList.item(_highlightedSuggestionIndex);
  }else{
    _highlightedSuggestionIndex=-1;
    _highlightedSuggestionDiv=null
  }
  var supprSelection=false;
  switch(_eventKeycode){
    // cursor left, cursor right, page up, page down, others??
    case 8:
    case 33:
    case 34:
    case 35:
    case 35:
    case 36:
    case 37:
    case 39:
    case 45:
    case 46:
      // on supprime la suggestion du texte utilisateur
      supprSelection=true;
      break;
    default:
      break
  }
  // si on a une suggestion (n-1) sélectionnée
  if(!supprSelection&&_highlightedSuggestionDiv){
    setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDivAct");
    var z;
    if(trouve) {
      z=getSuggestion(_highlightedSuggestionDiv).substr(0);
    } else {
      z=_currentInputFieldValue;
    }
    if(z!=_inputField.value){
      if(_inputField.value!=_currentInputFieldValue) {
        return;
      }
      // si on peut créer des range dans le document
      if(_inputField.createTextRange||_inputField.setSelectionRange) {
        _inputField.value=z;
      }
      // on sélectionne la fin de la suggestion
      if(_inputField.createTextRange){
        var t=_inputField.createTextRange();
        t.moveStart("character",_currentInputFieldValue.length);
        t.select()
      }else if(_inputField.setSelectionRange){
        _inputField.setSelectionRange(_currentInputFieldValue.length,_inputField.value.length)
      }
    }
  }else{
    // sinon, plus aucune suggestion de sélectionnée
    _highlightedSuggestionIndex=-1;
  }
}



// permet le blur du champ texte après que la touche haut/bas ai été pressé.
// le focus est récupéré après traitement (via le timeout).
function blurThenGetFocus(){
  _cursorUpDownPressed=true;
  _inputField.blur();
  setTimeout("_inputField.focus();",10);
  return
} 	
// taille de la sélection dans le champ input
function rangeSize(n){
  var N=-1;
  if(n.createTextRange){
    var fa=document.selection.createRange().duplicate();
    N=fa.text.length
  }else if(n.setSelectionRange){
    N=n.selectionEnd-n.selectionStart
  }
  return N
}

// taille du champ input non sélectionne
function beforeRangeSize(n){
  var v=0;
  if(n.createTextRange){
    var fa=document.selection.createRange().duplicate();
    fa.moveEnd("textedit",1);
    v=n.value.length-fa.text.length
  }else if(n.setSelectionRange){
    v=n.selectionStart
  }else{
    v=-1
  }
  return v
}

// Place le curseur à la fin du champ
function cursorAfterValue(n){
  if(n.createTextRange){
    var t=n.createTextRange();
    t.moveStart("character",n.value.length);
    t.select()
  } else if(n.setSelectionRange) {
    n.setSelectionRange(n.value.length,n.value.length)
  }
SubstTool.search();
}

// Retourne la valeur de la possibilité (texte) contenu dans une div de possibilité
function getSuggestion(uneDiv){
  if(!uneDiv) {
    return null;
  }
  return trimCR(uneDiv.getElementsByTagName('span')[0].firstChild.data)
}

// supprime les caractères retour chariot et line feed d'une chaîne de caractères
function trimCR(chaine){
  for(var f=0,nChaine="",zb="\n\r"; f < chaine.length; f++) {
    if (zb.indexOf(chaine.charAt(f))==-1) {
      nChaine+=chaine.charAt(f);
    }
  }
  return nChaine
}

// Change la suggestion en surbrillance
function highlightNewValue(C){
  if(!_completeDivDivList||_completeDivRows<=0) {
    return;
  }
  showCompleteDiv();
  if(C>=_completeDivRows){
    C=_completeDivRows-1
  }
  if(_highlightedSuggestionIndex!=-1&&C!=_highlightedSuggestionIndex){
    setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDiv");
    _highlightedSuggestionIndex=-1
  }
  if(C<0){
    _highlightedSuggestionIndex=-1;
    _inputField.focus();
    return
  }
  _highlightedSuggestionIndex=C;
  _highlightedSuggestionDiv=_completeDivDivList.item(C);
  setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDivAct");
  _inputField.value=getSuggestion(_highlightedSuggestionDiv);
}


// déclenchée quand on clique sur une div contenant une possibilité
var divOnMouseDown=function(){
  _inputField.value=getSuggestion(this);
  SubstTool.search();
};

// déclenchée quand on passe sur une div de possibilité. La div précédente est passée en style normal
var divOnMouseOver=function(){
  if(_highlightedSuggestionDiv) {
    setStylePourElement(_highlightedSuggestionDiv,"AutoCompleteDiv");
  }
  setStylePourElement(this,"AutoCompleteDivAct")
};

// déclenchée quand la sourie quitte une div de possibilité. La div repasse a l'état normal
var divOnMouseOut = function(){
  setStylePourElement(this,"AutoCompleteDiv");
};

// Handler de resize de la fenêtre
var onResizeHandler=function(event){
  wResize();
  // recalcule la taille des suggestions
  setCompleteDivSize();
}

// Handler de blur sur le champ texte
var onBlurHandler=function(event){
  if(!_cursorUpDownPressed){
    // si le blur n'est pas causé par la touche haut/bas
    hideCompleteDiv();
    // Si la dernière touche pressé est tab, on passe au bouton de validation
    if(_lastKeyCode==9){
      _submitButton.focus();
      _lastKeyCode=-1
    }
  }
  _cursorUpDownPressed=false
};


// *** End completion ***

// Insertion of the substitution tool
SubstTool.insert();