$(document).ready(function(){
	var currentPosition 	= 0;
	var currentPosition2 	= 0;
	var currentPosition3 	= 0;
	var slideWidth 			= 860;
	var slides 				= $('.slide');
	var slides2 			= $('.slide2');
	var slides3 			= $('.slide3');
	var numberOfSlides 		= slides.length;
	var numberOfSlides2 	= slides2.length;
	var numberOfSlides3 	= slides3.length;

	// Remove scrollbar in JS
	$('#slidesContainer').css('overflow', 'hidden');
	$('#slidesContainer2').css('overflow', 'hidden');
	$('#slidesContainer3').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
	});
	
	// Wrap all .slides2 with .slideInner div
	slides2
	.wrapAll('<div class="slideInner2"></div>')
	// Float left to display horizontally, readjust .slides width
	.css({
		'float' : 'left',
		'width' : slideWidth
	});
	
	// Wrap all .slides3 with .slideInner div
	slides3
	.wrapAll('<div class="slideInner3"></div>')
	// Float left to display horizontally, readjust .slides width
	.css({
		'float' : 'left',
		'width' : slideWidth
	});

	// Set .slideInner width equal to total width of all slides
	$('.slideInner').css('width', slideWidth * numberOfSlides);
	$('.slideInner2').css('width', slideWidth * numberOfSlides2);
	$('.slideInner3').css('width', slideWidth * numberOfSlides3);

	// Insert controls in the DOM
	$('#slideshow')
	.prepend('<span class="control" id="leftControl"></span>')
	.append('<span class="control" id="rightControl"></span>');
	
	$('#slideshow2')
	.prepend('<span class="control2" id="leftControl2"></span>')
	.append('<span class="control2" id="rightControl2"></span>');
	
	$('#slideshow3')
	.prepend('<span class="control3" id="leftControl3"></span>')
	.append('<span class="control3" id="rightControl3"></span>');

	// Hide left arrow control on first load
	manageControls(currentPosition);
	manageControls2(currentPosition);
	manageControls3(currentPosition);

	// Create event listeners for .controls clicks
	$('.control')
	.bind('click', function(){
		// Determine new position
		currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;

		// Hide / show controls
		manageControls(currentPosition);
		// Move slideInner using margin-left
		$('.slideInner').animate({
			'marginLeft' : slideWidth*(-currentPosition)
		});
	});
	
	// Create event listeners for .controls2 clicks
	$('.control2')
	.bind('click', function(){
		// Determine new position
		currentPosition2 = ($(this).attr('id')=='rightControl2') ? currentPosition2+1 : currentPosition2-1;

		// Hide / show controls
		manageControls2(currentPosition2);
		// Move slideInner using margin-left
		$('.slideInner2').animate({
			'marginLeft' : slideWidth*(-currentPosition2)
		});
	});
	
	// Create event listeners for .controls3 clicks
	$('.control3')
	.bind('click', function(){
		// Determine new position
		currentPosition3 = ($(this).attr('id')=='rightControl3') ? currentPosition3+1 : currentPosition3-1;

		// Hide / show controls
		manageControls3(currentPosition3);
		// Move slideInner using margin-left
		$('.slideInner3').animate({
			'marginLeft' : slideWidth*(-currentPosition3)
		});
	});

	// manageControls: Hides and Shows controls depending on currentPosition
	function manageControls(position){
		// Hide left arrow if position is first slide
		if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
		// Hide right arrow if position is last slide
		if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
	}
	function manageControls2(position){
		// Hide left arrow if position is first slide
		if(position==0){ $('#leftControl2').hide() } else{ $('#leftControl2').show() }
		// Hide right arrow if position is last slide
		if(position==numberOfSlides2-1){ $('#rightControl2').hide() } else{ $('#rightControl2').show() }
	}
	function manageControls3(position){
		// Hide left arrow if position is first slide
		if(position==0){ $('#leftControl3').hide() } else{ $('#leftControl3').show() }
		// Hide right arrow if position is last slide
		if(position==numberOfSlides3-1){ $('#rightControl3').hide() } else{ $('#rightControl3').show() }
	}
});