(function (factory) {
    if (typeof module === 'object' && typeof module.exports === 'object') {
        var v = factory(require, exports); if (v !== undefined) module.exports = v;
    }
    else if (typeof define === 'function' && define.amd) {
        define(["require", "exports", '@angular/core', '../content/content', '../../util/dom-controller', './img-loader', '../../util/util', '../../platform/platform'], factory);
    }
})(function (require, exports) {
    "use strict";
    var core_1 = require('@angular/core');
    var content_1 = require('../content/content');
    var dom_controller_1 = require('../../util/dom-controller');
    var img_loader_1 = require('./img-loader');
    var util_1 = require('../../util/util');
    var platform_1 = require('../../platform/platform');
    var Img = (function () {
        function Img(_ldr, _elementRef, _renderer, _platform, _zone, _content, _dom) {
            this._ldr = _ldr;
            this._elementRef = _elementRef;
            this._renderer = _renderer;
            this._platform = _platform;
            this._zone = _zone;
            this._content = _content;
            this._dom = _dom;
            this._cache = true;
            this._w = '';
            this._h = '';
            this._wQ = '';
            this._hQ = '';
            this.alt = '';
            if (!this._content) {
                console.warn("ion-img can only be used within an ion-content");
            }
            else {
                this._content.addImg(this);
            }
            this._isLoaded(false);
        }
        Object.defineProperty(Img.prototype, "src", {
            get: function () {
                return this._src;
            },
            set: function (newSrc) {
                if (newSrc !== this._src) {
                    this.reset();
                    this._src = newSrc;
                    this._tmpDataUri = null;
                    this.update();
                }
            },
            enumerable: true,
            configurable: true
        });
        Img.prototype.reset = function () {
            if (this._requestingSrc) {
                (void 0);
                this._ldr.abort(this._requestingSrc);
                this._requestingSrc = null;
            }
            if (this._renderedSrc) {
                (void 0);
                this._renderedSrc = null;
                this._isLoaded(false);
            }
        };
        Img.prototype.update = function () {
            var _this = this;
            if (this._src && this._content.isImgsUpdatable()) {
                if (this.canRequest && (this._src !== this._renderedSrc && this._src !== this._requestingSrc) && !this._tmpDataUri) {
                    (void 0);
                    this._requestingSrc = this._src;
                    this._cb = function (msg) {
                        _this._loadResponse(msg);
                    };
                    this._ldr.load(this._src, this._cache, this._cb);
                    this._setDims();
                }
                if (this.canRender && this._tmpDataUri && this._src !== this._renderedSrc) {
                    this._renderedSrc = this._src;
                    this._setDims();
                    this._dom.write(function () {
                        if (_this._tmpDataUri) {
                            (void 0);
                            _this._isLoaded(true);
                            _this._srcAttr(_this._tmpDataUri);
                            _this._tmpDataUri = null;
                        }
                    });
                }
            }
        };
        Img.prototype._loadResponse = function (msg) {
            var _this = this;
            this._requestingSrc = null;
            if (msg.status === 200) {
                this._tmpDataUri = msg.data;
                this.update();
            }
            else {
                console.error("img, status: " + msg.status + " " + msg.msg);
                this._renderedSrc = this._tmpDataUri = null;
                this._dom.write(function () {
                    _this._isLoaded(false);
                });
            }
        };
        Img.prototype._isLoaded = function (isLoaded) {
            var renderer = this._renderer;
            var ele = this._elementRef.nativeElement;
            renderer.setElementClass(ele, 'img-loaded', isLoaded);
            renderer.setElementClass(ele, 'img-unloaded', !isLoaded);
        };
        Img.prototype._srcAttr = function (srcAttr) {
            var imgEle = this._elementRef.nativeElement.firstChild;
            var renderer = this._renderer;
            renderer.setElementAttribute(imgEle, 'src', srcAttr);
            renderer.setElementAttribute(imgEle, 'alt', this.alt);
        };
        Object.defineProperty(Img.prototype, "top", {
            get: function () {
                var bounds = this._getBounds();
                return bounds && bounds.top || 0;
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(Img.prototype, "bottom", {
            get: function () {
                var bounds = this._getBounds();
                return bounds && bounds.bottom || 0;
            },
            enumerable: true,
            configurable: true
        });
        Img.prototype._getBounds = function () {
            if (this._bounds) {
                return this._bounds;
            }
            if (!this._rect) {
                this._rect = this._elementRef.nativeElement.getBoundingClientRect();
                (void 0);
            }
            return this._rect;
        };
        Object.defineProperty(Img.prototype, "bounds", {
            set: function (b) {
                if (util_1.isPresent(b)) {
                    this._bounds = b;
                }
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(Img.prototype, "cache", {
            get: function () {
                return this._cache;
            },
            set: function (val) {
                this._cache = util_1.isTrueProperty(val);
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(Img.prototype, "width", {
            set: function (val) {
                this._wQ = getUnitValue(val);
                this._setDims();
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(Img.prototype, "height", {
            set: function (val) {
                this._hQ = getUnitValue(val);
                this._setDims();
            },
            enumerable: true,
            configurable: true
        });
        Img.prototype._setDims = function () {
            var _this = this;
            if (this.canRender && (this._w !== this._wQ || this._h !== this._hQ)) {
                var wrapperEle = this._elementRef.nativeElement;
                var renderer = this._renderer;
                this._dom.write(function () {
                    if (_this._w !== _this._wQ) {
                        _this._w = _this._wQ;
                        renderer.setElementStyle(wrapperEle, 'width', _this._w);
                    }
                    if (_this._h !== _this._hQ) {
                        _this._h = _this._hQ;
                        renderer.setElementStyle(wrapperEle, 'height', _this._h);
                    }
                });
            }
        };
        Img.prototype.ngOnDestroy = function () {
            this._ldr.cancelLoad(this._cb);
            this._cb = null;
            this._content && this._content.removeImg(this);
        };
        Img.decorators = [
            { type: core_1.Component, args: [{
                        selector: 'ion-img',
                        template: '<img>',
                        changeDetection: core_1.ChangeDetectionStrategy.OnPush,
                        encapsulation: core_1.ViewEncapsulation.None,
                    },] },
        ];
        Img.ctorParameters = [
            { type: img_loader_1.ImgLoader, },
            { type: core_1.ElementRef, },
            { type: core_1.Renderer, },
            { type: platform_1.Platform, },
            { type: core_1.NgZone, },
            { type: content_1.Content, decorators: [{ type: core_1.Optional },] },
            { type: dom_controller_1.DomController, },
        ];
        Img.propDecorators = {
            'src': [{ type: core_1.Input },],
            'bounds': [{ type: core_1.Input },],
            'cache': [{ type: core_1.Input },],
            'width': [{ type: core_1.Input },],
            'height': [{ type: core_1.Input },],
            'alt': [{ type: core_1.Input },],
        };
        return Img;
    }());
    exports.Img = Img;
    function getUnitValue(val) {
        if (util_1.isPresent(val)) {
            if (typeof val === 'string') {
                if (val.indexOf('%') > -1 || val.indexOf('px') > -1) {
                    return val;
                }
                if (val.length) {
                    return val + 'px';
                }
            }
            else if (typeof val === 'number') {
                return val + 'px';
            }
        }
        return '';
    }
});
//# sourceMappingURL=img.js.map