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

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

/**
 * @class ImageGalleryItem
 * @extends Component
 */
exports.ImageGalleryItem = Component.specialize(/** @lends ImageGalleryItem# */ {

    enterDocument: {
        value: function () {
            this._image.addEventListener("load", this, false);
            this._image.addEventListener("error", this, false);
        }
    },

    _src: {
        value: null
    },

    _needsUpdateStatus: {
        value: false
    },

    __status: {
        value: null
    },

    _status: {
        get: function () {
            return this.__status;
        },
        set: function (value) {
            if (this.__status !== value) {
                this.__status = value;
                this._needsUpdateStatus = true;
                this.needsDraw = true;
            }
        }
    },

    handleLoad: {
        value: function (event) {
            clearTimeout(this._loaderTimeout);
            this._status = null;
            event.target.removeEventListener("load",this,false);
            event.target.removeEventListener("error",this,false);
        }
    },

    handleError: {
        value: function (event) {
            clearTimeout(this._loaderTimeout);
            this._status = "error";
            event.target.removeEventListener("load",this,false);
            event.target.removeEventListener("error",this,false);
       }
    },

    _needsUpdateSource: {
        value: false
    },

    src: {
        set: function (value) {
            if (value) {
                var image;

                if (this._src !== value) {
                    this._src = value;
                    this._needsUpdateSource = true;
                    this._status = null;
                    this.needsDraw = true;
                }
            }
        }
    },

    _loaderTimeout: {
        value: null
    },

    draw: {
        value: function () {
            var self;

            if (this._needsUpdateStatus) {
                this._needsUpdateStatus = false;
                switch (this.__status) {
                    case "loading":
                        this.loadingElement.style.display = "block";
                        this.errorElement.style.display = "none";
                        break;
                    case "error":
                        this.loadingElement.style.display = "none";
                        this.errorElement.style.display = "block";
                        break;
                    default:
                        this.loadingElement.style.display = "none";
                        this.errorElement.style.display = "none";
                }
            }
            if (this._needsUpdateSource) {
                this._needsUpdateSource = false;
                this._image.src = this._src;
                clearTimeout(this._loaderTimeout);
                self = this;
                this._loaderTimeout = setTimeout(function () {
                    self._status = "loading";
                }, 200);
                this._element.style.backgroundImage = "url(" + this._src + ")";
            }
        }
    }

});