/**
 * Photography_with_detected_features.js
 */

'use strict';

var Width_used_for_displaying_canvas = (function () {
	return function () {
		return 200;
	};
})();

var Height_used_for_displaying_canvas = (function () {
	return function () {
		return 200;
	};
})();

var Photography_with_detected_features = function (image /* Image */, image_name /* String */) {
	chai.assert.isTrue(image !== undefined && image !== null && image instanceof Image && image.complete, 'Photography_with_detected_features._image');
	//    'image_name instanceof String === false' when 'var image_name = "Not constructed through constructor!";'
	chai.assert.isTrue(image_name !== undefined && image_name !== null /* && image_name instanceof String */, 'Photography_with_detected_features._image_name');
	/** Check image resizing here that has to occur in calling context */
	/** Not sure 'image' has to be recorded since it is immediately transformed into canvas: */
	this._image = image;
	this._image_name = image_name;
	/** JSFeat: */
	//        jsfeat.matrix_t(columns, rows, data_type, data_buffer = undefined);
	//        jsfeat.U8_t | jsfeat.C1_t; // 1 channel with unsigned char:
	this._matrix_char8_C1 = new jsfeat.matrix_t(this._image.width, this._image.height, /*jsfeat.U8_t | jsfeat.C1_t*/ jsfeat.U8C1_t);
	/** Canvases */
	this.$_image_canvas = $('<canvas>').attr({// Canvas as jQuery object
		id: "image-canvas-" + this._image_name
	});
	// Configuring canvas' size with jQuery is not reliable using 'innerWidth(this._image.width)' or 'outerWidth(this._image.width)':
	this.$_image_canvas.get(0).width = this._image.width;
	this.$_image_canvas.get(0).height = this._image.height;
	this.$_image_canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
	// Display:
	this.$_image_canvas.css("width", Width_used_for_displaying_canvas() + "px");
	this.$_image_canvas.css("height", Width_used_for_displaying_canvas() + "px");
	this.$_image_canvas.get(0).getContext('2d').font = "italic 10px Arial";
	this.$_image_canvas.get(0).getContext('2d').strokeText("Original: " + this._image_name, 10, 10);
	$("body").prepend(this.$_image_canvas);

	this._image_data = this.$_image_canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height);
	this._image_data_buffer = new Uint32Array(this._image_data.data.buffer);

	this.$_grayscale_canvas = $('<canvas>').attr({// Canvas as jQuery object
		id: "grayscale-canvas-" + this._image_name
	});
	this.$_grayscale_canvas.get(0).width = this._image.width;
	this.$_grayscale_canvas.get(0).height = this._image.height;
	this._grayscale_image_data = this.$_grayscale_canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height);
	this._grayscale_image_data_buffer = new Uint32Array(this._grayscale_image_data.data.buffer);

	this.$_gaussian_blur_canvas = $('<canvas>').attr({// Canvas as jQuery object
		id: "gaussian_blur-canvas-" + this._image_name
	});
	this.$_gaussian_blur_canvas.get(0).width = this._image.width;
	this.$_gaussian_blur_canvas.get(0).height = this._image.height;
	this.$_gaussian_blur_canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
	this._gaussian_blur_image_data = this.$_gaussian_blur_canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height);
	this._gaussian_blur_image_data_buffer = new Uint32Array(this._gaussian_blur_image_data.data.buffer);

	/** Canny: */
	this.$_canny_canvas = $('<canvas>').attr({// Canvas as jQuery object
		id: "canny-canvas-" + this._image_name
	});
	this.$_canny_canvas.get(0).width = this._image.width;
	this.$_canny_canvas.get(0).height = this._image.height;
	this.$_canny_canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
	this._canny_image_data = this.$_canny_canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height);
	this._canny_image_data_buffer = new Uint32Array(this._canny_image_data.data.buffer);

	/** Sobel: */
	this.$_sobel_canvas = $('<canvas>').attr({
		id: "sobel-canvas-" + this._image_name
	});
	this.$_sobel_canvas.get(0).width = this._image.width;
	this.$_sobel_canvas.get(0).height = this._image.height;
	this.$_sobel_canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
	this._sobel_image_data = this.$_sobel_canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height);
	this._sobel_image_data_buffer = new Uint32Array(this._sobel_image_data.data.buffer);

	/** Detection: */
	this._gaussian_blur();

	this._canny_processing();
	this._canny_postprocessing();

	this._sobel_processing();
	this._sobel_postprocessing();
	/** BBF: */
	this._brightness_binary_face = null // Sample: '[{"x":44.86460414486096,"y":40.36860185248175,"width":51.39751761778363,"height":51.39751761778363,"neighbors":14,"confidence":8.938965569999997}]'
	this._brightness_binary_face_detecting(chroma('blue').hex());
	/** Haar: */
	this._haar_feature = null;
	// Classifiers: 'jsfeat.haar.eye', 'jsfeat.haar.frontalface' and 'jsfeat.haar.mouth'
	this._haar_feature_detecting(chroma('green').hex(), jsfeat.haar.frontalface, 1);
	this._haar_feature_detecting(chroma('yellow').hex(), jsfeat.haar.mouth, 1);
	this._haar_feature_detecting(chroma('magenta').hex(), jsfeat.haar.eye, 2); // Bad result
	/** tracking.js */
	this._tracking_face();
};

Photography_with_detected_features.prototype._gaussian_blur = function () {
	var source = new jsfeat.matrix_t(this._image.width, this._image.height, /*jsfeat.U8_t | jsfeat.C1_t*/ jsfeat.U8C1_t);

	var pixel_number = this._image.width * this._image.height;
	while (--pixel_number >= 0) {
		var pixel = this._image_data_buffer[pixel_number];
		source.data[pixel_number] = (pixel << 24) | (pixel << 16) | (pixel << 8) | pixel;
	}
	var target = new jsfeat.matrix_t(this._image.width, this._image.height, /*jsfeat.U8_t | jsfeat.C1_t*/ jsfeat.U8C1_t);
	var sigma = 2; // gui.add(options, 'sigma', 0, 10).step(0.5); // It increases bluring

	var radius = 3; // [1 - 11]

	var kernel_size = (radius + 1) << 1;
	jsfeat.imgproc.gaussian_blur(source, target, kernel_size, sigma);

	var pixel_number = target.cols * target.rows;
	while (--pixel_number >= 0) {
		var pixel = target.data[pixel_number];
		this._gaussian_blur_image_data_buffer[pixel_number] = (pixel << 24) | (pixel << 16) | (pixel << 8) | pixel;
	}
	this.$_gaussian_blur_canvas.get(0).getContext('2d').putImageData(this._gaussian_blur_image_data, 0, 0);
	// Display:
	this.$_gaussian_blur_canvas.css("width", Width_used_for_displaying_canvas() + "px");
	this.$_gaussian_blur_canvas.css("height", Width_used_for_displaying_canvas() + "px");
	this.$_gaussian_blur_canvas.get(0).getContext('2d').font = "italic 10px Arial";
	this.$_gaussian_blur_canvas.get(0).getContext('2d').strokeText("Gaussian blur: " + this._image_name, 10, 10);
	$("body").prepend(this.$_gaussian_blur_canvas);
};

Photography_with_detected_features.prototype._canny_processing = function () {
	chai.assert.isNotNull(this._canny_image_data, 'Photography_with_detected_features._canny_image_data');
	chai.assert.isNotNull(this._canny_image_data_buffer, 'Photography_with_detected_features._canny_image_data_buffer');
	jsfeat.imgproc.grayscale(this._canny_image_data.data, this._image.width, this._image.height, this._matrix_char8_C1);
	var blur_radius = 3;
	var low_threshold = 40;
	var high_threshold = 40;
	// Bitwise OR with '0' is equivalent to 'Math.floor()':
	var r = blur_radius | 0;
	var kernel_size = (r + 1) << 1;
	jsfeat.imgproc.gaussian_blur(this._matrix_char8_C1, this._matrix_char8_C1, kernel_size, 0);
	// Bitwise OR with '0' is equivalent to 'Math.floor()':
	jsfeat.imgproc.canny(this._matrix_char8_C1, this._matrix_char8_C1, low_threshold | 0, high_threshold | 0);
	// Render result back to canvas:
	var alpha = (0x000000FF << 24); // 'alpha' is set to max., i.e., '255'
	var pixel_number = this._matrix_char8_C1.cols * this._matrix_char8_C1.rows;
	while (--pixel_number >= 0) {
		var pixel = this._matrix_char8_C1.data[pixel_number];
		this._canny_image_data_buffer[pixel_number] = alpha | (pixel << 16) | (pixel << 8) | pixel;
	}
};

Photography_with_detected_features.prototype._canny_postprocessing = function () {
	chai.assert.isNotNull(this._canny_image_data, 'Photography_with_detected_features._canny_image_data');
	chai.assert.isNotNull(this._canny_image_data_buffer, 'Photography_with_detected_features._canny_image_data_buffer');
	for (var pixel_number = 0; pixel_number < this._canny_image_data_buffer.length; pixel_number++) {
		// Décalage sur la droite SANS préservation du signe (i.e., remplissage à gauche par des '0'):
		var alpha = this._canny_image_data_buffer[pixel_number] >>> 24; // Most left byte
		var blue = (this._canny_image_data_buffer[pixel_number] & 0x00FF0000) >> 16;
		var green = (this._canny_image_data_buffer[pixel_number] & 0x0000FF00) >> 8;
		var red = this._canny_image_data_buffer[pixel_number] & 0x000000FF; // Most right byte
		if (red === 255 && green === 255 && blue === 255) { // white
			green = 0;
			blue = 0;
			alpha = (0x000000FF << 24); // 'alpha' is set to max., i.e., '255'
		} else
			alpha = (0x00000000 << 24); // 'alpha' is set to min., i.e., '0'
		this._canny_image_data_buffer[pixel_number] = alpha | (blue << 16) | (green << 8) | red;
	}
	this.$_canny_canvas.get(0).getContext('2d').putImageData(this._canny_image_data, 0, 0);
	// Display:
	this.$_canny_canvas.css("width", Width_used_for_displaying_canvas() + "px");
	this.$_canny_canvas.css("height", Height_used_for_displaying_canvas() + "px");
	this.$_canny_canvas.get(0).getContext('2d').font = "italic 10px Arial";
	this.$_canny_canvas.get(0).getContext('2d').strokeText("Canny: " + this._image_name, 10, 10);
	$("body").prepend(this.$_canny_canvas);
};

Photography_with_detected_features.prototype._sobel_processing = function () {
	chai.assert.isNotNull(this._sobel_image_data, 'Photography_with_detected_features._sobel_image_data');
	chai.assert.isNotNull(this._sobel_image_data_buffer, 'Photography_with_detected_features._sobel_image_data_buffer');
	// 2 channels with 32 bit integer:
	var matrix_integer32_C2 = new jsfeat.matrix_t(this._image.width, this._image.height, jsfeat.S32C2_t);
	// Passe l'image en nuances de gris au lieu des couleurs:
	jsfeat.imgproc.grayscale(this._sobel_image_data.data, this._image.width, this._image.height, this._matrix_char8_C1, jsfeat.COLOR_RGBA2GRAY);
	// Image source in 'this._matrix_char8_C1', result in 'matrix_integer32_C2'
	jsfeat.imgproc.sobel_derivatives(this._matrix_char8_C1, matrix_integer32_C2);
	// Render result back to canvas:
	// RGBA pixel's features are packed into 32 bits (https://hacks.mozilla.org/2011/12/faster-canvas-pixel-manipulation-with-typed-arrays/):
	var i = this._sobel_image_data_buffer.length, pixel = 0, gx = 0, gy = 0;
	while (--i >= 0) { // 'i' = this._image.width * this._image.height, matrix_integer32_C2.data.length = this._image.width * this._image.height
	// First iteration:
	// 'i << 1' === matrix_integer32_C2.data.length - 2
	// '(i << 1) + 1' === matrix_integer32_C2.data.length - 1
	// Gradient de l'intensité sur l'axe x:
		gx = Math.abs(matrix_integer32_C2.data[i << 1] >> 2) & 0x000000FF;
		// Gradient de l'intensité sur l'axe y:
		gy = Math.abs(matrix_integer32_C2.data[(i << 1) + 1] >> 2) & 0x000000FF;
		pixel = ((gx + gy) >> 1) & 0x000000FF;
		this._sobel_image_data_buffer[i] = (pixel << 24) | (gx << 16) | (0 << 8) | gy;
	}
};

Photography_with_detected_features.prototype._sobel_postprocessing = function () {
	chai.assert.isNotNull(this._sobel_image_data, 'Photography_with_detected_features._sobel_image_data');
	chai.assert.isNotNull(this._sobel_image_data_buffer, 'Photography_with_detected_features._sobel_image_data_buffer');
	chai.assert.isNotNull(this._image_data, 'Photography_with_detected_features._image_data');
	chai.assert.isNotNull(this._image_data_buffer, 'Photography_with_detected_features._image_data_buffer');
	for (var pixel_number = 0; pixel_number < this._sobel_image_data_buffer.length; pixel_number++) {
		var alpha = this._sobel_image_data_buffer[pixel_number] >>> 24; // Most left byte
		var blue = (this._sobel_image_data_buffer[pixel_number] & 0x00FF0000) >> 16;
		var green = (this._sobel_image_data_buffer[pixel_number] & 0x0000FF00) >> 8;
		var red = this._sobel_image_data_buffer[pixel_number] & 0x000000FF; // Most right byte
		/** Gray scale: red-channel == green-channel == blue-channel */
		if (alpha > 10) { // Lower: useless details are kept (outside faces especially) while higher: faces lose quality
			red = alpha;
			blue = alpha;
			green = alpha;
			// Change 'alpha'?
		} else {
			alpha = 0;
		}
		// Pixel reload:
		this._sobel_image_data_buffer[pixel_number] = (alpha << 24) | (blue << 16) | (green << 8) | red;
		/** Original image is setup according to Sobel: */
		var sobel_alpha = alpha;
		alpha = this._image_data_buffer[pixel_number] >>> 24; // Most left byte
		blue = (this._image_data_buffer[pixel_number] & 0x00FF0000) >> 16;
		green = (this._image_data_buffer[pixel_number] & 0x0000FF00) >> 8;
		red = this._image_data_buffer[pixel_number] & 0x000000FF; // Most right byte
		if (sobel_alpha === 0) {
			// Pixel reload:
			//this._image_data_buffer[pixel_number] = (alpha << 24) | (blue << 16) | (green << 8) | red; // Colors are kept
		}
	}
	/** Update pixels into canvas: */
	this.$_sobel_canvas.get(0).getContext('2d').putImageData(this._sobel_image_data, 0, 0);
	// Display for test only:
	this.$_sobel_canvas.css("width", Width_used_for_displaying_canvas() + "px");
	this.$_sobel_canvas.css("height", Height_used_for_displaying_canvas() + "px");
	this.$_sobel_canvas.get(0).getContext('2d').font = "italic 10px Arial";
	this.$_sobel_canvas.get(0).getContext('2d').strokeText("Sobel: " + this._image_name, 10, 10);
	$("body").prepend(this.$_sobel_canvas);
};

Photography_with_detected_features.prototype._brightness_binary_face_detecting = function (color) {
	var canvas = $('<canvas>').attr({
		id: "bbf-canvas-" + this._image_name
	});
	canvas.get(0).width = this._image.width;
	canvas.get(0).height = this._image.height;
	canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
	jsfeat.imgproc.grayscale(canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height).data, this._image.width, this._image.height, this._matrix_char8_C1);
	// Possible option:
	// jsfeat.imgproc.equalize_histogram(img_u8, img_u8);
	/*
	 Build image pyramid using canvas drawImage

	 src               - source grayscale matrix_t (U8_t|C1_t)
	 min_width         - minimum width to scale pyramid to
	 min_height        - minimum height to scale pyramid to
	 interval          - number of original scale levels in pyramid
	 */
	var pyramid = jsfeat.bbf.build_pyramid(this._matrix_char8_C1, 24 * 2, 24 * 2, 5); // Oscar passe à '5'
	/*
	 This step needed only once to create local copy of features to prevent multiple Array relocation during detection
	 */
	jsfeat.bbf.prepare_cascade(jsfeat.bbf.face_cascade); // 'bbf_face.js'
	/*
	 Run detection

	 pyramid    - 'pyramid_t' object from 'build_pyramid' method
	 cascade    - cascade data
	 */
	this._brightness_binary_face = jsfeat.bbf.detect(pyramid, jsfeat.bbf.face_cascade); // 'bbf_face.js'
	/*
	 Groups the object candidate rectangles

	 this._brightness_binary_face          - input candidate objects sequence
	 min_neighbors  - Minimum possible number of rectangles minus 1, the threshold is used in a group of rectangles to retain it
	 */
	// En augmentant 'min_neighbors', on augmente la qualité de la détection pour ensuite choisir le rectangle:
	this._brightness_binary_face = jsfeat.bbf.group_rectangles(this._brightness_binary_face, 1); // '1' par défaut pour 'min_neighbors'
	/** JS conventions: */
	//    All objects are considered to be 'true'
	//    Strings are considered to be 'false' if they are empty
	//    'null' and 'undefined' are considered to be 'false'
	//    A Number is 'false' if it is zero
	if (this._brightness_binary_face.length > 0) {
		jsfeat.math.qsort(this._brightness_binary_face, 0, this._brightness_binary_face.length - 1, function (a, b) {
			return (b.confidence < a.confidence);
		}); // Les rectangles sont triés par ordre de confiance
		// Display:
		this.$_image_canvas.get(0).getContext('2d').strokeStyle = color;
		this.$_image_canvas.get(0).getContext('2d').lineWidth = 3;
		var scale = this._image.width / this._matrix_char8_C1.cols;
		this.$_image_canvas.get(0).getContext('2d').strokeRect((this._brightness_binary_face[0].x * scale) | 0, (this._brightness_binary_face[0].y * scale) | 0, (this._brightness_binary_face[0].width * scale) | 0, (this._brightness_binary_face[0].height * scale) | 0);
	}
};

Photography_with_detected_features.prototype._haar_feature_detecting = function (color, classifier, feature_number) {
	var canvas = $('<canvas>').attr({
		id: "frontalface-canvas-" + this._image_name
	});
	canvas.get(0).width = this._image.width;
	canvas.get(0).height = this._image.height;
	canvas.get(0).getContext('2d').drawImage(this._image, 0, 0, this._image.width, this._image.height);
	var edges = new jsfeat.matrix_t(this._image.width, this._image.height, jsfeat.U8_t | jsfeat.C1_t);
	var ii_sum = new Int32Array((this._image.width + 1) * (this._image.height + 1));
	var ii_sqsum = new Int32Array((this._image.width + 1) * (this._image.height + 1));
	var ii_tilted = new Int32Array((this._image.width + 1) * (this._image.height + 1));
	var ii_canny = new Int32Array((this._image.width + 1) * (this._image.height + 1));
	jsfeat.imgproc.grayscale(canvas.get(0).getContext('2d').getImageData(0, 0, this._image.width, this._image.height).data, this._image.width, this._image.height, this._matrix_char8_C1);
	/** option */ jsfeat.imgproc.equalize_histogram(this._matrix_char8_C1, this._matrix_char8_C1);
	// jsfeat.imgproc.gaussian_blur(this._matrix_char8_C1, this._matrix_char8_C1, 3);

	jsfeat.imgproc.compute_integral_image(this._matrix_char8_C1, ii_sum, ii_sqsum, classifier.tilted ? ii_tilted : null);
	/** option */ jsfeat.imgproc.canny(this._matrix_char8_C1, edges, 10, 50);
	jsfeat.imgproc.compute_integral_image(edges, ii_canny, null, null);
	var min_scale = 1.; // '1.' to '4.' step '0.1'
	var scale_factor = 1.15; // '1.1' to '2.' step '0.025'

	jsfeat.haar.edges_density = 0.13; // '0.01' to '1.' step '0.005'
	this._haar_feature = jsfeat.haar.detect_multi_scale(ii_sum, ii_sqsum, ii_tilted, ii_canny /* 'null' if canny is not used */, this._matrix_char8_C1.cols, this._matrix_char8_C1.rows, classifier, scale_factor, min_scale);
	this._haar_feature = jsfeat.haar.group_rectangles(this._haar_feature, 1);
	if (this._haar_feature.length > 1) {
		jsfeat.math.qsort(this._haar_feature, 0, this._haar_feature.length - 1, function (a, b) {
			return (b.confidence < a.confidence);
		}); // Les rectangles sont triés par ordre de confiance
	}
	// Display:
	this.$_image_canvas.get(0).getContext('2d').strokeStyle = color;
	this.$_image_canvas.get(0).getContext('2d').lineWidth = 3;
	var scale = this._image.width / this._matrix_char8_C1.cols;
	for (var i = 0; i < Math.min(this._haar_feature.length, feature_number); ++i) {
		this.$_image_canvas.get(0).getContext('2d').strokeRect((this._haar_feature[i].x * scale) | 0, (this._haar_feature[i].y * scale) | 0, (this._haar_feature[i].width * scale) | 0, (this._haar_feature[i].height * scale) | 0);
	}
};
/** tracking.js */
Photography_with_detected_features.prototype._tracking_face = function () {
	var tracker = new tracking.ObjectTracker(['face']);
	tracker.setInitialScale(1.); // gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1);
	tracker.setStepSize(1.); // gui.add(tracker, 'stepSize', 1, 5).step(0.1);
	tracker.setEdgesDensity(0.1); // gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01);
	var display_face = function (event) {
		// Display:
		this.$_sobel_canvas.get(0).getContext('2d').strokeStyle = chroma('red').hex();
		this.$_sobel_canvas.get(0).getContext('2d').lineWidth = 3;
		for (var i = 0; i < event.data.length; ++i) {
			this.$_sobel_canvas.get(0).getContext('2d').strokeRect(Math.round(event.data[i].x), Math.round(event.data[i].y), Math.round(event.data[i].width), Math.round(event.data[i].height));
		}
	};
	tracker.on('track', display_face.bind(this));
	tracking.track(this._image, tracker);
};