//
//		JavaScript Drawing Methods
//		(c) TRIGGERTEK Inc.
//
//		Authors: Tibor Szanto
//		Website: http://triggertek.com/
//
var Draw = {
	GRID_COLOR : '#233545', // Default Grid color
	// Initializes viewport and sets center to (x,y) or default to (0,0)
	// Sets zoom to (z) or defaults to (1.0)
	Init : function(x, y, z) {
		Draw.guide = document.getElementById('guide');
		Draw.e = document.getElementById('space');
		Draw.x = x ? x : 0;
		Draw.y = y ? y : 0;
		Draw.z = z ? z : 1;
	} ,
	// Draws coordinate axis using color (#rrggbb or color name) or default color
	Axes : function(color) {
		var axes_color = color ? color : Draw.GRID_COLOR;
		if(Draw.ax) { return; }
		Draw.HGuide(0, axes_color, 0.6);
		Draw.VGuide(0, axes_color, 0.6);
		Draw.ax = true;
	} ,
	// Draws grid with (grid_x, grid_y) dimensions and color (#rrggbb or color name) or default color
	Grid : function(grid_x, grid_y, color) {
		var grid_color = color ? color : Draw.GRID_COLOR;
		var sh = screen.height / 2 / Draw.z;
		var y = grid_y * Math.ceil( (Draw.y + sh) / grid_y );
		while(y > Draw.y - sh) {
			y -= grid_y;
			Draw.HGuide(y, grid_color, 0.2);
		}
		var sw = screen.width / 2 / Draw.z;
		var x = grid_x * Math.ceil( (Draw.x + sw) / grid_x );
		while(x > Draw.x - sw) {
			x -= grid_x;
			Draw.VGuide(x, grid_color, 0.2);
		}
		Draw.Axes(grid_color);
	} ,
	// Draws a pixel at (x,y) using color (#rrggbb or color name) and opacity (0.0 .. 1.0)
	Pixel : function(x, y, color, opacity) {
		var d = document.createElement('div');
		d.className = 'pixel';
		d.style.left = Math.round( Draw.z * (x - Draw.x) ) + 'px';
		d.style.top = Math.round( Draw.z * (Draw.y - y) ) + 'px';
		if(color) { d.style.backgroundColor = color; }
		if(opacity) { d.style.opacity = opacity; }
		Draw.e.appendChild(d);
	} ,
	// Draws a horizontal guide at (y) using color (#rrggbb or color name) and opacity (0.0 .. 1.0)
	HGuide : function(y, color, opacity) {
		var d = document.createElement('div');
		d.className = 'guide_x';
		d.style.marginTop = String( Draw.z * (Draw.y - y) - 1 ) + 'px';
		if(color) { d.style.backgroundColor = color; }
		if(opacity) { d.style.opacity = opacity; }
		Draw.guide.appendChild(d);
	} ,
	// Draws a vertical guide at (x) using color (#rrggbb or color name) and opacity (0.0 .. 1.0)
	VGuide : function(x, color, opacity) {
		var d = document.createElement('div');
		d.className = 'guide_y';
		d.style.marginLeft = String( Draw.z * (x - Draw.x) - 1 ) + 'px';
		if(color) { d.style.backgroundColor = color; }
		if(opacity) { d.style.opacity = opacity; }
		Draw.guide.appendChild(d);
	} ,
	// Draws a rectangle between (x1,y1) and (x2,y2)
	// Using fill_color and border_color (#rrggbb or color name) and opacity (0.0 .. 1.0)
	Rectangle : function(x1, y1, x2, y2, fill_color, border_color, opacity) {
		var x0 = Math.min(x1, x2);
		var y0 = Math.max(y1, y2);
		var w = border_color ? -2 : 2;
		var d = document.createElement('div');
		d.className = 'rectangle';
		if(border_color) { d.style.border = '2px solid ' + border_color; }
		if(fill_color) { d.style.backgroundColor = fill_color; }
		d.style.left = String(Math.round( Draw.z * (x0 - Draw.x) - 1 )) + 'px';
		d.style.top = String(Math.round( Draw.z * (Draw.y - y0) - 1 )) + 'px';
		d.style.width = String(Math.round(Draw.z * Math.abs(x2 - x1) + w)) + 'px';
		d.style.height = String(Math.round(Draw.z * Math.abs(y2 - y1) + w)) + 'px';
		if(opacity) { d.style.opacity = opacity; }
		Draw.e.appendChild(d);
	}
}