/**
 * @class Ext.chart.grid.VerticalGrid3D
 * @extends Ext.chart.grid.VerticalGrid
 * 
 * Vertical 3D Grid sprite. Used in 3D Cartesian Charts.
 */
Ext.define('Ext.chart.grid.VerticalGrid3D', {
    extend: 'Ext.chart.grid.VerticalGrid',
    alias: 'grid.vertical3d',

    inheritableStatics: {
        def: {
            processors: {
                depth: 'number'
            },

            defaults: {
                depth: 0
            }
        }
    },

    render: function(surface, ctx, clipRect) {
        var attr = this.attr,
            x = surface.roundPixel(attr.x),
            dy = surface.matrix.getDY(),
            halfLineWidth = ctx.lineWidth * 0.5,
            width = attr.width,
            depth = attr.depth,
            left, top;

        if (x >= clipRect[2]) {
            return;
        }

        // Vertical stripe.

        left = x - halfLineWidth + depth;
        top = clipRect[1] - depth - dy;

        ctx.beginPath();
        ctx.rect(left, top, width, clipRect[3]);
        ctx.fill();

        // Vertical line.

        ctx.beginPath();
        ctx.moveTo(left, top);
        ctx.lineTo(left, top + clipRect[3]);
        ctx.stroke();

        // Diagonal stripe.

        left = x - halfLineWidth;
        top = clipRect[3];

        ctx.beginPath();
        ctx.moveTo(left, top);
        ctx.lineTo(left + depth, top - depth);
        ctx.lineTo(left + depth + width, top - depth);
        ctx.lineTo(left + width, top);
        ctx.closePath();
        ctx.fill();

        // Diagonal line.

        left = x - halfLineWidth;
        top = clipRect[3];

        ctx.beginPath();
        ctx.moveTo(left, top);
        ctx.lineTo(left + depth, top - depth);
        ctx.stroke();
    }
});