/*
	Slider V0.1: 05/08/2011
	Slider V1.0: 23/08/2011
*/
//---------------------------------------------------------------------------------------------------------
//Variables de configuration

var HAUTEUR=375;
var LARGEUR=720;

var POSX=0;
var POSY=0;
//var POSX=0;
//var POSY=0;

var POSX_BTN=300;
var POSY_BTN=355;

var SKIN_BOUTON="images/skin.png";
var SKIN_BOUTON_CHANGE="images/skin_change.png";

//Fin des variables de configuration
//---------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------
//variable system

//l'appli
var app;

var $j = jQuery.noConflict();

//Les conteneurs
var cont1;
var cont2;

//Le bandeau texte
var contTexte;

//Les images
var img1;
var img2;
var img3;
var img4;
var img5;

//les boutons
var bt1;
var bt2;
var bt3;
var bt4;
var bt5;

var tab;

//Timming
var slide_temps=2000;//Vitesse animation slide
var image_temps=2000;//Temps entre les images

//tableau image
var tabimage=[];

//tableau texte
var tabtexte=[];

//tableau de lien
var tablien=[];

//image actuel
var indice;

//groupe de bouton
var bouton;

//conteneur au premier plan
var conteneur_actif;

//conteneur au deuxieme plan
var conteneur_inactif;

//timer
var timer;

//recupere le lien courant
var lienencours;

//le nombre d'image
var i;

//---------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------------------------
//Ajax
function getXMLHttpRequest()
{
	var xhr = null;
	
	if(window.XMLHttpRequest || window.ActiveXObject)
	{
		if(window.ActiveXObject)
		{
			try
			{
				xhr = new ActiveXObject("Msxml2.XMLHTTP");

			}
			catch(e)
			{
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else
		{
			xhr = new XMLHttpRequest();
		}
	}
	else
	{
		alert("Erreur");
		return null;	
	}
	
	return xhr;
}

//---------------------------------------------------------------------------------------------------------
//Quand le chargement de la page est fini
function lancement_slider()
{
	i1 = new Image();
	i1.src="images/bt1-2.png";
	i2 = new Image();
	i2.src="images/bt2-2.png";
	i3 = new Image();
	i3.src="images/bt3-2.png";
	i4 = new Image();
	i4.src="images/bt4-2.png";

	$j("#app").stop().animate({ opacity: 0}, 0, function (){});
	//Reduction de code
	cont1 = this.document.getElementById("cont1");
	cont2 = this.document.getElementById("cont2");
	contTexte = this.document.getElementById("Texte");
	app = this.document.getElementById("Slider");
	bouton = this.document.getElementById("bouton");
	bt1 = this.document.getElementById("bt1");
	bt2 = this.document.getElementById("bt2");
	bt3 = this.document.getElementById("bt3");
	bt4 = this.document.getElementById("bt4");
	bt5 = this.document.getElementById("bt5");
	tab = this.document.getElementById("tabs");
	
	//placement des tabs
	tab.style.left = LARGEUR-5+"px";
	
	//reset skin bouton
	reset_skin();
	
	//placement bouton
	bouton.style.top = POSY_BTN+"px";
	
	//On met la taille
	app.style.height = HAUTEUR+"px";
	app.style.width = LARGEUR+"px";
	
	//On met la position
	app.style.left = POSX+"px";
	app.style.top = POSY+"px";
	tab.style.left += POSX+"px";
	tab.style.top += POSY+"px";

	//Placement du texte
	contTexte.style.width = LARGEUR;
	
	//On met les z-index
	cont1.style.zIndex = 1;
	cont2.style.zIndex = 2;
	
	//On commence par la première image qui sera deja chargée donc
	indice = 0;
	
	this.document.getElementById("menu_accueil_slider").style.background="url() repeat-x";
	
	//chargement des variables;
	chargement_variable();
}

//---------------------------------------------------------------------------------------------------------
//load des URLs, Timming et autre var en AJAX
function chargement_variable()
{
	
	var varload;
	var xhr = getXMLHttpRequest();
	
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
		{
			
			varload = xhr.responseText;
			traitement(varload);
		}
	};
	
	xhr.open("POST","variable.php",true);
	xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	xhr.send(null);
}

//---------------------------------------------------------------------------------------------------------
//Affectation des vars
function traitement(variable)
{
	/* Pour test
	img1="images/spa.jpg";
	img2="images/sauna.jpg";
	img3="images/hammam.jpg";
	img4="images/sn.jpg";
	img5="";
	
	txt1="images/spa.jpg";
	txt2="images/sauna.jpg";
	txt3="images/hammam.jpg";
	txt4="images/sn.jpg";
	txt5="";
	
	lien1="1";
	lien2="2";
	lien3="3";
	lien4="4";
	lien5="5";
	*/
	
	//On met à zero le nombre de boutons
	bouton.innerHTML="";
	
	var tab1 = variable.split(";/;")
	for(i=0;i<=tab1.length-2;i++)
	{
		var tab2 = tab1[i].split("//;;");
		if(tab2.length > 2)
		{
			if(tab2[0]!="" && tab2[0]!="undefined")
			{
				tabimage[i] = tab2[0];	
				tabtexte[i] = tab2[1];
				tablien[i] = tab2[2];
				bouton.innerHTML +="<img id='bt"+(i+1)+"' src='"+SKIN_BOUTON+"' onclick='changer_image("+i+");' />";
			}
		}		
	}
	
	i--;
	
	//le bouton 1
	this.document.getElementById("bt"+(indice+1)).src=SKIN_BOUTON_CHANGE;
	
	cont1.src = tabimage[0];
	var texteaffiche = tabtexte[0];
	contTexte.innerHTML = "<img id='fond' src='images/fond-txt.png' /><center>"+texteaffiche+"</center>";
	
	cont2.style.left = (LARGEUR*2)+"px";

	cont2.src = tabimage[1];
	
	conteneur_actif="cont2";
	conteneur_inactif = cont1;
	
	lienencours = tablien[0];
	
	bouton.style.left = ((LARGEUR/2)-(i*10))+"px";
	
	//timer = setTimeout("slide()", image_temps);
    //timer = setTimeout(function() { slide(); }, image_temps);

	//tableau(img1,img2,img3,img4,img5, txt1, txt2,txt3,txt4,txt5,lien1, lien2,lien3,lien4,lien5);
	$j("#app").stop().animate({ opacity: 1}, 200, function (){slide();});
}

//---------------------------------------------------------------------------------------------------------
//Allimentation des tableaux
function tableau(img1,img2,img3,img4,img5, txt1, txt2,txt3,txt4,txt5)
{
	//remplis tableau image
	tabimage[0] = img1;
	tabimage[1] = img2;
	tabimage[2] = img3;
	tabimage[3] = img4;
	tabimage[4] = img5;
	
	//remplis tableau txt
	tabtexte[0] = txt1;
	tabtexte[1] = txt2;
	tabtexte[2] = txt3;
	tabtexte[3] = txt4;
	tabtexte[4] = txt5;
	
	//remplis tableau lien
	tablien[0] = lien1;
	tablien[1] = lien2;
	tablien[2] = lien3;
	tablien[3] = lien4;
	tablien[4] = lien5;
	

}

function inversion_profondeur()
{	
	if(conteneur_actif=="cont1")
	{
		cont1.style.zIndex=1;
		cont2.style.zIndex=2;
		conteneur_inactif=cont1;
		conteneur_actif="cont2";
	}
	else
	{
		cont2.style.zIndex=1;
		cont1.style.zIndex=2;
		conteneur_actif="cont1";
		conteneur_inactif=cont2;
	}
}

function slide()
{
	$j("#Texte").stop().animate({ opacity: 1, top:-100}, slide_temps, function (){image_anim();});
}

function after_choose()
{
	cont2.style.left=300;
	$j("#cont2").stop().animate({ opacity: 0, left:200}, 0, function ()
	{
	});
	cont1.style.zIndex=1;
	cont2.style.zIndex=2;
	conteneur_inactif=cont1;
	conteneur_actif="cont2";
	reset_skin();
	this.document.getElementById("bt"+(indice+1)).src=SKIN_BOUTON_CHANGE;
	$j("#Texte").stop().animate({ opacity: 1, top:-100}, slide_temps, function (){image_anim();});
}

function image_anim()
{
	
		if(indice<i)
		{
			indice++;
		}
		else
		{
			indice=0;	
		}
		
	reset_skin();
	var indice_btn = indice+1;
	this.document.getElementById("bt"+(indice_btn)).src=SKIN_BOUTON_CHANGE;
	var texteaffiche = tabtexte[indice];
	lienencours = tablien[indice];
		
	$j("#Texte").stop().animate({ opacity: 1, top:0}, slide_temps, function (){});
	
	contTexte.innerHTML = "<img id='fond' src='images/fond-txt.png' /><center>"+texteaffiche+"</center>";
	
	$j("#"+conteneur_actif).stop().animate({ opacity: 1, left:0}, slide_temps, function ()
	{
		conteneur_inactif.style.left = (LARGEUR*2)+"px";
		
		var indicechargement=indice;
		
			if(indice<i)
			{
				indicechargement++;
			}
			else
			{
				indicechargement=0;	
			}
		

		conteneur_inactif.src = tabimage[indicechargement];
		inversion_profondeur();
		
		//timer = setTimeout("slide()",image_temps);
        timer = setTimeout(function() { slide(); }, image_temps);
	});
}

function onclique()
{
	document.location.href = lienencours;
}

function changer_image(num_image)
{
	clearTimeout(timer);
	reset_skin();
	cont2.style.zIndex=1;
	cont1.style.zIndex=2;
	conteneur_actif="cont1";
	conteneur_inactif=cont2;
	cont1.src = tabimage[num_image];
	var texteaffiche = tabtexte[num_image];
	lienencours = tablien[num_image];
	contTexte.innerHTML = "<img id='fond' src='images/fond-txt.png' /><center>"+texteaffiche+"</center>";
	indice=num_image;
	this.document.getElementById("bt"+(indice+1)).src=SKIN_BOUTON_CHANGE;
	$j("#cont1").stop().animate({ opacity: 1, left:0}, 2, function ()
	{});
	
		if(num_image<i)
		{
			num_image++;
		}
		else
		{
			num_image=0;	
		}
	
	
	cont2.src = tabimage[num_image];
	$j("#Texte").stop().animate({ opacity: 1, top:0}, 3, function (){});
	//timer = setTimeout("after_choose()",image_temps+20);
      timer = setTimeout(function() { after_choose(); }, image_temps+20);
}

function reset_skin()
{
	//skin boutons
	var j=0;
	
	for(j=0;j<=i;j++)
	{
		this.document.getElementById("bt"+(j+1)).src = SKIN_BOUTON;
	}
}

function lien(lien)
{
	document.location.href = lien;
}

function click_video()
{
//document.getElementById("video_accueil").innerHTML = "<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' width='400' height='225'>	<param name='src' value='http://www.dailymotion.com/swf/xfzgqp&amp;related=1' />	<param name='width' value='420' />	<param name='height' value='336' /><embed type='application/x-shockwave-flash' src='http://www.dailymotion.com/swf/xfzgqp&amp;related=1&autoplay=1' width='420' height='225'></embed></object>";
//document.getElementById("video_accueil").style.marginLeft ="0px";
document.getElementById("video_accueil").innerHTML = "<iframe class='image_video_accueil' width='400' height='246' src='http://www.youtube.com/embed/uQia6V2zSrI' frameborder='0' allowfullscreen></iframe>";

//document.getElementById("video_accueil").innerHTML = "<embed src='http://www.youtube.com/embed/YEjpc4T6JnY' type='application/x-shockwave-flash' wmode='transparent' width='400' height='246'></embed>";
}