$.fn.imageLoader = function(imgurl, options, complateFunc){
    return this.each(function(){
        var el = this, $el = $(this);
        el.imgurl = imgurl;
        el.opts = $.extend({}, $.fn.imageLoader.defaults, options);
		
        if(typeof(el.thumbdiv) == 'undefined' || el.thumbdiv == null) {
        	el.thumbdiv = $('<div style="overflow:hidden;left:0px;top:0px;position:absolute;display:hidden" />').appendTo($el);
        }
        
        if (el.opts.altThumb != null) {
            el.thumbdiv.css({
            	width: "0px",
            	height: "0px",
                opacity: 0
            });

            $.fn.imageLoader.imagePreloader(null, el.opts.altThumb, function(img_url, img, imgw, imgh){
                var rw = imgw * el.opts.thumbScaleRate;
                var rh = imgh * el.opts.thumbScaleRate;
               
	            if (typeof(el.opts.onResize) != 'undefined') {
		        	el.opts.onResize(rw, rh);
		        }
		        
            	el.thumbdiv.css({
            		width: rw + "px",
        	    	height: rh + "px",
        	    	display: "block",
    	            opacity: 1
	            });

	            if(typeof(el.thumbimg) != 'undefined' && el.thumbimg != null) {
    	            el.thumbimg.remove();
    	            el.thumbimg = null;
	            }

                el.thumbimg = $("<img src='" + img.src + "' width=" + rw + " height=" + rh + " style='left:0px;top:0px;position:absolute;'>").appendTo(el.thumbdiv);
                el.thumbimg.css({
                    opacity: 1
                });

		        $.fn.imageLoader.imagePreloader($el, imgurl, function(img_url, $img, width, height){
		        	if(el.imgurl == img_url)
		        	{
		        		if (typeof(el.thumbimg) != 'undefined' && el.thumbimg != null ) {
			            	el.thumbimg.fadeOut('slow', function(){
					            if (typeof(el.thumbimg) != 'undefined' && el.thumbimg != null ) {
			    	            	el.thumbimg.remove();
		    		            	el.thumbimg = null;
					            }
			            		if (typeof(el.thumbdiv) != 'undefined' && el.thumbdiv != null ) {
		    	        			el.thumbdiv.remove();
		   	            			el.thumbdiv = null;
		   	            		}
		            			if (typeof(complateFunc) != 'undefined') {
		                			complateFunc($img, width, height);
		            			}
		    	            });
		    	      	}
		    	    }
		        });
            });
    	}
        if (el.opts.altLoadingImage) {
            $.fn.imageLoader.imagePreloader(el.loading, el.opts.altLoadingImage, function(img, imgw, imgh){
                el.loading.css({
                    width: imgw * el.opts.thumbScaleRate + 'px',
                    height: imgh * el.opts.thumbScaleRate + 'px',
                    opacity: 1
                });
            });
        }
    });
};

$.fn.imageLoader.imagePreloader = function($el, imgurl, complateFunc){
    var $img = new Image();
    $img.onload = function(){
        $img.onload = null;
        if (typeof(complateFunc) != 'undefined') {
            complateFunc(imgurl, $img, $img.width, $img.height);
        }
        if ($el != null) {
            bg = 'url(' + imgurl + ')';
            $el.css({
                width: $img.width + 'px',
                height: $img.height + 'px',
                backgroundImage: bg
            });
        }
    };
    $img.src = imgurl;
};

$.fn.imageLoader.optionsDefault = {
    thumbScaleRate: 1,
    altThumb: null,
    altLoadingImage: null,
    altText: 'Loading...'
};