function wallerSlider(){	
	//add a div to divide the images and details
	$("#hero").prepend("<div id='hero-divider'></div>");
	//add a div to hold the hero details
	$("#hero").prepend("<div id='hero-descriptions'></div>");
	//add a div to hold the slide controls
	$("#hero").prepend("<div id='hero-controls'></div>");
	//will use to keep track of where the slideshow is in the sequence of images
	var imageIndex = 0;
	//used to see if the slideshow should play automatically
	var auto = true;
	//total number of slides
	var totalSlides = $("#hero .hero-image").length;
	//empty timer
	var timer = null;
	
	//add links to controls
	$("#hero-controls").append("<a id='hero-prev-link' href='#'>Previous</a>");
	$("#hero-controls").append("<ul id='hero-paging'></ul>");
	$("#hero-controls").append("<a id='hero-next-link' href='#'>Next</a>");
	var prevLink = $("#hero-controls #hero-prev-link");
	var paging = $("#hero-controls #hero-paging");
	var nextLink = $("#hero-controls #hero-next-link");
	
	//created the unordered list of links
	for (var i=0; i< totalSlides; i++) {
		var number = i + 1;
		$(paging).append("<li class='paging-link' id='paging-" + number +"'><a href='#'>" + number + "</a></li>");
	};
	pagingLinks = $("#hero-controls #hero-paging li a");
	//click functionality for controls
	for (var i=0; i< totalSlides; i++) {
		pagingLinks[i].thisIndex = i;
		$(pagingLinks[i]).click(function(){
			if(imageIndex != this.thisIndex){
				auto = false;
				imageIndex = this.thisIndex;
				//console.log("this index" + this.thisIndex);
				slideshow();
			}
			return false;
		});
	};
	//total number of divs
	var heroContent = $("#hero #hero-images div");	
	for (var i=0; i<heroContent.length; i++) {
		//hide the divs
		$(heroContent).hide();
		//if the div id is equal to hero-description remove it and add it to the hero-descriptions div
		if ($(heroContent[i]).attr("class") == "hero-description"){
			$(heroContent[i]).remove().appendTo("#hero-descriptions");
		};
	};
	
	//hero descriptions
	var heroDescriptions = $("#hero-descriptions .hero-description");
	//hero images
	var heroImages = $("#hero-images .hero-image");
	
	//previous link
	$(prevLink).click(function(){
		auto = false;
		prevSlide();
		return false;
	});
	
	//next link
	$(nextLink).click(function(){
		auto = false;
		nextSlide();
		return false;
	});
	
	slideshow();
	
	function slideshow(){
		//console.log("slideshow called");
		clearInterval(timer);
		//hide the currently showing description slide
		for (var i=0; i<totalSlides; i++) {
			if($(heroDescriptions[i]).attr("id") == "description-show"){
				$(heroDescriptions[i]).fadeOut().attr("id","");
			};
		};
		//hide the currently showing image slide
		for (var i=0; i<totalSlides; i++) {
			if($(heroImages[i]).attr("id") == "image-show"){
				$(heroImages[i]).fadeOut(1500).attr("id","");
			};
		};
		//show the next description slide
		$(heroDescriptions[imageIndex]).fadeIn().attr("id","description-show");
		//show the next image slide
		$(heroImages[imageIndex]).fadeIn(1500).attr("id","image-show");
		for (var i=0; i<totalSlides; i++) {
			if($(pagingLinks[i]).parent().hasClass("current") == true){
				$(pagingLinks[i]).parent().removeClass("current");
			};
		};
		$(pagingLinks[imageIndex]).parent().addClass("current");
		//reset the timer if auto is set to true
		if(auto == true){
			//console.log("timer called");
			timer = setTimeout(nextSlide, 8000);
		};
	}
	function nextSlide(){
		//add 1 to the imageIndex
		imageIndex = imageIndex + 1;
		
		//make sure the imageIndex is not higher than the number of slides, if it is make it zero
		if(imageIndex >= totalSlides){
			imageIndex = 0;
		};

		//play the slideshow
		slideshow();
	}
	function prevSlide(){
		//subtract 1 to the imageIndex
		imageIndex = imageIndex - 1;

		//make sure the imageIndex is not lower than zero, if it is make it the number of the last slide
		if(imageIndex < 0){
			imageIndex = totalSlides - 1;
		};

		//play the slideshow
		slideshow();
	}
}
$(document).ready(function(){
	wallerSlider();
});