var img = new Array(4)
img[0] = 'img';
img[1] = 'img1';
img[2] = 'img2';
img[3] = 'img3';

var ban = new Array(4)
ban[0] = 'images/RueRestoBan_ordi.jpg';
ban[1] = 'images/RueRestoBan_sushi.jpg';
ban[2] = 'images/RueRestoBan_moto.jpg';
ban[3] = 'images/RueRestoBan_complet.jpg';


var images = new Array(4);		//tableau contenant les information relatif a la position de l'image
for ( var i=0 ; i<4 ; i++)
{
	images[i] = new Array(4);
	images[i][0] = Math.random()*document.body.clientWidth;		// attribution de coordonné aleatoire (point de depart)
	images[i][1] = Math.random()*document.body.clientHeight;		// Ordonné de depart
}


	/* les fonction OffsetL et OffsetH servent a definir l'emplacemtn actuelle de la banier, 
	on y a joute des valeur en pixel pour specifier l'emplacement des image DANS la banniere*/

images[0][2] = (  ( OffsetL(document.getElementById('pied_de_page')) +250 ) - images[0][0] )/50;		//destination image1
images[0][3] = (  ( OffsetH(document.getElementById('pied_de_page')) -80 ) - images[0][1] )  /50;	

images[1][2] = (  ( OffsetL(document.getElementById('pied_de_page')) +320 ) - images[1][0] )/50;		//destination image2
images[1][3] = (  ( OffsetH(document.getElementById('pied_de_page')) -120 ) - images[1][1] )  /50;

images[2][2] = (  ( OffsetL(document.getElementById('pied_de_page')) +350 ) - images[2][0] )/50;		//destination image3
images[2][3] = (  ( OffsetH(document.getElementById('pied_de_page')) -60 ) - images[2][1] )  /50;

images[3][2] = (  ( OffsetL(document.getElementById('pied_de_page')) +470 ) - images[3][0] )/50;		//destination image4
images[3][3] = (  ( OffsetH(document.getElementById('pied_de_page')) -70 ) - images[3][1] )  /50;

var delay = 30;
var interval;
		
var i = 0;
var e = 0;
						
	function changePos(obj) 			//fonctione de l'animation
	{
	
		//rendre notre image visible
		if ( i==0 )
		{
			document.getElementById(obj).style.display = "inline";
		}
	
		/* on defini l'emplacemnt actuelle de l'image, et on dessine l'image*/
		document.getElementById(obj).style.left = images[e][0] + document.body.scrollLeft;
		document.getElementById(obj).style.top = images[e][1] + document.body.scrollTop;
		
		i++;	
		if (i>50)		//lorsque le deplacement est terminé
		{
			clearInterval(interval); // on arrete le deplacement
		
			document.getElementById('fd_rueresto').src = ban[e];  // on affiche l'image de base (on est sur que les image ne parte pas
			setInvisible(obj) //on enleve les calque superflu au cas ou
		
			e++;			//on passe donc a une autre image
			i = 0;		//la variable est utile pour savoir si l'animation est fini... il faut la reinitialiser
			if ( e < 4 )
			{
				interval = setInterval('changePos(img[e])', delay);
			}
		}
		else
		{

			images[e][0] += images[e][2];		/*	à deplacer	*/
			images[e][1] += images[e][3];		/*	l'image	*/
		}
		
	}

	function setInvisible(obj)
	{
		document.getElementById(obj).style.display = "none";
	}

	function start()
	{
		interval = setInterval('changePos(img[0])', delay);
	}

	function OffsetL(obj)
	{
	    var curleft = obj.offsetLeft || 0;
	    while (obj = obj.offsetParent)
	    {
		   curleft += obj.offsetLeft
	    }
	    return curleft;
	}
	
	function OffsetH(obj)
	{
	    var curleft = obj.offsetTop || 0;
	    while (obj = obj.offsetParent)
	    {
		   curleft += obj.offsetTop
	    }
	    return curleft;
	}
		
start();