/**
 * Sketch - Create a new processing sketch.
 * 
 * Sketch Events: 
 *
 * onLoad - parsing/preloading is done, before sketch starts
 * onSetup - setup() has been called, before first draw()
 * onPause - noLoop() has been called, pausing draw loop
 * onLoop - loop() has been called, resuming draw loop
 * onFrameStart - draw() loop about to begin
 * onFrameEnd - draw() loop finished
 * onExit - exit() done being called
 */
var P1 = function( icanvas , icontainer ) {
	var that = this,
		p = undefined,
		sketch = undefined,
		PJS = undefined,
		PC = undefined;

	var canvas = document.getElementById( icanvas ) || null,
		container = document.getElementById( icontainer ) || null,
		
		width = 0,
		height = 0,

		ready = false,

		list = [],
		
		i = 0,
		j = 0,

		radius = 20;

//------------------------------------------------------------------------------
// Public Methods

	/**
	 * Initialize.
	 */
	that.initialize = function() {
		// Create a new sketch.
		sketch = new Processing.Sketch();
		// Register callbacks.
		sketch.onLoad 		= onLoad;
		sketch.onSetup		= onSetup;
		sketch.onPause		= onPause;
		sketch.onLoop		= onLoop;
		sketch.onFrameStart	= onFrameStart;
		sketch.onFrameEnd	= onFrameEnd;
		sketch.onExit		= onExit;
		// Register the starter function.
		sketch.attachFunction = run;

		p = new Processing( canvas , sketch );
	};

	/**
	 * Exit from the actual this processing, 
	 * and disponse all other objects.
	 */
	this.disponse = function() {
		p.exit();
		p = null;
	};

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

//------------------------------------------------------------------------------
// Private Methods
	
	/**
	 * Set the canvas size.
	 */
	function setCanvasSize() {
		$( "#" + canvas.id ).css({ 
			"width" : width,
			"height" : height
		});
	};
	
	/**
	 * Initialize.
	 */
	function run(p) {
		// Set processing stuffs.
		PJS = p;
		PC = p.PConstants;

		width = $( "#" + container.id ).width();
		height = $( "#" + container.id ).height();

		PJS.setup = setup;
		PJS.draw = draw;
	};

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

//------------------------------------------------------------------------------
// Processing

	function setup() {
		PJS.size( width , height );
		PJS.background(255);

		var w = PJS.width / 20;
		var h = PJS.height / 20;

		console.log( w , h );

		for (j = 0; j < w; j += 1) {
			for (i = 0; i < h; i += 1) {				
				list.push({
					x: 10 + (1+j) + (20 * j),
					y: 10 + (1+i) + (20 * i)
				});
			}
		}

	};

	function draw() {
		var l = list.length;
		
		PJS.noStroke();
		PJS.fill(23);

		for (i = 0; i < l; i += 1) {
			PJS.ellipse(list[i].x, list[i].y, radius, radius);
		}

		PJS.noLoop();
	};

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

//------------------------------------------------------------------------------
// Events Handlers

	/**
	 * onLoad - parsing/preloading is done, before sketch starts
	 */
	function onLoad() {
		console.log("Prototype1::onLoad");
		console.log( canvas.id  );
	};

	/**
	 * onSetup - setup() has been called, before first draw()
	 */
	function onSetup() {
		console.log("Prototype1::onSetup");
	};

	/**
	 * onPause - noLoop() has been called, pausing draw loop
	 */
	function onPause() {
		console.log("Prototype1::onPause");
	};

	/**
	 * onLoop - loop() has been called, resuming draw loop
	 */
	function onLoop() {
		//console.log("Prototype1::onLoop");
	};

	/**
	 * onFrameStart - draw() loop about to begin
	 */
	function onFrameStart() {
		//console.log("Prototype1::onFrameStart");
	};

	/**
	 * onFrameEnd - draw() loop finished
	 */
	function onFrameEnd() {
		//console.log("Prototype1::onFrameEnd");
	};

	/**
	 * onExit - exit() done being called
	 */
	function onExit() {
		console.log("Prototype1::onExit");
	};

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

};