/**
 * 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(0.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);
    }
});