$(document).ready(function(){
	var currentPosition = 0;
	var slideWidth = 727;
	var slides = $('.slide');
	var slideLinks = $('#slidesNavigation ul li');
	var buttonWidth = 17;
	var buttonHeight = 14;
	var numberOfSlides = slides.length;
	var numberOfSlideLinks = slideLinks.length;

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

	// Wrap all .slides with #slideInner div
	slides
		.wrapAll('<div id="slideInner"></div>')
		// Float left to display horizontally, readjust .slides width
		.css({
				'float' : 'left',
				'width' : slideWidth
			});
		
	//Add a unique number to each list item 
	slideLinks.each(function(index, element){$(element).attr("id", "slide_link_" + index);});
	
	// Show the first list item
	slideLinks.hide();
	$('#slide_link_'+currentPosition).show();
		
	// Set #slideInner width equal to total width of all slides
	$('#slideInner').css('width', slideWidth * numberOfSlides);

	// Insert controls in the DOM
	$('#slidesNavigation')
		.prepend('<div id="slidesNav_Buttons">' + 
		'<span id="slideleftControl" class="slideshow_control">&laquo; Prev | </span>' +
		'<span id="sliderightControl" class="slideshow_control">Next &raquo;</span>' +
		'</div>');

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

	// Create event listeners for .controls clicks
	$('.slideshow_control')
		.bind('click', function(){
	
		// Determine new position
		currentPosition = ($(this).attr('id')=='sliderightControl') ? currentPosition+1 : currentPosition-1;
			
		// Hide / show controls
			manageControls(currentPosition);
		
		// Move slideInner using margin-left
			$('#slideInner').animate({
				'marginLeft' : slideWidth*(-currentPosition)
			});
			
		// Display related list item
			slideLinks.hide();
			$('#slide_link_'+currentPosition).fadeIn('slow');
	});

	// manageControls: Hides and Shows controls depending on currentPosition
	function manageControls(position){
	
		// Hide left arrow if position is first slide
		if(position==0) { 
		$('#slideleftControl').hide();
		$('#sliderightControl').css('margin-left', buttonWidth + 'px')
		}
		else {
		$('#slideleftControl').show();
		$('#slideleftControl').css('background-position', '0 0');
		$('#sliderightControl').css('margin-left', '0');
		}
		
		// Hide right arrow if position is last slide
	 	if(position==numberOfSlides-1) {
	 	$('#sliderightControl').hide()
	 	}
	 	else {
	 	$('#sliderightControl').show();
	 	$('#sliderightControl').css('background-position', '-' + buttonWidth + 'px 0');
	 	}
	}
		
});