var canvas=null;
var context=null;
var pos1=0;
var img=null;
var afbld;
var afbldsrc;
var x=0;
var breedte=240;
var hoogte;
var snelheid=17;
var no=3

function drawBanner(){
		canvas = document.getElementById('canvas');
		breedte =parseInt(document.getElementById('canvas').getAttribute('width'));
		hoogte =parseInt(document.getElementById('canvas').getAttribute('height'));
        context = canvas.getContext('2d');
        laadafb();
        klik();
}


function laadafb(){
		afbldsrc=new Array();
		afbld=new Array();
		if(breedte==140){for(t=1; t<4; t++){afbldsrc[t]='http://www.fotostrips.nl/banner/img/cover'+t+'_micro.png';}
			afbldsrc[4]='http://www.fotostrips.nl/banner/img/tekst_micro.png';
			no=4;}
		else{
		if(breedte==240){
			for(t=1; t<4; t++){afbldsrc[t]='http://www.fotostrips.nl/banner/img/cover'+t+'_3Dmini.jpg';}
			afbldsrc[4]='http://www.fotostrips.nl/banner/img/tekst.jpg';
			no=4;}
		else{
			if(breedte==300){for(t=1; t<4; t++){afbldsrc[t]='http://www.fotostrips.nl/banner/img/cover'+t+'_3D.jpg';}}
			else{
				if(breedte==500){for(t=1; t<4; t++){afbldsrc[t]='http://www.fotostrips.nl/banner/img/cover'+t+'_3D_groot.jpg';}}}}}
		
		for(t=1; t<no+1; t++)
		{
			afbld[t]= new Image();
			afbld[t].src=afbldsrc[t];
		}
			
			}
			
function volgende() {
		x=x+(hoogte/snelheid);
		if(x<hoogte+1){
		if(pos1==no+1){
		context.drawImage(afbld[1],0,hoogte-x);}
		else{context.drawImage(afbld[pos1],0,hoogte-x);}
		if(pos1-1!=0 && x!=hoogte){
		context.drawImage(afbld[pos1-1],0,-x);}
		setTimeout(volgende,20);
		}
		}
	
function klik(event){
		x=0;
		pos1++;
		if(pos1==no+2){pos1=2;}
		volgende();
		setTimeout(klik,3000);
}