function photoLoad(photo, photoClass, photoID, opacity) {
	var img = new Image();
  $(img).load(function () {
  	$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
		$('#'+photoID).removeClass('loading').append(this); // $('#loader').removeClass('loading').append(this);
    $(this).fadeTo('slow', opacity);
	}).error(function () {
		// notify the user that the image could not be loaded
	}).attr('src', photo).attr('class', photoClass);
}

function photoLoadOld(photo, photoClass, photoID, opacity) {
$(document).ready(function() { 
	var img = new Image();
  $(img).load(function () {
  	$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
		$('#'+photoID).removeClass('loading').append(this); // $('#loader').removeClass('loading').append(this);
    $(this).fadeTo('slow', opacity);
	}).error(function () {
		// notify the user that the image could not be loaded
	}).attr('src', photo).attr('class', photoClass);
});
}

function photoLoader (photos, photoUri, photoDivClass, photoClass) {
	var max = photos.length;
	if(max>0)
	{
		var ul = $('<div class="'+photoDivClass+'" id="'+photoDivClass+'"></div>');		// create the UL element
		$(ul).appendTo($('#'+photoDivClass));																					// append to div#wrapper
		LoadImage(0,max);																															// load the first image
	}

	function LoadImage(index,max) 	// function of loading image -- params: (int) index of image in array, (int) length of images array
	{
		if(index<max) // if current index is lower then max element (max-1)
		{
			var photoName = photos[index].substring(0,photos[index].indexOf('-thumb.jpg')).replace(/\\/g,'/').replace( /.*\//, '' );
			var list = $('<a href="'+photoUri+'" id="photo_'+index+'"></a>').attr('class','loading'); 	
			//var list = $('<a href="'+photoUri+photoName+'/" id="photo_'+index+'"></a>').attr('class','loading'); 			
			//var list = $('<a href="'+index+'/" id="photo_'+index+'"></a>').attr('class','loading');	// create the LI, add loading class	
			$('div#'+photoDivClass).append(list); 								// append to UL
			var curr = $("div#"+photoDivClass+" a#photo_"+index); // current LI
			var img = new Image(); 																// new image object
			$(img).load(function () { 														// image onload
				$(this).css('display','none'); 											// since .hide() failed in safari
				$(curr).removeClass('loading').append(this);
				$(this).fadeIn('slow',function(){
					LoadImage(index+1,max);														// once the current loaded, trigger the next image
				});
			}).error(function () {
				$(curr).remove();					// on error remove current
				LoadImage(index+1,max);		// trigger the next image
			}).attr('src', photos[index]).attr('class', photoClass);
		}
	}
}