/* [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 process;



/* [1] Initialisation
=========================================================*/
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();

};



/* (x) Variables globales
---------------------------------------------------------*/
var pixelRatio = {

	initialized: false,

	init: function(){
		if( this.initialized )
			return;

		this.initialized = true;


		this._w = this._h = 0.9;
		this.width = this.height = null;

		this.__defineGetter__('width',  function(){ return this._w;                            });
		this.__defineGetter__('height', function(){ return this._h;                            });

		this.__defineSetter__('width',  function(v){ this._w = v; process.bind(iL._wrapper)(); });
		this.__defineSetter__('height', function(v){ this._h = v; process.bind(iL._wrapper)(); });


		Controller.add(this, 'width', 0, 2).listen();
		Controller.add(this, 'height', 0, 2).listen();
	}

};


/* [2] Routine principale
=========================================================*/
var count = 0;
process = function(){
	console.warn('PROCESS');

	if( !count ){
		this.defaultWidth = this.width;
		this.defaultHeight = this.height;
		log('Image copied', '[Canvas]');
	}
	count++;

	/* [0] On efface le Canvas
	=========================================================*/
	_CON.clearRect(0, 0, _CAN.width, _CAN.height);

	/* [1] Copie sur le canvas
	=========================================================*/
	pixelRatio.init();

	this.width  = this.defaultWidth  * (pixelRatio.width  * _CAN.width / this.defaultWidth);
	this.height = this.defaultHeight * (pixelRatio.height * _CAN.height / this.defaultHeight);

	_CON.drawImage(this, 0, 0, this.width, this.height);

};



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