// JavaScript Document
$(document).ready(function() {
							   
		var currentPosition = 0;
		var slideWidth = 1064;
		var slides = $('.slide');
		var numberOfSlides = slides.length;
		var slideShowInterval;
		var speed = 7000;

		//Assign a timer, so it will run periodically
		slideShowInterval = setInterval(changePosition, speed);
		
		slides.wrapAll('<div id="slidesHolder"></div>')
		  
		slides.css({ 'float' : 'left' });
		
		//set #slidesHolder width equal to the total width of all the slides
		$('#slidesHolder').css('width', slideWidth * numberOfSlides);
		
//		$('#slideshow')
//			.prepend('<span class="nav leftNav" id="b1"></span>')
//			.append('<span class="nav rightNav" id="b2"></span>')
//			.append('<span class="nav rightNav" id="b3"></span>');
		
		manageNav(currentPosition);
		
		//tell the buttons what to do when clicked
		$('.nav').bind('click', function() {
			
			//determine new position
			if ($(this).attr('id') =='b1') {
				currentPosition = 0;
			} else if ($(this).attr('id') =='b2') {
				currentPosition = 1;
			} else if ($(this).attr('id') =='b3') {
				currentPosition = 2;
			} else {
				currentPosition = 3;
			} 
										
			//hide/show controls
			manageNav(currentPosition);
			clearInterval(slideShowInterval);
			slideShowInterval = setInterval(changePosition, speed);
			moveSlide();
		});
		
		function manageNav(position) {
			//hide left arrow if position is first slide
			if(position==0){ 
				$('#b1').removeClass('navBulletsOff').addClass('navBulletsOn') 
				$('#b2').removeClass('navBulletsOn').addClass('navBulletsOff')
				$('#b3').removeClass('navBulletsOn').addClass('navBulletsOff')	
				$('#b4').removeClass('navBulletsOn').addClass('navBulletsOff')	
			}
			else if(position==1){ 
				$('#b2').removeClass('navBulletsOff').addClass('navBulletsOn') 
				$('#b1').removeClass('navBulletsOn').addClass('navBulletsOff')
				$('#b3').removeClass('navBulletsOn').addClass('navBulletsOff')	
				$('#b4').removeClass('navBulletsOn').addClass('navBulletsOff')	
			}
			else if(position==2){ 
				$('#b3').removeClass('navBulletsOff').addClass('navBulletsOn') 
				$('#b2').removeClass('navBulletsOn').addClass('navBulletsOff')
				$('#b1').removeClass('navBulletsOn').addClass('navBulletsOff')	
				$('#b4').removeClass('navBulletsOn').addClass('navBulletsOff')	
			} 
			else if(position==3){ 
				$('#b4').removeClass('navBulletsOff').addClass('navBulletsOn') 
				$('#b1').removeClass('navBulletsOn').addClass('navBulletsOff')
				$('#b2').removeClass('navBulletsOn').addClass('navBulletsOff')	
				$('#b3').removeClass('navBulletsOn').addClass('navBulletsOff')	
			} 
			//hide right arrow is slide position is last slide
			if(position==numberOfSlides-1){ 
				$('#b4').removeClass('navBulletsOff').addClass('navBulletsOn') 
				$('#b2').removeClass('navBulletsOn').addClass('navBulletsOff')
				$('#b1').removeClass('navBulletsOn').addClass('navBulletsOff')	
				$('#b3').removeClass('navBulletsOn').addClass('navBulletsOff')	
			}
		}

		
		//changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
		function changePosition() {
			if(currentPosition == numberOfSlides - 1) {
				currentPosition = 0;
				manageNav(currentPosition);
			} else {
				currentPosition++;
				manageNav(currentPosition);
			}
			moveSlide();
		}
		
		
		//moveSlide: this function moves the slide 
		function moveSlide() {
				$('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
		}

	});