DIAPO EN CSS 3D

tbgema= new Array('5.jpg','32.jpg','33.jpg','34.jpg','71.jpg','78.jpg','83.jpg','89.jpg','92.jpg')

var kdi3={
controle:0,
face:0,
vaval:0,
suite:0,
elem:'null',
oxo:0,
setY:0,

azerty:function(sens){ 		//gestion du mouvement de rotation du diapo

		if(this.controle==0){

			this.face==0 ? this.face=1 : this.face=0;

			if(sens=='plus'){
				this.suite+=1
				if(this.suite==tbgema.length){
					this.suite=0
				}
				this.vaval+=180
				this.elem.getElementsByTagName('div')[this.face].style.cssText='background-image:url(images/'+tbgema[this.suite]+')';
				this.elem.style.WebkitTransform='rotateY('+this.vaval+'deg)';
				this.elem.style.MozTransform='rotateY('+this.vaval+'deg)';
			}

			else{
				this.suite-=1
				if(this.suite==-1){
					this.suite=tbgema.length-1
				}
				this.vaval-=180
				this.elem.getElementsByTagName('div')[this.face].style.cssText='background-image:url(images/'+tbgema[this.suite]+')';
				this.elem.style.WebkitTransform='rotateY('+this.vaval+'deg)';
				this.elem.style.MozTransform='rotateY('+this.vaval+'deg)';
			}

			this.controle=1
			setTimeout(function(){kdi3.controle=0},2000)

		}
	},

fonfon:function(ch){		//gestion du sens de rotation du diapo

		if(this.controle==0){
			if(ch > this.suite){
				this.suite=ch-1
				var sens='plus'
			}
			else{
				this.suite=ch+1
				var sens='moins'
			}
			this.azerty(sens)
		}
	},

sensa:function(e){		//le defilement des miniatures

		var ixe=kdi3.setX;
		var clic=document.getElementById('clic')

		if(arguments[0]=='depart'){
			document.addEventListener("mousemove", kdi3.posi, false)
			clic.setAttribute('onmouseover','')
			kdi3.oxo=setInterval(kdi3.sensa,50)
			return false
		}

		if((ixe > clic.offsetLeft && ixe < (clic.offsetLeft+clic.offsetWidth)) && (kdi3.setY > clic.offsetTop && kdi3.setY < (clic.offsetTop+clic.offsetHeight))){

			var oml=(clic.offsetLeft+(clic.offsetWidth/2))-ixe;
			if(oml>50 || oml<-50){
				clic.scrollLeft=clic.scrollLeft-(oml/14);
			}
		}
		else{
			kdi3.anul()
		}
	},

anul:function(){		//gestion des evenements pour le defilement des miniatures

		clearInterval(kdi3.oxo)
		document.removeEventListener("mousemove", kdi3.posi, false)
		clic.setAttribute('onmouseover','kdi3.sensa("depart",event)')
	},

posi:function(s){		//position de la souris pour le defilement des miniatures et les limites de defilement

		var dde=(navigator.vendor) ? document.body : document.documentElement;
		s =(!s) ? window.event : s;
		kdi3.setX =s.clientX + dde.scrollLeft;
		kdi3.setY =s.clientY + dde.scrollTop;
	},

init:function(s){		// creation dynamique des elements composant l'ensemble du diapo

		var elem=document.createElement('div')
		var elem2=document.createElement('div')
		var elem3=document.createElement('div')
		elem.setAttribute('class','sous_container');
		elem2.setAttribute('class','faceA');
		elem3.setAttribute('class','faceB');
		elem2.style.cssText='background:url(images/5.jpg)';
		elem3.style.cssText='background:url(images/32.jpg)';
		elem.appendChild(elem2);
		elem.appendChild(elem3);
		kdi3.elem=document.getElementById("container").appendChild(elem);
		
		var elem=document.createElement('img')
		var elem2=document.createElement('img')
		elem.src='images/retour.png'
		elem2.src='images/aller.png'
		elem.setAttribute('onclick','kdi3.azerty("moins")')
		elem2.setAttribute('onclick','kdi3.azerty("plus")')
		document.getElementById('kbouton').appendChild(elem);
		document.getElementById('kbouton').appendChild(elem2);
		
		var tatable= document.createElement('table')
		tatable.id='cloc'
		var tbrow=tatable.insertRow(-1)

		for(var j=0;j<tbgema.length;j++){
			tbrow.insertCell(j)
			var gema=document.createElement('img')
			gema.src='images/'+tbgema[j]
			tbrow.cells[j].setAttribute('onclick','kdi3.fonfon('+j+')')
			tbrow.cells[j].appendChild(gema);
		}
		document.getElementById('clic').appendChild(tatable);
		document.getElementById('clic').setAttribute('onmouseover','kdi3.sensa("depart",event)')
	}


}
onload=kdi3.init		//initialisation du diapo