/**
 * The overlay sprite used by the {@link Ext.chart.navigator.Navigator} component
 * to render the selected visible range or a chart's horizontal axis.
 */
Ext.define('Ext.chart.navigator.sprite.RangeMask', {
    extend: 'Ext.draw.sprite.Sprite',
    alias: 'sprite.rangemask',
 
    inheritableStatics: {
        def: {
            processors: {
                min: 'limited01',
                max: 'limited01',
                thumbOpacity: 'limited01'
            },
            defaults: {
                min: 0,
                max: 1,
 
                lineWidth: 2,
                miterLimit: 1,
                strokeStyle: '#787878',
                thumbOpacity: 1
            }
        }
    },
 
    getBBox: function (isWithoutTransform) {
        var me = this,
            attr = me.attr,
            bbox = attr.bbox;
 
        bbox.plain = {
            x: 0,
            y: 0,
            width: 1,
            height: 1
        };
 
        if (isWithoutTransform) {
            return bbox.plain;
        }
 
        return bbox.transform || (bbox.transform = attr.matrix.transformBBox(bbox.plain));
    },
 
    renderThumb: function (surface, ctx, x, y) {
        var me = this,
            shapeSprite = me.shapeSprite,
            textureSprite = me.textureSprite,
            thumbOpacity = me.attr.thumbOpacity,
            thumbAttributes = {
                opacity: thumbOpacity,
                translationX: x,
                translationY: y
            };
 
        if (!shapeSprite) {
            shapeSprite = me.shapeSprite = new Ext.draw.sprite.Rect({
                x: -9.5,
                y: -9.5,
                width: 19,
                height: 19,
                radius: 4,
                lineWidth: 1,
                fillStyle: {
                    type: 'linear',
                    degrees: 90,
                    stops: [
                        {
                            offset: 0,
                            color: '#EEE'
                        },
                        {
                            offset: 1,
                            color: '#FFF'
                        }
                    ]
                },
                strokeStyle: '#999'
            });
            textureSprite = me.textureSprite = new Ext.draw.sprite.Path({
                path: 'M -4, -5, -4, 5 M 0, -5, 0, 5 M 4, -5, 4, 5',
                strokeStyle: {
                    type: 'linear',
                    degrees: 90,
                    stops: [
                        {
                            offset: 0,
                            color: '#CCC'
                        },
                        {
                            offset: 1,
                            color: '#BBB'
                        }
                    ]
                },
                lineWidth: 2
            });
        }
 
        ctx.save();
 
        shapeSprite.setAttributes(thumbAttributes);
        shapeSprite.applyTransformations();
 
        textureSprite.setAttributes(thumbAttributes);
        textureSprite.applyTransformations();
 
        shapeSprite.useAttributes(ctx);
        shapeSprite.render(surface, ctx);
 
        textureSprite.useAttributes(ctx);
        textureSprite.render(surface, ctx);
 
        ctx.restore();
    },
 
    render: function (surface, ctx) {
        var me = this,
            attr = me.attr,
            matrix = attr.matrix.elements,
            sx = matrix[0],
            sy = matrix[3],
            tx = matrix[4],
            ty = matrix[5],
            min = attr.min,
            max = attr.max,
            // s_min and s_max are range values in screen coordinates (scaled and translated) 
            s_min = min * sx + tx,
            s_max = max * sx + tx,
            s_y = Math.round(.5 * sy + ty); // thumb position in screen coordinates (mid-height) 
 
        ctx.beginPath();
 
        // Rect that represents the whole range. 
        ctx.moveTo(tx, ty);
        ctx.lineTo(sx + tx, ty);
        ctx.lineTo(sx + tx, sy + ty);
        ctx.lineTo(tx, sy + ty);
        ctx.lineTo(tx, ty);
 
        // Rect that represents the visible range. 
        ctx.moveTo(s_min, ty);
        ctx.lineTo(s_min, sy + ty);
        ctx.lineTo(s_max, sy + ty);
        ctx.lineTo(s_max, ty);
        ctx.lineTo(s_min, ty);
 
        ctx.fillStroke(attr, true);
 
        me.renderThumb(surface, ctx, Math.round(s_min), s_y);
        me.renderThumb(surface, ctx, Math.round(s_max), s_y);
    }
});