diff -r ec87661c2238 -r c9c75ab3de3e web/static/res/js/incmosaic.js
--- a/web/static/res/js/incmosaic.js	Fri Nov 09 18:34:47 2012 +0100
+++ b/web/static/res/js/incmosaic.js	Tue Nov 13 17:59:26 2012 +0100
@@ -25,6 +25,9 @@
 	this.noEffectinfo.color = new IncColor(255, 255, 255, 1)
 	this.noEffectinfo.alpha = 1;
 
+	// Debug
+	this.lastTime;
+
 	// --------------------------------------------------------------------------------------------------------------------
 	// Functions
 	// --------------------------------------------------------------------------------------------------------------------
@@ -56,7 +59,7 @@
 		this.setRandomSquareEffect();
 										
 		// Main loop
-		this.loopCallback();
+		this.loopCallback2();
 	};
 
 	this.init = function(canvasId)
@@ -73,29 +76,19 @@
 		// No effect 
 		//-----------------------------------
 		var noEffect = new IncSquareEffect_NoEffet()
-		var fullEffect0 = new IncFullEffect(0, 0, noEffect);
-		this.effects.push(fullEffect0);
+		var fullEffect0 = new IncFullEffect(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), 8000);
-			var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.linear, createjs.Ease.linear);
-			var effectParam2 = new IncEffectParams(new IncColor(255, 255, 255, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 5000), 8000);
-			var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.linear, createjs.Ease.linear, 2500);
-			var fullEffect1 = new IncFullEffect(1, 1, effect2, effect1);
-			this.effects.push(fullEffect1);
-		}
+			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);
 
-		// Alpha 2
-		//-----------------------------------
-		{
-			var effectParam1 = new IncEffectParams(new IncColor(32, 32, 32, 0), new IncAnim(1, 5000), 1, new IncAnim(-1, 5000), 8000);
-			var effect1 = new IncSquareEffect_Alpha(effectParam1, createjs.Ease.linear, createjs.Ease.linear);
-			var effectParam2 = new IncEffectParams(new IncColor(32, 32, 32, 1), new IncAnim(0, 5000), 0, new IncAnim(1, 5000), 8000);
-			var effect2 = new IncSquareEffect_Alpha(effectParam2, createjs.Ease.linear, createjs.Ease.linear, 2500);
-			var fullEffect1 = new IncFullEffect(1, 1, effect2, effect1);
-			this.effects.push(fullEffect1);
+			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);
+
+			this.effects.push(new IncFullEffect(effect1, effect2));			
 		}
 	}
 
@@ -110,14 +103,36 @@
 
 	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[this.randomInt(0, this.effects.length)].copy();
+				var fullEffect = this.effects[0].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()
@@ -146,15 +161,49 @@
 				var effect = fullEffect.effects[j];
 				if (effect !== undefined) {
 					// Draw square
-					self.drawSquare(fullEffect, self.pairImages[j], effect, time);									
+					self.drawSquare(fullEffect, self.pairImages[j], effect, time);
 				}
 			}
 		}
 
+		//console.log(time - this.lastTime);
+		this.lastTime = time;
+
 		// Loop
 		requestAnimationFrame(self.loopCallback);
 	};
 
+	this.loopCallback2 = function()
+	{
+		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)
 	{
@@ -184,6 +233,50 @@
 		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
 	// --------------------------------------------------------------------------------------------------------------------
@@ -307,7 +400,12 @@
 			fullEffect.startTime = time;			
 		}
 
-		var elapsedTime = time - fullEffect.startTime;		
+		if ((time - fullEffect.startTime) > this.effectParms.time) {
+			return null;
+		}
+
+		var elapsedTime = this.waitTime ? (time - fullEffect.waitTime) : (time - fullEffect.startTime);
+		console.log(elapsedTime);
 		var info = new IncEffectInfo();
 
 		// Compute new color
@@ -324,11 +422,11 @@
 	};
 }
 
-function IncFullEffect(x, y, effect1, effect2)
+function IncFullEffect(effect1, effect2)
 {
 	// Position
-	this.x = x;
-	this.y = y;
+	this.x = 0;
+	this.y = 0;
 
 	// Effect	
 	this.effects = [effect1, effect2];
@@ -338,7 +436,7 @@
 
 	this.copy = function()
 	{
-		return new IncFullEffect(this.x, this.y, this.effects[0], this.effects.length > 1 ? this.effects[1] : undefined);
+		return new IncFullEffect(this.effects[0], this.effects[1]);
 	};	
 }