/**
 * We all love snowflakes!
 */
function SnowFlake(maxRange, canvasWidth, canvasHeight)
{
	this.x = Math.random() * canvasWidth;
	this.y = Math.random() * canvasHeight;
	this.r = Math.random() * maxRange;
}

/**
 * Make it snow!
 */
function Snow()
{
	var that = this;

	this.canvas = document.getElementById('snow');
	this.canvas.height = document.documentElement.clientHeight;
	this.canvas.width = document.documentElement.clientWidth;
	this.context = this.canvas.getContext('2d');

	this.flakesMaxCount = 160;
	this.flakesMaxRange = 10;
	this.flakesSpeed = 0.2;
	this.flakes = new Array();

	this.loop = null;

	/**
	 * Checks if snowflakes are on allowed places
	 */
	this.check = function()
	{
		for (var i = 0; i < this.flakes.length; i++) {
			if (this.flakes[i].y > this.canvas.height + this.flakesMaxRange) {
				this.flakes[i].y = -this.flakesMaxRange;
				this.flakes[i].r = Math.random() * this.flakesMaxRange;
			}
		}
	};

	/**
	 * Moves the snowflakes
	 */
	this.fall = function()
	{
		for (var i = 0; i < this.flakes.length; i++) {
			this.flakes[i].y += this.flakesSpeed * this.flakes[i].r;
			if (this.flakes[i].r > this.flakesMaxRange / 2 && Math.random() > 0.9) {
				this.flakes[i].x += (Math.random() > Math.random() ? -1 : 1);
			}
		}
	};

	/**
	 * Draws the snow flakes
	 */
	this.draw = function()
	{
		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
		for (var i = 0; i < this.flakes.length; i++) {
			this.context.fillStyle = "rgba(255, 255, 255, " + .9 * (this.canvas.height - this.flakes[i].y) / this.canvas.height + ")"
			this.context.beginPath();
			this.context.arc(this.flakes[i].x, this.flakes[i].y, this.flakes[i].r, 0, Math.PI * 2, true);
			this.context.closePath();
			this.context.fill();
		}
	};

	/**
	 * The snow loop
	 */
	this.go = function()
	{
		that.draw();
		that.fall();
		that.check();
	};

	/**
	 * Start the snowing effect
	 */
	this.start = function()
	{
		for (var i = 0; i < this.flakesMaxCount; i++) {
			this.flakes[this.flakes.length] = new SnowFlake(this.flakesMaxRange, this.canvas.width, this.canvas.height);
		}
		this.loop = setInterval(this.go, 20);
	};

	/**
	 * Make it stop snowing :(
	 */
	this.stop = function()
	{
		if (this.loop) {
			clearInterval(this.loop);
		}
	};

};

/**
 * The beautiful collage we want to make
 */
function Collage()
{

	var that = this;

	this.snow = new Snow();
	this.canvas = document.getElementById('canvas');
	this.canvas.height = document.documentElement.clientHeight;
	this.canvas.width = document.documentElement.clientWidth;

	this.context = this.canvas.getContext('2d');
	this.context.strokeStyle = "#FF0000";
	this.context.lineJoin = "round";
	this.context.lineWidth = 5;

	this.drawing = false;

	/**
	 * Get cursor position relative to the painting canvas
	 */
	this.getCursorPosition = function(e)
	{
		var pos = {};
		pos.x = e.layerX;
		pos.y = e.layerY;
		return pos;
	},

	/**
	 * Called on mouse down
	 */
	this.canvasOnMouseDown = function(e)
	{
		var pos = that.getCursorPosition(e);
		that.context.beginPath();
		that.context.moveTo(pos.x, pos.y);
		that.drawing = true;
	};

	/**
	 * Called on mouse moved
	 */
	this.canvasOnMouseMove = function(e)
	{
		if (that.drawing) {
			var pos = that.getCursorPosition(e);
			that.context.lineTo(pos.x, pos.y);
			that.context.stroke();
		}
	};

	/**
	 * Called on mouse up
	 */
	this.canvasOnMouseUp = function(e)
	{
		if (that.drawing) {
			that.canvasOnMouseMove(e);
			that.context.closePath();
			that.drawing = false;
		}
	};

	this.snow.canvas.addEventListener('mousedown', this.canvasOnMouseDown, false);
	this.snow.canvas.addEventListener('mouseup', this.canvasOnMouseUp, false);
	this.snow.canvas.addEventListener('mousemove', this.canvasOnMouseMove, false);

	this.snow.start();

};

// Init the collage
var xc = new Collage();