/**
 * JA.com drawing JavaScript
 * Classes and methods for drawing canvas elements
 *
 * @author: Jonathan Armstrong
 * @dependency: jQuery v1.3.2, JA base
 **/

// 
// Init namespace(s)
JA = JA || {};
JA.drawing = JA.drawing || {};

// 
// Grid class (pseudo singleton)
JA.drawing.Grid = function(settings) {

	var _defaults = {
		'visibleUnitCount'	: 12,
		'canvasElement'	: $('#drawingCanvas')[0],
		'isRandom'		: false
	};
	this.settings = $.extend({}, _defaults, settings);
	this.units = [];
		
	// Init grid
	this.init();
};

	JA.drawing.Grid.prototype.init = function() {
			
		var self = this;
		var $canvasWrapper = $(this.settings.canvasElement).parent();
		
		// Draw grid
		if (!$.browser.msie) {
			$canvasWrapper.hide()
			this.draw(function() {
				$canvasWrapper.fadeIn(1500);
			});
		} else {
			G_vmlCanvasManager.initElement(this.settings.canvasElement)
			this.draw();
		}
	};
	
	JA.drawing.Grid.prototype.draw = function(callback) {
		
		var context		= this.settings.canvasElement.getContext('2d');
		var dimensions	= this.getDimensions();
		
		// Set canvas element dimensions
		this.settings.canvasElement.height	= dimensions.screenHeight;
		this.settings.canvasElement.width	= dimensions.screenWidth;
		
		// Create grid units
		for (var v = 0; v < dimensions.verticalUnitCount; v++) {
			for (var h = 0; h < dimensions.horizontalUnitCount; h++) {
				// Create grid unit
				this.units.push(new JA.drawing.Grid.Unit({
					'context'			: context,
					'isRandom'			: this.settings.isRandom,
					'unitHeight'		: dimensions.unitHeight,
					'unitWidth'			: dimensions.unitWidth,
					'x'					: h * dimensions.unitWidth,
					'y'					: v * dimensions.unitHeight
				}));
			}
		}
		
		// Execute callback (if any)
		if (typeof callback == 'function') {
			callback();
		}
	};
	
	JA.drawing.Grid.prototype.getDimensions = function() {
	
		var documentWidth			= $(document).width();
		var screenHeight			= screen.height;
		var screenWidth				= screen.width;
		var unitSize				= Math.ceil((documentWidth) / this.settings.visibleUnitCount);
		var horizontalUnitCount		= Math.ceil(screenWidth / unitSize);
		var verticalUnitCount		= Math.ceil(screenHeight / unitSize);
		
		return {
			'height'				: verticalUnitCount * unitSize,
			'horizontalUnitCount'	: horizontalUnitCount,
			'screenHeight'			: screenHeight,
			'screenWidth'			: screenWidth,
			'unitHeight'			: unitSize,
			'unitWidth'				: unitSize,
			'verticalUnitCount'		: verticalUnitCount,
			'width'					: documentWidth
		};
	}
	
//
// Unit class
JA.drawing.Grid.Unit = function(settings) {

	var _defaults = {
		'context'	: null,
		'isRandom'	: true,
		'unitHeight': 50,
		'unitWidth'	: 50,
		'x'			: 0,
		'y'			: 0
	};
	this.settings = $.extend({}, _defaults, settings);

	// Init control
	this.init();
};

	JA.drawing.Grid.Unit.prototype.init = function() {

		var _offset = .5;

		//
		if (this.settings.isRandom) {
			this.undrawnSides	= ['top','right','bottom','left','diagonalA','diagonalB'];
			this.sideCount 		= JA.drawing.Grid.Unit.getRandomSideIndex(this.undrawnSides.length);
		} else {
			this.undrawnSides	= ['top','right','bottom','left'];
			this.sideCount		= this.undrawnSides.length;
		}
		this.drawnSides 		= [];
		this.topY 				= this.settings.y - _offset;
		this.rightX 			= (this.settings.x + this.settings.unitWidth) - _offset;
		this.bottomY			= (this.settings.y + this.settings.unitHeight) - _offset;
		this.leftX 				= this.settings.x - _offset;
				
		// Draw unit
		this.draw();
	};

	JA.drawing.Grid.Unit.prototype.draw = function() {
		
		// Loop through and draw sides
		for (var s = 0; s < this.sideCount; s++) {
			
			var startX, startY, endX, endY = null;
			var sideIndex = this.settings.isRandom 
				? JA.drawing.Grid.Unit.getRandomSideIndex(parseInt(this.undrawnSides.length / .95))
				: s;
			
			// draw side
			switch (this.undrawnSides[sideIndex]) {
				case 'top':
					startX	= this.leftX;
					startY	= this.topY;
					endX 	= this.rightX;
					endY 	= this.topY;
					break;
					
				case 'right':
					startX	= this.rightX;
					startY	= this.topY;
					endX 	= this.rightX;
					endY 	= this.bottomY;
					break;
					
				case 'bottom':
					startX	= this.leftX;
					startY	= this.bottomY;
					endX 	= this.rightX;
					endY 	= this.bottomY;
					break;
					
				case 'left':
					startX	= this.leftX;
					startY	= this.topY;
					endX 	= this.leftX;
					endY 	= this.bottomY;
					break;
					
				case 'diagonalA':
					startX	= this.leftX;
					startY	= this.topY;
					endX 	= this.rightX;
					endY 	= this.bottomY;
					break;
					
				case 'diagonalB':
					startX	= this.rightX;
					startY	= this.topY;
					endX 	= this.leftX;
					endY 	= this.bottomY;
					break;
			}
			
			this.settings.context.strokeStyle = '#CCCCCC';
			this.settings.context.lineWidth = .5;
			this.settings.context.beginPath();
			this.settings.context.moveTo(startX, startY);
			this.settings.context.lineTo(endX, endY);
			this.settings.context.closePath();
			this.settings.context.stroke();
			
			// Add side to drawnSides array
			this.drawnSides.push(sideIndex);
			// Remove side from undrawnSides array
			this.undrawnSides.splice(sideIndex, 1);
		}
	};
	
	JA.drawing.Grid.Unit.getRandomSideIndex = function(sideCount) {
	
		return Math.floor(Math.random() * sideCount);
	};