/**
 * @private
 */
Ext.define('Ext.fx.layout.card.ScrollCover', {
    extend: 'Ext.fx.layout.card.Scroll',
 
    alias: 'fx.layout.card.scrollcover',
 
    onActiveItemChange: function(cardLayout, inItem, outItem, options, controller) {
        var containerElement, containerSize, xy, animConfig,
            inTranslate, outTranslate;
 
        this.lastController = controller;
        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()
            };
 
            inItem.renderElement.dom.style.setProperty('visibility', 'hidden', 'important');
            inTranslate = inItem.setTranslatable(true).getTranslatable();
            outTranslate = outItem.setTranslatable(true).getTranslatable();
 
            outTranslate.translate({ x: 0, y: 0});
//            outItem.setTranslate(null); 
            inTranslate.translate({ x: xy.left, y: xy.top});
            inTranslate.getWrapper().dom.style.setProperty('z-index', '100', 'important');
            inItem.show();
 
            inTranslate.on({
                animationstart: 'onInAnimationStart',
                animationend: 'onInAnimationEnd',
                scope: this
            });
            inTranslate.translateAnimated({ x: 0, y: 0}, animConfig);
 
            controller.pause();
        }
    },
 
    onInAnimationStart: function() {
        this.inItem.renderElement.dom.style.removeProperty('visibility');
    },
 
    onInAnimationEnd: function() {
        this.inItem.getTranslatable().getWrapper().dom.style.removeProperty('z-index'); // Remove this when we can remove translatable 
//        this.inItem.setTranslatable(null); 
        this.lastController.resume();
    }
});