/**
 * 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 P4 = 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,

		NUM_OF_RECTS = 16,

		INFINTY = true,

		rotation = 0,
		orientation = 1,
		
		r = 0,
		g = 0,
		b = 0;

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

	/**
	 * Initialize.
	 */
	that.initialize = function() {
		if (!Processing) {
			console.log("We cannot found the Processing lib.");
		} else {
			// 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( 24 );
		PJS.smooth();
		PJS.noStroke();
		
	};

	function draw() {
		//PJS.background( 255, 255, 255, 100 );

		var tx = PJS.mouseX <= 0 ? width / 2 : PJS.mouseX;
		var ty = PJS.mouseY <= 0 ? height / 2 : PJS.mouseY;
		PJS.translate( tx , ty );

		PJS.pushMatrix();
		for (var i = 0; i < NUM_OF_RECTS; i += 1) {
			r += PC.HALF_PI/60;
  			g += PC.HALF_PI/50;
  			b += PC.HALF_PI/40;

  			//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(120 + Math.sin( PC.HALF_PI * r ) * 130, 
    				 110 + Math.sin( PC.THIRD_PI * g ) * 140, 
    				 100 + Math.sin( PC.QUARTER_PI * b ) * 150,
		    			180);
		    
			if ( rotation > NUM_OF_RECTS && INFINTY !== true)
				orientation = 0;
			
			if ( orientation === 1 )
				rotation += 0.1;	
			PJS.rotate( rotation * Math.PI/ 180 );
			//console.log(rotation);
			//PJS.fill( 27 , 32 , 38 , 200 );
			PJS.rect( -120 , 0 , 100 , 100 );
			
		}
		PJS.popMatrix();

	};

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

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

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

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

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

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

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

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

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

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

};