var Scroller = Class.create({
	
	initialize:function(targetDiv, movingBlock1, movingBlock2) {
		
		// div in which the scrolling takes place
		this.targetDiv = $(targetDiv);
		
		// Two block elements (dl's) inside targetDiv move upwards...
		this.movingBlock1 = $(movingBlock1);
		this.movingBlock2 = $(movingBlock2);		
		
		// How high is the container?
		this.containerHeight = this.targetDiv.getHeight();
			
		// How high is a moving box?
		this.movingBlockHeight = this.movingBlock1.getHeight();
		
		// How wide? - The forthcoming absolutize method makes the width go funny on IE, so store it in var.
		this.movingBlockWidth =  this.movingBlock1.getWidth();
		
		// Make the two blocks absolutley poisitioned
		this.movingBlock1.absolutize();
		this.movingBlock2.absolutize();		
		
		// Reposition in div so they stack one above the another, but out the viewport.  Also pad by ten pixels
		this.movingBlock1.setStyle({top: this.containerHeight + "px"});
		this.movingBlock2.setStyle({top: this.containerHeight + this.movingBlockHeight + 0 + "px"});	
		
		// Restore width of moving blocks to how they were before absolutize
		this.movingBlock1.setStyle({width: this.movingBlockWidth + "px"});
		this.movingBlock2.setStyle({width: this.movingBlockWidth + "px"});
		
		// fade in if none ie, otherwise just show it.  Fading in of this doesnt seem to work in ie - it just appears
		if (!this.isIE()) {
			Effect.Appear(this.movingBlock1, { duration: 5.0 });
			Effect.Appear(this.movingBlock2, { duration: 5.0 });		
		} else {
			this.movingBlock1.setStyle({display: 'block'});
			this.movingBlock2.setStyle({display: 'block'});
		}
		
	},
		
	// Called from external interval
	update:function() {
		
		// Work out in pixels where the two moving blocks are...
		var yBox1 = this.stripPx(this.movingBlock1.style.top);
		var yBox2 = this.stripPx(this.movingBlock2.style.top);		

		yBox1--;
		
		// Box 1 is off the top - move to the bottom of box 2
		if (yBox1 < -this.movingBlockHeight) {
			yBox1 = yBox2 + this.movingBlockHeight + 0 ;
		}

		yBox2--;
		// Box 2 is off the top- move to the bottom of box 1
		if (yBox2 < -this.movingBlockHeight) {
			yBox2 = yBox1 + this.movingBlockHeight + 0 ;
		}

		this.movingBlock1.setStyle({top: String(yBox1) + "px"});
		this.movingBlock2.setStyle({top: String(yBox2) + "px"});		
		
						
	},
	
	stripPx:function(strWhat) {
		
		// Takes 8px and returns 8.. etc..
		strWhat = strWhat.substr(0, strWhat.length - 2);
		return (Number(strWhat));
		
	},

	isIE:function() {
		 return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);	
	}
						
});