/*
Require: jquery.mousewheel
*/
(function($){
$.fn.thumbslider = function(params) {
	var defaults = {
		speed: 500,
		item: 'li',
		wrapper: '.wrapper',
		multiplier: 1,
		panel: 'ul'
	}
	
	var opts = $.extend(defaults, params);
	
	this.each(function() {
		var $this = $(this);
		var $wrapper = $(opts.wrapper, this);
		var $panel = $(opts.panel, this);
		var $items = $(opts.item, $panel);
		
		var step = $items.eq(0).outerWidth();
		
		var offset = 0;
		
		//add the js class to enable proper css styling...
		$(this).addClass('js');
		
		//add the correct handles
		var $handleLeft = $('<div class="handleLeft"></div>');
		var $handleRight = $('<div class="handleRight"></div>');
		
		$this.append($handleLeft);
		$this.append($handleRight);
		
		//calculate the correct size of the panel
		var size = $items.length * step;
		var viewport = $wrapper.width();
		
		$panel.width(size);
		
		//events
		$handleLeft.click(moveLeft);
		
		$handleRight.click(moveRight);
		
		$panel.mousewheel(function(e, delta) {
			if (delta > 0) {
				moveLeft();
			} else {
				moveRight();
			}
			return false;
		});
		
		function moveRight() {
			offset -= step * opts.multiplier;
			if (offset < viewport - size) {
				offset = viewport - size;
			}
			$panel.stop().animate({left: offset}, opts.speed);
		}
		
		function moveLeft() {
			offset += step * opts.multiplier;
			if (offset > 0) {
				offset = 0;
			}
			$panel.stop().animate({left: offset}, opts.speed);
		}
	});
	
}
})(jQuery)