/*
 *	Canvas Player
 *
 *		VERSION		1.2.b
 *		AUTHOR		z0va
 *		DATE			03/11/2010
 *
 *	ToDo list:
 *			add toolbar.width += border*2
 *
 *			protect by URI:	if (URI != weexord.org) return false;
 *			skin editor
 *
 *			add info button (optionnal)
 */
function canvasPlayer(ref,play,stop,autoplay) {
	if ($id(ref) == null || play == undefined || stop == undefined) return false;
	if (autoplay == undefined) var autoplay = 0;

	if (canvasPlayer.nb == undefined) canvasPlayer.nb = 1;
	else canvasPlayer.nb++;

	this.init(ref,autoplay);
	this.options(play,stop);
	this.display();

	var me = this;
	addEvent($id(this.idPlay),'click',function(){me.play();});
	addEvent($id(this.idStop),'click',function(){me.stop();});
}

canvasPlayer.prototype = {
	init	:	function(ref,autoplay) {
					this.ref = $id(ref);
					this.ref.className = 'canvasPlayerCanvas';
					this.id = 'canvasPlayer' + canvasPlayer.nb;
					this.idTbar = 'canvasPlayerToolbar' + canvasPlayer.nb;
					this.idPlay = 'canvasPlayerPlay' + canvasPlayer.nb;
					this.idStop = 'canvasPlayerStop' + canvasPlayer.nb;
					this.idFPS = 'canvasPlayerFPS' + canvasPlayer.nb;
					this.skin = 0;
					this.autoplay = autoplay;
				},
	options	:	function(play,stop) {
					this.funcPlay = play;
					this.funcStop = stop;
				},
	display	:	function() {
					var xr = this.ref.offsetLeft,
						yr = this.ref.offsetTop,
						wr = this.ref.offsetWidth,
						hr = this.ref.offsetHeight;

					// Player container (child: canvas, toolbar)
						this.box = this.ref.parentNode.insertBefore(document.createElement('div'),this.ref);
							this.box.appendChild(this.ref);
							this.box.id = this.id;
							this.box.className = 'canvasPlayer';
							this.box.style.width = parseInt(wr) + 'px';

					// Toolbar
						this.toolbar = this.box.appendChild(document.createElement('div'));
							this.toolbar.id = this.idTbar;
							this.toolbar.className = 'canvasPlayerToolbar';
							this.toolbar.style.width = parseInt(wr) + 'px';

					// Toolbar components
						// Play
						this.controlPlay = this.toolbar.appendChild(document.createElement('div'));
							this.controlPlay.id = this.idPlay;
							this.controlPlay.className = 'canvasPlayerPlay';
							this.controlPlay.style.cursor = 'pointer';							
						// Stop
						this.controlStop = this.toolbar.appendChild(document.createElement('div'));						
							this.controlStop.id = this.idStop;
							this.controlStop.className = 'canvasPlayerStop';
							this.controlStop.style.cursor = 'pointer';
						// FPS
						this.controlFPS = this.toolbar.appendChild(document.createElement('div'));
							this.controlFPS.id = this.idFPS;
							this.controlFPS.className = 'canvasPlayerFPS';
							this.controlFPS.innerHTML = 'FPS : 0';

					// Run player
						this.playing = 0;
						if (this.autoplay) this.play();
				},
	tick	:	function() {
					this.frames++;
				},
	update	:	function() {
					this.time = new Date().getTime();

					if (!this.upFPS) {
						this.frames = 0;						
						this.timeLast = new Date().getTime();
						var me = this;
						this.upFPS = setInterval(function(){me.update();},1000);
					}
					else {
						this.fps = Math.round((this.frames * 1000) / (this.time - this.timeLast));
						this.controlFPS.innerHTML = 'FPS : ' + this.fps;
						this.frames = 0;
						this.timeLast = this.time;						
					}
				},
	play	:	function() {
					if (this.playing == 1) return false;
					
					window[this.funcPlay]();
					this.update();
					this.playing = 1;
				},
	stop	:	function() {
					if (this.playing == 0) return false;
					
					clearInterval(window[this.funcStop]);
					clearInterval(this.upFPS);
					this.upFPS = 0;
					this.playing = 0;
					this.controlFPS.innerHTML = 'FPS : 0';
				}
};
function $id(e) {
	return document.getElementById(e);
}
function addEvent(id,ev,act) {
	if (id.addEventListener) id.addEventListener(ev,act,false);
	else if (id.attachEvent) id.attachEvent(ev,act);
}