Shorten JavaScript Code due to duplicate variables without polluting global namespace

Question

I am at a loss as to how to simplify the following two functions that share variables without polluting the global namespace. (Partial code for a carousel). I would like to streamline it.

Note: snapshotCheck(); is called once on window load. snapshotScroll(); is called on click events.

//FIRST FUNCTION
function snapshotScroll(amount, refresh) {
  var imageSum = snapshots.total_entries; //Inner Box
  var dl = $j('#snapshots')[0]; //Outer Box
  var c = $j('#photo-carousel')[0];
  var l = ((dl.style.left) ? parseInt(dl.style.left) : 0);
  var pos = l + parseInt(amount);
  var pos0 = pos;
  var viewport = $j('#photo-carousel')[0];
  var inView = Math.floor(viewport.clientWidth / snapshotWidth); //How many snapshots in view
  var maxPos = (imageSum * -snapshotWidth);
  if(pos > 0) { // prevent left side from going too far right
      pos = 0;
  } else if(pos < c.clientWidth - dl.clientWidth) {
      pos = c.clientWidth - dl.clientWidth;
      if(pos == 8) { // To account for 8px variation, set position to initial pos0 for animation.
          pos = pos0;
      }
  }

  $j(dl).animate({"left" : pos}, 1200); // Animate scroll
  // Toggle "filter" class (reduces opacity) depending on position.
  // if position is max, toggleClass of #next.
  // if position is 0, toggleClass of #prev.
  $j('#next').toggleClass('filter', (pos - maxPos) == (c.clientWidth))
  $j('#prev').toggleClass('filter', (pos >= 0))

  if(imageSum > inView) {
     dl.style.width = maxPos * -1 + "px";
  }
} // end snapshotScroll();

//SECOND FUNCTION
function snapshotCheck(){ // Check if snapshot is in view
  var c = $j('#photo-carousel')[0]; // #snapshots parent container
  var dl = $j('#snapshots')[0]; // ol container holding snapshots
  var imageSum = snapshots.total_entries;
  var l = ((dl.style.left) ? parseInt(dl.style.left) : 0);
  var maxPos = (imageSum * -snapshotWidth);
  var setWidth;
  var viewport = $j('#photo-carousel')[0]
  var inView = Math.floor(viewport.clientWidth / snapshotWidth); // # of snapshots in view
  (setWidth = function(){ // set initial width in order to retrieve position of currentSnapshot
    if(imageSum > inView) {
      dl.style.width = maxPos * -1 + "px";
    }
  })(); 
  if(typeof currentSnapshot != 'undefined') {
    var aSnapshot = $j('#' + currentSnapshot.snapshot.id + '_slide');  // jQuery object, array
    var theSnapshot = $j('#' + currentSnapshot.snapshot.id + '_slide')[0];  // first DOM element
    var pos = -aSnapshot.position().left; // a negative value, set to first position carousel (in view)
    $j(dl).animate({"left" : pos}, 1200); // Animate scroll
  } 
  $j('#next').toggleClass('filter', (pos - maxPos) == (c.clientWidth))
  $j('#prev').toggleClass('filter', (pos >= 0))
  } // end snapshotCheck();

Answer 1

If those variables are constant (ie, they don't change between invocations of of the functions), you can put the functions and variables into a closure:

(function() {
    //FIRST FUNCTION
    var imageSum = snapshots.total_entries; //Inner Box
    var dl = $j('#snapshots')[0]; //Outer Box
    ...
    window.snapshotScroll = function (amount, refresh) {
        ...
    } // end snapshotScroll();

    //SECOND FUNCTION
    window.snapshotCheck = function (){ // Check if snapshot is in view
        ...
    } // end snapshotCheck();
})();