var positions = [[],[],[],[]];
             // top left height width
positions[0][0] = [0,0,130,122];
positions[0][1] = [0,123,132,122];
positions[0][2] = [0,247,133,120];
positions[0][3] = [0,368,132,131];
positions[1][0] = [132,0,122,123];
positions[1][1] = [132,124,122,122];
positions[1][2] = [133,247,122,120];
positions[1][3] = [133,368,122,131];
positions[2][0] = [255,0,124,123];
positions[2][1] = [255,124,126,122];
positions[2][2] = [255,247,127,119];
positions[2][3] = [256,367,125,132];
positions[3][0] = [381,0,119,123];
positions[3][1] = [381,124,119,122];
positions[3][2] = [381,247,119,119];
positions[3][3] = [382,367,118,132];

function Positionner(id){
	var position = ChoisirPosition();
	rangee = position[0];
	colonne = position[1];
	//[rangee, colonne] = ChoisirPosition();
	var obj = document.getElementById(id);
	[top, left, height, width] = positions[rangee][colonne];
	obj.style.top = top;
	obj.style.left = left;
	obj.style.width = width;
	obj.style.height = height;
}

function StyleOpacite(id, opacite){
	var obj = document.getElementById(id);
	obj.style.opacity = opacite;
	//obj.style.filter = 'alpha(opacity='+Math.floor(opacite*100)+')';
	//obj.style.mozOpacity = opacite;
}

function FonduCarreau(id){

	for(var i=0; i<=100; i+=pas){
		setTimeout('StyleOpacite(\''+id+'\','+i/100+')',i*delais);
	}

}

function FonduCarreauInverse(id){

	for(var i=100; i>=0; i-=pas){
		setTimeout('StyleOpacite(\''+id+'\','+i/100+')',(100-i)*delais);
	}

}

//var idSource = 'carreau-vide';

function ClonerCarreau(idCible, idSource){
	nouveauCarreau = document.createElement('div');
	nouveauCarreau.id = idCible;
	document.getElementById('splash').appendChild(nouveauCarreau);
	nouveauCarreau = document.getElementById(idCible);

	carreauOriginal = document.getElementById(idSource);
	nouveauCarreau.style.backgroundColor = carreauOriginal.style.backgroundColor;
	nouveauCarreau.style.position = carreauOriginal.style.position;
	nouveauCarreau.style.opacity = carreauOriginal.style.opacity;
	nouveauCarreau.style.display = carreauOriginal.style.display;
	nouveauCarreau.style.zIndex = 2;
	//document.getElementById('h1').innerHTML = carreauOriginal.style.cssText;
}

var pas = 2;
var delais = 5;
var delaisEntreFondus = 4000;
var delaiFonduInverse = 1500;

///////////////////////////////////////////////////////////

function ChoisirPosition(){
	var y = Math.floor(Math.random()*4);
	var x = Math.floor(Math.random()*4);
	return [x,y];
}

function CiblerCarreau(id){

	Positionner(id);
	FonduCarreau(id);
	setTimeout('FonduCarreauInverse(\''+id+'\')',delaiFonduInverse);
}

setTimeout('ClonerCarreau(\'carreaubla\',\'carreauvert\')',500);		
setInterval('CiblerCarreau(\'carreaubla\')',delaisEntreFondus);

setTimeout('ClonerCarreau(\'carreaudodo\',\'carreauvert\')',500);		
setInterval('CiblerCarreau(\'carreaudodo\')',delaisEntreFondus - 1000);

setTimeout('ClonerCarreau(\'carreausoleil\',\'carreaujaune\')',500);		
setInterval('CiblerCarreau(\'carreausoleil\')',delaisEntreFondus - 500);

setTimeout('ClonerCarreau(\'carreautrinette\',\'carreaujaune\')',500);		
setInterval('CiblerCarreau(\'carreautrinette\')',delaisEntreFondus - 500);

setTimeout('ClonerCarreau(\'carreauchou\',\'carreauvert\')',500);		
setInterval('CiblerCarreau(\'carreauchou\')',delaisEntreFondus + 500);

setTimeout('ClonerCarreau(\'carreaufraise\',\'carreaurouge\')',500);
setInterval('CiblerCarreau(\'carreaufraise\')',delaisEntreFondus + 1500);

setTimeout('ClonerCarreau(\'carreaucerise\',\'carreaurouge\')',500);
setInterval('CiblerCarreau(\'carreaucerise\')',delaisEntreFondus + 2000);