$.fn.scroller = function(imageWidth, autoPlay) {
	
	var mask = $(this);
	var scroller = $(this).find(".scroller");
	var scrollerNav = $(this).parents().find(".scrollerNav");
	var maskWidth  = parseFloat(mask.css("width"));
	var imageTotal = scroller.find("li").size();
	var scrollerWidth =  imageWidth * imageTotal;
	var posAry = new Array();
	var currPos = 0;
	var scrollInt;
	
	scroller.width(scrollerWidth);
	if(autoPlay == true){
		scrollInt = setInterval(changeAll, 5000);
		/*mask.hover(function(){
			clearInterval(scrollInt);						
		},function(){
			scrollInt = setInterval(changeAll, 5000);
		});*/
	}
	
	for(var i = 0; i < imageTotal; i++){
		posAry[i] = imageWidth * i;
	}
	
	function changeAll(){
		var newPos = currPos + 1;
		if(newPos == imageTotal){
			newPos = 0;
		}
		if(newPos != currPos){
			var pos = newPos + 1 + "";
			scrollImages(newPos);
			currPos = newPos;
		}
		
	}
	
	
	function scrollImages(pos){
		var xPos = posAry[pos];
		scroller.animate({"left":-xPos}, 1000);
	}
	
	scrollerNav.find('a').click(function(){
		var rel = $(this).attr('rel');
		var newPos;
		
		switch(rel){
			case 'next':
				if(currPos != imageTotal - 1){
					newPos = currPos + 1;
				}
				break;
			case 'prev':
				if(currPos != 0){
					newPos = currPos - 1;
				}
				break;
		}
		if(newPos != undefined){
			scrollImages(newPos)
			currPos = newPos;
		}
	});
	
	return this;
};