$.fn.loadImages = function(target) {
	// Image Sources
		
	var $divTarget= target;
	
	// control var to initialize slider. it's set to true once the first image is loaded...
	// ...and the slider is called
	var slideInit = false;
	
	// no need to continue if images have been already loaded
	if ( verifyIfDone($divTarget) > 0 )
	{
		//
		return;	
	}else
	{
	
	  // get the images from the span with the class .theImages. they are entered as comma separated urls
	  imagesString = $divTarget.has(".theImages").text();
	  
	  // creates an arra out of the string
	  imagesAndCaption = imagesString.split('*');

		
	  var images = new Array();
	  var caption = new Array();
	
 	
	  for (i=0; i<imagesAndCaption.length; i++)
	  {
		  tempArray = imagesAndCaption[i].split("~");
		  
		  if ( tempArray[1] == undefined ) tempArray[1] = ''
		  
		  images[i] = tempArray[0];
		  caption[i] = tempArray[1];
	  }

	  //alert (images.length);
	  
	  //var images = ImageArray;	
	  // images length
	  var max = $(images).length;
	  // at least 1 image exist
	  if( max>0 )
	  {
		  // create the UL element
		  var ul = $('<div id="slideshow"><ul id="portfolio"> </ul></div>');
		  // append to div#wrapper
		  $(ul).appendTo($($divTarget));
		  
		  // the new target is the newly  appended ul.
		  $newTarget = $($divTarget).find("#portfolio");
		  
		  // load the first image
		  LoadImage(0, max, $newTarget);
		  
		  // adds the invisible button on top
		  var invisibleBtn = $("<div class='invisibleItem'></div>");
		  $(invisibleBtn).appendTo($($divTarget));
	  }
	}

	// function of loading image
	// params: (int) index of image in array, (int) length of images array
	function LoadImage(index, max, $theTarget)
	{
		var $ulTarget = $theTarget;	

		// if current index is lower then max element (max-1)
		
		if ( index < max && !$($ulTarget).hasClass('done') )
		{
						
			// create the LI, add loading class
			var list = $('<li id="portfolio_'+index+'"></li>').attr('class','loading');
			// append to UL
			$($ulTarget).append(list);
			// current LI
			var curr = $($ulTarget).find("li#portfolio_"+index);
			// new image object
			var img = new Image();
			// image onload
			$(img).load(function () {
				$(this).css('display','none'); // since .hide() failed in safari
				$(curr).removeClass('loading').append(this);
				$(this).fadeIn('slow',function(){
						// once the current loaded, trigger the next image
						LoadImage(index+1, max, $ulTarget);
						
						// once first image is loaded
						// needs to init the slider...
						if ( !slideInit )
						{
							var $slideShow = $($ulTarget).parent('#slideshow');
							$.fn.setScrolling($slideShow);
							
							slideInit = true;
						}
						
						var imgNumber = index + 1
						curr.append("<br/><p class='theCaption'><span class='theCaptionNumber'>"+ imgNumber + '/' + max +'</span>' +'&nbsp;' +caption[index]+'</p>');
						
					});
			}).error(function () {
				// on error remove current
				$(curr).remove();
				// trigger the next image
				LoadImage(index+1,max, $ulTarget);
			}).attr('src', images[index]);
			
			
		}
		else
		{	
			// we are done uploading the images
			// now we need to do the slider....
			
			if ( !$($ulTarget).hasClass('done') )
			{
				$($ulTarget).addClass('done');
			}
			
			return ;
		}
	}
		
	//	
	function	verifyIfDone($item)
	{
		//looks for the class .done. if found returns 1. if not returns 0
		var $yes = $($item).find('.done');
		return $yes.length;
	}

};