// there are going to be at least 2 methods we'll want to use.
// first up - creating a nice new layer in it's own div
// secondly - adding a canvas to a pre-existing element (where does
// element content go??? depends on z-index I'd imagine.


function canvasLayers(eParent)
{
	this.eParent = eParent;
	// create a empty object.... hmmm.. this syntax versus block syntax is ambiguous.
	this._canvasLayers = { };
}

canvasLayers.prototype.add = function(layerName)
{
	// the "name" is a "real" name for lookups...
	var t = createCanvasInElement(this.eParent);
	if (t != null)
	{
		this._canvasLayers[layerName] = t;
	}
	return t;
}

canvasLayers.prototype.remove = function(layerName)
{
	delete this._canvasLayers[layerName];
}

canvasLayers.prototype.getContext = function(layerName)
{
	return this._canvasLayers[layerName].getContext('2d');
}

function createCanvasInElement(eParent)
{
	// Create the canvas element via DOM
	var eCanvas = document.createElement('canvas');
	// Set the width and height to those of the parent
	eCanvas.setAttribute('width', eParent.clientWidth + 'px');
	eCanvas.setAttribute('height', eParent.clientHeight + 'px');
	// set styles (and simultaneously hide this from the user app)
	eCanvas.style.position = 'absolute';
	eCanvas.style.top = 0;
	eCanvas.style.left = 0;
	eCanvas.style.border = 0;
	eCanvas.style.margin = 0;
	eCanvas.style.padding = 0;
//	eCanvas.style.border = '1px solid green';
	// Add it to the parent.
	eParent.appendChild(eCanvas);
	// Return the canvas object
	return eCanvas;
}