(function ($) {
    $.fn.galleryFade = function () {
		var targetImage = $(this).css('backgroundImage').replace(/^url|[\(\)"']/g, '');
		//set index image's background image as background for parent div

		$('#indeximage').css('backgroundImage', 'url(' + targetImage + ')');
		//remove this images opacity
		$(this).animate({opacity: 0.0}, 5000, 'swing', 
			function(){
				//take indexImages background and set as source for image tag
				$(this).attr('src', $(this).css('backgroundImage').replace(/^url|[\(\)"']/g, ''));
				jQuery.get('?rt=page/getGalleryImageSrc&galleryId=' + $(this).attr('id'), function (data){
					$('img.fade').css('backgroundImage', 'url(' + data + ')');
				});
				//animate opacity in, this will look like delay, we need some break here to preload image
				$(this).animate({opacity: 1.0}, 5000, 'swing', function(){
						$('img.fade').galleryFade();						
				});
			});
    };
})(jQuery);
$(window).bind('load', function () {
  // run the cross fade plugin against selector
  $('img.fade').galleryFade();
});