// JavaScript Document

function get(eid) { return document.getElementById(eid); };

		var scrollItems = [
			'<div id="scrItm0">content for first scrollable item of content</div>',
			'<div id="scrItm1">content for second scrollable item of content</div>',
			'<div id="scrItm2">content for third scrollable item of content which is pointlessly exceptionally longer than the majority of the others just for demo </div>',
			'<div id="scrItm3">content for fourth scrollable item of content</div>',
			'<div id="scrItm4">content for fifth scrollable item of content</div>',
			'<div id="scrItm5">content for sixth scrollable item of content</div>',
			'<div id="scrItm6">content for seventh scrollable item of content is even more ridiculously pointlessly exceptionally longer than the majority of the others, even the extra long third entry in order to ensure the offscreen compositing works reliably for down-scrolling for demo </div>',
			'<div id="scrItm7">content for eighth scrollable item of content</div>',
			'<div id="scrItm8">content for ninth scrollable item of content</div>',
			'<div id="scrItm9">content for tenth scrollable item of content</div>'
		]

		var currTopItem = 0;
		var scrollListLengthLimit = 5;
		var scrollTime = 1000; // msecs
		var autoScrollDelay = 5000; // msecs
		var autoScrollTimer;
		var isScrolling = false;
		var isAutoScrolling = false;

		var listLimit = Math.min(scrollListLengthLimit, scrollItems.length);

		function initScroller() {
			var  sd = get('scroller');
			var last = scrollItems.length;
			var items = '';
			for (var i = 0; i < listLimit; i++) {
				items += scrollItems[i];
			}
			sd.innerHTML = items;
		}

		function startAutoScroll(up, manual) {
			if ('undefined' == typeof up) up = true;
			if ('undefined' == typeof manual) manual = true;
			var dir = up?-1:1;
			if (!manual) doVScroll(dir);
			autoScrollTimer = setInterval('doVScroll(' + dir + ')', autoScrollDelay);
			isAutoScrolling = true;
			get('scrollOnOff').value = String.fromCharCode(9608); 
		}

		function stopAutoScroll() {
			clearInterval(autoScrollTimer);
			get('scrollOnOff').value = String.fromCharCode(9670); 
			isAutoScrolling = false;
		}

		function doVScroll(n, manual) {
			if (isScrolling) {
		 		setTimeout('doVScroll(' + n + ',' + manual + ')', scrollTime/4)
		 		return;
			}
			if ('undefined' == typeof manual) manual = false;
			if (manual) stopAutoScroll();
			if (!n) n = -1;
			var  sd = get('scroller');
			if (-1 == n) {
			 	var next = (currTopItem + listLimit)%scrollItems.length;
		 		sd.innerHTML += scrollItems[next];
				currTopItem = (currTopItem + 1)%scrollItems.length
			}
			else {
		 		var next = currTopItem - 1;
				if (0 > next) next = scrollItems.length - 1;
				currTopItem = next;
		 		addNewFirstChildScroller(scrollItems[next]);
			}
			vScroll(n);
		}
	
		function vScroll(n){
		  	var sd = get('scroller');
		  	var sdTop = sd.offsetTop;
		  	var item = sd.firstChild;
		  	var h = item.offsetHeight;
		  	var t = item.offsetTop;
		  	var steps = 100;
			var deltaTop = n * (h + t + ((-1 == n)?sdTop+4:14))/steps;
			var deltaTime = scrollTime/steps;
			isScrolling = true;
			if (-1 == n) {
				for (var i = 1; i <= steps; i++) {
					var cmd = 'scroll(' + 0 + ',' + deltaTop + ',' + i + ')';
					setTimeout(cmd, deltaTime*i)
				}
			}
			else {
				for (var i = steps; i > 0; i--) {
					var cmd = 'scroll(' + (sdTop - 12) + ',' + deltaTop + ',' + i + ')';
					setTimeout(cmd, deltaTime * i)
				}
			}
			var cmd = 'replaceScroller(' + (-1==n) + '); isScrolling = false'; 
			setTimeout(cmd, scrollTime);
		}
		
		function scroll(st, dt, i) {
			get('scroller').style.top = (st + dt*i) +'px';
		}

		function replaceScroller(top) {
			var sv = get('vScrollViewer');
			var newS = document.createElement('DIV');
			var oldS = get('scroller');
			newS.innerHTML = oldS.innerHTML;
			if (top) newS.removeChild(newS.firstChild);
			else newS.removeChild(newS.lastChild);
	 		newS.style.top = 0;
			newS.id = 'scroller';
			sv.replaceChild(newS, oldS);
		}

		function addNewFirstChildScroller(item) {
			var osd = get('scroller');
			var nsd = document.createElement('DIV');
			nsd.innerHTML = item + osd.innerHTML;
			nsd.style.position = 'absolute';
			nsd.style.left = '-2000px';
			nsd.style.top = '0';
			nsd.id = 'tmpScroller';
			document.body.appendChild(nsd);
			var item = nsd.firstChild;			
			var h = item.offsetHeight;
			var t = osd.firstChild.offsetTop;
			document.body.removeChild(nsd);
			nsd.id = 'scroller';
			nsd.style.left = (4 + osd.offsetLeft) + 'px';
			nsd.style.top = (- h - t - 20) + 'px';
			var vsv = get('vScrollViewer');
			vsv.replaceChild(nsd, osd);
		}

		function init() {
			initScroller();
			startAutoScroll();
		}

		function setAutoScroll(bRef) {
			var v = bRef.value;
			if (9608 == v.charCodeAt(0)) stopAutoScroll();
			else startAutoScroll(true, false);
		}
		
		window.onload = init;