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);
			}

		}

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

		prerender = function() {
			mctx.font = height + "px " + font;
			texts = [];
			for (var i = 0; i < strings.length; ++i) {
				var
					text = '+++ ' + strings[i].join(' +++                +++ ') + ' +++',
					bWidth = mctx.measureText(text).width,
					buffer = document.createElement('canvas'),
					bctx;
				$(buffer).attr('width', bWidth).attr('height', height);
				bctx = buffer.getContext('2d');
				bctx.font = height + "px " + font;
				bctx.fillStyle = fgColor;
				bctx.fillText(text, 0, height * baseline);
				texts.push({
					'text'	: buffer,
					'width'	: bWidth
				});
			}
		}

		init();
	}
	$.get("config/panel/scrollbar/oh14.json", function(decodedData) {
		CM = new CanvasMarquee();
		CM.setTexts(decodedData.texts);
	});

	r = function() {
		resize();
	}

	$(window).resize(r);

}

var resize = function() {
	if (CM)
		CM.resize();
}