/* ===================================================
 * jquery-lite-image-resize v.1.0.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, elementLength, i) {
        this.element = $(element);
        this.element.data('exists', true);
        this.elementLength = elementLength;
        this.index = i;
    };
    ResizeImg.prototype.resize = function(callback) {
        var $img = this.element.children('img').eq(0),
            elW = this.element.innerWidth(),
            elH = this.element.innerHeight(),
            elScale = elW/elH,
            ell = this.elementLength,
            index = this.index,
            image = document.createElement("img");
        image.src = $img.attr('src');
        this.element.css({
            'position': 'relative',
            'overflow': 'hidden',
        });
        function imageLoadComplete() {
            var imgW = image.width,
                imgH = image.height,
                imgScale = imgW/imgH,
                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
                };
            if(imgScale < 1) {
                if(elScale < 1) {
                    if(elScale > imgScale) {
                        $img.css(landscape);
                    } else {
                        $img.css(portrait);
                    };
                } else {
                   $img.css(landscape); 
                };
            };

            if(imgScale > 1) {
                if(elScale > 1) {
                    if(elScale > imgScale) {
                        $img.css(landscape);
                    } else {
                        $img.css(portrait);
                    };
                } else {
                    $img.css(portrait);
                };
            };

            if(imgScale == 1) {
                if(elScale < 1) {
                    $img.css(portrait);
                } else if(elScale > 1) {
                    $img.css(landscape);
                } else {
                    $img.css(center);
                };
            };
            $img.fadeTo(500, 1);
            
            if(index == ell && callback) {
                ResizeImg.prototype.callback(callback)
            }
        }
        if(/MSIE 8.0/g.test($ua)) {
            imageLoadComplete();
        } else {
            image.onload = imageLoadComplete;
        }
    };

    ResizeImg.prototype.callback = function(callback) {
        callback();
    };

    $.fn.rsImg = function (callback) {
        var elementLength = this.length - 1;
        this.each(function (i) {
            if(!$(this).data('exists')) {
                $(this).children("img").fadeTo(0,0);
                new ResizeImg(this, elementLength, i).resize(callback);
            };
        });
    };

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