CaffGeek/MBACNationals

(function( $, wp, _ ) {

    if ( ! wp || ! wp.customize ) { return; }
    var api = wp.customize;


    /**
     * wp.customize.HeaderTool.CurrentView
     *
     * Displays the currently selected header image, or a placeholder in lack
     * thereof.
     *
     * Instantiate with model wp.customize.HeaderTool.currentHeader.
     *
     * @constructor
     * @augments wp.Backbone.View
     */
    api.HeaderTool.CurrentView = wp.Backbone.View.extend({
        template: wp.template('header-current'),

        initialize: function() {
            this.listenTo(this.model, 'change', this.render);
            this.render();
        },

        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            this.setPlaceholder();
            this.setButtons();
            return this;
        },

        getHeight: function() {
            var image = this.$el.find('img'),
                saved, height, headerImageData;

            if (image.length) {
                this.$el.find('.inner').hide();
            } else {
                this.$el.find('.inner').show();
                return 40;
            }

            saved = this.model.get('savedHeight');
            height = image.height() || saved;

            // happens at ready
            if (!height) {
                headerImageData = api.get().header_image_data;

                if (headerImageData && headerImageData.width && headerImageData.height) {
                    // hardcoded container width
                    height = 260 / headerImageData.width * headerImageData.height;
                }
                else {
                    // fallback for when no image is set
                    height = 40;
                }
            }

            return height;
        },

        setPlaceholder: function(_height) {
            var height = _height || this.getHeight();
            this.model.set('savedHeight', height);
            this.$el
                .add(this.$el.find('.placeholder'))
                .height(height);
        },

        setButtons: function() {
            var elements = $('.actions .remove');
            if (this.model.get('choice')) {
                elements.show();
            } else {
                elements.hide();
            }
        }
    });


    /**
     * wp.customize.HeaderTool.ChoiceView
     *
     * Represents a choosable header image, be it user-uploaded,
     * theme-suggested or a special Randomize choice.
     *
     * Takes a wp.customize.HeaderTool.ImageModel.
     *
     * Manually changes model wp.customize.HeaderTool.currentHeader via the
     * `select` method.
     *
     * @constructor
     * @augments wp.Backbone.View
     */
    api.HeaderTool.ChoiceView = wp.Backbone.View.extend({
        template: wp.template('header-choice'),

        className: 'header-view',

        events: {
            'click .choice,.random': 'select',
            'click .close': 'removeImage'
        },

        initialize: function() {
            var properties = [
                this.model.get('header').url,
                this.model.get('choice')
            ];

            this.listenTo(this.model, 'change:selected', this.toggleSelected);

            if (_.contains(properties, api.get().header_image)) {
                api.HeaderTool.currentHeader.set(this.extendedModel());
            }
        },

        render: function() {
            this.$el.html(this.template(this.extendedModel()));

            this.toggleSelected();
            return this;
        },

        toggleSelected: function() {
            this.$el.toggleClass('selected', this.model.get('selected'));
        },

        extendedModel: function() {
            var c = this.model.get('collection');
            return _.extend(this.model.toJSON(), {
                type: c.type
            });
        },

        getHeight: api.HeaderTool.CurrentView.prototype.getHeight,

        setPlaceholder: api.HeaderTool.CurrentView.prototype.setPlaceholder,

        select: function() {
            this.preventJump();
            this.model.save();
            api.HeaderTool.currentHeader.set(this.extendedModel());
        },

        preventJump: function() {
            var container = $('.wp-full-overlay-sidebar-content'),
                scroll = container.scrollTop();

            _.defer(function() {
                container.scrollTop(scroll);
            });
        },

        removeImage: function(e) {
            e.stopPropagation();
            this.model.destroy();
            this.remove();
        }
    });


    /**
     * wp.customize.HeaderTool.ChoiceListView
     *
     * A container for ChoiceViews. These choices should be of one same type:
     * user-uploaded headers or theme-defined ones.
     *
     * Takes a wp.customize.HeaderTool.ChoiceList.
     *
     * @constructor
     * @augments wp.Backbone.View
     */
    api.HeaderTool.ChoiceListView = wp.Backbone.View.extend({
        initialize: function() {
            this.listenTo(this.collection, 'add', this.addOne);
            this.listenTo(this.collection, 'remove', this.render);
            this.listenTo(this.collection, 'sort', this.render);
            this.listenTo(this.collection, 'change', this.toggleList);
            this.render();
        },

        render: function() {
            this.$el.empty();
            this.collection.each(this.addOne, this);
            this.toggleList();
        },

        addOne: function(choice) {
            var view;
            choice.set({ collection: this.collection });
            view = new api.HeaderTool.ChoiceView({ model: choice });
            this.$el.append(view.render().el);
        },

        toggleList: function() {
            var title = this.$el.parents().prev('.customize-control-title'),
                randomButton = this.$el.find('.random').parent();
            if (this.collection.shouldHideTitle()) {
                title.add(randomButton).hide();
            } else {
                title.add(randomButton).show();
            }
        }
    });


    /**
     * wp.customize.HeaderTool.CombinedList
     *
     * Aggregates wp.customize.HeaderTool.ChoiceList collections (or any
     * Backbone object, really) and acts as a bus to feed them events.
     *
     * @constructor
     * @augments wp.Backbone.View
     */
    api.HeaderTool.CombinedList = wp.Backbone.View.extend({
        initialize: function(collections) {
            this.collections = collections;
            this.on('all', this.propagate, this);
        },
        propagate: function(event, arg) {
            _.each(this.collections, function(collection) {
                collection.trigger(event, arg);
            });
        }
    });

})( jQuery, window.wp, _ );