/**
 * @private
 */
Ext.define('Ext.fx.layout.card.ScrollReveal', {
    extend: 'Ext.fx.layout.card.Scroll',

    alias: 'fx.layout.card.scrollreveal',

    onActiveItemChange: function(cardLayout, inItem, outItem, controller) {
        var containerElement, containerSize, xy, animConfig,
            outTranslate, inTranslate;

        this.currentEventController = controller;
        this.outItem = outItem;
        this.inItem = inItem;

        if (inItem && outItem) {
            containerElement = this.getLayout().container.innerElement;

            containerSize = containerElement.getSize();
            xy = this.calculateXY(containerSize);
            animConfig = {
                easing: this.getEasing(),
                duration: this.getDuration()
            };

            outTranslate = outItem.setTranslatable(true).getTranslatable();
            inTranslate = inItem.setTranslatable(true).getTranslatable();
            outTranslate.getWrapper().dom.style.setProperty('z-index', '100', 'important');
            outTranslate.translate({ x: 0, y: 0});
            inTranslate.translate({ x: 0, y: 0});

            inItem.show();

            outTranslate.on({
                animationend: 'onOutAnimationEnd',
                scope: this
            });

            outTranslate.translateAnimated({ x: xy.x, y: xy.y}, animConfig);

            controller.pause();
        }
    },

    onOutAnimationEnd: function() {
        this.outItem.getTranslatable().getWrapper().dom.style.removeProperty('z-index'); // Remove this when we can remove translatable
        this.currentEventController.resume();
    }
});
