/*
 * jQuery RynoSlider v1.0 - http://www.rynostudios.com/
 *
 * Default Usage:
 *	$('#Container').RynoSlide();
 * 
 * Usage with Custom Settings:
 *	$('#Container-ID').RynoSlide({
 *		direction: 'horizontal',
 *		nextControl: '#Next-ID',
 *		prevControl: '#Prev-ID',
 *		speed: 1600,
 *		easing: 'easeOutBounce'
 *	});
 *
 * Corresponding HTML Formatting:
 *	<a href="#" id="Prev"></a>
 *	<div id="Container">
 *		<ul>
 *			<li>
 *				<!-- Content of Slide 1 -->
 *			</li>
 *			<li>
 *				<!-- Content of Slide 2 -->
 *			</li>
 *			<li>
 *				<!-- Content of Slide 3 -->
 *			</li>
 *		</ul>
 *	</div>
 *	<a href="#" id="Next"></a>
 *
 * Notes:
 *		1.)	The control elements can be placed anywhere, as they are currently called by ID
 * 		2.)	Call the function on the ID of a DIV (or other type of container)
 *				that contains the UL that you want to slide through
 *		3.) The container must have a fixed width that is equal to the width of a slide
 *		4.) Using any setting for easing other than 'jswing' requires the jquery.easing plugin
 *
 */


(function($) {  
	$.fn.RynoSlide = function(options) {
		var defaults = {
			direction: 'horizontal',	// Direction of animation (horizontal or vertical only)
			nextControl: '#Next',		// The ID of the next link
			prevControl: '#Prev',		// The ID of the previous link
			speed: 800,					// The speed of the animation
			easing: 'jswing'			// Set the easing of the animation (leave empty if not using easing plugin)
		};
		
		var options = $.extend(defaults, options);
		
		return this.each(function() {
			// The target <ul>
			var container = $(this);
			
			// Start from the first slide
			var curPos = 1;
			
			// Get the dimensions of a panel
			var height = $("li", container).height();
			var width = $("li", container).width();
			
			// Get the number of panels
			var count = $("li", container).size();
			
			// Set the dimensions of the container to hold all slides
			if(options.direction == 'horizontal') {
				// Set the target container's width to keep all panels on one column
				$("ul", container).css('width', (width * count));
			} else if(options.direction == 'vertical') {
				// Set the target container's height to keep all panels on one row
				$("ul", container).css('height', (height * count));
			}
			
			// Ensure the container has overflow hidden
			$("ul", container).css('overflow', 'hidden');
			
			// The previous link was clicked
			$(options.prevControl).click(function() {
				if(curPos > 1)				// There is a slide before the current one
					curPos = curPos - 1;	// Set the position to the previous slide
				else						// We are at the first slide
					curPos = count;			// Set the position to the last slide
				
				if(options.direction == 'horizontal') {
					// Decrease the left margin, making it appear to slide left
					$("ul", container).animate({
						marginLeft: ((curPos-1) * width * -1) + 'px'
					}, options.speed, options.easing);
				} else if(options.direction == 'vertical') {
					// Decrese the top margin, making it appear to slide up
					$("ul", container).animate({
						marginTop: ((curPos-1) * height * -1) + 'px'
					}, options.speed, options.easing);
				}
				return false;
			});
			
			// The next link was clicked
			$(options.nextControl).click(function() {
				if(curPos < count)			// There is a slide after the current one
					curPos = curPos + 1;	// Set the position to the next slide
				else						// We are at the last slide
					curPos = 1;				// Set the position to the first slide
				
				if(options.direction == 'horizontal') {
					// Increase the left margin, making it appear to slide right
					$("ul", container).animate({
						marginLeft: ((curPos-1) * width * -1) + 'px'
					}, options.speed, options.easing);
				} else if(options.direction == 'vertical') {
					// Increase the top margin, making it appear to slide down
					$("ul", container).animate({
						marginTop: ((curPos-1) * height * -1) + 'px'
					}, options.speed, options.easing);
				}
				return false;
			});
		});
	};
})(jQuery);