/* ===================================================
 * jquery-lite-image-resize v.1.1
 * https://github.com/RayChang/jquery-lite-image-resize
 * ===================================================
 * How to use ?
 *
 * HTML element closest to the image to add class "resizeimg".
 *
 * Example:
 * <div class="resizeimg">
 *     <img src="images url" />
 * </div>
 *
 * Or you can use:
 * $('your class').rsImg();
 *
 * Note : HTML structure must be a structure like the example above.
 *
*/

!function ($) {

    "use strict";
    var ResizeImg = function(element) {
        var _oldW = [],
            _timer = 0,
            $self = this;
        $self.element = element;
        $self.element.data('exists', true);
        $self.element.css({
            'position': 'relative',
            'overflow': 'hidden',
        });
        $self.element.each(function(index, el) {
            _oldW.push($(el).innerWidth());
            $self.resize($(el), $(el).find('img').eq(0));
        });

        function windowResize() {
            clearTimeout(_timer);
            _timer = setTimeout(function() {
                $self.element.each(function(i, el) {
                    if(_oldW[i] != $(this).innerWidth()) {
                        _oldW[i] = $(this).innerWidth();
                        $self.resize($(el), $(el).find('img').eq(0));
                    }
                });
            }, 500);
        }
        window.onresize = windowResize;
    }
    ResizeImg.prototype.resize = function(element, img) {
        var _imgW, _imgH, _imgScale,
            _elW = element.innerWidth(),
            _elH = element.innerHeight(),
            _elScale = _elW/_elH,
            $image = document.createElement("img");

        img.removeAttr('style');
        $image.src = img.attr('src');
        $image.onload = function() {
            _imgW = $image.width,
            _imgH = $image.height,
            _imgScale = _imgW/_imgH;

            if(_imgScale < 1) {
                if(_elScale < 1) {
                    if(_elScale > _imgScale) {
                        img.css(scale().landscape);
                    } else {
                        img.css(scale().portrait);
                    };
                } else {
                   img.css(scale().landscape);
                };
            };

            if(_imgScale > 1) {
                if(_elScale > 1) {
                    if(_elScale > _imgScale) {
                        img.css(scale().landscape);
                    } else {
                        img.css(scale().portrait);
                    };
                } else {
                    img.css(scale().portrait);
                };
            };

            if(_imgScale == 1) {
                if(_elScale < 1) {
                    img.css(scale().portrait);
                } else if(_elScale > 1) {
                    img.css(scale().landscape);
                } else {
                    img.css(scale().center);
                };
            };
            img.fadeTo(500, 1);
        }

        function scale() {
            return {
                portrait: {
                    'position': 'absolute',
                    'height': '100%',
                    'width': 'auto',
                    'max-width': 'none',
                    'left': '50%',
                    'top': 0,
                    'margin-left': _imgW*(_elH/_imgH)/-2
                },
                landscape: {
                    'position': 'absolute',
                    'height': 'auto',
                    'max-height': 'none',
                    'width': '100%',
                    'left': 0,
                    'top': '50%',
                    'margin-top': _imgH*(_elW/_imgW)/-2
                },
                center: {
                    'position': 'absolute',
                    'height': '100%',
                    'width': '100%',
                    'top': 0,
                    'left': 0
                }
            }
        }
    }
    $.fn.rsImg = function () {
        var $this = $(this), resizeImg;
        if(!$this.data('exists')) {
            $this.find('img').fadeTo(1, 0);
            resizeImg = new ResizeImg($this);
        }
    };

    $(function() {
        $('.resizeimg').rsImg();
    });
}(window.jQuery);