/*
 * Creates an array of web safe colors. Mostly taken from
 * http://www.bewebmaster.com/129.php . Thank you.
 *
 * @param colors { array } this array will be filled with web safe colors.
 */

function create_array_of_colors(colors)
{
	//define the array of basic colors including black, white and gray
	var basics = ['00','33','66','99','CC','FF'];
	var c = 0;
	//now we will iterate through colors. Notice how number 6 corresponds to number of items in the array c
	for(i=0;i<6;i++)
	{
		for(j=0;j<6;j++)
		{
			for(k=0;k<6;k++)
			{
				//this creates hex code for each color
				colors[c] = basics[i]+basics[j]+basics[k];
				c++;
			}
		}
	}
}

function ColorCircle()
{
	this.canvas = document.createElement('canvas');
	this.canvas.style.position = 'absolute'; // so that they can overlap eachother
	this.canvas.width = window.innerWidth || document.documentElement.offsetWidth || document.body.clientWidth;
	this.canvas.height = window.innerHeight;
	this.ctx = this.canvas.getContext('2d');
	this.opacity = 1;
	
	this.radius = 100;
	this.color = parseInt(Math.random()*colors.length - 1);
	this.blur_depth = 0;
	
	/*
	 * coordinates that represent the point on the screen of the circle
	 */
	this.x = Math.floor(Math.random()*(this.canvas.width - (2*this.radius))) + this.radius;
	this.y = Math.floor(Math.random()*(this.canvas.height - (2*this.radius))) + this.radius;
	
	this.draw = function()
	{
		this.canvas.width = 2*this.radius;
		this.canvas.height = this.canvas.width;
		this.canvas.style.left = (this.x - this.radius).toString() + "px";
		this.canvas.style.top = (this.y - this.radius).toString() + "px";
		this.canvas.originalTop = parseInt(this.canvas.style.top.replace('px',''),10);
		
		this.ctx.globalAlpha = this.opacity;
		this.ctx.fillStyle = "#"+colors[parseInt(this.color)];
		this.ctx.beginPath();
		this.ctx.arc(this.radius, this.radius, this.radius, 0, Math.PI*2, true);
		this.ctx.closePath();
		this.ctx.fill();
	}
}

var colors = [];

function color_circles_init()
{
	create_array_of_colors(colors);
	
	var background = document.getElementById('background');
	if (!background) {
		var background = document.createElement('div');
		background.setAttribute('id','background');
		document.body.appendChild(background);
	}
	
	background.style.width = window.innerWidth + "px";
	background.style.height = window.innerHeight + "px";
	background.style.top = '0';
	background.style.left = '0';
	
	var circle0 = new ColorCircle();
	var circle1 = new ColorCircle();
	var circle2 = new ColorCircle();
	
	circle1.radius = 200;
	circle2.radius = 300;
	circle0.opacity = circle1.opacity = circle2.opacity = 0.1;
	
	circle0.draw();
	circle1.draw();
	circle2.draw();

	background.appendChild(circle0.canvas);
	background.appendChild(circle1.canvas);
	background.appendChild(circle2.canvas);

	document.body.scrolls = [];
	document.body.scrollInterval = 0;
	window.onscroll = function(event) {
		//parallax(jQuery('#background').children('canvas'));
	}
}

if ( document.body ) {
	color_circles_init();
} else {
		if ( window.addEventListener ) window.addEventListener('load',color_circles_init,false);
		else if ( window.attatchEvent ) window.attatchEvent('onload',color_circles_init);
		else window.onload = color_circles_init;
}

var SPEED = 11;
function parallax(circles)
{
	var scrollTop = window.pageYOffset || document.body.scrollTop;
	circles[0].style.top = circles[0].originalTop - parseInt(scrollTop/(SPEED*6),10) + 'px';
	circles[1].style.top = circles[1].originalTop - parseInt(scrollTop/(SPEED*3),10) + 'px';
	circles[2].style.top = circles[2].originalTop - parseInt(scrollTop/SPEED,10) + 'px';
}

var Arrays = {

	getRandomValue: function(arr) {
		var index = Math.floor(Math.random()*arr.length);
		return arr[index];
	}

}