CBDL.include("excanvas.js");
/* **** CBDL_net - Optional layer which adds network support
 * 
 * 
 * */
CBDL.Graphics = CBDL.Graphics || {};
CBDL.Graphics.version = 0.1;

CBDL.Graphics.DisplayType = {DIV: 0x00, CANVAS_2D:0x01}; 
CBDL.Graphics.backends = {DIV: 0x00, CANVAS_2D:0x01}; 

/*
===============================================================================

CBDL.Graphics.DisplaySkeleton

	Basic Display skeleton from which all Display backends should be derived
from. It is through the backend detection that the Display backend, being named
something similar to Html5Display, is assigned as Graphics.Display. This allows
for backends to be used/sent according to browser capability, rather than via
bulk.

===============================================================================
*/
CBDL.Graphics.DisplaySkeleton = function(video_mode, target_element) {
};

CBDL.Graphics.DisplaySkeleton.prototype.Init = function() {

};
CBDL.Graphics.DisplaySkeleton.prototype.Fill = function(red, green, blue) {

};

/*
===============================================================================

CBDL.Graphics.Display

	Base window onto which various Graphics elements can be placed within.
Effectively exists as a simple wrapper to a 'div' element. The first parameter
passed is an instance of a VideoMode(width, height). The second optional
parameter is a target HTML element. If ommitted, the Display adds its element
to document.body.

Usage:
	

===============================================================================
*/
CBDL.Graphics.Display = function(video_mode, target_element) {
	var _context = CBDL.Graphics;
	this.context = null;
	this.init = function() {
    try { this.element = document.createElement("canvas"); }
    catch (x) { this.element = null; }
		if (this.element == null) { // fallback to nasty divs
			this.element = document.createElement("div");
			this.element.style.width = this.videomode.width;
			this.element.style.height = this.videomode.height;
			this.element.style.backgroundColor = 'black';
			this.element.style.display = "block";
			this.type = _context.DisplayType.DIV;
		} else { // using HTML5 canvas
			if (typeof G_vmlCanvasManager != "undefined") { // IE8, bleh
				G_vmlCanvasManager.initElement(this.element);
			}
			this.type = _context.DisplayType.CANVAS_2D;
			this.element.style.width = this.videomode.width;
			this.element.style.height = this.videomode.height;
			try { this.context = this.element.getContext("2d"); }
			catch (x) { this.context = null; }
			if (this.context == null) {
			} else {
				this.context.fillStyle = "#000000";
				this.context.fillRect(0, 0, this.videomode.width, this.videomode.height);
			}
		}
		(target_element ? target_element : document.body).appendChild(this.element);
	};

	this.Fill = function(red, green, blue) {
		var hex_value = ((1 << 24) + (red << 16) + (green << 8) + blue);
		var hex_string = hex_value.toString(16).substr(1);  
		if (this.type == _context.DisplayType.DIV) {
			this.element.style.backgroundColor = '#'+hex_string;
		} else if (this.type == _context.DisplayType.CANVAS_2D) {
			//this.context.fillStyle = "#"+hex_string;
			//this.context.fillRect(0, 0, this.videomode.width, this.videomode.height);
		}
	};

	if (video_mode instanceof CBDL.Graphics.VideoMode) {
		this.videomode = video_mode;
		this.init();
	}
}

/*
===============================================================================

CBDL.Graphics.VideoMode(width, height);

	Object which should be passed as the first parameter to Graphics.Display,
defining the width and height of the Display.

===============================================================================
*/
CBDL.Graphics.VideoMode = function(width, height) {
	this.width = width;
	this.height = height;
}

/*
===============================================================================

CBDL.Graphics.Drawable(2dVector position, 2dVector scale, float rotation)

	Base class for all objects that can be drawn to a Graphics.Display.

Usage:

===============================================================================
*/

CBDL.Graphics.Drawable = function(position, scale, rotation) {

	this.setPosition = function(x, y) {

	}
	this.setScale = function(x, y) {

	}
	this.setCenter = function(x, y) {

	}
	this.setRotation = function(rotation) {

	}
}

/*
===============================================================================

===============================================================================
*/
CBDL._Graphics_ = function() {};
CBDL._Graphics_.prototype.VideoMode = function(width, height) {
	this.width = width;
	this.height = height;
};