gistfile1.txt

(function ($)
{
    "use strict";
    var images = [];
    var columns = [];
    var collection;

    var Container_Drag = {
        $itemCollection:[],
        init: function ()
        {
            //console.debug(this.collection);
            this.$container = $("#container");
            this.$imageContainer = this.$container.children();
            var promise = this.$container.imagesLoaded();
            var self = this;

            promise.done(
                function ($images)
                {
                    console.log("images loaded");

                    self.constraints = {
                        maxOffset: 0,
                        minOffset: -1 * (self._getMaximumScrollWidth() - self.$container.width()),
                        leftStageBorder: 0,
                        rightStageBorder: self.$container.width()
                    };

                    self.constraints.stageWidth = self.constraints.rightStageBorder - self.constraints.leftStageBorder;

                    self._prepareImages();

                    self.hammer = self.$container.hammer({
                        drag:true,
                        drag_vertical:false,
                        drag_horizontal:true,
                        drag_min_distance:0,
                        transform:true,
                        tap:false,
                        tap_double:false,
                        hold:true,
                        swipe: false,
                        prevent_default:true
                    });

                    self._registerEventListeners();
                    self._scaleImages(0);
                    self.$imageContainer.css('visibility','visible');
                    self.$itemCollection =  self.$imageContainer.children().children('.item');
                }
            );
        },

        _getMaximumScrollWidth: function ()
        {
            var sum = 0;
            this.$container.find(".column").each(
                function (index, element)
                {
                    sum += $(element).outerWidth();
                }
            );

            return sum;
        },


        _prepareImages: function ()
        {
            for (var i = 0, l = images.length; i < l; i++)
            {
                var image = images[i];

                image.position = image.element.position();
                image.width = image.element.width();
                image.height = image.element.height();
            }
        },
        /**
         * @type {function}
         */
        $itemClickHandler:null,
        _registerEventListeners: function ()
        {
            this.hammer
                .on("dragstart", $.proxy(this._onDragStart, this))
                .on("dragend", $.proxy(this._onDragEnd, this))
                .on("drag", $.proxy(this._onDrag, this));


            var self = this;
            $("#animateMe").on("click",
                function ()
                {
                    self._animateScrollThrough(0);
                }
            );

            $("#findMe").on("click",
                function ()
                {
                    console.log(self._findLeftElement());
                }
            );

            this.$itemClickHandler = function(event,index){
                return self._prepareModal(self.$itemCollection.index(this));
            };

            this.$imageContainer.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend",
                function ()
                {
                    $(this).removeClass("animated");
                }
            ).on("click",'.item',this.$itemClickHandler);
        },


        /**
         *
         * @param x
         * @private
         */
        _animateScrollThrough: function (x)
        {
            if (x <= this.constraints.minOffset)
            {
                return;
            }

            this.$imageContainer.addClass("animated");
            this._moveContainerAndScale(x);

            var self = this;
            window.setTimeout(
                function ()
                {
                    self._animateScrollThrough(x - 25);
                },
                40
            );
        },

        /**
         *
         * @returns {jQuery}
         * @private
         */
        _findLeftElement: function ()
        {
            var imageOffsetContainer = this.$imageContainer.position().left;
            for (var i = 0, l = columns.length; i < l; i++)
            {
                var key = i+1; // we take the item because is more usability
                if(i < 2)
                {
                    key = i;
                }
                var column = columns[key];
                var leftOffset = column.element.position().left + column.element.width() + imageOffsetContainer;

                if (leftOffset >= 0)
                {
                    return column;
                }
            }

            return null;
        },


        _onDragStart: function ()
        {
            console.info('dragStart');
            this.$imageContainer.off('click','.item',this.$itemClickHandler);
            this.containerOffset = this.$imageContainer.position().left;
        },


        _onDragEnd: function ()
        {
            console.info('dragEnd');
            var self = this;
            var leftColumn = this._findLeftElement();
            this.$imageContainer.addClass("animated");
            this._moveContainer(-leftColumn.element.position().left);
            setTimeout(function(){
                self.$imageContainer.on('click','.item',self.$itemClickHandler);
            },500);

        },

        _onDrag: function (event)
        {
            var newX = this.containerOffset + event.distanceX;
            newX = Math.max(this.constraints.minOffset, newX);
            newX = Math.min(this.constraints.maxOffset, newX);

            this._moveContainerAndScale(newX);
        },

        _moveContainerAndScale: function (newX)
        {
            this._moveContainer(newX);
            this._scaleImages(newX);
        },


        _moveContainer: function (newX)
        {
            this.$imageContainer.css("left", newX);
        },


        _scaleImages: function (newX)
        {
            var leftBorder = this.constraints.leftStageBorder;
            var rightBorder = this.constraints.rightStageBorder;

            for (var i = 0, l = images.length; i < l; i++)
            {
                var image = images[i];
                var imageOffset = image.element.position().left + newX;

                if ((imageOffset <= leftBorder) || (imageOffset >= rightBorder))
                {
                    continue;
                }

                var factor = 1 - (imageOffset / this.constraints.stageWidth);
                var percentage = 0.5 + 0.5 * factor;

                image.element.css({
                    width:  percentage * image.width,
                    height: percentage * image.height
                });
            }
        },


        /**
         * Returns the screen-relative left offset
         * @param {Number} left
         * @returns {*}
         * @private
         */
        _getScreenRelativeOffset: function (left)
        {
            return left + this.$imageContainer.position().left;
        },

        /**
         * Here comes the modal
         */
        $modalOverlay: $('#modalOverlay'),
        $wrapModal: $('#ntryMoadlWrapper'),
        _prepareModal: function(index)
        {
            this._toggleModalOverlay();
            console.log(index);
        },

        /**
         *
         * @returns {boolean}
         * @private
         */
        _toggleModalOverlay:function()
        {
            if( this.$modalOverlay.hasClass('hidden') )
            {
                this.$modalOverlay.removeClass('hidden').addClass('animated');
            }else{
                this.$modalOverlay.addClass('hidden').removeClass('animated');
            }
            return true;
        },
        /**
         *
         * @returns {boolean}
         * @private
         */
        _toggleModalWrapper:function(){
            return true;
        }
    };


    /**
     * add th items to the timeLine
     * @param structure
     */
    function generateImages (structure)
    {
        var $container = $("#images-container");
        var collection = structure;
        var columnCounter = 0;

        for (var i = 0; i < collection.length; i++)
        {
            if(columnCounter === 0){
                var $wrap = $('<div class="column"></div>');
                var column = {
                    element: $wrap,
                    images: [],
                    index: i
                };
            }


            var image = {
                height: 0,
                width: 0
            };
            var $image = $('<div class="item"> <img src="'+structure[i].img+'" /></div>');

            $wrap.append($image);

            image.element = $image.children('img');
            images.push(image);
            column.images.push(image);

            if(columnCounter === 1){
                $container.append($wrap);
                columns.push(column);
                columnCounter = 0;
            }else{
                columnCounter++;
            }

        }
    }

    /**
     * app initial
     */
    $(
        function ()
        {
            generateImages(structure);
            Container_Drag.collection = structure;
            Container_Drag.init();
        }
    );


}(jQuery,structure));