// JavaScript Document
/*
	Jquery image loader
	webmaster@chazzuka.com
*/
$(function () {
	//@ my flicker link
	var flickr_set = 'http://www.flickr.com/photos/baliwebdesign/2802705514/';
	//@ id of div where the loading informations visible
	var _loadDivId = 'loadnote';
	//@ id of the ul container
	var _imgContainerId = 'container';
	//@ style of li loading (spinner image)
	var _imageLoadClassName = 'loading';
	//@ grab the images
	var images = $('ul#'+_imgContainerId+' li img');
	//@ image length
	var max = images.length;
	//@ remove them from DOM to prevent normal load
	$('ul#'+_imgContainerId+' li').remove();
	//@ loading div object
	var loadDiv = null;
	//@ start loading
	if(max>0){
		loadDiv = $('<div id="'+_loadDivId+'" style="display:none"></div>').appendTo($('body'));
		LoadImage(0,max);
	}
	//@ Loading Function Handler
	function LoadImage(index,max)
	{
		if(index<max)
		{
			// loading div update
			$('#'+_loadDivId).html("Loading "+(index+1)+" of "+max).fadeIn("fast");
			// add list to ul
			var list = $('<li id="_img'+index+'"></li>').attr('class',_imageLoadClassName).appendTo('ul#'+_imgContainerId);
			// new image object
			var img = new Image();
			// current image
			var curr = $("li#_img"+index);
			// load current image
			$(img).load(function ()
			{
				//@ hide it first + .hide() failed in safari
				$(this).css('display','none');
				//@ remove loading class from li and insert the image into it
				$(curr).removeClass(_imageLoadClassName).append(this);
				//@ optional wrap with link
				$(this).wrap('<a href="'+flickr_set+'"></a>');
				//@ fade it in
				$(this).fadeIn('slow',function()
				{
					if(index == (max-1)) 
						{ 
							//@ remove loading div after all images loaded
							$(loadDiv).remove(); 
						} 
					else 
						{		
						  //@ we are inform loading next item
						  $(loadDiv).html('Wait Loading Next Item ...');
						  //@ delay 2 secons and load next item *uses jquery timer plugin*
						  $(this).oneTime("2s", function() { LoadImage(index+1,max); });
						}
				});
			}).error(function () {
				//@ if loading error remove li
				$(curr).remove();
				//@ try to load next item
				LoadImage(index+1,max);
			}).attr('src', $(images[index]).attr('src'));	
		}
	}
});