/**

 Sliderkit - A useful kit for turning markup into a slider.  You're responsible for the display, this is responsible for turning it into a slider.

 Expects a structure like this to be contained somewhere under the element that it is invoked on:

	<div class="clip">
		<div class="container>
		</div>
	</div>

 **/

(function($) {
	$.fn.sliderkit = function(f) {

		// Put together the required configuration
		var cfg = {
			next: ".next",
			prev: ".prev",
			clip: ".clip",
			content: ".content",
			dataSource: ""
		};
		cfg = $.extend(cfg,f);

		// For each referenced element
		this.each( function(i){

			// Find the various elements
			var slider = this;
			var clip = $(cfg.clip, this).first();
			var width = $(clip).innerWidth();

			var childrenElementWidths = calculateRealWidth();

			function calculateRealWidth()
			{
				var totalWidth=0;
				$(cfg.content, slider).children().each(function() {
					totalWidth += jQuery(this).innerWidth();
				});
				return totalWidth;
			}


			$(".next",this).click(function(){
				if(calculateRealWidth() > width){
					var content = $(cfg.content, slider).first();
					var currentLeft = content.position().left * -1;
					if ((width+(currentLeft+width)) > childrenElementWidths) {
						$(content).animate( { left: "-"+(childrenElementWidths-width) } );
					}
					else {
						$(content).animate( { left: "-="+width } );
					}
				}
			});

			$(".prev",this).click(function(){
				if(calculateRealWidth() > width){
					var content = $(cfg.content, slider).first();
					var currentLeft = content.position().left;
					currentLeft = currentLeft*-1;
					if (width>currentLeft) {
						$(content).animate( { left: 0 } );
					}
					else {
						$(content).animate( { left: "+="+width } );
					}
				}
			});
		});
	};
})(jQuery);