$(document).ready(function(){
		var $slideshow = $("#slideshow.hero");
		var $viewfinder = $slideshow.children(".viewfinder");
		var $slides = $viewfinder.children(".slide");
		var $firstSlide;
		var $currentSlide;
		var $nextSlide;
		var $lastSlide;
		var slideWidth = 940;
		var regularOpacity = "0.85";
		var hoverOpacity = "0.70";
		var autoPlay = true;
		var timer = null;
		var time = 8500;
		
		//first time through. move the first slide
		$($slides[0]).prependTo($viewfinder);
		
		//used to set the appropriate classes on the slides based upon their order
		function setSlides(){
			$slides = $viewfinder.children(".slide");
			
			//remove any classes already on the slides
			for(var i=0; i<$slides.length; i++){
				$($slides[i]).removeClass("first current next last");
			}
			
			//set the class for the first slide
			$firstSlide = $($slides[0]);
			$firstSlide.addClass("first");
			
			//set the class for the second slide
			$currentSlide = $($slides[1]);
			$currentSlide.addClass("current")
			
			//set the class for the third slide
			$nextSlide = $($slides[2]);
			$nextSlide.addClass("next");
			
			//set the class for the last slide
			$lastSlide = $($slides[$slides.length-1]);
			$lastSlide.addClass("last");
			
			
		}
		
		//run setSlides the first time the page loads to add all the classes
		setSlides();
		
		//Figure out the width and spacing of the window so you can center everything
		var width = $slides.length * slideWidth;
		var windowWidth = $(window).width();
		var sideWidth = Math.round((windowWidth - 940)/2);
		var move = sideWidth - slideWidth;
		var $prevBtn = $slideshow.children(".hero-control.left").children(".previous");
		var $nextBtn = $slideshow.children(".hero-control.right").children(".next");
		
		//setup slideshow
		for(var i=0; i<$slides.length; i++){
			$($slides[i]).children(".screen").css("opacity",regularOpacity);
		}
		$currentSlide.children(".screen").css({
			"opacity":"0",
			"top":"362px"
		});
		//Center the slideshow
		$slideshow.css("width",windowWidth);
		$viewfinder.css("width",width);
		$viewfinder.css("margin-left",move);
		$prevBtn.width(sideWidth + 45);
		$nextBtn.width(sideWidth + 45);
		
		//previous button hover and click functions
		$prevBtn.hover(
			function(){
				$firstSlide.children(".screen").css("opacity",hoverOpacity);	
			},
			function(){
				$firstSlide.children(".screen").css("opacity",regularOpacity);
			}
		);
		$prevBtn.click(function(){
			autoPlay = false;
			prevSlide();
			return false;
		});
		
		//Next button hover and click functions
		$nextBtn.hover(
			function(){
				$nextSlide.children(".screen").css("opacity",hoverOpacity);				
			},
			function(){
				$nextSlide.children(".screen").css("opacity",regularOpacity);
			}
		);
		$nextBtn.click(function(){
			autoPlay = false;
			nextSlide();
			return false;
		});
		
		//Used to move to the next slide
		function nextSlide(){
			clearInterval(timer);//clear the auto play
			var moveLeft = $viewfinder.css("margin-left").replace(/px/g,'') - slideWidth;//figure out how far to move left
			$currentSlide.children(".screen").css("top",0);
			//fade out the current slide
			$currentSlide.children(".screen").animate({														 
				opacity: regularOpacity					
			}, 100, 'easeOutCubic', function(){
				//slide the viewfinder over
				$nextSlide.children(".screen").css("opacity",regularOpacity);
				$viewfinder.animate({
					marginLeft: moveLeft					
				}, 500, 'easeOutCubic', function(){
					//re-order the slides
					$firstSlide.appendTo($viewfinder);
					$viewfinder.css("margin-left", moveLeft + slideWidth);
					setSlides();
					//show current slide
					$currentSlide.children(".screen").animate({														 
						opacity: "0"					
					}, 100, 'easeOutCubic', function(){
						$currentSlide.children(".screen").css("top",362);
					});
				});
			});
			//if the auto play is on set the timer to call this function again
			if(autoPlay == true){
				timer = setTimeout(nextSlide, time);
			}
		}
		//used to move the slides backward
		function prevSlide(){
			//re-order the slides
			clearInterval(timer);//clear the auto play
			var currentRight = -$viewfinder.css("margin-left").replace(/px/g,'').replace(/-/g,'');
			$lastSlide.prependTo($viewfinder);
			$viewfinder.css("margin-left", currentRight - slideWidth);
			
			var newRight = -$viewfinder.css("margin-left").replace(/px/g,'').replace(/-/g,'');
			var moveRight = newRight + slideWidth;
			$currentSlide.children(".screen").css("top",0);
			
			//fade out the current slide
			$currentSlide.children(".screen").animate({														 
				opacity: regularOpacity					
			}, 100, 'easeOutCubic', function(){
				//slide the viewfinder over
				$firstSlide.children(".screen").css("opacity",regularOpacity);
				$viewfinder.animate({
					marginLeft: moveRight					
				}, 500, 'easeOutCubic', function(){
					setSlides();
					$currentSlide.children(".screen").animate({														 
						opacity: "0"					
					}, 100, 'easeOutCubic', function(){
						$currentSlide.children(".screen").css("top",362);
					});
				});
			});
		}
		//if the auto play is on set the timer to call this function again
		timer = setTimeout(nextSlide, time);

 });