$(document).ready(function(){
	var currentPosition = 0;
	var slideWidth = 560;
	var slides = $('.slide_art');
	var numberOfSlides = slides.length;

	// Remove scrollbar in JS
	$('#slidesContainer_art').css('overflow', 'hidden');

	// Wrap all .slides with #slideInner div
	slides
		.wrapAll('<div id="slideInner_art"></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_art').css('width', slideWidth * numberOfSlides);

	// Insert controls in the DOM
	$('#slideshow_art')
		.prepend('<span class="control_art" id="leftControl_art">Clicking moves left</span>')
		.append('<span class="control_art" id="rightControl_art">Clicking moves right</span>');

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

	// Create event listeners for .controls clicks
	$('.control_art')
	.bind('click', function(){

		// Determine new position
		currentPosition = ($(this).attr('id')=='rightControl_art') ? currentPosition+1 : currentPosition-1;

		// Hide / show controls
		manageControls(currentPosition);

		// Move slideInner using margin-left
		$('#slideInner_art').animate({
			'marginLeft' : slideWidth*(-currentPosition)
		});
	});

	// manageControls: Hides and Shows controls depending on currentPosition
	function manageControls(position){

		// Hide left arrow if position is first slide
		if(position==0){ $('#leftControl_art').hide() } else{ $('#leftControl_art').show() }

		// Hide right arrow if position is last slide
		if(position==numberOfSlides-1){ $('#rightControl_art').hide() } else{ $('#rightControl_art').show() }

	}
});