/*======================================================================================================================
INITIALISATION
======================================================================================================================*/
declareJavascriptedCSS();

Event.observe(window,'load',function(){
	prepareRollOverImg();
	prepareMouseOverLi();
});


/*---------------------------------------------------------------------------------------------------
initNav // 
Note: Appeler cette fonction juste en dessous du div #nav pour que le menu se load plus vite
---------------------------------------------------------------------------------------------------*/
function initNav(){
	//log("initNav();",1);
	if(!$('nav'))return;
	var nav = $('nav');
	var mainUl = nav.getElementsByTagName("ul")[0]; 
	var lis = mainUl.getElementsByTagName("li"); 
	for(var i=0; i< lis.length; i++){
		var li = $(lis[i]);
		var ul = li.getElementsByTagName("ul")[0];
		if(!ul)continue;
		li.ul = ul;
		li.onmouseover = function(){
			this.ul.style.display = 'block';
		}
		li.onmouseout = function(){
			this.ul.style.display = 'none';
		}
	}
}

/*---------------------------------------------------------------------------------------------------
initMouseOverLi// Créer des mouseover sur les li de navigation
ex1: initMouseOverLi(el,"rollover","rollover_on", "_on");
---------------------------------------------------------------------------------------------------*/
function initMouseOverLi(containerElement,startClassName,endClassName,mouseOverSuffix){

	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	var els = containerElement.getElementsByClassName(startClassName); 
	for(var i=0; i< els.length; i++){
		var mouseOverLi = $(els[i]);
		
		//MouseOver
		Event.observe(mouseOverLi,'mouseover',function(){
			if(this.hasClassName(this.activateName))return;
			this.className="cta over";
		}.bindAsEventListener(mouseOverLi));
		
		
		//MouseOut
		Event.observe(mouseOverLi,'mouseout',function(){
			if(this.hasClassName(this.activateName))return;
			this.className="cta";
		}.bindAsEventListener(mouseOverLi));
		
	}
}

/*---------------------------------------------------------------------------------------------------
initRollOverImg // Créer des rollover selon le nom d'une classe et l'extension des images rollover, preload les images également
ex1: initRollOverImg(el,"rollover","rollover_on", "_on");
---------------------------------------------------------------------------------------------------*/
function initRollOverImg(containerElement,startClassName,endClassName,rollOverSuffix, activateName){
	//log("initRollOverImg("+containerElement+","+startClassName+","+endClassName+","+rollOverSuffix+","+ activateName+");",1);
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	var els = containerElement.getElementsByClassName(startClassName); 
	for(var i=0; i< els.length; i++){
		var rollOverImg = $(els[i]);
		if(!rollOverImg.getAttribute("src"))continue; // si le tag n'a pas d'attribut src on passe à la prochaine itération
		var startSrc    = rollOverImg.getAttribute("src"); // on assigne garde le chemin de l'image à startSrc
		var startSrcLen = startSrc.length;
		var filePath    = startSrc.substring(0,startSrcLen-4);
		var fileExt     = startSrc.substring(startSrcLen-4); 
		var rollSrc     = filePath + rollOverSuffix + fileExt; // on créer le chemin du rollover
		rollOverImg.activateName = activateName;
		rollOverImg.rollSrc = rollSrc; // on assigne le chemin de départ à l'objet image
		rollOverImg.startSrc = startSrc; // on assigne le chemin rollover à l'objet image
		
		//Activate state
		if(rollOverImg.className.indexOf(activateName) != -1){
			//log("Activate state -> src: " + rollOverImg.rollSrc);
			rollOverImg.setAttribute("src", rollOverImg.rollSrc); // assigne le chemin rollover
			rollOverImg.toggleClassName(endClassName);
		}
		
		//MouseOver
		Event.observe(rollOverImg,'mouseover',function(){
			//log("rollOverImg.mouseover() -> src: " + this.rollSrc);
			if(this.hasClassName(this.activateName))return;
			this.setAttribute("src", this.rollSrc); // assigne le chemin rollover
			this.toggleClassName(endClassName);	
		}.bindAsEventListener(rollOverImg));
		
		
		//MouseOut
		Event.observe(rollOverImg,'mouseout',function(){
			//log("rollOverImg.mouseout() -> src: " + this.startSrc);
			if(this.hasClassName(this.activateName))return;
			this.setAttribute("src", this.startSrc); // assigne le chemin normal
			this.toggleClassName(endClassName);
		}.bindAsEventListener(rollOverImg));
		
		
		//Preloading
		if (!document.createElement) return false;
		var refPreloadImg = document.createElement("img"); // crée un élément img qui n'est pas dans le document (donc invisible)
		refPreloadImg.setAttribute("src", rollSrc); // assigne le chemin du rollover
		
	}
}

/*---------------------------------------------------------------------------------------------------
declareJavascriptedCSS //
---------------------------------------------------------------------------------------------------*/
function declareJavascriptedCSS(){
	document.write("\n<style>\n<!--\n");
	document.write(".toggleHideContent{display:none;}\n");
	document.write(".contentHide{display:none;}\n");
	document.write(".jsOnlyContent{display:block !important;}\n");
	document.write("-->\n</style>\n");
}

function prepareRollOverImg(){
	var el = $("container4");
	initRollOverImg(el,"rollover","rollover_on", "_on", "activate");
}

function prepareMouseOverLi(){
	var el = $("nav");
	initMouseOverLi(el,"cta","cta_on","over");
}