// DOM Ready
$(function () {
	// Image Sources
	var images = new Array();
		images[0] = 'images/scroll/01.jpg';
		images[1] = 'images/scroll/02.jpg';
		images[2] = 'images/scroll/03.jpg';
		images[3] = 'images/scroll/04.jpg';
		images[4] = 'images/scroll/05.jpg';
		images[5] = 'images/scroll/06.jpg';
		images[6] = 'images/scroll/07.jpg';
		images[7] = 'images/scroll/08.jpg';
		images[8] = 'images/scroll/09.jpg';
		images[9] = 'images/scroll/10.jpg';
		images[10] = 'images/scroll/11.jpg';
		images[11] = 'images/scroll/12.jpg';
		images[12] = 'images/scroll/13.jpg';
		images[13] = 'images/scroll/14.jpg';
		images[14] = 'images/scroll/15.jpg';
		images[15] = 'images/scroll/16.jpg';
		images[16] = 'images/scroll/17.jpg';
		images[17] = 'images/scroll/18.jpg';
		images[18] = 'images/scroll/19.jpg';
		images[19] = 'images/scroll/20.jpg';
		images[20] = 'images/scroll/21.jpg';
		images[21] = 'images/scroll/22.jpg';
		images[22] = 'images/scroll/23.jpg';
		images[23] = 'images/scroll/24.jpg';
		images[24] = 'images/scroll/25.jpg';
		images[25] = 'images/scroll/25.jpg';
		
	// images length
	var max = $(images).length;
	// at least 1 image exist
	if(max>0)
	{
	
		LoadImage(0,max);
	}

	// function of loading image
	// params: (int) index of image in array, (int) length of images array
	function LoadImage(index,max)
		{
			// if current index is lower then max element (max-1)
			if(index<max)
				{
					var curr = $("div.scrollableArea");
					// new image object
			        var img = new Image();
					// image onload
			        $(img).load(function () {
			            $(curr).append(this);
			            $(this).fadeIn('slow',function(){
								// once the current loaded, trigger the next image
								LoadImage(index+1,max);
							});
			        }).error(function () {
						// on error remove current
						$(curr).remove();
						// trigger the next image
						LoadImage(index+1,max);
			        }).attr('src', images[index]);
				}
		}

});