// JavaScript Document

/* pre-defined sinusoidal and linear */


function SineCurve(percentage) {
	return (1 - Math.cos(percentage * Math.PI)) / 2;
}

function LinearCurve(percentage) {
	return percentage;
}

function PulseCurve(percentage) {
	return (1 - Math.cos((percentage * 2) * Math.PI)) / 2;
}


// Insoft Billboard Object v0.1d

function Billboard() {	
	this.ads = new Array();
	this.previews = new Array();

	this.index = 0;
	this.count = document.getElementById('billboard').getElementsByTagName('img').length / 2;
	
	for (i = 0, j = 0; i < this.count; i++, j+=2) {
		this.previews[i] = new Image();
		this.previews[i].src = document.getElementById('billboard').getElementsByTagName('img')[j].src;
		
		this.ads[i] = new Image();
		this.ads[i].src = document.getElementById('billboard').getElementsByTagName('img')[j+1].src;
	}
	
	this.milliseconds = 500;
	this.start = new Date().getTime();
		
	this.sm = 0;
		
	var me = this;
	this.runCallback_ = function () {
		me.run_();
	};
	
	this.runCallback_();
}	



Billboard.prototype.run_ = function () {
	var now = new Date().getTime();
	var percentage = Math.min(1, (now - this.start) / this.milliseconds);
	var canvas = document.getElementById('billboard');
	
	if (this.sm == 0) {
		var ctx = canvas.getContext('2d');
	
		
		ctx.clearRect (0, 0, 980, 384);
		
		if (percentage < 1.0) {
			ctx.globalAlpha = 1.0;
			ctx.drawImage(this.ads[((this.index > 0) ? this.index - 1 : this.count - 1)],0,0,760,384);
		}
	
		ctx.globalAlpha = percentage;
		ctx.drawImage(this.ads[this.index],0,0,760,384);
		
		ctx.globalAlpha = 1.0;
		
		for (var i = 0, j = this.index; i < 4; i++, j++) {
			if (j >= this.count) j = 0;
			var offset = (128 * SineCurve(percentage));
			ctx.drawImage(this.previews[j],760,(((4 - i) * 128) - 256) + offset,220,128);
		}
	
		if (percentage >= 1.0) {
			this.start = now;
			this.sm = 1;
		}
		
	} else {
		
		if (percentage >= 1.0) {
			this.start = now;
			this.sm = ++this.sm % 10;
			
			if (this.sm == 0) {
				this.index++;
				if (this.index >= this.count) this.index = 0;
			}
		}
	}
															  
	
	setTimeout(this.runCallback_, 60);
}

Billboard.prototype.run = function () {
	
	var canvas = document.getElementById('billboard');
	canvas.setAttribute("width",this.canvas.width);
	canvas.setAttribute("height",this.canvas.height);
		
	this.run_();
}