# Source: ui/image-gallery.reel/image-gallery.js

    /*global require, exports, console, MontageElement */

    var Component = require("ui/component").Component;

    /**
     * ***Note***: ImageGallery should never be be hidden using `display: none`.
     * This will prevent it from displaying normally when `display: block` is
     * restored. Instead use `visibility: hidden`, `opacity: 0`, or a
     * [Substitution]{@link Substitution} to hide an ImageGallery when that's
     * necessary.
     *
     * @class ImageGallery
     * @extends Component
     */
    var ImageGallery = exports.ImageGallery = Component.specialize(/** @lends ImageGallery# */ {

        images: {
            get: function () {
                this._images = this._images || [];
                return this._images;
            },
            set: function (value) {
                if (value ? value !== this._images : this._images) {
                    this._images = value;
                    this.scroll = 0;
                }
            }
        },

        scroll: {
            get: function () {
                return this._flow ? this._flow.scroll : this._flowScroll;
            },
            set: function (value) {
                value = Number(value) || 0;
                if (!this._flow) {
                    this._flowScroll = value;
                } else if (value !== this._flow.scroll) {
                    this._flow.scroll = value;
                }
            }
        },

        _flowScroll: {
            get: function () {
                return this.__flowScroll || 0;
            },
            set: function (value) {
                value = Number(value) || 0;
                if (Math.round(value) !== this.currentImageIndex) {
                    this.dispatchBeforeOwnPropertyChange("scroll", this._flowScroll);
                    this.dispatchBeforeOwnPropertyChange("currentImageIndex", this.currentImageIndex);
                    this.__flowScroll = value;
                    this.dispatchOwnPropertyChange("currentImageIndex", this.currentImageIndex);
                    this.dispatchOwnPropertyChange("scroll", this._flowScroll);
                } else if (value ? value !== this.__flowScroll : this.__flowScroll) {
                    this.dispatchBeforeOwnPropertyChange("scroll", this._flowScroll);
                    this.__flowScroll = value;
                    this.dispatchOwnPropertyChange("scroll", this._flowScroll);
                }
            }
        },

        currentImageIndex: {
            get: function () {
                return Math.round(this._flowScroll);
            }
        },

        scrollToImageIndex: {
            value: function (index) {
                if (this._flow) {
                    this._flow.startScrollingIndexToOffset(index, 0);
                }
            }
        },

        handlePreviousAction: {
            value: function () {
                this.scrollToImageIndex(this.currentImageIndex - 1);

            }
        },

        handleNextAction: {
            value: function () {
                this.scrollToImageIndex(this.currentImageIndex + 1);
            }
        }

    });

    if (window.MontageElement) {
        MontageElement.define("montage-image-gallery", ImageGallery);
    }