//You need an anonymous function to wrap around your function to avoid conflict  
(function($){  

//Attach this new method to jQuery  
$.fn.extend({   
	//This is where you write your plugin's name  
	slideshow: function(options) {  
		//Set the default values, use comma to separate the settings, example:  
		var defaults = {  
			//add defaults here 
			speed:1000,
			pause:6500,
			autoPlay:true
		}  
		
		var options =  $.extend(defaults, options);
		
		//Iterate over the current set of matched elements  
		return this.each(function() {  
			var obj = $(this); //Assign current element to variable
			var currentSlide = 0; //keep track of what slide we are on
			var images = obj.children("ul").wrap("<div class='slideshow-descriptions'></div>").children("li").hide().children("img"); //target all the images
			var timer = null//used as our timing interval
			
			//add and empty unordered list to add the images to
			obj.prepend("<div class='slideshow-images'><ul></ul></div>");
			
			//add slideshow controls
			obj.append("<div class='slideshow-controls'><a class='slideshow-prev' href='#'>Previous</a><a class='slideshow-next' href='#'>Next</a></div>");
			var prevBtn = $(".slideshow-prev", obj);
			var nextBtn = $(".slideshow-next", obj);
			
			//click functionality for control buttons
			$(nextBtn).click(function(){
				nextSlide();
				options.autoPlay = false;
				clearInterval(timer);
				return false;
			});
			$(prevBtn).click(function(){
				prevSlide();
				options.autoPlay = false;
				clearInterval(timer);
				return false;
			});
			
			//loop through the images and move them to the slideshow-images unordered list
			for (var i=0; i<images.length; i++){
				$(images[i]).remove().appendTo(".slideshow-images ul").wrap("<li><li>").parent().hide();
			}
			
			var slideshowImages = $(".slideshow-images li", obj); //slideshow images list items
			var slideshowDescriptions = $(".slideshow-descriptions li", obj); //slideshow descripton list items
			
			//hide the previous image and description and show the new ones
			function slideshow(){
				clearInterval(timer);
				//console.log("currentSlide " + currentSlide);
				$(".slideshow-images .current").fadeOut(options.speed).removeClass("current");
				$(".slideshow-descriptions .current").fadeOut(options.speed).removeClass("current");
				$(slideshowDescriptions[currentSlide]).fadeIn(options.speed).addClass("current");
				$(slideshowImages[currentSlide]).fadeIn(options.speed).addClass("current");
				
				if(options.autoPlay === true){
					//console.log("autoPlay is true");
					timer = setTimeout(nextSlide, options.pause);
				}
			}
			
			//add one to the slide count then play the slideshow
			function nextSlide(){
				//console.log("nextSlide");
				currentSlide++;
				//check to see if you are at the last slide and reset to the first
				if(currentSlide >= slideshowImages.length){
					currentSlide = 0;
				}
				slideshow();
			}
			
			//remove one from the slide count then play the slideshow
			function prevSlide(){
				//console.log("prevSlide");
				currentSlide--;
				//check to see if you are the first slide and reset to the last
				if(currentSlide < 0){
					currentSlide = slideshowImages.length-1;	
				}
				slideshow();
			}
			
			slideshow();
			
		});  
	}  
});  

//pass jQuery to the function,   
//So that we will able to use any valid Javascript variable name   
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )         
})(jQuery); 
