// ==================================================================
function myMoveThumb(){
// ------------------------------------------------------------------
// les propriétés
	this.width=200; 				// par defaut
	this.xml="none";
	this.id="myMoveThumb";				// par defaut
	this.divToReplace='none';
	this.images=false;
	this.margin=15;					// par defaut
	this.speed=20;					// par defaut
// ------------------------------------------------------------------
// les méthodes
// ------------------------------------------------------------------
	var getXhr = function( ){
		if(window.XMLHttpRequest){return new XMLHttpRequest();}
		else if(window.ActiveXObject){
			try{return new ActiveXObject("Msxml2.XMLHTTP");}
			catch (e){return new ActiveXObject("Microsoft.XMLHTTP");}
		}else{
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest, veuillez le mettre à jour");
	    		return false;
		}
	}
// ------------------------------------------------------------------
	this.start=function(){
		if( this.xml=='none' || this.divToReplace=="none" ){
			return false;
		} // erreur on ne fait rien
		var id=this.id;
		var width=this.width;
		var divToReplace=this.divToReplace;
		var margin=this.margin;
		var speed=this.speed;
		// chargement du xml
		var req=getXhr();
		req.onreadystatechange=function( ){
			if(req.readyState == 4 || req.readyState=="complete"){ 
				var xmlDoc=req.responseXML.documentElement;	
				this.images=xmlDoc.getElementsByTagName('image');
				if( this.images.length<1 ){ return false; }
				var tabSrc=new Array();
				var tabImg=new Array();
				for( var i=0; i<this.images.length; i++ ){
					tabSrc[i]=this.images[i].getAttribute('src');
					tabImg[i]=new Image();
					tabImg[i].src=this.images[i].getAttribute('src');
				}
				suite( tabImg, id, width, divToReplace, tabSrc, margin, speed );
			}
		}
		req.open("get", this.xml, true );
		req.setRequestHeader("Content-type", "text/html; charset:UTF-8");
		req.send( null );
	}
// ------------------------------------------------------------------
	var suite=function( tabImg, id, width, divToReplace, tabSrc, margin, speed ){
		// mettre en place un tank
		var tank=document.createElement('div');
		tank.id=id;
		tank.style.width=width+"px";
		
		// supprime le texte alternatif et autres
		var div=document.getElementById( divToReplace );
		div.innerHTML="";

		// charger toutes les images et trouver la plus haute
		checkImgLoaded( tabImg, tank, div, tabSrc, margin, speed );
	}
// ------------------------------------------------------------------
	var checkImgLoaded=function( tabImg, tank, div, tabSrc, marge, speed ){
		var check=0;
		for( var i=0; i<tabImg.length; i++ ){
			if( tabImg[i].complete ){ check++; }
		}
		if( check==tabImg.length ){
			// la suite
			setHtmlDivs( tabImg, tank, div, tabSrc, marge, speed );
		}else{
			setTimeout( function(){ checkImgLoaded( tabImg, tank, div, tabSrc, marge, speed ); } , 15 );
		}
	}
// ------------------------------------------------------------------
	var setHtmlDivs=function( tabImg, tank, div, tabSrc, marge, speed ){
		// chercher la plus haute image
		var max_h=0;
		var max_w=0;
		for( var i=0; i<tabImg.length; i++ ){
			if( tabImg[i].height>max_h ){
				max_h=tabImg[i].height;
			}
			if( tabImg[i].width>max_w ){
				max_w=tabImg[i].width;
			}
		}
		// on donne la hauteur à notre tank
		tank.style.height=max_h+"px";
		div.appendChild( tank );
		
		// tant que la logueur totale des images ne dépasse
		// pas celle de la div plus une image
		// je boucle sur le tableau
		var myMoveLength=0;
		var myDiv_X=0;
		var myDiv_Y=0;
		var allDivsId=new Array();
		var key=0; // pour incrementer les id de divs
		do{
			for( var j=0; j<tabSrc.length; j++ ){
				var one=document.createElement('div');
				one.id=tank.id+'_'+key;
				one.style.width=tank.style.width;
				one.style.height=tank.style.height;
				allDivsId[key]=one.id;
				// calcul de la position
				myDiv_X=myMoveLength+marge;
				if( tabImg[j].width < max_w ){
					myDiv_X+=( max_w - tabImg[j].width )/2;
				}
				myDiv_Y=0;
				if( tabImg[j].height < max_h ){
					myDiv_Y=( max_h - tabImg[j].height )/2;
				}
				one.style.background="url("+tabSrc[j]+") "+myDiv_X+"px "+myDiv_Y+"px no-repeat";
				if( key==0 ){ tank.appendChild( one ); }else{
					document.getElementById( allDivsId[key-1] ).appendChild( one );
				}

				myMoveLength+=marge+max_w;
				key++;
			}
		}while( myMoveLength < parseInt(tank.style.width) + max_w + marge*2 )
		// on lance la fonction pour faire bouger tout ça 
		moveAll( allDivsId, myMoveLength, max_w, marge, speed );
	}
// ------------------------------------------------------------------
	var moveAll=function( allDivsId, myMoveLength, max_w, marge, speed ){
		for( var i=0; i<allDivsId.length; i++ ){
			var one=document.getElementById( allDivsId[i] );
			var pos=one.style.backgroundPosition.split(' ');
			var pos_y=parseInt( pos[1] );
			var pos_x=parseInt( pos[0] )-2;
			// si il a disparu à gauche on le remet à droite
			if( (pos_x + max_w) < 0 ){
				pos_x = myMoveLength - ( max_w);
			}
			var new_pos=pos_x+"px "+pos_y+"px";
			one.style.backgroundPosition=new_pos;
		}
		setTimeout( function(){ moveAll( allDivsId, myMoveLength, max_w, marge, speed ); }, speed );
	}
// ------------------------------------------------------------------
}
// ==================================================================