jQuery.fn.slideshow = function(width, styleClass) {
  //width of the sliding part, class of the arrow buttons
	var slideshowId = "#" + $(this).attr('id');
	var currentPosition = 0;
	
	var slideWidth = width;
	$(slideshowId + ' .slidesContainer').css({width: slideWidth});
	var slides = $(slideshowId + ' .slide');
	var numberOfSlides = slides.length;

	// Remove scrollbar in JS
	$(slideshowId + ' .slidesContainer').css('overflow', 'hidden');

	// Wrap all .slides with #slideInner div
	slides
	.wrapAll('<div class="slideInner"></div>')
	// Float left to display horizontally, readjust .slides width
	.css({
		'float' : 'left',
		'width' : slideWidth
	});

	// Set #slideInner width equal to total width of all slides
	$(slideshowId + ' .slideInner').css('width', slideWidth * numberOfSlides);

	// Insert left and right arrow controls in the DOM
	
	/*
	$(this)
		.prepend('<span class="control_'+styleClass+' leftControl_'+styleClass+'" title="Previous">Move left</span>')
		 .append('<span class="control_'+styleClass+' rightControl_'+styleClass+'" title="Next">Move right</span>');
	 */
	 
	 if (styleClass == "small") //IE6 wont handle transparent PNG's
	 {
	 	$(this)
		//.prepend('<span class="control_'+styleClass+' leftControl_'+styleClass+'" title="Previous"><img src="media/back_arrow.png" width="22" height="22" title="Move left" alt="Move left" /></span>')
		 //.append('<span class="control_'+styleClass+' rightControl_'+styleClass+'" title="Next"><img src="media/arrow.png" width="22" height="22" title="Move right" alt="Move right"/></span>');
		 .prepend('<img src="media/back_arrow.png" class="control_'+styleClass+' leftControl_'+styleClass+'" width="22" height="22" title="Previous" alt="Previous" />')
		 .append('<img src="media/arrow.png" class="control_'+styleClass+' rightControl_'+styleClass+'" width="22" height="22" title="Next" alt="Next" />');
	 }
	 else
	 {
	 $(this)
		.prepend('<span class="control_'+styleClass+' leftControl_'+styleClass+'" title="Previous">Move left</span>')
		 .append('<span class="control_'+styleClass+' rightControl_'+styleClass+'" title="Next">Move right</span>');
	 
	 }
	 

		 	// Hide left arrow control on first load
	manageControls(0, slideshowId);
	
	// Create event listeners for .controls clicks
	$(slideshowId + ' .control_'+styleClass)
		.bind('click', function(){
		// Determine new position
			currentPosition = ($(this).attr('class')=='control_'+styleClass+' rightControl_'+styleClass)
		? currentPosition+1 : currentPosition-1;

			// Hide / show controls
			manageControls(currentPosition, slideshowId);
			// Move slideInner using margin-left
			$(slideshowId + ' .slideInner').css({
				'marginLeft' : slideWidth*(-currentPosition)
			});
		});	 
		
		// manageControls: Hides and shows controls depending on currentPosition
	function manageControls(position, hashId){
		// Hide left arrow if position is first slide
		if(position==0){ $(hashId + ' .leftControl_'+styleClass+'').css({visibility: 'hidden'}) }
		else{ $(hashId + ' .leftControl_'+styleClass+'').css({visibility: 'visible'}) }
		// Hide right arrow if position is last slide
		if(position==numberOfSlides-1){ $(hashId + ' .rightControl_'+styleClass+'').css({visibility: 'hidden'}) }
		else{ $(hashId + ' .rightControl_'+styleClass+'').css({visibility: 'visible'}) }
	}
	 
};


$(document).ready(function(){
	$('#slideshow1').slideshow(313, 'small');
	$('#slideshow2').slideshow(313, 'small');
	$('#slideshow3').slideshow(750, 'big');
	$('#slideshow4').slideshow(270, 'big');
	$('#slideshow5').slideshow(336, 'small');
	$('#slideshow6').slideshow(750, 'big');
	$('#slideshow7').slideshow(270, 'big');
	$('#slideshow8').slideshow(300, 'big');
});