var PictureScroller = (function () {
    var self;

    function PictureScroller ($el) {
        self = this;

        self.$parent = $el.parent();
        self.$el = $el;
        self.$floatingContent = $el.find('.floating-content');
        self.$pictures = $el.find('.pic');
        self.$activePicture;
        self.$dots = self.$floatingContent.find('.dotstyle li');

        console.log(self.$dots);

        self.bind();
    }

    PictureScroller.prototype.bind = function() {
        self.$parent.waypoint(function(direction) {
            self.hitTop(direction);
        });

        self.$parent.waypoint(function(direction) {
            self.hitBottom(direction);
        }, {
          offset: function() {
            return -$(this).height() + $(self.$floatingContent).height() + 80;
          }
        });

        self.$pictures.waypoint(function(direction) {
            if(direction === 'down')
                self.hitPicture($(this));
        }, {
            offset: + $(self.$pictures[0]).height() / 2
        });

        self.$pictures.waypoint(function(direction) {
            if(direction === 'up')
                self.hitPicture($(this));
        }, {
            offset: - $(self.$pictures[0]).height() / 2
        });
    };

    PictureScroller.prototype.hitTop = function(direction) {
        console.log('hit top');
        if(direction === 'down')
            $(self.$floatingContent).addClass('js-fixed');

        if(direction === 'up')
            $(self.$floatingContent).removeClass('js-fixed');

    };

    PictureScroller.prototype.hitBottom = function(direction) {
        console.log('hit bottom');
        if(direction === 'down')
            $(self.$floatingContent).addClass('js-station-bottom').removeClass('js-fixed');

        if(direction === 'up')
            $(self.$floatingContent).removeClass('js-station-bottom').addClass('js-fixed');
    };

    PictureScroller.prototype.hitPicture = function(picture) {
        var currentPictureID = picture.attr('data-picture-id');

        if(self.$activePicture !== undefined)
            self.$activePicture.removeClass('js-ps-active');
        $('.dotstyle li.current').removeClass('current');
        $(self.$dots[currentPictureID]).addClass('current');

        self.$activePicture = $(picture);
        self.$activePicture.addClass('js-ps-active');
    };

    return PictureScroller;

}());