var roll;

function init(){
	var canvas = document.getElementById("bichos");
	if (canvas.getContext){
		ctx = canvas.getContext("2d");
		roll = new Roller(canvas, ctx);
   		setInterval(function(){ update(); draw(canvas,ctx); }, 30);
	}
}
	
function ImageFrame(nombre, x, y){
	this.content = new Image();
	this.content.src = "images/roller/" + nombre;
	this.x = x || 0;
	this.y = y || 0;
}
	
ImageFrame.prototype.draw = function(ctx, fw, fh){
	ctx.drawImage(this.content, 0, 0, fw, fh, this.x, this.y, fw, fh);
}
	
function Roller(canvas, ctx){
	this.xoffset = 0;
	this.yoffset = 20;
	this.canvas = canvas;
	this.ctx = ctx;
	this.fw = 110;
	this.fh = 110;
	this.frames = 8;
	this.tw = this.fw*this.frames;
	this.imagenes = [new ImageFrame("arana.png", this.xoffset, this.yoffset), new ImageFrame("cucaracha.png", this.xoffset + this.fw, this.yoffset)
	, new ImageFrame("grillo.png", this.xoffset + this.fw*2, this.yoffset), new ImageFrame("hormiga.png", this.xoffset + this.fw*3, this.yoffset)
	, new ImageFrame("insecto.png", this.xoffset + this.fw*4, this.yoffset), new ImageFrame("raton2.png", this.xoffset + this.fw*5,  this.yoffset)
	, new ImageFrame("raton.png", this.xoffset + this.fw*6, this.yoffset), new ImageFrame("pulga.png", this.xoffset + this.fw*7, this.yoffset)];
}
	
Roller.prototype.update = function(){
	var i;
	for(i = 0; i < this.frames; i++){
		this.imagenes[i].x -= 3; // Desplazamos las imagenes
		if(this.imagenes[i].x < (this.xoffset - this.fw))
			this.imagenes[i].x += this.tw; // La encolamos si ya "desapareció
	}
}
	
Roller.prototype.draw = function(){
	var i;
	for(i = 0; i < this.frames; i++){
		this.imagenes[i].draw(this.ctx, this.fw, this.fh);
	}
}

function update(){
	roll.update();
}
  
function draw(canvas, ctx){
	ctx.save();
	ctx.clearRect(0,0,canvas.width,canvas.height);
   	roll.draw();
	ctx.restore();
}