if ( typeof Fractal === 'undefined' ) throw "Fractal core.js not loaded";

Fractal.ComponentList = (function($){

    // TODO: Split pagination into a seperate component.

    var ComponentList = function( el ){
        this.el = el;
        this.variants = $(this.el.find('#component-previews').html()).filter('.Variant');
        this.container = this.el.find('.ComponentList-content');
        this.perPage = 10;
        this.currentPage = 0;
        this.pageCount = 0;
        this.pagination = this.el.find('.Pagination');
        this.paginationCurrent = this.el.find('.Pagination-currentPage');
        this.paginationTotal = this.el.find('.Pagination-totalPages');
        this.paginationPrev = this.el.find('.Pagination-prev');
        this.paginationNext = this.el.find('.Pagination-next');
    };

    ComponentList.prototype = {

        init: function(){
            this.pagination.hide();
            this.pageCount = Math.ceil(this.variants.length / this.perPage);
            if (this.pageCount > 1) {
                this.initPagination();
            }
            this.loadPage(0);
        },

        loadPage: function(pageNumber){
            var self = this;
            this.currentPage = pageNumber;
            this.container.empty().append(this.variants.filter(function(i){
                return (i >= self.getStartPos() && i < self.getEndPos());
            }));
            this.container.find('iframe').each(function(i, iframe){
                var iframe = $(iframe);
                var preview = iframe.closest('.ComponentPreview');
                iframe.iFrameResize({
                    log: false,
                    initCallback: function(){
                        preview.addClass('is-ready');
                    }
                });
                setTimeout(function(){
                    preview.addClass('is-ready');
                }, 2000);
            });
            this.paginationCurrent.text(this.currentPage + 1);
            if (this.currentPage === 0) {
                this.pagination.addClass('on-first');
            } else {
                this.pagination.removeClass('on-first');
            }
            if (this.currentPage === this.pageCount -1) {
                this.pagination.addClass('on-last');
            } else {
                this.pagination.removeClass('on-last');
            }
        },

        getStartPos: function(){
            return (this.currentPage * this.perPage);
        },

        getEndPos: function(){
            return (this.currentPage * this.perPage) + this.perPage;
        },

        initPagination: function(){
            var self = this;
            this.paginationCurrent.text(this.currentPage + 1);
            this.paginationTotal.text(this.pageCount);
            this.paginationPrev.on('click', function(){
                if (self.currentPage - 1 >= 0) {
                    self.loadPage(self.currentPage - 1);
                }
                return false;
            });
            this.paginationNext.on('click', function(){
                if (self.currentPage + 1 < self.pageCount) {
                    self.loadPage(self.currentPage + 1);
                }
                return false;
            });
            this.pagination.show();
        }

    };

    return ComponentList;

})(jQuery, window);
