(function(jQuery) {
    
    jQuery.fn.slideshow = function(images, options){
	// merge custom options with defaults
	var settings = $.extend({}, $.fn.slideshow.defaults, options);
	return this.each(function(){
		var self = $(this);
		self.open = 0;
		self.nav = $(document.createElement('div'));
		self.photoCont = $(document.createElement('div'));
		self.photoCont.addClass(settings.photoContClass).css({ width: settings.width, height: settings.height});
		
		self.nav.addClass(settings.navContClass);
		$.each(images, function(i, img){
			var icon = $(document.createElement('a'));
			icon.attr('href', '#' + i).addClass(settings.navIconClass).addClass(settings.cssPrefix + 'ic-' + i);
			icon.click(function(e){ handleClick(e); });
			if(i == self.open){ icon.addClass(settings.navIconOpenClass); }
			self.nav.append(icon);
		});
		$(images.join(', ')).wrapAll(self.photoCont);
		self.append(self.nav);


		self.t = setTimeout(function(){ rotate(); }, settings.delay);
		
		function handleClick(e){
			e.preventDefault();
			var i = $(e.target).attr('href').substring($(e.target).attr('href').indexOf('#') + 1);
			clearTimeout(self.t);
			showPhoto(parseInt(i), 'fast', function(){ self.t = setTimeout(function(){ rotate(); }, settings.delay); });
		};
		
		function showPhoto(index, speed, callback){
			speed = (speed || settings.effectSpeed);
			if(index < 0 || (images.length) <= index){ index = 0; }
			$('#' + settings.cssPrefix + self.open).fadeOut(speed);
			$('a.' + settings.cssPrefix + 'ic-' + index).addClass(settings.navIconOpenClass).siblings().removeClass(settings.navIconOpenClass);
			self.open = index;
			$('#' + settings.cssPrefix + index).fadeIn(speed, function(){
				if(typeof(callback) == 'function'){
					return callback();
				}	
			});
		};
		
		$('.' + settings.cssPrefix + 'pause').bind('click', function(e){
		    $('#' + settings.cssPrefix + self.open).fadeOut(settings.speed);
		    clearTimeout(self.t);
		});
		$('.' + settings.cssPrefix + 'play').bind('click', function(e){
		    $('#' + settings.cssPrefix + self.open).fadeIn(settings.speed);
		    self.t = setTimeout(function(){ rotate(); }, settings.delay);
		});

		function rotate(){
			showPhoto(self.open + 1, settings.effectSpeed, function(){
				self.t = setTimeout(function(){ rotate(); }, settings.delay);
			});
		};

	});
}
})(jQuery);

jQuery.fn.slideshow.play = function(){
    
}

// allow public access to the defaults
jQuery.fn.slideshow.defaults = {
	delay : 6000                    // delay between photos (in milliseconds)
	,speed: 1000
	,effectSpeed : 1000           // speed of the transition between photos: slow, normal, fast, or milliseconds
	,width : 830                    // max width of the images, ideally, they should all be the same size
	,height : 325                    // max height of the images, ideally, they should all be the same size
    // changing the following CSS defaults requires some renaming in the CSS file style.css
	,cssPrefix : 'ss-'              // for classnames of dynamically-generated elements
	,photoContClass : 'ss-photo'    // class for the div containing the photos.
	,navContClass : 'ss-marker clearfix'     // class for the div containing the navigator.
	,navIconClass : 'ss-icon'       // class for the navigator icons.
	,navIconOpenClass : 'ss-open'   // class for the div containing the photos.
};