var scrollHeight = 60; 
var scrollSpeed = 400;
var scrollAmount = 0;
var scrollContent = false;
var contHolderHeight = 0; 

$(document).ready(function(){
	$('#galTop').length > 0 ? dif = 570-($('#galTop').height()) : dif = 600;
	//console.log(dif);
	contHolderHeight = -($('#contHolder').height()-dif);
	//console.log('contHolder height: '+contHolderHeight);
	
	//setting up the buttons
	if(contHolderHeight < 0) $('#csBot img').css('visibility','visible');
	
	$('#csBot .csImg').mousedown(function(){
		//console.log('mouse down');
		scrollContent = true;
		scrollItems('down');
	}).mouseup(function(){
		//console.log('mouse up');
		scrollContent = false;	
	});
	$('#csTop .csImg').mousedown(function(){
		/*console.log('up up up');
		console.log('mouse down');*/
		scrollContent = true;
		scrollItems('up');
	}).mouseup(function(){
		//console.log('mouse up');
		scrollContent = false;	
	});
});

function scrollItems(direction) {
	if(scrollContent == true) {
		//console.log('scrolling');
		if(scrollAmount < 1 && (scrollAmount > contHolderHeight)) {
			direction == 'down' ? scrollAmount = scrollAmount - scrollHeight : scrollAmount = scrollAmount + scrollHeight;
			//console.log('sc: '+scrollAmount+ ' : '+(contHolderHeight)); 
			if(scrollAmount > 0) { scrollAmount = 0; $('#csTop img').css('visibility','hidden'); } else { $('#csTop img').css('visibility','visible'); } 
			if(scrollAmount < contHolderHeight) { scrollAmount = contHolderHeight+1; $('#csBot img').css('visibility','hidden'); scrollContent = false; } else { $('#csBot img').css('visibility','visible'); }
			//console.log(scrollAmount);
			$('#contHolder').animate({
				top: scrollAmount+'px'					 
			},scrollSpeed, 'linear', function(){ scrollItems(direction); });				 
		} else {
			scrollContent = false;	
		}
	} else {
		//console.log('not scrolling');
	}
}