/*
 imagemonitor v1.0
 author: Restituto P. Rizal
 
 exmple:
 
$(document).ready(function()
{
	$('img').imagemonitor(
	{
		'init' : function()
		{
			// call when this plugin start execute
		},
		'onLoad' : function(loadedImage, totalImage)
		{
			// call every single image loaded
			// loadedImage: number of how many image/images are loaded
			// the total number of image/images loaded or not
		},
		'onComplete' : function(loadedImage)
		{
			// call when all image is loaded
			// loadedImage: number of how many image/images are loaded
		}
	});
});


*/
(function( $ ){
    $.fn.imagemonitor = function(imageEvent) 
    {
        var totalImage = 0;
        var loadedImage = 0;
        var loadedImageSrc = Array();
        var imageObject = Array();
        var isComplete = false;
        var loop_delay = 200; // in miliseconds
        var imgElement = this;
        if(imageEvent.init == null) imageEvent.init = function(){};
        if(imageEvent.onLoad == null) imageEvent.onLoad = function(){};
        if(imageEvent.onComplete == null) imageEvent.onComplete = function(){};
        function createImageObject()
        {
            imgElement.each(function(index)
            {
                imageObject[index] = new Image();
                $(imageObject[index]).attr('src', $(this).attr('src'));
            });
        }
        function count_loaded_image()
        {
            for(var i=0; imageObject[i]; i++)
            {
                if(!checkIfLoaded($(imageObject[i]).attr('src')))
                {
                    if(imageObject[i].complete || imageObject[i].readyState === 4) 
                    {
                        loadedImageSrc.push($(imageObject[i]).attr('src'));
                        loadedImage++;
                        imageEvent.onLoad(loadedImage, totalImage);
                    }
                }
            }
            if((loadedImage == totalImage) && !isComplete) 
            {
                isComplete = true;
                imageEvent.onComplete(loadedImage);
            }
            else setTimeout(count_loaded_image, loop_delay);
		
        }
        function getTotalImage()
        {
            var tempImageSrc = Array();
            imgElement.each(function(index)
            {
                var counted = false;
                for(i=0; tempImageSrc[i]; i++)
                {
                    if(tempImageSrc[i] == $(this).attr('src')) counted = true;
                }
                if(!counted) tempImageSrc.push($(this).attr('src'))
            });
            return tempImageSrc.length;
        }
        function checkIfLoaded(src)
        {
            var loaded = false;
            for(var i=0; loadedImageSrc[i]; i++)
            {
                if(loadedImageSrc[i] == src) loaded = true;
            }
            return loaded;
        }
        function setOnloadEvent()
        {
            imgElement.each(function(index)
            {
                $(this).load(function()
                {
                    if(!checkIfLoaded($(this).attr('src')))
                    {
                        loadedImage++;
                        loadedImageSrc.push($(this).attr('src'));
                        imageEvent.onLoad(loadedImage, totalImage);
                        if((loadedImage == totalImage) && !isComplete) 
                        {
                            isComplete = true;
                            imageEvent.onComplete(loadedImage);
                        }
                    }
                });	
            });
        }
        imageEvent.init();
        totalImage = getTotalImage();
        createImageObject();
        setOnloadEvent();
        count_loaded_image();
    };
})( jQuery );