script.js

var CM;

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

	function CanvasMarquee() {
		var
			me = this,
			bgColor		= null,//panel.css("background-color"),
			fgColor		= "yellow",
			font		= "vrr",
			baseline	= 0.7,
			textID		= -1,
			amount		= 2,
			ticklimit	= 10,
			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;
		}

		var lastRenderTime = 0;
		render = function(delta) {
                        if (delta-lastRenderTime <= ticklimit) {
				window.requestAnimationFrame(render);
				return;
			}
			lastRenderTime=delta;
			if (left > -texts[textID].width) {

				left = left - (amount > 0 ? amount : 1);
				if (bgColor == null) {
					mctx.clearRect(0, 0, width, height);
				} else {
					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);