gistfile1.js

(function ($,bespoke,twm) {
    "use strict";

    var CoverflowDatenblatt = {
        $_coverflowHolder:'',
        $_coverflows:[],
        $_debug: true,
        $_theme: 'coverflow',
        $_decks:[],
        init: function () {
            this._setCoverflowHolder();
        },
        /**
         * need later if > IE10 because has no transition
         * @private
         */
        _setTheme:function(){
            if($('html').hasClass('lt-ie10'))
                this.$_theme = 'classic';

            //this.$_coverflowHolder.addClass(this.$_theme);
        },
        /**
         * @private
         */
        _setCoverflowHolder:function()
        {
            this.$_coverflowHolder  = $('#bierDatenblattHolder');
            //this._setTheme();
            this._getCoverflowsContainer();
        },
        /**
         * @private
         */
        _getCoverflowsContainer:function()
        {
            var self = this;
            this.$_coverflowHolder.children('div.teaser').each(function(index){
                self.$_coverflows.push(index);
                self._initCoverFlow(index)
            });

            if(this.$_debug)
                this._debug();
        },
        /**
         *
         * @private
         */
        _debug:function(){
            console.log('$_coverflowHolder : ',this.$_coverflowHolder);
            console.log('$_coverflows : ',this.$_coverflows);
            console.log('key',this.$_decks);
        },

        /**
         * add bespoke to teaserElement
         * @param element
         * @returns {boolean}
         * @private
         */
        _initCoverFlow:function(element){
            var self = this;
            var coveridentifier = 'c'+(element+1);
            //bottles load
            var promiseImages = $(coveridentifier).imagesLoaded();
            
            //bottles onLoadReady
            promiseImages.done(function(){
                //initialize bespoke
                var myCustomdeck = 'my_deck'+element;

                myCustomdeck = bespoke.horizontal.from(
                    '#'+coveridentifier,
                    {
                        loop:true
                    }
                );

                self.$_decks.push(myCustomdeck);
                var startSlide =  Math.ceil(self.$_decks[element].slides.length/2);
                self.$_decks[element].slide(startSlide);
                self._addSlideFunction(element);
                self._setOffsetContent(element,startSlide+1);
                return true;
            });
        },

        /**
         * add event to the navigate arrow pro deck
         * @param element
         * @private
         */
        _addSlideFunction:function(element){
            var self = this;
            var prev =$('.prev');
            var next = $('.next');

            $(prev[element]).on('click',function(){
                self.$_decks[element].prev();
            });

            $(next[element]).on('click',function(){
                self.$_decks[element].next();
            });

            self.$_decks[element].on('next', function(e) {
                console.log('Activated slide ' + (e.index) + ' of '+self.$_decks[element].slides.length);
                self._setOffsetContent(element, e.index);
            });

            self.$_decks[element].on('prev', function(e) {
                console.log('Activated slide ' + (e.index) + ' of '+self.$_decks[element].slides.length);
                self._setOffsetContent(element, e.index);
            });
        },

        _setOffsetContent:function(deckIndex,index){

            var cont = $('.coverflowdatenblatt')[deckIndex];
            var contChild = $(cont).children('.content');
            var contChildIndex = $(contChild)[index];
            var offLeft =  -1*( ( $(contChildIndex).offset().left-$(cont).offset().left ) );
            twm.to($(cont),1.1,{left:offLeft});
        }
    };
    /**
     * Initializes the component
     */
    $(
        function () {
            if($('#bierDatenblattHolder').length > 0)
                if($('html').hasClass('lt-ie10'))
                    console.info(' iam Old');
                else
                    CoverflowDatenblatt.init();
        }
    );
}(jQuery,bespoke,TweenMax));