function slideshow(sectionImageArray)
{
    
    var slideshowSpeed = 1000; 
	var currentZindex = 1000;
	var activeContainer='#section_background_1';
	var hiddenContainer='#section_background_2';
	var currentImg = 1;
	
	
	if (sectionImageArray.length > 0)
	{
		//gets the calculated height of the container.
		height=$('#section_head').height();
		$(hiddenContainer).css({
	        "height" : height+10
	    });
		$(activeContainer).css({
	        "height" : height+10
	    });
		
		//show the first image from the array
		$(activeContainer).css({
	        "background-image" : "url("+sectionImageArray[0]+")",
	        "z-index" : currentZindex+1
	    });
		$(activeContainer).fadeIn(1000);

        if(sectionImageArray.length>1)
		{
			setInterval(function () {
		        animateBackgrounds(); // fire the animation
		    }, 10 * slideshowSpeed);
		}

	}
	
	function animateBackgrounds()
	{	
		//switches the active 
		if (activeContainer=='#section_background_1')
		{
			hiddenContainer='#section_background_2';
		} else {
			hiddenContainer='#section_background_1';
		} 

		    $(activeContainer).css({ "z-index" : currentZindex });
		    currentZindex--;

			$(hiddenContainer).css({
		        "background-image" : "url("+sectionImageArray[currentImg]+")",
		        "display" : "block",
		        "z-index" : currentZindex
		    });


		$(hiddenContainer).fadeIn(0);
		$(activeContainer).fadeOut(500);

		activeContainerNew=hiddenContainer;
		hiddenContainerNew=activeContainer;
		activeContainer=activeContainerNew;
		hiddenContainer=hiddenContainerNew; 


		// Check which current image we need to show
	   	currentImg++;
      	if(currentImg == sectionImageArray.length) {
         currentImg = 0;
      	} 



	}
}