diff -r c9c75ab3de3e -r 6d5b46559bd9 web/static/res/js/incmosaic.js
--- a/web/static/res/js/incmosaic.js	Tue Nov 13 17:59:26 2012 +0100
+++ b/web/static/res/js/incmosaic.js	Tue Nov 13 22:18:07 2012 +0100
@@ -21,13 +21,13 @@
 	this.effects = [];
 	this.squareEffects = [];
 
+	// Time
+	this.startTime;
+
 	this.noEffectinfo = new IncEffectInfo();
 	this.noEffectinfo.color = new IncColor(255, 255, 255, 1)
 	this.noEffectinfo.alpha = 1;
 
-	// Debug
-	this.lastTime;
-
 	// --------------------------------------------------------------------------------------------------------------------
 	// Functions
 	// --------------------------------------------------------------------------------------------------------------------
@@ -57,9 +57,12 @@
 
 		// Set random effect on the squares
 		this.setRandomSquareEffect();
+
+		// Time
+		this.startTime = new Date().getTime();
 										
 		// Main loop
-		this.loopCallback2();
+		this.loopCallback();
 	};
 
 	this.init = function(canvasId)
@@ -75,20 +78,24 @@
 	{
 		// No effect 
 		//-----------------------------------
-		var noEffect = new IncSquareEffect_NoEffet()
-		var fullEffect0 = new IncFullEffect(noEffect);
+		//var noEffect = new IncSquareEffect_NoEffet()
+		//var fullEffect0 = new IncFullEffect(0, 0, noEffect);
 		//this.effects.push(fullEffect0);
 
-		// Alpha 
-		//-----------------------------------
-		{
-			var effectParam1 = new IncEffectParams(new IncColor(255, 255, 255, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 5000);
-			var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadInOut, createjs.Ease.quadInOut);
+		// Create semi random effects
+		for (var i = 0; i < 20; ++i) {
+			var time1 = this.randomInt(3000, 10000);
+			var time2 = this.randomInt(3000, 10000);
+			var c1 = this.randomInt(0, 128);
 
-			var effectParam2 = new IncEffectParams(new IncColor(255, 255, 255, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 7000), 8000);
-			var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadInOut, createjs.Ease.quadInOut, 5000);
+			var effectParam1 = new IncEffectParams(new IncColor(c1, c1, c1, 0), new IncAnim(1, time1), 1, new IncAnim(-1, time1));
+			var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.quadOut, createjs.Ease.quadOut);
+			
+			var effectParam2 = new IncEffectParams(new IncColor(c1, c1, c1, 1), new IncAnim(0, time2), 0, new IncAnim(1, time2));
+			var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.quadIn, createjs.Ease.quadIn, time1 / 2.5);
 
-			this.effects.push(new IncFullEffect(effect1, effect2));			
+			var fullEffect1 = new IncFullEffect(effect1, effect2, time1, time2);
+			this.effects.push(fullEffect1);
 		}
 	}
 
@@ -103,36 +110,14 @@
 
 	this.setRandomSquareEffect = function()
 	{
-		/*
 		for (var i = 0; i < this.countX; ++i) {
 			for (var j = 0; j < this.countY; ++j) {
-				//var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy();
-				var fullEffect = this.effects[0].copy();
+				var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy();
 				fullEffect.x = i;
 				fullEffect.y = j;
 				this.squareEffects.push(fullEffect);				
 			}			
-		}*/
-		{
-			var e1 = this.effects[0].copy();
-			e1.x = 2;
-			e1.y = 1;
-			this.squareEffects.push(e1);
 		}
-		/*
-		{
-			var e1 = this.effects[1].copy();
-			e1.x = 3;
-			e1.y = 0;
-			this.squareEffects.push(e1);
-		}
-		{
-			var e1 = this.effects[2].copy();
-			e1.x = 2;
-			e1.y = 1;
-			this.squareEffects.push(e1);
-		}
-		*/
 	};	
 		
 	this.loopCallback = function()
@@ -145,75 +130,43 @@
 			return;
 		}
 
-		// Clear canvas
-		self.ctx.fillStyle = "#ffffff";
-		self.ctx.fillStyle = "#000000";
-		self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);	
-
 		// Get time
 		var time = new Date().getTime();
 
-		// Update effect
+		if (time < self.startTime + 3000) {
+			// Draw the first image
+			self.ctx.drawImage(self.pairImages[0], 0, 0);
+			requestAnimationFrame(self.loopCallback);
+			return;
+		}
+
+		// Clear canvas
+		//self.ctx.fillStyle = "#000000";
+		//self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);	
+
+		// Update effects
 		for (var i = 0; i < self.squareEffects.length; ++i) {
+			
+			// Update
 			var fullEffect = self.squareEffects[i];
+			fullEffect.update(time);
 
 			for (var j = 0; j < 2; ++j) {
-				var effect = fullEffect.effects[j];
-				if (effect !== undefined) {
+				var effectInfo = fullEffect.effectInfos[j];
+				if (effectInfo !== null) {
 					// Draw square
-					self.drawSquare(fullEffect, self.pairImages[j], effect, time);
+					self.drawSquare(fullEffect, self.pairImages[j], effectInfo);	
 				}
 			}
 		}
 
-		//console.log(time - this.lastTime);
-		this.lastTime = time;
-
 		// Loop
 		requestAnimationFrame(self.loopCallback);
 	};
 
-	this.loopCallback2 = function()
+
+	this.drawSquare = function(fullEffect, image, effectInfo)
 	{
-		var self = incMosaic;
-
-		if (self.imagesLoaded != 2) {
-			// Images are not loaded yet
-			requestAnimationFrame(self.loopCallback2);
-			return;
-		}
-
-		// Clear canvas
-		self.ctx.fillStyle = "#ffffff";
-		self.ctx.fillStyle = "#000000";
-		self.ctx.fillRect(0, 0, self.canvas.width, self.canvas.height);	
-
-		// Get time
-		var time = new Date().getTime();
-
-		// Update effect
-		for (var i = 0; i < self.squareEffects.length; ++i) {
-			// Draw square
-			var fullEffect = self.squareEffects[i];
-			self.drawSquare2(fullEffect, time);
-		}
-
-		//console.log(time - this.lastTime);
-		this.lastTime = time;
-
-		// Loop
-		requestAnimationFrame(self.loopCallback2);
-	};
-
-	this.drawSquare = function(fullEffect, image, effect, time)
-	{
-		// Update effect
-		var effectInfo = effect.update(fullEffect, time);
-
-		if (effectInfo === null) {
-			return;
-		}
-
 		// Compute square position
 		var posX = fullEffect.x * this.squareX;
 		var posY = fullEffect.y * this.squareY;
@@ -233,50 +186,6 @@
 		this.ctx.restore();
 	};
 
-	this.drawSquare2 = function(fullEffect, time)
-	{
-		// Update effect
-		var effectInfo1 = fullEffect.effects[0].update(fullEffect, time);
-		var effectInfo2 = (fullEffect.effects[1] !== undefined) ? fullEffect.effects[1].update(fullEffect, time) : null;
-
-		// Compute square position
-		var posX = fullEffect.x * this.squareX;
-		var posY = fullEffect.y * this.squareY;
-
-		this.ctx.save();
-
-		if (effectInfo1 !== null) {
-			this.ctx.globalAlpha = effectInfo1.alpha;				
-			this.ctx.drawImage(this.pairImages[0], posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY);
-
-			if (effectInfo2 !== null) {
-				var image1 = this.ctx.getImageData(posX, posY, this.squareX, this.squareY);
-				var imageData1 = image1.data;
-
-				this.ctx.globalAlpha = effectInfo2.alpha;	
-				this.ctx.drawImage(this.pairImages[1], posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY);
-				var image2 = this.ctx.getImageData(posX, posY, this.squareX, this.squareY);
-				var imageData2 = image2.data;
-
-				var pixels = 4 * this.squareX * this.squareY;
-				while (pixels--) {
-				    imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5;
-				    //imageData1[pixels] = imageData1[pixels] * effectInfo1.alpha + imageData2[pixels] * effectInfo1.alpha;;
-				}
-
-				this.ctx.putImageData(image1, posX, posY);
-			}
-
-
-		} else if (effectInfo2 !== null) {
-			console.log(effectInfo2.alpha);
-			this.ctx.globalAlpha = effectInfo2.alpha;
-			this.ctx.drawImage(this.pairImages[1], posX, posY, this.squareX, this.squareY, posX, posY, this.squareX, this.squareY);
-		}
-
-		this.ctx.restore();
-	};
-
 	// --------------------------------------------------------------------------------------------------------------------
 	// Tools
 	// --------------------------------------------------------------------------------------------------------------------
@@ -337,7 +246,7 @@
 	this.alpha;
 }
 
-function IncEffectParams(color, colorAnim, alpha, alphaAnim, time)
+function IncEffectParams(color, colorAnim, alpha, alphaAnim)
 {
 	// Color
 	this.color = color;
@@ -347,9 +256,6 @@
 	this.alpha = alpha;
 	this.alphaAnim = alphaAnim;
 
-	// Time
-	this.time = time;
-
 	this.computeColorAnimValue = function(elapsedTime, easeFunc)
 	{
 		return this.computeAnimValue(this.colorAnim, elapsedTime, easeFunc);
@@ -372,7 +278,7 @@
 
 function IncSquareEffect_NoEffet()
 {
-	this.update = function(fullEffect, time)
+	this.update = function(time)
 	{
 		return incMosaic.noEffectinfo;
 	}
@@ -388,24 +294,10 @@
 	this.tweenAlphaFunc = tweenAlphaFunc;
 
 	// Time
-	this.waitTime = (waitTime!==undefined) ? (new Date().getTime() + waitTime) : 0; 
-
-	this.update = function(fullEffect, time)
-	{
-		if (this.waitTime > time) {
-			return null;
-		}
+	this.waitTime = (waitTime!==undefined) ? waitTime : 0; 
 
-		if (fullEffect.startTime == 0) {
-			fullEffect.startTime = time;			
-		}
-
-		if ((time - fullEffect.startTime) > this.effectParms.time) {
-			return null;
-		}
-
-		var elapsedTime = this.waitTime ? (time - fullEffect.waitTime) : (time - fullEffect.startTime);
-		console.log(elapsedTime);
+	this.update = function(elapsedTime)
+	{
 		var info = new IncEffectInfo();
 
 		// Compute new color
@@ -422,7 +314,7 @@
 	};
 }
 
-function IncFullEffect(effect1, effect2)
+function IncFullEffect(effect1, effect2, totalTime1, totalTime2)
 {
 	// Position
 	this.x = 0;
@@ -430,13 +322,32 @@
 
 	// Effect	
 	this.effects = [effect1, effect2];
+	this.effectInfos = [null, null];
 
 	// Time
-	this.startTime = 0;	
+	this.startTime = [0, 0];	
+	this.totalTime = [totalTime1, totalTime2];	
 
 	this.copy = function()
 	{
-		return new IncFullEffect(this.effects[0], this.effects[1]);
+		return new IncFullEffect(this.effects[0], this.effects[1], this.totalTime[0], this.totalTime[1]);
+	};
+
+	this.update = function(time)
+	{
+		if (this.startTime[0] == 0) {
+			this.startTime[0] = time;
+			this.startTime[1] = time;
+			return;
+		}
+
+		for (var i = 0; i < 2; ++i) {
+			// If we are in the good time range we update the effect
+			var waitTime = this.startTime[i] + this.effects[i].waitTime;
+			if (time > waitTime && time < this.totalTime[i] + waitTime) {
+				this.effectInfos[i] = this.effects[i].update(time - waitTime);
+			}
+		}
 	};	
 }