/** 
* @class permet de gerer l'affichage d'une réponse au click d'une question 
* @author ote 
* @version 1.0
* <script>
* exemple=' PARTIE HTML : \n
* <div id="q_1" onclick="javascript:callQr(this.id);">\n
*   Question 1\n
* </div>\n
* <div id="q_2" onclick="javascript:callQR(this.id);"> \n
*   Question 2\n
* </div>\n
* <div id="a_1" onclick="javascript:callQR(this.id);"> \n
*    Réponse 1\n
* </div>\n
* <div id="a_2" onclick="javascript:callQR(this.id);"> \n
*    Réponse 2\n
* </div>\n
* PARTIE SCRIPT :\n
* initQR();\n';
*  </script>
*  <br><BUTTON onclick=alert(exemple) > cliquer pour afficher l exemple </button>
*/
function QuestionReponse (){

  /**
  * chaine permettant de definir les div de question ("q_" par defaut) 
  */
	this.OPT_chaineQuestion ="q_"; 
	/**
	* chaine permettant de definir les div de reponse ("a_" par defaut)
	*/
	this.OPT_chaineReponse = "a_"; 
	/**
	* nom de la classe question ON ("q_on" par defaut)
	*/
	this.OPT_classeQuestionOn = "q_on";
	/**
	* nom de la classe question OFF ("q_off" par defaut)
	*/
	this.OPT_classeQuestionOff = "q_off"; 
	/**
	* nom de la classe reponse ON ("a_on" par defaut)
	*/ 
	this.OPT_classeReponseOn = "a_on"; 
	/**
	* nom de la classe reponse OFF ("a_off" par defaut)
	*/
	this.OPT_classeReponseOff = "a_off"; 

	/**
	* Retourne la chaine en entrée sans les préfixes OPT_chaineQuestion et OPT_chaineReponse
	* @param {String} chaine : chaine à tester
	* @return {String} retour : chaine sans les préfixes
	* @private 
	* @version 1.0
	* @author ote
	*/
	this._getNumber = function getNumber(chaine){
		if (chaine.indexOf(this.OPT_chaineQuestion) !=-1){
			chaine=chaine.substring(chaine.indexOf(this.OPT_chaineQuestion)+ this.OPT_chaineQuestion.length, chaine.length);
			return chaine;
		}
		if (chaine.indexOf(this.OPT_chaineReponse) !=-1){
			chaine=chaine.substring(chaine.indexOf(this.OPT_chaineReponse)+ this.OPT_chaineReponse.length, chaine.length);
			return chaine;
		}
		return null;
	}

	/**
	* Retourne la liste des div question ou des div réponse (en fonction du paramètre en entrée)
	* @param {String} chaineQR : OPT_chaineQuestion ou OPT_chaineReponse
	* @private 
	* @version 1.0
	* @author ote
	*/	
	this._getQRDiv = function getQRDiv(chaineQR){
		listeDiv= document.getElementsByTagName("div");
		listeFinale=new Array();
		i=0;
		while (listeDiv[i]){
			if (listeDiv[i].id.indexOf(chaineQR)!=-1){
				listeFinale[listeFinale.length]=listeDiv[i];
			}
			i++;
		}
		return listeFinale;
	}

	
	/**
	* Active la question (change la classe css) et desactive les div réponses (div caché par classe css)
	* @param {array} listeQuestion : tableau contenant la liste des questions
	* @param {array} listeReponse : tableau contenant la liste des réponses
	* @param {int} numeroQuestion : numéro de la question a activer
	* @private 
	* @version 1.0
	* @author ote
	*/	
	this._activeQuestion = function activeQuestion (listeQuestion, listeReponse, numeroQuestion){
		// on desactive tous les div reponse et on change la classe des div questions sauf le niveau bas
		i=0;
		while (listeReponse[i]){
			if (this._getNumber(listeReponse[i].id)!=numeroQuestion){
			if (this.OPT_classeReponseOff == null)
					listeReponse[i].style.display='none';
				else 
					listeReponse[i].className='a_off';
			}
			else {
				if (this.OPT_classeReponseOff == null)
					listeReponse[i].style.display='block';
				else
					listeReponse[i].className='a_on';
			}
			i++;
		}
		
		i=0;
		while (listeQuestion[i]){
			
			if (this._getNumber(listeQuestion[i].id)!=numeroQuestion){
					listeQuestion[i].className="q_off";
			}
			else {
					listeQuestion[i].className="q_on";
			}
			i++;
		}
	}	
	/**
	* Initialise la classe : 
	*			recherche des tableau de question
	*			recherche des tableau de reponse
	* 		Affichage d'un réponse par défaut
	* @version 1.0
	* @author ote
	*/
	this._init = function init(){
		// recuperation des DIV question
		listeQuestion = this._getQRDiv(qr.OPT_chaineQuestion);
		
		// recuperation des DIVS reponse
		listeReponse =this._getQRDiv(qr.OPT_chaineReponse);
		
	
		// on recherche le niveau le plus bas de la liste des reponse
		i=0;
		niveauBas=listeReponse[i].id;
		while (listeReponse[i]){
			niveauAct = this._getNumber(listeReponse[i].id);
			if (niveauBas > niveauAct) niveauBas=niveauAct;
			i++;
		}
		this._activeQuestion(listeQuestion, listeReponse, niveauBas);
	
	}
	
	/**
	* active la réponse à la question 
	* @param {string} name : nom de la question
	* @version 1.0
	* @author ote
	*/
	this._selectReponse = function selectReponse(name){
		// recuperation des DIV question
		listeQuestion = this._getQRDiv(qr.OPT_chaineQuestion);
		
		// recuperation des DIVS reponse
		listeReponse =this._getQRDiv(qr.OPT_chaineReponse);
	
		// On recupere le numero de la question
		nombre=this._getNumber(name);
	
		this._activeQuestion(listeQuestion, listeReponse,nombre);
	}
	

}

/**
* Raccourci pour eviter d'instancier la classe et d'appeler la fonction _init
* @member QuestionReponse
* @version 1.0
* @author ote
*/
function initQr(){
	qr= new QuestionReponse();
	qr._init();
}


function changeStyle(element){
	tmp =element.className;
	if (tmp.indexOf("q_off", 0)>-1){
		if (tmp.indexOf("_hover", 0)>-1){
			element.className="q_off";
		}else{
			element.className="q_off_hover";
		}
	}
	


}


/**
* Raccourci pour eviter d'instancier la classe et d'appeler la fonction _selectReponse
* @member QuestionReponse
* @param {string} name : nom de la question
* @version 1.0
* @author ote
*/
function callQr(name){
	qr=new QuestionReponse();
	qr._selectReponse(name);
}