// Custom Event function from geekdaily.com
var CustomEvent = function() {
	//name of the event
	this.eventName = arguments[0];
	var mEventName = this.eventName;

	//function to call on event fire
	var eventAction = null;

	//subscribe a function to the event
	this.subscribe = function(fn) {
		eventAction = fn;
	};
	
	this.unsubscribe = function() { eventAction = null; };

	//fire the event
	this.fire = function(sender, eventArgs) {
		//this.eventName = eventName2;
		if(eventAction != null) {
			eventAction(sender, eventArgs);
		}
	};
};
var onResizeComplete = new CustomEvent('onResizeComplete');

function gray_circles_init()
{
	
	function GrayCircle()
	{
		this.canvas = document.createElement('canvas');
		this.canvas.style.position = 'absolute'; // so that they can overlap eachother
		this.canvas.width = document.body.clientWidth;
		this.canvas.height = window.innerHeight;
		this.ctx = this.canvas.getContext('2d');
		
		
		this.radius = 350;
		this.color = 244;
		this.blur_depth = 0;
		
		this.movement_width = document.body.clientWidth;
		this.movement_height = window.innerHeight - this.radius;
		this.center_x = Math.floor(Math.random()*this.movement_width) - 150;
		this.canvas.style.left = this.center_x.toString() + "px";
		this.center_y = Math.floor(Math.random()*this.movement_height) - 150;
		this.canvas.style.top = this.center_y.toString() + "px";
		this.center = this.radius + 25;
		
		this.ctx.save();
	}

	GrayCircle.prototype.draw = function(x, y, radius, color)
	{
		//this.canvas.width++;
		//this.canvas.width--; // reset canvas
		var alpha = 0.5;
		
		if(x !== undefined) this.center_x = parseInt(x);
		if(y !== undefined) this.center_y = parseInt(y);
		if(radius !== undefined) this.radius = parseInt(radius);
		if(color !== undefined) this.color = parseInt(color);
		
		this.canvas.width = 2*this.radius + 50;
		this.canvas.height = this.canvas.width;
		this.center = this.radius + 25;
		//this.center_y = this.radius + this.blur_depth / 2;
		//var new_left = this.canvas.style.left + 
		//this.canvas.style.left = this.left 
		this.ctx.fillStyle = "rgba("+this.color+","+this.color+","+this.color+","+alpha+")";
		this.ctx.beginPath();
		this.ctx.arc(this.center,this.center,this.radius,0,Math.PI*2,true);
		this.ctx.closePath();
		this.ctx.fill();
	}

	GrayCircle.prototype.blurCircle = function(blur_depth)
	{
		if(blur_depth !== undefined)
			this.blur_depth = parseInt(blur_depth);
		else
			blur_depth = parseInt(this.radius / 6.25);
		this.blur_depth = blur_depth;
		//this.radius -= blur_depth;
		var counter = 0;
		var color_offset = (255 - this.color) / blur_depth;
		var blur_color = this.color;
		var correct_color;
		
		while(counter < this.blur_depth)
		{
			// change shade of gray
			blur_color += color_offset;
			correct_color = parseInt(blur_color);
			this.ctx.strokeStyle = "rgb("+correct_color+","+correct_color+","+correct_color+")";
			this.ctx.beginPath();
			this.ctx.arc(this.center_x,this.center_y,this.radius + counter,0,Math.PI*2,true);
			this.ctx.closePath();
			this.ctx.stroke();
			counter++;
		}
	}

	/*GrayCircle.prototype.goToPoint = function(target_x, target_y)
	{
		var offset = 0.1;

		if(Math.abs(center_x-target_x) < 2*offset)
		{
			target_x = Math.floor(Math.random()*this.movement_width);
		}
		else
		{
			if(center_x < target_x)
				center_x+=offset;
			else
				center_x-=offset;
		}

		if(Math.abs(center_y-target_y) < 2*offset)
		{
			target_y = Math.floor(Math.random()*movement_height);
		}
		else
		{
			if(center_y < target_y)
				center_y+=offset;
			else
				center_y-=offset;
		}
	}*/

	GrayCircle.prototype.getCanvas = function()
	{
		return this.canvas;
	}

	GrayCircle.prototype.getCenterCoordinates = function()
	{
		return new Array(this.center_x, this.center_y);
	}
		
	GrayCircle.prototype.fadeOut = function()
	{
		circle = this;
		var opacity = 1;
		var fadeout_interval = setInterval(fade, 1000/24);
		function fade()
		{
		
			circle.canvas.width = circle.canvas.width;
			circle.ctx.globalAlpha = opacity;
			opacity -= 0.04;
			circle.draw();
			circle.blurCircle(48); // best blur depth
			if(opacity <= 0)
			{
				clearInterval(fadeout_interval);
				circle.canvas.width = circle.canvas.width;
			}
		}
	}
	
	GrayCircle.prototype.resizeTo = function(new_size, speed)
	{
		if(new_size !== undefined) new_size = parseInt(new_size); else new_size = this.radius;
		if(speed !== undefined) speed = parseInt(speed); else speed = 1;
		circle = this;
		var radius = circle.radius;
		var resize_interval = setInterval(resize, 1000/12);
		var speed_sync = 0;
		
		function resize()
		{
//			if((speed_sync < speed)&&(speed_sync%speed == 0))
//			{
				if(radius == new_size)
				{
					clearInterval(resize_interval);
				}
				//circle.canvas.width = circle.canvas.width;
				if(radius < new_size)
					radius++;
				else if(radius > new_size)
					radius--;
				circle.radius = radius;
				circle.draw();
				speed_sync++;
//			}
//			else if(speed_sync < speed)
//				speed_sync++;
//			else if(speed_sync == speed)
//				speed_sync = 0;
		}
	}
	
	GrayCircle.prototype.resizeWithBlur = function(new_size, final_blur_depth)
	{
		circle = this;
		console.log('final_blur_depth parameter: ' + final_blur_depth);
		if(new_size !== undefined) new_size = parseInt(new_size); else new_size = this.radius;
		if(final_blur_depth !== undefined) final_blur_depth = parseInt(final_blur_depth); else final_blur_depth = 48;
		var radius = this.radius;
		var iterations = Math.abs(new_size - radius);
		var blurs_per_iteration = final_blur_depth / iterations;
		var blur_depth = this.blur_depth;
		var interval = setInterval(resizeAndBlur, 1000/12);
		console.log('circle 2 blur depth: ' + circle2.blur_depth);
		onResizeComplete.subscribe(function(sender, eventArgs) {
			circle2.resizeWithBlur(eventArgs.radius, eventArgs.final_blur_depth);
		});
		
		function resizeAndBlur()
		{
			if(radius == new_size)
			{
				clearInterval(interval);
				onResizeComplete.fire(circle,{ radius: 300, final_blur_depth: 0});
				onResizeComplete.unsubscribe();
			}
			//circle.canvas.width = circle.canvas.width;
			if(radius < new_size)
				radius++;
			else if(radius > new_size)
				radius--;
			circle.radius = radius;
			circle.draw();
			if(blur_depth < final_blur_depth)
				blur_depth += blurs_per_iteration;
			else
				blur_depth -= blurs_per_iteration;
			//console.log('blur depth: ' + blur_depth);
			circle.blurCircle(Math.floor(blur_depth));
		}
	}
	
	GrayCircle.prototype.blurByTransparency = function(blur_depth)
	{
		if(blur_depth !== undefined)
			this.blur_depth = parseInt(blur_depth);
		else
			blur_depth = parseInt(this.radius / 6.25);
		this.blur_depth = blur_depth;
		//this.center = this.blur_depth + this.radius;
		var counter = 0;
		var alpha = 0.5;
		var offset = 1 / (2*blur_depth);
		
		while(counter < this.blur_depth)
		{
			alpha -= offset;
			this.ctx.strokeStyle = "rgba("+this.color+","+this.color+","+this.color+","+alpha+")";
			this.ctx.beginPath();
			this.ctx.arc(this.center,this.center,this.radius + counter,0,Math.PI*2,true);
			this.ctx.closePath();
			this.ctx.stroke();
			counter += 0.5;
		}
	}
	
	/*================================================
	  ================================================
	  ================================================*/
	var background = document.createElement('div');
	background.setAttribute('id','background');
	background.setAttribute('style','position:fixed; top:0; left:0; height:100%; z-index:-2;');
	document.body.appendChild(background);
	var circle1 = new GrayCircle();
	var circle2 = new GrayCircle();
	circle1.radius = 100;
	circle1.draw();
	circle1.blurByTransparency(30);
	circle2.color = 215;
	circle2.draw()
	document.getElementById('background').appendChild(circle1.canvas);
	document.getElementById('background').appendChild(circle2.canvas);
	switchSizeAndBlur(circle1,circle2);
	//circle2.blurByTransparency(100);

/*	
	circle2.radius = 100;
	circle2.draw();
	circle2.blurCircle(24);
	
	setTimeout(resizeCircle1To200,1000);
	setTimeout(appendCircle2,8000);
	
	function resizeCircle1To200() { circle1.resizeWithBlur(100,24); }
	function appendCircle2() { document.getElementById('background').appendChild(circle2.canvas); }
*/
}

function switchSizeAndBlur(circle1, circle2)
{
	var one_new_size = circle2.radius;// + circle2.blur_depth;
	var two_new_size = circle1.radius;// + circle1.blur_depth;
	var one_new_blur = circle2.blur_depth;
	var two_new_blur = circle1.blur_depth;
	var one_blur = circle1.blur_depth;
	var two_blur = circle2.blur_depth;
	
	var iterations = Math.abs(one_new_size - two_new_size);
	var blurs_per_iteration = 24 / iterations;
	var interval = setInterval(resizeAndBlur, 3000);


	function resizeAndBlur()
	{
		if(circle1.radius == one_new_size)
		{
			clearInterval(interval);
		}
		if(circle1.radius < one_new_size)
			circle1.radius++;
		else
			circle1.radius--;
		if(circle2.radius < two_new_size)
			circle2.radius++;
		else
			circle2.radius--;
		if(circle1.blur_depth < one_new_blur)
			one_blur += blurs_per_iteration;
		else
			one_blur -= blurs_per_iteration;
		if(circle2.blur_depth < two_new_blur)
			two_blur += blurs_per_iteration;
		else
			two_blur -= blurs_per_iteration;
		circle1.draw();
		circle1.blurByTransparency(Math.floor(one_blur));
		circle2.draw();
		circle2.blurByTransparency(Math.floor(two_blur));
	}
}