Image Scroller

Image Scroller

Hi,
 
I'm fairly new to jQuery. I've written a code for image scroller, a display of 2 images at one time with left and right arrows. It works completely fine. However, now the requirement is to display 4 images at one time instead of 2. I have increased the width of the image and done some related changes; however the scrolling doesn't change. it still shows 2 images at a time.
 
Pls suggest.
 
Here is the code snippet:
  1. Global.js

//Work Scroller
// var numThumbs = $("#work-scroll img").length;

 var numThumbs = 800
 
 $("#next").click(function() {
  updateOffset(1,numThumbs);
  $("#work-scroll").animate({ left: x }, 1000, "expoinout"); 
  return false;
 });
 $("#prev").click(function() {
  updateOffset(0,numThumbs);
  $("#work-scroll").animate({ left: x }, 1500, "expoinout");
  return false;
 }); 
 
});// end doc ready













function updateOffset(next,thumbs) {
 if(next == 1) {
  if (x == (0 - ((thumbs - thumbsVis) * thumbWidth))) {
   x = 0;
  } else {
   x = x - (thumbWidth*thumbsVis);
  }
 }
 if(x <= 0 && next != 1) {
  if (x == 0) {
   x = (0 - ((thumbs - thumbsVis) * thumbWidth));
  } else {
   x = x + (thumbWidth*thumbsVis);
  }
 }
 















  1. Global.css

#feat-work {
 width: 700px;
 height: 216px;
 background: url(../Intranet/images/bg-ourwork.png) 0 0 no-repeat;
 margin-left: -35px;
 z-index: 10;
 overflow: hidden;
 position:relative;
}
#next, #prev {
 display: block;
 width: 31px;
 text-indent: -9000px;
 outline: none;
 height: 26px;
}
#next {
 background: url(../Intranet/images/arrows-right.gif) 0 -2px no-repeat;
 float: right;
 margin: 80px 30px 0 0;
}
#next:hover { background-position: 0 -32px; }
#prev {
 background: url(../Intranet/images/arrows-left.gif) 0 -2px no-repeat;
 float: left;
 margin: 80px 0 0 25px;
}
#prev:hover { background-position: 0 -32px; }
#work-mask {
 overflow: hidden;
 width: 315px;
 position: relative;
 height: 87px;
 float: left;
 margin: 60px 0 0 4px;
}
#work-scroll {
 position: absolute;
 left: 0;
 top: 0;
 width: 10000px;
}
#work-scroll a img {
 background: #481301;
 padding: 3px;
 border: 0;
 margin: 0 10px 0 5px; 
}
#work-scroll a:hover img {
 background: #b36100;
}