/*
 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 );