function SlideShow( containerElementID, slideShowID, nrVisibleElements, nrCashedElements )
{
	// A unique number of the sildeshow to different the current instance of the slideshow
	// from an other instance create on the same HTML document.
	this.slideShowID = slideShowID;
	
	// The container element which holds first the initial images and later the dynamic
	// displayed images.
	this.containerElementID = containerElementID;
	
	// The first visible image of the slideshow
	this.firstVisibleElement = 0;
	
	// The number of visible elements. This number has to be adapted to the size of the container element (containerElementID).
	this.nrVisibleElem = parseInt(nrVisibleElements);
	
	// The number of images which can't be display, because of the size of the container element (containerElementID).
	// This images may not be visible in the container element but the will cashed by the bowser.
	this.nrCashedElem = parseInt(nrCashedElements);
	
	// Variables used by previous button //
	// The button it selfe
	this.buttonPrevious = null;
	// The image for an activated button
	this.actPrevButtonImgPrev = null;
	// The image for an deactivated button
	this.inactPrevButtonImgPrev = null;
	
	// Variables used by next button //
	this.buttonNext = null;
	// The image for an activated button
	this.actNextButtonImg = null;
	// The image for an deactivated button
	this.inactNextButtonImg = null;

	// Arrays for thumb images and images in normal size
	this.thumbImages = new Array();
	this.images = new Array();
}

SlideShow.prototype.initNextButton = function( nextButtonID, inactivImage, activImage )
{
	this.buttonNext = document.getElementById( nextButtonID );
	
	this.actNextButtonImg = activImage;
	this.inactNextButtonImg = inactivImage;
	
	// Read the initial images from the div source element if they are not already read.
	// This is necessary to decide if the next button has to be activated or not.
	if( this.thumbImages.length == 0)
	{
		this.initImages();
	}
	
	if( (this.firstVisibleElement + this.nrVisibleElem) < this.thumbImages.length)
	{
		this.buttonNext.src = this.actNextButtonImg;
	}
};

SlideShow.prototype.initPreviousButton = function( previosButtonID, inactivImage, activImage )
{
	this.buttonPrevious = document.getElementById( previosButtonID );
	
	this.actPrevButtonImgPrev = activImage;
	this.inactPrevButtonImgPrev = inactivImage;
};

SlideShow.prototype.display = function()
{
	content = '';
	
	// Iterate over all images
	for (var i = 0; i < this.thumbImages.length; i++)
	{
		// Display the number of visible elements and additionaly the number of cashed elements
		if( i >= this.firstVisibleElement && i <=  this.firstVisibleElement + this.nrVisibleElem + this.nrCashedElem )
		{
			content = content + '<a rel="lightbox['+this.slideShowID+']" href="' + this.images[i]+ 
			'"><img class="slideShowImages" src="' + this.thumbImages[i]+'" alt=""/></a>';			
		}
		// Diyplay the images as transparent pixel if the visible and cashed are displayed
		else
		{
			content = content + '<a rel="lightbox['+this.slideShowID+']" href="' + this.images[i]+ 
			'"><img style="border: 0px; width: 0px;" src="/cms/assets/templates/haarstudio-rosi/images/transpix.gif" alt=""/></a>';
		}
	}
	// Update the document in the browser
	document.getElementById(this.containerElementID).innerHTML = content;
};

SlideShow.prototype.initImages = function()
{
	var divSource = document.getElementById(this.containerElementID).innerHTML;
	var searchPattern = /(longdesc="?slideshow\[)([a-zA-Z0-9_ \.\\\/]*)(\]"?)/gi;
	var result;
	
	while (result = searchPattern.exec(divSource)) {
		this.thumbImages.push( result[2] );
		//alert(result[2]);
	}
	
	//var searchPattern = /(rel="?lightbox\[.{1,}\]"? href="?)([a-zA-Z0-9_\-\.\\\/]*)("?)/gi;
	var searchPattern = /(href="?)([a-zA-Z0-9_\-\.\\\/]*)("?)/gi;
	while (result = searchPattern.exec(divSource)) {
		this.images.push( result[2] );
		//alert(result[2]);
	}
};

SlideShow.prototype.next = function(activImage, inactivImage, button)
{
	// Read the initial images from the div source element if they are not already read
	if( this.thumbImages.length == 0)
	{
		this.initImages();
	}
	
	// Switch one image forward if the end is not already reached
	if( (this.firstVisibleElement + this.nrVisibleElem ) < this.thumbImages.length )
	{
		this.firstVisibleElement++;
		
		// Update the div element which holds the images
		this.display();
		
		// Set the previous button to active if it's not already set 
		if( this.buttonPrevious != null && this.buttonPrevious.src != this.actPrevButtonImgPrev )
		{
			this.buttonPrevious.src = this.actPrevButtonImgPrev;	
		}
	}
	// Set the next button to inactive if the last image has been displayed
	if( this.buttonNext != null && this.firstVisibleElement + this.nrVisibleElem == this.thumbImages.length)
	{
		this.buttonNext.src = this.inactNextButtonImg;	
	}
};

SlideShow.prototype.previous = function(activImage, inactivImage, button)
{
	if( this.firstVisibleElement > 0 )
	{
		this.firstVisibleElement--;
		
		// Update the div element which holds the images
		this.display();
		
		// Set the next button to active if it's not already set
		if( this.buttonNext != null && this.buttonNext.src != this.actNextButtonImg )
		{
			this.buttonNext.src = this.actNextButtonImg;	
		}
	}
	
	// Set the previous button to inactive if the first image has been displayed
	if( this.buttonPrevious != null && this.firstVisibleElement == 0 )
	{
		this.buttonPrevious.src = this.inactPrevButtonImgPrev;	
	}
};