/**
 * @private
 */
Ext.define('Ext.layout.card.fx.ScrollReveal', {
    extend: 'Ext.layout.card.fx.Scroll',
 
    alias: 'layout.card.fx.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.bodyElement;
 
            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() {
        if (!this.destroyed) {
            this.outItem.getTranslatable().getWrapper().dom.style.removeProperty('z-index'); // Remove this when we can remove translatable 
            this.currentEventController.resume();
        }
    }
});