$(document).ready(function(){

  var currPosition = 0;
  var picHeight = 80;
  var pics = $('.pic');
  var numberOfPics = pics.length;

  pics
	.wrapAll('<div id="pics-holder"></div>')
	.css({
		'width' : '90px'
	});
  $('#up')
      .bind('click', function(){
		if(currPosition-1 >= 0){
			slideUp();
		}				
      });
  $('#down')
      .bind('click', function(){
		if(currPosition+1 < numberOfPics-2){
			slideDown();
		}				
      });
  
  function slideUp(){
	$('#pics-holder')
	.animate({
		'margin-top' : -picHeight*(currPosition-1)
	});
	currPosition--;
  }
  function slideDown(){
	$('#pics-holder')
	.animate({
		'margin-top' : -picHeight*(currPosition+1)
	});
	currPosition++;
  }
  
});