window.onload = function(){
	   $("#loader").hide();
       $(".main").addClass("active")
	
		//canvas init
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		
		//canvas dimensions
		var W = window.innerWidth;
		var H = window.innerHeight;
		canvas.width = W;
		canvas.height = H;
		
		//snowflake particles
		var mp =20; //max particles
		var particles = [];
		for(var i = 0; i < mp; i++)
		{
			particles.push({
				x: Math.random()*W, //x-coordinate
				y: Math.random()*H, //y-coordinate
				r: Math.random()*4+2, //radius
				d: Math.random()*mp //density
			})
		}
		

		//Lets draw the flakes
    function draw()
		{
			ctx.clearRect(0, 0, W, H);
			
			ctx.fillStyle = "rgba(101,164, 240,.6)";
			ctx.beginPath();
			for(var i = 0; i < mp; i++){
				var p = particles[i];
				ctx.moveTo(p.x, p.y);
				ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);

			}
			ctx.closePath();
			ctx.fill();
		    update();
		}


     var angle = 0;
  function update(){
     	angle += 0.01;
     	for(var i=0; i< mp; i++ ){
     		var p = particles[i];
			p.y -= Math.cos(angle+p.d) + 1 + p.r/2;
			p.x += Math.sin(angle) * 2;

			if(p.x > W || p.x < -5 || p.y < 0){
              particles[i] = {x: Math.random()*W, y: H, r: p.r, d: p.d};
			}
     	}
     }


		setInterval(draw,100);

	}