document.getElementsByTagName("footer")[0].innerHTML += '<canvas id="clouds" width="'+(document.getElementsByTagName("footer")[0].offsetWidth)+'px" height="'+document.getElementsByTagName("footer")[0].offsetHeight+'px"></canvas>';

var clouds = new clouds();
clouds.setUp();

setInterval(function(){
	clouds.draw();
},1000/60);

function clouds(){
	this.cloudArray = new Array();
	var img = new Image();
	img.src = "/images/cloud.png";
	this.canvas = document.getElementById("clouds");
	this.ctx = this.canvas.getContext("2d");
	this.img = img;
	this.setUp = function(){
		for(var i = 0;i<20;i++){
			this.cloudArray.push(create(this.canvas.width,this.canvas.height));
		}
		
		function create(x,y){
			var cloud = new Object();
			cloud.x = (Math.floor(Math.random()*x));
			cloud.xVel = randomFromTo(1,3);
			cloud.xVel /= 10;
			cloud.y = (Math.floor(Math.random()*y));
			cloud.size = randomFromTo(30,100);
			cloud.opacity = (Math.floor(Math.random()*8)/100);
			return cloud;
		}
	};
	this.update = function(){
		for(var i in this.cloudArray){
			this.cloudArray[i].x -= this.cloudArray[i].xVel;
			//RESET
			if(this.cloudArray[i].x < -300){
				this.cloudArray[i].x = window.innerWidth;
			}
		}
		
	}
	this.draw = function(){
		this.canvas.width = this.canvas.width;
		this.ctx.beginPath();
		//2.17
		
		
		for(var i in this.cloudArray){
			var w = parseInt((300 / 100) * this.cloudArray[i].size)
			var h = parseInt((138 / 100) * this.cloudArray[i].size);
			this.ctx.globalAlpha = this.cloudArray[i].opacity;
			this.ctx.drawImage(this.img,this.cloudArray[i].x,this.cloudArray[i].y,w,h);
		}
		this.ctx.closePath();
		this.update();
	}
}