/**
 * 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 P3 = 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,
		
		list = [],

		width = 0,
		height = 0,

		ready = false,

		i = 0,

		r = 0,
		g = 0,
		b = 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
		});
	};
	
	/**
	 * Run the app.
	 */
	function run(p) {
		// Set processing stuffs.
		PJS = p;
		PC = p.PConstants;

		setCanvasSize();

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

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

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

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

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

		PJS.background( 255 );
		PJS.frameRate( 30 );

		for (j = 0; j < (window.innerHeight/20); j += 1) {
			for (i = 0; i < (window.innerWidth/20); i += 1) {				
				list.push({
					x: 10 + (1+i) + (20 * i),
					y: 10 + (1+j) + (20 * j)
				});
			}
		}

	};

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

		for (i = 0; i < l; i += 1) {
			r += PC.HALF_PI/60;
  			g += PC.HALF_PI/60;
  			b += PC.HALF_PI/60;
  			//console.log(r, g, b);
    		PJS.fill(120 + Math.sin( PC.HALF_PI * r ) * 130, 
    				 110 + Math.sin( PC.THIRD_PI * g ) * 140, 
    				 100 + Math.sin( PC.QUARTER_PI * b ) * 150);
			//pjs.fill(r, g, b);
			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("Prototype2::onLoad");
		console.log( canvas.id  );
	};

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

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

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

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

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

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

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

};
/*
var P3 = function(p, p_) {
	var that = this,

		pjs = p,
		pc = p_,

		list = [],
		
		ready = false,

		i = 0,
		j = 0,

		r = 0,
		g = 0,
		b = 0,

		radius = 20,

	setup = function() {
		pjs.frameCount = 0;
		pjs.background(255);
		pjs.frameRate(1);

		for (j = 0; j < (window.innerHeight/20); j += 1) {
			for (i = 0; i < (window.innerWidth/20); i += 1) {				
				list.push({
					x: 10 + (1+i) + (20 * i),
					y: 10 + (1+j) + (20 * j)
				});
			}
		}

	},

	draw = function() {
		var l = list.length;
		
		pjs.noStroke();

		for (i = 0; i < l; i += 1) {
			r += pc.HALF_PI/60;
  			g += pc.HALF_PI/60;
  			b += pc.HALF_PI/60;
  			//console.log(r, g, b);
    		pjs.fill(120 + Math.sin( pc.HALF_PI * r ) * 130, 
    				 110 + Math.sin( pc.THIRD_PI * g ) * 140, 
    				 100 + Math.sin( pc.QUARTER_PI * b ) * 150);
			//pjs.fill(r, g, b);
			pjs.ellipse(list[i].x, list[i].y, radius, radius);
		}

		pjs.noLoop();
	};

	setup();

	return draw;

};
*/