function scroll(obj) { 
	var id = obj.attr("id"); 
	var scStart = $("#scrollable").scrollLeft(); 
	var scWidth = $("#scrollable>ul").width() - $("#scrollable").width() - scStart; 
	var width; 
	var pos; 
	if (id === "scrlLeft") { 
		if ((($("#scrollable>ul").width() - $("#scrollable").scrollLeft() - 10) != $("#scrollable").width()) && (scStart != 0)) { 
			$("#scrollable .first").removeClass("first").prev().addClass("first"); 
			width = ($("#scrollable .first").width() + 10) * -1; 
	    } else if (($("#scrollable>ul").width() - $("#scrollable").scrollLeft() - 10) == $("#scrollable").width()) {
			$("#scrollable .first").removeClass("first").prev().addClass("first"); 
			pos = $("#scrollable .first").position(); 
			width = ($("#scrollable").scrollLeft() - pos.left) * -1; 
	    } else { return }
 	}
		
	if (id === "scrlRight") { 
		if (scWidth >= ($("#scrollable .first").width() + 10)) { 
			width = ($("#scrollable .first").width() + 10);
			$("#scrollable .first").removeClass("first").next().addClass("first"); 
	 	} else if (scWidth != 0) { 
			width = scWidth; $("#scrollable .first").removeClass("first").next().addClass("first"); 
		} else { return } 
	} 
	
	$("#scrollable").animate({ scrollLeft: scStart + width }, 1000, "swing"); 
}

function scrollSet() { $("#scrollable").scrollLeft(0).find("li:first").addClass("first"); }

$(document).ready(function() { 
	$("#scrollable>ul").each(function() { 
		var i; 
		var objWidth = 0; 
		var objArray = new Array(); 
		var objArray = $(this).find(">*").map(function() { 
			return $(this).width(); 
		});
		
		for (i = 0; i <= (objArray.length - 1); i++) { 
			objWidth = objWidth + objArray[i] + 10; 
		}; 
		
		$(this).width(objWidth); 
	}); 
		
	$("#scrlLeft, #scrlRight").click(function() { 
		scroll($(this)) 
	});
		
	scrollSet(); 
	//animation(); 
});