/*
image scroller by michal wallace - http://cornerhost.com/

We have two columns of images.
One scrolls top to bottom.
The other scrolls bottom to top.

The images should loop, so that they
appear to go around in a circle.

Each column should be contained in a div,
which should have overflow: hidden;
The images simply move around inside the
columns.

*/

var speed = 2; // pixels to move each tick
var interval = 100; // time between ticks (milliseconds)
var margin = 5; // pixels between
var column_height = 0;


function positionImages(selector, start) {
	var running = start;
	function _calcPosition(x) {
		x.style.top = running + 'px';
		x.style.position = 'absolute';
		running += x.getHeight() + margin;
	}
	$$(selector).each(_calcPosition);
}

function initialize() {
	column_height = $("goingDown").getHeight();
	positionImages("#downers img", -150);
	$('goingDown').show();
	positionImages("#uppers img", 0);
	$('goingUp').show();
	setInterval(scrollImages, interval);
}

function scrollImages() {

	$$("#uppers img").each(function(image) {
									   
   		// move the image upward by speed pixels
		image.style.top = (image.offsetTop - speed) + "px";
		
		// if the image is offscreen, put it before the topmost image going down
		if (image.offsetTop + image.getHeight() < 0) {
			var downers = $$("#downers img");
			var putBeforeThis =  downers[0];
			image.up().removeChild(image);
			$('downers').insertBefore(image, putBeforeThis);
			image.style.top = (putBeforeThis.offsetTop - image.getHeight() - margin) + 'px';
		}
	});
	
	$$("#downers img").each(function(image) {
	    // move the image downward by speed pixels
		image.style.top = (image.offsetTop + speed) + "px";

   		// if image is offscreen, move it to bottom of going_up
	   	if (image.offsetTop > column_height) {
			var uppers = $$("#uppers img");
			var putAfterThis = uppers[uppers.length - 1];
			image.up().removeChild(image);
			$('uppers').appendChild(image); // bottom of the pile
			image.style.top = (putAfterThis.offsetTop + putAfterThis.getHeight() + margin) + 'px';
		}
	});
}