$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 980;
var navBarWidth = 200;
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>')
// 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);
	
// Insert left and right arrow controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Move left</span>')
.append('<span class="control" id="rightControl">Move right</span>');
	
$('#slideNavA1').toggleClass("selected", true);
	
// Hide left arrow control on first load
manageControls(currentPosition);
	
// Create event listeners for .controls clicks
$('.control')
.bind('click', function() {
	// Determine new position
	currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
	
	$('.slideNavA').toggleClass("selected", false);
	$('#slideNavA' + (currentPosition + 1)).toggleClass("selected", true);
	
	// Hide / show controls
	manageControls(currentPosition);
	
	// Move slideInner using margin-left
	moveSlide(currentPosition);
});
$('.control').bind('mouseenter', function(e) {
	$(this).toggleClass("over", true);
})
$('.control').bind('mouseleave', function(e) {
	$(this).toggleClass("over", false);
})
	
// Create event listeners for .slideNavA clicks
$('.slideNavA')
.bind('mouseenter', function() {
	// Determine new position
	currentPosition = ($(this).attr('id') == 'slideNavA1') ? 0 : currentPosition;
	currentPosition = ($(this).attr('id') == 'slideNavA2') ? 1 : currentPosition;
	currentPosition = ($(this).attr('id') == 'slideNavA3') ? 2 : currentPosition;
	currentPosition = ($(this).attr('id') == 'slideNavA4') ? 3 : currentPosition;
	currentPosition = ($(this).attr('id') == 'slideNavA5') ? 4 : currentPosition;
	
	$('.slideNavA').toggleClass("selected", false);
	$(this).toggleClass("selected", true);
	
	// Hide / show controls
	manageControls(currentPosition);
	
	// Move slideInner using margin-left
	moveSlide(currentPosition);
});
	
	
function moveSlide(position) {
	$('#slideInner').animate({ 'marginLeft': slideWidth * (-position) });
	var posX = 0;
	if (position == 0) posX = 0;
	if (position == 1) posX = 192;
	if (position == 2) posX = 389;
	if (position == 3) posX = 591;
	if (position == 4) posX = 810;
	$('#slideNavBar').animate({ 'marginLeft': posX });
}
	
// 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() }
}
});