function IncMosaic()

{

	// --------------------------------------------------------------------------------------------------------------------

	// Members

	// --------------------------------------------------------------------------------------------------------------------

	// Canvas

	this.canvasId;

	this.canvas;

	this.ctx;

	this.imageData;

	/// Images

	this.imageUrls = [];

	this.listeUrls = [];	// The images list to blend

	this.pairImages = [];

	this.imagesLoaded = 0;

	this.imageWidth;

	this.imageHeight;

	// Effect

	this.squareCountX;

	this.squareCountY;

	this.srcSquareWidth;

	this.srcSquareHeight;

	this.squareWidth;

	this.squareHeight;

	this.effects = [];

	this.squareEffects = [];

	// Time

	this.startTime;

	// --------------------------------------------------------------------------------------------------------------------

	// Functions

	// --------------------------------------------------------------------------------------------------------------------

	this.addImageUrl = function(url)

	{

		this.imageUrls.push(url);

	};

	{

		// Canvas ID

		this.canvasId = canvasId;

		// Set square count

		this.squareCountX = squareCountX;

		this.squareCountY = (squareCountY === undefined) ? squareCountX: squareCountY;

		// Init the canvas objects

		this.init();

		// Register effects

		this.registerEffects();

		// Set a new effect transition between 2 images

		// Main loop

		this.loopCallback();

	};

	{

		// Set a random pair images

		this.setRandomPairImages();

		// Set random effect on the squares

		this.setRandomSquareEffect();

		// Time

		this.startTime = new Date().getTime();		

	this.init = function()

	{

		// Init canvas objects

		this.canvas = document.getElementById(this.canvasId );

		this.ctx = this.canvas.getContext('2d');

		this.ctx.fillStyle = "#000000";

		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

	};

	this.registerPreNewCanvasSize = function(newCanvasWidth, newCanvasHeight)

	{

	};

	this.registerPostNewCanvasSize = function(newCanvasWidth, newCanvasHeight)

	{

		// Recalculate the size of the mosaic squares

		incMosaic.squareWidth = Math.floor(newCanvasWidth / incMosaic.squareCountX);

		incMosaic.squareHeight = Math.floor(newCanvasHeight / incMosaic.squareCountY);

	};

	this.fillListUrl = function()

	{

		var urls = [];

		for (var i = 1; i < this.imageUrls.length; ++i) {

			urls.push(this.imageUrls[i]);

		}

		// Set random url

		// The first images is always the first in this array 

		this.listeUrls.push(this.imageUrls[0]);

		while (urls.length > 0) {

			var randInd = this.randomInt(0, urls.length);

			this.listeUrls.push(urls[randInd]);

			urls.remove(randInd);

		}

	};

	this.setRandomPairImages = function()

	{

		if (this.listeUrls.length == 0) {

			this.fillListUrl();

		}

		if (this.pairImages.length == 0) {

			this.imagesLoaded = 0;

			this.pairImages.push(this.getImageFromUrl(this.listeUrls[0]));

			this.pairImages.push(this.getImageFromUrl(this.listeUrls[1]));

			this.listeUrls.remove(0);

		} else {

			this.imagesLoaded = 1;

			this.pairImages[0] = this.pairImages[1]; // Swap

			this.pairImages[1] = this.getImageFromUrl(this.listeUrls[0])

		}

		this.listeUrls.remove(0);

		// Todo preload the next image

	};

	this.setRandomSquareEffect = function()

	{

		this.squareEffects.length = 0;

		for (var i = 0; i < this.squareCountX; ++i) {

			for (var j = 0; j < this.squareCountY; ++j) {

				var fullEffect = this.effects[this.randomInt(0, this.effects.length)].copy();

				fullEffect.x = i;

				fullEffect.y = j;

				this.squareEffects.push(fullEffect);				

			}			

		}

	};	

	this.loopCallback = function()

	{

		var self = incMosaic;

		if (self.imagesLoaded == 2) {

			// Redraw

			self.redraw();

		}

		// Loop

		requestAnimationFrame(self.loopCallback);

	};

	this.redraw = function()

	{

		// Get time

		var time = new Date().getTime();

			// Draw the first image

			this.ctx.drawImage(this.pairImages[0], 0, 0, this.srcSquareWidth*this.squareCountX, this.srcSquareHeight*this.squareCountY, 0, 0, this.squareWidth*this.squareCountX, this.squareHeight*this.squareCountY);

			return;

		}

		// Update effects

		var effectsContinue = false;

		for (var i = 0; i < this.squareEffects.length; ++i) {			

			// Update

			var fullEffect = this.squareEffects[i];

			effectsContinue = fullEffect.update(time) || effectsContinue;

			for (var j = 0; j < 2; ++j) {

				var effectInfo = fullEffect.effectInfos[j];

				if (effectInfo !== null) {

					// Draw square

					this.drawSquare(fullEffect, this.pairImages[j], effectInfo);	

				}

			}

		}

		if (!effectsContinue) {

		}	

	};

	this.drawSquare = function(fullEffect, image, effectInfo)

	{

		this.ctx.save();

		// Global alpha

		this.ctx.globalAlpha = effectInfo.alpha;

		// Compute src and dest square position

		var srcPosX = fullEffect.x * this.srcSquareWidth;

		var srcPosY = fullEffect.y * this.srcSquareHeight;		

		var destPosX = fullEffect.x * this.squareWidth;

		var destPosY = fullEffect.y * this.squareHeight;		

		// Draw colored rectangle

		this.ctx.fillStyle = "rgba(" + effectInfo.color.r + "," + effectInfo.color.v + "," + effectInfo.color.b + "," + effectInfo.color.a + ")";

		this.ctx.fillRect(destPosX, destPosY, this.squareWidth, this.squareHeight);

		// Draw image

		this.ctx.drawImage(image, srcPosX, srcPosY, this.srcSquareWidth, this.srcSquareHeight, destPosX, destPosY, this.squareWidth, this.squareHeight);

		this.ctx.restore();

	};

	this.registerEffects = function()

	{

		var count = 7;

		var color = 64;

		// Create semi random effects

		// Create semi random effects

			this.effects.push(fullEffect1);

		}

	// --------------------------------------------------------------------------------------------------------------------

	// Tools

	// --------------------------------------------------------------------------------------------------------------------

	this.randomInt = function(min, max)

	{

		return Math.floor(this.randomFloat(min, max));

	};

	this.randomFloat = function(min, max)

	{

		return Math.random() * (max - min) + min;

	};

	this.getImageFromUrl = function(url)

	{

		var self = incMosaic;

		var image = new Image();

		image.onload = function() {

			// When the first image is loaded we can get the image dimention and init the autoresize of the canvas

			if (self.imagesLoaded === 0) {

				// Set some image size related vars

				self.imageWidth = image.width;

				self.imageHeight = image.height;

				self.srcSquareWidth = image.width / self.squareCountX;

				self.srcSquareHeight = image.height / self.squareCountY;

				// Call the resize object

				if (incResize !== undefined) {

					incResize.resizeElements();

				}

			}			

			self.imagesLoaded += 1;

		};

		image.src = url;

		return image;

	};

}

// --------------------------------------------------------------------------------------------------------------------

// Effects

// --------------------------------------------------------------------------------------------------------------------

function IncColor(r, v, b, a)

{

	this.r = r;

	this.v = v;

	this.b = b;

	this.a = a;

	this.copy = function()

	{

		return new IncColor(this.r, this.v, this.b, this.a);

	};

}

function IncAnim(value, time)

{