// Setup a very simple “virtual canvas” to make drawing the few shapes we need easier // This is accessible as $(foo).simpledraw()

VShape = createClass({

init: function (target, id, type, args) {
    this.target = target;
    this.id = id;
    this.type = type;
    this.args = args;
},
append: function () {
    this.target.appendShape(this);
    return this;
}

});

VCanvas_base = createClass({

_pxregex: /(\d+)(px)?\s*$/i,

init: function (width, height, target) {
    if (!width) {
        return;
    }
    this.width = width;
    this.height = height;
    this.target = target;
    this.lastShapeId = null;
    if (target[0]) {
        target = target[0];
    }
    $.data(target, '_jqs_vcanvas', this);
},

drawLine: function (x1, y1, x2, y2, lineColor, lineWidth) {
    return this.drawShape([[x1, y1], [x2, y2]], lineColor, lineWidth);
},

drawShape: function (path, lineColor, fillColor, lineWidth) {
    return this._genShape('Shape', [path, lineColor, fillColor, lineWidth]);
},

drawCircle: function (x, y, radius, lineColor, fillColor, lineWidth) {
    return this._genShape('Circle', [x, y, radius, lineColor, fillColor, lineWidth]);
},

drawPieSlice: function (x, y, radius, startAngle, endAngle, lineColor, fillColor) {
    return this._genShape('PieSlice', [x, y, radius, startAngle, endAngle, lineColor, fillColor]);
},

drawRect: function (x, y, width, height, lineColor, fillColor) {
    return this._genShape('Rect', [x, y, width, height, lineColor, fillColor]);
},

getElement: function () {
    return this.canvas;
},

/**
 * Return the most recently inserted shape id
 */
getLastShapeId: function () {
    return this.lastShapeId;
},

/**
 * Clear and reset the canvas
 */
reset: function () {
    alert('reset not implemented');
},

_insert: function (el, target) {
    $(target).html(el);
},

/**
 * Calculate the pixel dimensions of the canvas
 */
_calculatePixelDims: function (width, height, canvas) {
    // XXX This should probably be a configurable option
    var match;
    match = this._pxregex.exec(height);
    if (match) {
        this.pixelHeight = match[1];
    } else {
        this.pixelHeight = $(canvas).height();
    }
    match = this._pxregex.exec(width);
    if (match) {
        this.pixelWidth = match[1];
    } else {
        this.pixelWidth = $(canvas).width();
    }
},

/**
 * Generate a shape object and id for later rendering
 */
_genShape: function (shapetype, shapeargs) {
    var id = shapeCount++;
    shapeargs.unshift(id);
    return new VShape(this, id, shapetype, shapeargs);
},

/**
 * Add a shape to the end of the render queue
 */
appendShape: function (shape) {
    alert('appendShape not implemented');
},

/**
 * Replace one shape with another
 */
replaceWithShape: function (shapeid, shape) {
    alert('replaceWithShape not implemented');
},

/**
 * Insert one shape after another in the render queue
 */
insertAfterShape: function (shapeid, shape) {
    alert('insertAfterShape not implemented');
},

/**
 * Remove a shape from the queue
 */
removeShapeId: function (shapeid) {
    alert('removeShapeId not implemented');
},

/**
 * Find a shape at the specified x/y co-ordinates
 */
getShapeAt: function (el, x, y) {
    alert('getShapeAt not implemented');
},

/**
 * Render all queued shapes onto the canvas
 */
render: function () {
    alert('render not implemented');
}

});