{ /* [0] Initialisation
  =========================================================*/

	/* (1) Elements du DOM */
	var DOM = {
		body: $('body'),
		canvas: $('canvas'),
		imageLoader:  $('#image-loader')
	};

	/* (2) dat.GUI initialization */
	var Controller = new dat.GUI();

	/* (3) Canvas initialisation */
	var _CAN = DOM.canvas;
		_CAN.width = _CAN.height = 1000;
	var _CON = _CAN.getContext('2d');

	/* (4) Image Loader + Définitions */
	var iL;

	var filterManager;
	var process;
	var exec = false;
	var last;

}


{ /* [1] Initialisation du process
  =========================================================*/


	var init = function(){
		/* (1) Image par défaut */
		this.src = 'front:male:1.jpg';

		/* (2) Attachement de dat.GUI */
		Controller.addFolder('image source');
		Controller.add(this, 'src', this._images).listen();

		last = this.src;
	};

	/* (2) Gestion de tracking.js */
	var zones;

	/* (3) Gestion du track de l'image */
	var track = {update: true};
	var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);

	tracker.setStepSize(1.5);

	Controller.addFolder('Tracking.js');
	Controller.add(track, 'update');

}


/* [2] Routine principale
=========================================================*/
process = function(){
	// Si erreur de `bind()`, on quitte
	if( !(this instanceof HTMLImageElement) )
		 return;

	console.time('PROCESS');

	/* [0.0] Gestion du changement d'image
	=========================================================*/
	if( this.src != last ){
		exec = false;
		last = this.src;
	}


	/* [0.1] Gestion de la première exécution (par image)
	=========================================================*/
	if( !exec ){

		/* (1) On enregistre les dimensions par défaut
		---------------------------------------------------------*/
		this.defaultWidth = this.width;
		this.defaultHeight = this.height;
		log('Image copied', '[Canvas]');

		/* (3) Si `track.update` est TRUE, on lance `Tracking.js`
		---------------------------------------------------------*/
		if( track.update ){

			/* (1) On initialise la liste des zones */
			zones = [];

			/* (2) On lance le tracking */
			tracking.track(DOM.imageLoader, tracker);

			/* (3) Routine exécutée quand le tracking est terminé */
			tracker.on('track', function(event){

				// On enregistre dans `zones` les zones trackées
				event.data.forEach(function(rect){ zones.push({ x: rect.x     / DOM.imageLoader.defaultWidth, y: rect.y      / DOM.imageLoader.defaultHeight,
																w: rect.width / DOM.imageLoader.defaultWidth, h: rect.height / DOM.imageLoader.defaultHeight }); });
				log('Recognition done', '[Tracking.js]');

				// On met à jour le rendu (affichage des zones)
				process.bind(DOM.imageLoader)();
			});
		}

		// On change la valeur de `exec` pour qu'il n'entre plus dans ce `if`
		exec = true;
	}



	/* [1] On initialise/efface le `<canvas>`
	=========================================================*/
	_CON.clearRect(0, 0, _CAN.width, _CAN.height);


	{ /* [2] Copie sur le `<canvas>`
	  =========================================================*/
		/* (1) Ratio */
		filterManager.get('ratio').apply();

	}


	{ /* [3] Filtrage pre-processing
	  =========================================================*/
		/* (1) Contraste */
		  filterManager.get('contrast').apply();
	}


	{ /* [4] Tracking.js
	  =========================================================*/

		/* (1) On reporte chaque zone trackée sur le `<canvas>` */
		for( var i in zones ){
			var x = zones[i].x * this.width;
			var y = zones[i].y * this.height;
			var w = zones[i].w * this.width;
			var h = zones[i].h * this.height;
			_CON.beginPath();
				_CON.moveTo( x,   y   );
				_CON.lineTo( x,   y+h );
				_CON.lineTo( x+w, y+h );
				_CON.lineTo( x+w, y   );
				_CON.lineTo( x,   y   );
			_CON.lineWidth = 5;
			_CON.stroke();
		}

	}


	{ /* [5] Filtrage post-processing
	  =========================================================*/

	}

	console.timeEnd('PROCESS');
};


{ /* [3] Gestion des `ReactiveFilter`
  =========================================================*/
	/* (1) Création du Manager */
	filterManager = new ReactiveFilterManager(DOM.imageLoader, _CAN, process);

	/* (2) Ajout des filtres */
	filterManager.add('ratio', reactiveRatio);
	filterManager.add('contrast', reactiveContrast);

	/* (3) On attache tout à dat.GUI */
	Controller.addFolder('Image Ratio');
		Controller.add(filterManager.get('ratio'), 'width', 0, 2).listen();
		Controller.add(filterManager.get('ratio'), 'height', 0, 2).listen();
	Controller.addFolder('Image Processing');
		Controller.add(filterManager.get('contrast'), 'contrast', 0, 100).listen();

}


/* [x] Chargement image
=========================================================*/
iL = new ImageLoader( DOM.imageLoader, init, process );