// This script changes all elements with the class scrollVert to be scrollable.

var console = console || { log: function(x){ return true; } };
// console.log = alert;

// alert(console.log());

function makeScrollable(element){
	console.log('makeScrollable('+element.id+'):');
	var doc = element.ownerDocument;

	// create the div that scrolls
	var mover = doc.createElement('div');
	$(element.childNodes).each(function(key, val){ mover.appendChild(val); })
	element.appendChild(mover);
	
	// make the up button
	var up = doc.createElement('button');
	up.appendChild(doc.createTextNode('up'));
	up = element.parentNode.appendChild(up);
	
	// make the down button
	var down = doc.createElement('button');
	down.appendChild(doc.createTextNode('down'));
	down = element.parentNode.appendChild(down);
	
	// This is here to make this work in IE.  For some reason you can't trust the first result
	// of the scrollHeight variable.  Man that's weird.
	element.scrollHeight
	// the number of the last page
	var lastPage = Math.ceil(element.scrollHeight/element.offsetHeight) - 1;
	console.log('lastPage: ' + lastPage);
	
	// Builds the function to attach to the scroll button
	// move: -1 (for up) or 1 (for down)
	var buildScrollFuncs = function(moves, screenCurrent){
		console.log('buildScrollFunc(['+moves+'], '+screenCurrent+'):');
		var screenAfter;
		var destination;

		// creates an onClick function for the button that moves in direction 'move'
		var move2scrollFunc = function(move){
			// The actual onClick function
			var result = function(){
				console.log('****click****');
				screenAfter = Math.max(0, Math.min((screenCurrent + move), lastPage));
				console.log('screenBefore: '+screenCurrent);
				console.log('screenAfter: '+screenAfter);
				destination = (-screenAfter*element.offsetHeight) + 'px';

				$(mover).animate({'top': destination}, 'slow');
				screenCurrent = screenAfter;
			}
			return result;
		}
		
		// a function that jumps to page 0
		var jumpToFunc = function(destScreen){
			console.log('****click****');
			destScreen = destScreen || 0;
			screenAfter = Math.max(0, Math.min(destScreen, lastPage));
			console.log('screenBefore: '+screenCurrent);
			console.log('screenAfter: '+screenAfter);
			destination = (-screenAfter*element.offsetHeight) + 'px';

			$(mover).css({'top': destination});
			screenCurrent = screenAfter;
		}
		
		var funcs = $.map(moves, move2scrollFunc);
		funcs['jumpTo'] = jumpToFunc;
		
		return funcs;
	}
	
	// build and attach the functions
	var scrollFuncs = buildScrollFuncs([-1, 1], 0);
	$(up).bind('click', scrollFuncs[0]);
	$(down).bind('click', scrollFuncs[1]);
	element.scrollVertJumpTo = scrollFuncs['jumpTo'];
	
	// style the div that is the window to the moving div
	$(element).css({
		position: 'relative',
		overflow: 'hidden',
		overflowY: 'hidden',
		// border: 'solid red 1px',
		// we are removing the overflow-y scrollbar, so shrink the div
		// width: (element.offsetWidth-16)+'px'
		width: ($(element).width()-16)+'px'
	});
	
	// style the div that moves
	$(mover).css({
		position: 'absolute',
		top: '0px',
		left: '0px'
	});
	
	// style the buttons
	buttonWidth = 12;
	buttonHeight = 11;
	$([up, down]).css({
		position: 'absolute',
		left: (element.offsetLeft + element.offsetWidth)+'px',
		// left: '0px',
		width: buttonWidth+'px',
		height: buttonHeight+'px',
		textIndent: '-9999px',
		fontSize: '0px',
		border: 'none',
		// border: 'solid red 5px',
		backgroundImage: "url('images/arrows.jpg')",
		// to resize the active element border that appears on buttons
		padding: '0px'
	});
	$(up).css({
		top: (element.offsetTop + element.offsetHeight - 2*buttonHeight) + 'px',
		backgroundPosition: 'left top'
	});
	$(down).css({
		top: (element.offsetTop + element.offsetHeight - buttonHeight) + 'px',
		backgroundPosition: 'left '+buttonHeight+'px'
	});
}

// Create vertical scrolling on every node with class scrollVert
// unless they also have the class scrollVert_manualLoad
$(document).ready(function(){
	console.log($('.scrollVert'));
	var classes, manualLoad;
	$('.scrollVert').each(function(){
		classes = $(this).attr('class').split(' ');
		// console.log(classes);
		manualLoad = $.grep(classes, 'a=="scrollVert_manualLoad"').length;
		console.log('manualLoad = '+manualLoad);
		if(!manualLoad && (this.offsetHeight < this.scrollHeight)) makeScrollable(this);
	});
});