// JavaScript Document

  $(document).ready(function(){
  		  var scrollerHeight = 600;
		  var currentPosition = 0;
		  var slideWidth = 150;
		  var slideHeight = 150;
		  var slides = $('.scrollItem');
		  var numberOfSlides = slides.length;
		  var noOfSlidesDisplayed = Math.floor(scrollerHeight/slideHeight);
		
		  // Remove scrollbar in JS
		  $('#verticalScroller').css('overflow', 'hidden');
		
		  // Wrap all .slides with #slideInner div
		  slides.wrapAll('<div id="slideInner"></div>')
		  .css({
			'width' : slideWidth,
			'margin' : '0 auto'
		  });
		
		  // Set #slideInner width equal to total height of all slides
		  $('#slideInner').css('height', slideHeight * numberOfSlides);
		
		 manageControls(currentPosition);
		
		 $('#scrollUp').click(function(){
			currentPosition ++;
			
			manageControls(currentPosition);
			
			 $('#slideInner').animate({'marginTop' : slideHeight*(-currentPosition)});			
			});
		 
		  $('#scrollDown').click(function(){
			currentPosition --;
			
			manageControls(currentPosition);
			
			 $('#slideInner').animate({'marginTop' : slideHeight*(-currentPosition)});			
			});
		 
		 function manageControls(position){
			 if(position == 0){
			 	$('#scrollDown').hide();
			 }
			 else {
			 	$('#scrollDown').show();
			 }
			 if(position == (numberOfSlides-noOfSlidesDisplayed)){
			 	$('#scrollUp').hide();
			 }
			 else {
			 	$('#scrollUp').show();
			 }
			 
		 }

 
  });