var lines, rects, width, height, canvas;

window.onload = function(){
	if (window.innerWidth){
		width = window.innerWidth;
		height = window.innerHeight;
	}else if (document.all){ 
		width = document.body.clientWidth;
		height = document.body.clientHeight;
	}
	
	var colors = new Array("#00F", "#0F0", "#F00", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF", "#FFF");
	
	canvas = Raphael(0, 0, width, height);

	var numHoriz = randInt(5),
		numVert = randInt(5);
		
	while(numHoriz == 0 && numVert == 0){
		numHoriz = randInt(5);
		numVert = randInt(5);
	}
		
	var xPositions = [], yPositions = [];
	lines = canvas.set();
	rects = canvas.set();
		
	for(var i = 0; i < numHoriz; i++){
		var y = randInt(height),
			lineHeight = randInt(8) + 1;
		
		lines.push(canvas.rect(0, y, width, lineHeight));
		yPositions[i] = y;
	}
	yPositions[i] = 0;
	yPositions[i+1] = height;
	
	for(var i = 0; i < numVert; i++){
		var x = randInt(width),
			lineWidth = randInt(8) + 1;
		
		lines.push(canvas.rect(x, 0, lineWidth, height));
		xPositions[i] = x;
	}
	xPositions[i] = 0;
	xPositions[i+1] = width;
	
	var numBoxes = (numHoriz + 1) * (numVert * 1);
	xPositions.sort(compareInts);
	yPositions.sort(compareInts);
		
	for(var i = 0; i < xPositions.length - 1; i++){
		var left = xPositions[i],
			right = xPositions[i+1];
		for(var j = 0; j < yPositions.length - 1; j++){
			var top = yPositions[j],
				bottom = yPositions[j+1];
			
			var rect = canvas.rect(left, top, right-left, bottom-top);
			rect.attr({fill: colors[randInt(colors.length - 1)], stroke: "none"});
			rects.push(rect);
		}
	}
	
	lines.attr({fill: "#000", stroke: "none"});
	lines.toFront();
	//lines.drag(move, start, up);
}

window.onresize = function(){
	if (window.innerWidth){
		newWidth = window.innerWidth;
		newHeight = window.innerHeight;
	}else if (document.all){ 
		newWidth = document.body.clientWidth;
		newHeight = document.body.clientHeight;
	}	

	var widthMult = newWidth / width;
	var heightMult = newHeight / height;
		
	canvas.setSize(newWidth, newHeight);
	lines.scale(widthMult, heightMult, 0, 0);
	rects.scale(widthMult, heightMult, 0, 0);
}

function randInt(max){
	return Math.floor(Math.random()*max);
}

function compareInts(a, b){
	return a-b;
}

var start = function () {
    this.ox = this.attr("x");
    this.oy = this.attr("y");
    this.attr({opacity: 0.5});
},
move = function (dx, dy) {
	if(this.ox == 0) dx = 0;
	if(this.oy == 0) dy = 0;
    this.attr({x: this.ox + dx, y: this.oy + dy});
},
up = function () {
    this.attr({opacity: 1});
};