var DELTA_PUFF_SIZE = 10 /* px */;
var PUFF_OVERLAP = .6;
var PUFF_START_SIZE_MIN = 10;
var PUFF_START_SIZE_MAX = 25;
var UP_DOWN_CHANCE = /* 1 in */ 4;
var TURN_POINT = .6;
var TURN_VARI = .1;
var MAX_PUFFS = 100;
var C_W = 300;
var C_H= 150;
	
function Cloud()
{
	this.c_width = C_W;
	this.c_height = C_H;
	this.s = 5;
	
	this.x = 0;
	this.y = 0;
	
	this.cloud = document.createElement("canvas");
	this.cloud.setAttribute("class", "cloud");
	this.cloud.width = this.c_width;
	this.cloud.height = this.c_height;
	
	var meta_cloud = new Array();
	
	this.setx = function(p)
	{
		this.x = p;
		this.cloud.style.left = p + "px";
	}
	
	this.sety = function(p)
	{
		this.y = p;
		this.cloud.style.top = p + "px";
	}
	
	this.move = function()
	{
		this.setx(this.x + this.s);
	}
	
	
	this.makeCloud = function()
	{
		meta_cloud.length = 0;
		
		var ctx = this.cloud.getContext("2d");
		ctx.clearRect(0, 0, this.c_width, this.c_height);
		
		var puff_size = rand(PUFF_START_SIZE_MIN, PUFF_START_SIZE_MAX);
		
		var w = puff_size * 2;
		var p = puff_size;
		
		var t_point = TURN_POINT + (randDec(2 * TURN_VARI) - TURN_VARI);
		
		for(var i = 0; w < this.c_width && i <= MAX_PUFFS; i++)
		{
			meta_cloud.push(puff_size, p);
			ctx.beginPath();
			
			if(p - puff_size > 0)
			{
				ctx.arc(p, this.c_height - puff_size, puff_size, 0, Math.PI*2, true);
			}else{
				ctx.arc(puff_size, this.c_height - puff_size, puff_size, 0, Math.PI*2, true);
			}
			
			var delt = rand(DELTA_PUFF_SIZE);
			
			if(puff_size + delt > this.c_height / 2)
			{
				puff_size -= delt;
			}else if(puff_size - delt <= 1)
			{
				puff_size += delt;
			}else if(w / this.c_width < t_point)
			{
				puff_size = up_down() ? (puff_size + delt) : (puff_size - delt);
			}else{
				puff_size = up_down() ? (puff_size - delt) : (puff_size + delt);
			}
			
			w += Math.round(puff_size * 2 - PUFF_OVERLAP * puff_size * 2);
			p = w - PUFF_OVERLAP * puff_size * 2;
			
			ctx.closePath();
			ctx.fill();
		}
	}
	
	this.setColor = function(/*r, g, b*/ c)
	{
		this.cloud.getContext("2d").fillStyle = c;
		this.redraw();
	}
	
	this.redraw = function()
	{
		var ctx = this.cloud.getContext("2d");
		ctx.clearRect(0, 0, this.c_width, this.c_height);
		
		for(var i = 0; i < meta_cloud.length; i += 2)
		{
			ctx.beginPath();
			ctx.arc(meta_cloud[i + 1], this.c_height - meta_cloud[i], meta_cloud[i], 0, Math.PI*2, true);
			ctx.closePath();
			ctx.fill();
		}
	}
	
	var up_down = function()
	{
		return !(rand(UP_DOWN_CHANCE) == 1);
	}
	
	this.makeCloud();
}