var r;
var vpw=300;
var vph=200;
var widthDibujo=100;
var heightDibujo=290;
var widthRectangulo=70;
var heightRectangulo=50;
var xmax=100;
var numCols=1;
var numRows=1;

function dibujar()
{
	loadViewPort();
	widthDibujo=vpw-185;
	var xmax=widthDibujo - widthRectangulo;
	var papel = Raphael("paper", widthDibujo, heightDibujo);
	numCols=floor(xmax/(widthRectangulo+5));
	numRows=floor(heightDibujo/(heightRectangulo+5));
	r = new Array(numRows);
	for(var i=0;i<numRows;i++)
	{
		r[i]=new Array(numCols);
		for(var j=0;j<numCols;j++)
		{
			var x = j*(widthRectangulo+5);
			var y = i*(heightRectangulo+5);
			r[i][j] = papel.rect(x, y, widthRectangulo, heightRectangulo, 10);
			r[i][j].attr({fill:"#EEEEEE",stroke:"#D0D0D0"});
		}
	}
	animarColor();
}
function animarMovimiento()
{
	var x = circulo.attr("cx");
	x+=60;
	circulo.animate({cx:x},1000,"elastic");
}
function animarColor()
{
	for(var i=0;i<numRows;i++)
	{
		for(var j=0;j<numCols;j++)
		{
			var k = rnd(190,250);
			var col = "rgb(" + k + ","+ k + ","	+ k + ")";
			r[i][j].animate({fill:col},1000);
		}
	}
	setTimeout(animarColor,1500);
}
function rnd(min,max)
{
	return min + Math.round((max-min)*Math.random());
}
function loadViewPort()
{
	if (self.innerWidth) 
	{	vpw = self.innerWidth;	vph = self.innerHeight;} 
	else if(document.documentElement && document.documentElement.clientWidth) 
	{	vpw = document.documentElement.clientWidth;
		vph = document.documentElement.clientHeight;} 
	else {		vpw = document.body.clientWidth; vph = document.body.clientHeight;	}
}
function floor(f)
{
	return Math.floor(f);
}
window.onload=dibujar;