(function($) {	
	
	var images = [],
		imagecount = 0,
		totalWidth = 0,
		leftBound = 0,
		scroll = 'default_left',
		sliderWidth = 0,
		sliderHeight = 0,
		settings = [],
		elements = [];
		
	$.slider = {
		defaults: {
			delay:				20, // Delay in ms
			slide:				'default_left',
			nextButtonId: 		'SliderNextBtn',
			nextImgUrl: 		'images/next.png',
			prevButtonId: 		'SliderPrevBtn',
			prevImgUrl: 		'images/prev.png',
			sliderContainerId: 	'SliderContainer',
			width:				800,
			margin:				2,
			imageWidth:			200
		}
	}
	
	// Define the public slider function
	$.fn.extend ({
		
		
		slider: function(settings) {

			
			
			settings = $.extend($.slider.defaults, settings);
			settings.slideElement = $(this);

			// Loop trough the images to gather all the information we need
			settings.slideElement.find('li img').each(function() {
				images.push({width: $(this).width(), height: $(this).height()});

				imagecount ++;
				if ( $(this).height() > sliderHeight ) {
					sliderHeight = $(this).height();
				}
			});
			
			
			
			totalWidth = ( settings.imageWidth * imagecount ) + ( settings.margin * imagecount );
			
			if (!window.XMLHttpRequest) {
				totalWidth = totalWidth + 20;
			}
			
			// Build dom around the slider
			var elements = build_dom(settings);
			
			// set the UL width so all images fit horizontally
			elements.slider.css('width', totalWidth + 'px');
				
			// Determine the max negative offset
			leftBound = -1 * ( elements.container.width() - totalWidth);
			
			// Define prev/next button events
			elements.next.mouseenter(function() {
				scroll = 'left';
			});
			elements.next.mouseleave(function() {
				scroll = 'default_left';
			});
			
			elements.previous.mouseenter(function() {
				scroll = 'right';		
			});
			elements.previous.mouseleave(function() {
				scroll = 'default_right';
			});

			do_scroll();
			
			// Private scroll function
			function do_scroll() {
				
				var element = elements.container;
				
				switch(scroll) {
					case 'left':
						if ( element.scrollLeft() < leftBound ) {
							element.scrollLeft( element.scrollLeft() + 3 );
						}
					break;
					
					case 'right':
						if ( element.scrollLeft() < leftBound ) {
							element.scrollLeft( element.scrollLeft() - 3 );
						}
					break;
					
					case 'default_left':
						if ( element.scrollLeft() < leftBound ) {
							element.scrollLeft( element.scrollLeft() + 1 );
						} else {
							scroll = 'default_right';
						}
					break;
					
					case 'default_right':
						if ( element.scrollLeft() > 0 ) {
							element.scrollLeft( element.scrollLeft() - 1 );
						} else {
							scroll = 'default_left';					
						}
					break;
				}
			
				 setTimeout( do_scroll , settings.delay);
				
			}
			
		}
		
		
	});
	
	function build_dom(settings) {
		
		// Wrap a div around the slider UL (This will be the div we will be moving around
		settings.slideElement.wrap('<div id="' + settings.sliderContainerId + '"></div>');
		
		// Brute-force the width onto the div so webkit and ie compute the width correctly
		// And wrap a div around the slide container (To create the overflow: hidden for the slide container)
		$('#' + settings.sliderContainerId).wrap('<div id="SliderContainerHolder" style="width: ' + settings.width + 'px"></div>');
		
		// Add the Previous and Next buttons
		$('#' + settings.sliderContainerId).before('<a href="#" id="' + settings.prevButtonId + '"><img src="' + settings.prevImgUrl + '" alt="&laquo;" /></a>');
		$('#' + settings.sliderContainerId).after('<a href="#" id="' + settings.nextButtonId + '"><img src="' + settings.nextImgUrl + '" alt="&raquo;" /></a>');

		// Return elements object
		elements = {
			next: $('#' + settings.nextButtonId),
			previous: $('#' + settings.prevButtonId),
			container: $('#' + settings.sliderContainerId),
			slider: settings.slideElement
		}
				
		return elements;
	}
		
	
})(jQuery);