/*

ksearch
Fabrice de Caluwe
version: 29-11-2010

dépendance :    -fichier css pour la définition graphique des éléments
		-module ajax
		-fichier php pour triter les requêtes http
		-certains événement à mettre dans le onload du body ont été externalisés dans un fichier js spécifique au chargement
//elements :

ksearch_content = input contenant les mots clefs saisis pas l'utilisateur
ksearch_form = nom du formulaire 
ksearchbox = layer contenant les suggestions



INSTRUCTIONS POUR INVOQUER CE SCRIPT

-appeler le fichier js au dessus du formulaire ci-dessous:

<script type="text/javascript" src="/include/javascript/ksearch.js";?>"></script>
<form action="reponse.php" method="post" id="ksearch_form" target="_top">
<input type="text" id="ksearch_content" class="ksearch_input"/>
<a href="javascript:ksearch.submit()"><img src="../images/bouton/bouton_ok.png" width="46" height="18" class="button"></a>
</form>


-mettre les lignes ci-dessous tout en bas de ce script ou les mettre dans le fichier js qui gère les événements au démarrage de la page : 

window.onload = function ()

{  
	
	try{

		text = "Inscrivez ici votre mot clé !";
		el = document.getElementById('ksearch_content');
		document.getElementById('ksearch_content').value = text;
		document.getElementById('ksearch_content').onclick= function() 
			{
			if(el.value == text ){el.value='';}
			}
		document.getElementById('ksearch_content').onfocus= function() 
			{
			if(el.value == text ){el.value='';}
			}
		document.getElementById('ksearch_content').onblur= function() 
			{
			if(el.value==''){el.value=text;}
			}	
		document.getElementById('ksearch_content').onkeyup= function() 
			{
			ksearch.key_down();
			}	
		

	}catch(e){}
}


- ce fichier doit être appelé sans oublié les lignes en bas concernant la création du div:

newnode = document.createElement("div");
newnode.setAttribute("id","ksearchbox");
newnode.setAttribute("class","ksearch_layer");

mybody = document.getElementsByTagName('body')[0];
mybody.appendChild(newnode);

ksearch = new Ksearch();


IMPORTANT : ne pas changer le nom de l'instance de l'objet ksearch !

*/




var Ksearch = function() {



	this.image_path='http://'+SYS_INFO.web_site_name+'/images/ksearch/';//image des images sur le serveur url absolue (http://)

  	var my_object = this;
  	this.locked = 0;
  	this.last_keyword = '';
  	this.memorized = new Array();
  	var ksearch_query = new Ajax_send();
  	ksearch_query.target_url='../include/ajax/ksearch.php';
  	ksearch_query.msg_error=0;
	ksearch_query.msg_error_content = '';
	ksearch_query.on_error='';
	ksearch_query.debug=0;
	ksearch_query.synchro=0;
	ksearch_query.delay=0;
	ksearch_query.threading=0;
	ksearch_query.cache=0;
	ksearch_query.max_time=0;
  	
	pos = 0;offset=10;resolution=1003; 
	resolution = (window.innerWidth)? window.innerWidth:resolution;	
	resolution = (document.body.clientWidth)? document.body.clientWidth:resolution;	
	//resolution = (window.screen.availWidth)? window.screen.availWidth - offset:resolution; 
	//resolution = (window.screen.width)? window.screen.width - offset:resolution;
	//resolution = (screen.width)? window.screen.width - offset:resolution;
			


					
	if(resolution >1003)
			{
			pos = (resolution - 970) /2; pos = pos +300;
			}
		
	var el = document.getElementById("ksearchbox");	 	
	el.style.height ='250px';
	//el.style.border = '1px solid';
	//el.style.overflow="scroll";		
  	el.style.left=pos + "px";
  	el.style.left=pos;  	  		  	  					
	el.style.visibility="hidden";  	

	this.submit = function()
		{
			myval = document.getElementById('ksearch_content').value;
			if(myval !='' && myval !='Inscrivez ici votre mot clé !')
				{
				document.getElementById('ksearch_form').submit();	
				}			
		
		}


	this.replace_car = function(lavaleur)
		{
		find_car = new Array();
		replace_car = new Array();
		find_car.push('é','è','ê','à','ï','î','ù','ô','û','ç');
		replace_car.push('e','e','e','a','i','i','u','o','u','c');

							
		p=0;while(p<find_car.length)	
			{
			lavaleur = lavaleur.replace(find_car[p],replace_car[p]);
			p++;
			}
		lavaleur = lavaleur.toLowerCase();
		return lavaleur;	
		}


this.writedata = function(data)
	{
	if(data[0]>=1)
		{    
		car = document.getElementById("ksearch_content").value;	
		
		
		output = '<table width="400" border="0" cellpadding="0" cellspacing="0"><tr>';
		output+='<td width="48"><img src="'+my_object.image_path+'transparent.gif" width="48" height="15" /></td>';
		output+='<td><img src="'+my_object.image_path+'bg_triangle.png" width="34" height="15" /></td></tr></table>';		

		output+='<table width="400" border="0" cellspacing="0" cellpadding="0"><tr>';
		output+='<td width="9"><img src="'+my_object.image_path+'bg_round_left_up.png" width="9" height="9" /></td>';
		output+='<td width="39"><img src="'+my_object.image_path+'bg_up.png" width="39" height="9" /></td>';
		output+='<td width="34"><img src="'+my_object.image_path+'bg_triangle_do.png" width="34" height="9" /></td>';
		output+='<td><img src="'+my_object.image_path+'bg_up.png" width="309" height="9" /></td>';
		output+='<td width="9"><img src="'+my_object.image_path+'bg_round_right_up.png" width="9" height="9" /></td></tr></table>';
		output+='<table width="400" border="0" cellspacing="0" cellpadding="0"><tr>';
		output+='<td width="9" background="'+my_object.image_path+'bg_left.png"><img src="'+my_object.image_path+'transparent.gif" width="9" height="10" /></td>';
		output+='<td background="'+my_object.image_path+'bg_color.png">';


		output+='<table width="100%" border="0" cellpadding="2">';			
		nbre=0;i=1;while(i<data.length)
			{
			
			//si le radical entré par l'utilisateur ne différe pas du radical du mot clef, on affiche  
			radical =data[i].substring(0,car.length);
			 
			if(my_object.replace_car(radical) == my_object.replace_car(car))   
			
				{
				output+='<tr><td align="left" valigne="top">'; 
				output+="<a href=\"javascript:ksearch.choice('"+addslashes(data[i])+"')\">"+ radical + '<b>'+  data[i].substring(car.length,data[i].length) +'</b>' +'</a>';	
                                output+='</td></tr>';
                                nbre++;
                               }
			i++;
			
			
			
					
		}
		output+='<tr><td align="center"><br /><table border="0"><tr><td><img src="'+my_object.image_path+'comment_delete.png"></td><td><a href="javascript:ksearch.close()">Fermer les suggestions</a></td></tr></table></td></tr></table>';	
		output+='</td><td width="9" background="'+my_object.image_path+'bg_right.png"><img src="'+my_object.image_path+'transparent.gif" width="9" height="10" /></td></tr></table>';			
		output+='<table width="400" border="0" cellspacing="0" cellpadding="0"><tr>';
		output+='<td width="9"><img src="'+my_object.image_path+'bg_round_left_do.png" width="9" height="9" /></td>';
    		output+='<td background="'+my_object.image_path+'bg_down.png"><img src="'+my_object.image_path+'transparent.gif" width="9" height="10" /></td>';
    		output+='<td width="9"><img src="'+my_object.image_path+'bg_round_right_do.png" width="9" height="9" /></td></tr></table>';	

		
		if(nbre>0)
		        {
			el.innerHTML=output; 
			//adaptation de la hauteur 
			base = 50;pas=20;
			resultat = base + pas*nbre;	
			el.style.height =resultat+'px';
			el.style.visibility="visible";
			}
		else
			{
			el.innerHTML=''; 
			el.style.visibility="hidden";
				
			}		
		
		}


	else
		{			
		el.style.visibility="hidden";	
		el.innerHTML='';
		}		
		
	}

this.response = function(my_var)
	{  
		
	//on reçoit la réponse du serveur
	var el = document.getElementById("ksearchbox");	
	
	car = document.getElementById("ksearch_content").value;	
        
	lines=my_var.split("|");
	//s'il existe plus de 10 réponses, il faudra affiner encore quand l'utilisateur aura indiqué une lettre ou deux de plus
	//mais s'il y a moins de 15 réponses, toute nouvelle lettre rajouté au radical ne donnera rien de neuf au niveau serveur
	//locked positionné à 1 permettra d'éviter un nouvel appel au serveur qui serait inutile	
	if(lines[0]<10){ksearch.locked=1;}
	//on affiche les suggestions à l'utilisateur
	my_object.writedata(lines);
	//on mémorise les réponses dans un tableau
	memorized = lines;	
	}




	this.close = function()
		{
		document.getElementById("ksearchbox");
		el.style.visibility="hidden";	
		el.innerHTML='';	
			
		}

	this.choice = function(val)
		{
		document.getElementById("ksearch_content").value=val;	
		el.style.visibility="hidden";	
		}
	
	this.key_down = function()
	
	 	{
	 		
		//on récupère le contenu de l'élément input
		//car = my_object.replace_car(document.getElementById("ksearch_content").value); 
		car = document.getElementById("ksearch_content").value;
		car = car.toLowerCase();
		same_car=0;
		
		if(car.length>1)
			{ 
			radical = my_object.replace_car(car.substring(0,car.length-1));
			if(my_object.last_keyword == radical )
				{
				//l'utilisateur continue à chercher depuis le meme radical
				same_car=1;			
				}
			else
				{
				//l'utilisateur a changé de radical. il s'agit d'une nouvelle recherche
				my_object.memorized = new Array();
				my_object.locked = 0;
				same_car=0;	
				}
			//on mémorise le radical
			my_object.last_keyword = my_object.replace_car(car);
		
		
			if (my_object.locked==0 && !same_car)
				{
				//on provoque un appel au serveur pour recevoir des suggestions
				my_object.locked=0;
				ksearch_query.query_string='content='+car;
				ksearch_query.on_response='ksearch.response(myvar)';
				ksearch_query.start();				
				}
			else
				{
				//on a déjà une liste et un appel au serveur ne donnera rien de neuf. donc on utilise le tableau mémorisé
				
				my_object.writedata(memorized);					
				}
			}
		else
			{
			//si peu de caractères peuvent aussi résulter d'une nouvelle recherche alors supprimons l'ancienne pour être certain
			my_object.close();
			my_object.memorized = new Array();	
			}	
					
	 	}

}



newnode = document.createElement("div");
newnode.setAttribute("id","ksearchbox");
newnode.setAttribute("class","ksearch_layer");

mybody = document.getElementsByTagName('body')[0];
mybody.appendChild(newnode);

ksearch = new Ksearch();