Ext.define('KitchenSink.view.charts.column.RendererController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.column-renderer',

    onRefresh: function () {
        var chart = this.lookupReference('chart'),
            store = chart.getStore();

        store.setData(store.generateData(7));
    },

    onG1SeriesRender: function (sprite, config, rendererData, index) {
        var store = rendererData.store,
            storeItems = store.getData().items,
            record = storeItems[index],
            last = storeItems.length - 1,
            surface = sprite.getSurface(),
            isRtl = surface.getInherited().rtl,
            changes = {},
            lineSprites, firstColumnConfig, firstData, lastData, growth, string;
        if (!record) {
            return;
        }
        // Make the first and last columns larger and painted blue.
        if (index == 0 || index == last) {
            changes.fillStyle = 'powderblue';
            changes.x = config.x - config.width * 0.4;
            changes.y = config.y;
            changes.width = config.width * 1.8;
            changes.lineWidth = 4;
            // Draw a line between the first and last columns
            lineSprites = surface.myLineSprites;
            if (!lineSprites) {
                lineSprites = surface.myLineSprites = [];
                lineSprites[0] = surface.add({type:'path'});
                lineSprites[1] = surface.add({type:'text'});
            }
            if (index == 0) {
                surface.myFirstColumnConfig = Ext.clone(changes);
            } else if (index == last) {
                firstData = storeItems[0].data['g1'];
                lastData = storeItems[last].data['g1'];

                firstColumnConfig = surface.myFirstColumnConfig;
                var x1 = firstColumnConfig.x + firstColumnConfig.width,
                    y1 = firstColumnConfig.y,
                    x2 = changes.x,
                    y2 = changes.y;

                growth = Math.round(100 * (lastData - firstData) / (firstData || 1));
                lineSprites[0].setAttributes({
                    lineWidth: 1,
                    strokeStyle: growth > 0 ? '#61C102' : '#FF4D35',
                    zIndex: 10000,
                    opacity: 0.7,
                    path: "M" + x2 + " " + y2 + " L" + x1 + " " + y1 + " L" + x2 + " " + y1 + (lastData < firstData ? " L" : " M") + x2 + " " + y2 + " Z"
                });
                string = (growth > 0 ? "+ " : "- ") + Math.abs(growth) + " %";
                lineSprites[1].setAttributes({
                    text: string,
                    x: changes.x + (isRtl ? 12 : -12),
                    y: firstColumnConfig.y + (changes.y - firstColumnConfig.y)/2 + 10,
                    fillStyle: growth > 0 ? '#61C102' : '#FF4D35',
                    fontSize: 20,
                    zIndex: 10000,
                    opacity: 0.6,
                    scalingY: -1,
                    textAlign: 'center',
                    rotate: -90
                });
            }
        } else {
            changes.fillStyle = 'lightgray';
            changes.lineWidth = 2;
        }
        return changes;
    },

    onG2SeriesRender: function (sprite, config, rendererData, index) {
        var store = rendererData.store,
            storeItems = store.getData().items,
            last = storeItems.length - 1,
            record = storeItems[index],
            diff = record && Math.round(record.data['g2'] - record.data['g1']),
            changes = {},
            surface = sprite.getSurface(),
            isRtl = surface.getInherited().rtl,
            textSprites, textSprite, rectSprite;
        if (!record) {
            return;
        }
        // This renderer function draws a red label if series #2 is greater than series #1.
        // The label displays the difference between the values of series #1 and series #2.
        //
        // Note: The two renderer functions in this test case cannot be consolidated. The red labels
        // are rendered here because they are positioned relatively to the series #2 columns.
        if (diff > 0) {
            changes.strokeStyle = 'tomato';
            changes.fillStyle = 'mistyrose';
            changes.opacity = 1.0;

            textSprites = surface.myTextSprites;
            if (!textSprites) {
                textSprites = surface.myTextSprites = [];
            }
            textSprite = textSprites[index];
            if (!textSprite) {
                textSprite = textSprites[index] = surface.add({type:'text'});
                rectSprite = textSprite.rectSprite = surface.add({type:'rect'});
            } else {
                rectSprite = textSprite.rectSprite;
                textSprite.show();
                rectSprite.show();
            }

            rectSprite.setAttributes({
                x: config.x + (index == last ? -17 : (isRtl ? -50 : 16)),
                y: config.y - 36,
                width: 30 + (diff >= 10 ? (diff >= 100 ? (diff >= 1000 ? 18 : 12) : 6) : 0),
                height: 18,
                stroke: 'tomato',
                fill: 'mistyrose',
                lineWidth: 1,
                radius: 4,
                zIndex: 10000
            });

            textSprite.setAttributes({
                text: "+ " + diff,
                x: config.x + (index == last ? -11 : (isRtl ? -46 : 20)),
                y: config.y - 23,
                fill: 'red',
                fontSize: 12,
                zIndex: 10001,
                scalingY: -1
            });
        } else {
            changes.strokeStyle = 'dodgerblue';
            changes.fillStyle = 'palegreen';
            changes.opacity = 0.6;

            textSprites = surface.myTextSprites;
            if (textSprites) {
                textSprite = textSprites[index];
                if (textSprite) {
                    textSprite.rectSprite.hide();
                    textSprite.hide();
                }
            }
        }
        return changes;
    },

    onAfterRender: function () {
        this.onRefresh();
    }

});