$(document).ready(function(){

	var currentPosition = 0;
	var slideWidth = 399;
	var slides = $('.slide');
	var numberOfSlides = slides.length;

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

	// Wrap all .slides with #slideInner div
	slides.wrapAll('<div id="slideInner"></div>').css({
		'float' : 'left',
		'width' : slideWidth
	});

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


	// Create event listeners for .controls clicks
	$('.control').bind('click', function(){
		// Determine new position
		var thisRel = $(this).attr('rel');
		if (thisRel == 'next' || thisRel == 'prev') {
			currentPosition = (thisRel=='next') ? currentPosition+1 : currentPosition-1;
			animate = 1;
		} else {
			currentPosition = parseInt(thisRel) - 1;
			animate = 0;
		}

		if (currentPosition >= numberOfSlides) currentPosition = 0;
		if (currentPosition < 0) currentPosition = numberOfSlides -1;
		
		$('.control').removeClass('current');
		$('.control[rel=' + (currentPosition + 1) + ']').addClass('current');

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


});