(function($){
    /**
     * Event
     **/
    var IMAGEPRELOADER_LOADED = "IMAGEPRELOADER_LOADED";

    /**
     * @params targetDiv: jQuery Object, specifying where to put the loader.gif
     * @params urlArray: Array containing the urls to all the images
     * @params all: Boolean value. If set to true, imagePreloader will wait for all images to load before triggering the LOADED event.
     **/
    $.fn.imagePreloader = function(targetDiv, urlArray, all) {
        var scope = this;

        // makes the plugin to be chainable
        return this.each(function() {
            var i = 0;
            var l = urlArray.length;

            var img;
            var loaded = new Array()
            var imageArray = new Array();

            for(i; i<l; i++) {
                img = new Image();
                img.src = urlArray[i];

                img.onLoad = onImageLoaded(i, img, urlArray[i]);
                imageArray.push(img);
            }
            
            function onImageLoaded(id, img, iniSRC) {
                loaded.push([id, img.src, iniSRC]);

                if(!all)
                    scope.trigger(IMAGEPRELOADER_LOADED, [id, img.src, iniSRC]);
                else if(loaded.length == urlArray.length)
                    scope.trigger(IMAGEPRELOADER_LOADED, [loaded]);
            }
        });
    };
})(jQuery);