script.js

var CM;

this.loaded = function(panel, config) {
	console.log("scrollbar: register with config [" + config + "]");

	function CanvasMarquee() {
		var
			me = this,
			bgColor		= "black",
			fgColor		= "yellow",
			font		= "vrr",
			baseline	= 0.7,
			textID		= -1,
			amount		= 5,
			delay		= 2,
			width		= 0,
			height		= 0,
			left		= 0,
			marquee		= null,
			mctx		= null,
			strings		= [],
			texts		= [];

		init = function() {
			marquee	= $(panel).find('[data-marquee]')[0];
			width = $(panel).width();
			height = $(panel).height();
			$(marquee).attr('width', width).attr('height', height);
			mctx = marquee.getContext('2d');
		}

		this.setTexts = function(t) {
			strings = t;
			prerender();
			textID = -1;
			nextText();
		}

		this.resize = function() {
			oldWidth = width;
			width = $(panel).width();
			height = $(panel).height();
			$(marquee).attr('width', width).attr('height', height);
			mctx = marquee.getContext('2d');
			prerender();
			left = left * width / oldWidth;
		}

		render = function(delta) {
			if (left > -texts[textID].width) {

				left = left - (amount > 0 ? amount : 1);

				mctx.fillStyle = bgColor;
				mctx.fillRect(0, 0, width, height);
				mctx.drawImage(texts[textID].text, left, 0);
				window.requestAnimationFrame(render);
			} else {
				setTimeout(nextText, (delay >= 0 ? delay : 0) * 1000);
			}

		}

		nextText = function() {
			textID = (textID + 1) % texts.length;
			left = width;
			start = new Date();
			start=null;
			window.requestAnimationFrame(render);
		}