/**************************
*     PermanentStorage    *
*         08-09-16        *
***************************
* Designed & Developed by *
*      xdrm-brackets      *
*            &            *
*        SeekDaSky        *
***************************
*    https://xdrm.io/     *
*  http://seekdasky.ovh/  *
**************************/

{ /* [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 = function(){};
	var exec = false;
	var last;
	var trackerTask;
	var trackerTask;

}


{ /* [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('Source Picture');
		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 = {
		track: function(){
			zones = [];
			trackerTask = tracking.track(_CAN, tracker);
		}
	};

	var tracker = new tracking.ObjectTracker(['face', 'eye', 'mouth']);

	tracker.setStepSize(1.9);

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

	tracker.on('track', function(event){

		event.data.forEach(function(rect){

			zones.push({
				x: rect.x / _CAN.width,
				y: rect.y / _CAN.height,
				w: rect.width / _CAN.width,
				h: rect.height / _CAN.height
			});

		});

		// On enregistre dans `zones` les zones trackées
		log('Recognition done', '[Tracking.js]');

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

	});

}


/* [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 ){
		zones = [];
		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]');

		// 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) Resolution */
		filterManager.get('resolution').apply();
	}


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

		/* (2) Sobel */
		filterManager.get('sobel').apply();

		/* (3) Gaussian Filter */
		filterManager.get('gaussian').apply();

		/* (4) Canny Filter */
		filterManager.get('canny').apply();
	}


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

		/* (1) On reporte chaque zone trackée sur le `<canvas>` */
		for( var i in zones ){
			var x = zones[i].x * _CAN.width;
			var y = zones[i].y * _CAN.height;
			var w = zones[i].w * _CAN.width;
			var h = zones[i].h * _CAN.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.strokeStyle = '#f00';
			_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('resolution', reactiveResolution);
	filterManager.add('contrast',   reactiveContrast);
	filterManager.add('sobel',      reactiveSobel);
	filterManager.add('gaussian',   reactiveGaussianBlur);
	filterManager.add('canny',      reactiveCanny);

	/* (3) On attache tout à dat.GUI */
	Controller.addFolder('Image Resolution');
		Controller.add(filterManager.get('resolution'), 'width', 0, 2).step(0.1).listen();
		Controller.add(filterManager.get('resolution'), 'height', 0, 2).step(0.1).listen();
	Controller.addFolder('Basic Image Processing');
		Controller.add(filterManager.get('contrast'), 'contrast', 0, 100).listen();
	Controller.addFolder('Gaussian Blur');
		Controller.add(filterManager.get('gaussian'), 'sigma', 0, 10).step(0.5).listen();
		Controller.add(filterManager.get('gaussian'), 'radius', 1, 11).step(1).listen();
	Controller.addFolder('Convolution Filters');
		Controller.add(filterManager.get('sobel'), 'sobelActive').listen();
		Controller.add(filterManager.get('canny'), 'canny_radius').listen();

	/* (4) Gestion des backups */
	Controller.remember(filterManager.get('resolution'));
	Controller.remember(filterManager.get('contrast'));
	Controller.remember(filterManager.get('sobel'));
	Controller.remember(filterManager.get('canny'));
	Controller.remember(filterManager.get('gaussian'));

	/* (5) Gestion du @PermanentStorage */
	Controller.__save_row.children[2].addEventListener('click', function(e){
		/* (1) Update properties */
		Controller.save();

		/* (2) Get stored data */
		try{
			var stored = JSON.stringify( Controller.load.remembered );



		}catch(e){ log('Error parsing/storing data.', '[PermanentStorage]'); }

	}, false);

}


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