function animation()
{
	var obj = this;
	var wnd = $(window);
	var self = this;

	this.width = wnd.width();
	this.canvas = document.createElement('canvas');
	this.canvas.width = this.width;
	this.canvas.height = 100;
	$('#animation').append($(this.canvas));

	this.context = this.canvas.getContext('2d');
	this.width = wnd.width();
	this.height = 100;
	this.lines = [];
	this.colors = ['191,127,255','63,191,255','0,175,208','127,127,127'];
	this.colors2 = ['253,208,23'];

	setInterval( function() { obj.draw(); }, 30 );

	wnd.resize(function() { self.resize(); });
	this.resize();

	return this;
}

animation.prototype = {
draw: function()
{
	this.context.fillStyle = 'rgba(255,255,255,0.015625)';
	this.context.fillRect(0,0,this.width,this.height);

	for (var i = 0; i != this.lines.length; ++i)
		this.lines[i].draw(this.context,this.width,this.height);

	for (var i = 0; i != this.lines.length; ++i)
		if ((this.lines[i].speed < 0 && this.lines[i].x < 0) || (this.lines[i].speed > 0 && this.lines[i].x > this.width))
			delete this.lines.splice( i--, 1 );

	if (Math.random() > 0.9)
		this.newLine();
},
resize: function()
{
	var wnd = $(window);
	var y = (wnd.height() - 100) / 2 - 20;
	this.width = wnd.width();
	this.canvas.width = this.width;
	$('#animation').css({top:y});
	$('#icons').css({top:y + 120});
	$('#footer').css({top:y + 100});
	$('#title').css({top:y - 50});
},
newLine: function()
{
	var colors = (Math.random() > 0.995) ? this.colors2 : this.colors;
	this.lines.push( new line( colors[Math.floor(Math.random() * colors.length)] ) );
}
};

function line( color )
{
	this.color = color;
	this.x = 0;
	this.s = Math.random() * 2 * Math.PI;
	this.speed = 2 + Math.random();

	if (Math.floor(Math.random() * 100) % 2)
	{
		this.speed = -this.speed;
		this.x = $(window).width();
	}

	return this;
}

line.prototype =
{
draw: function( context, width, height )
{
	var y = Math.sin( this.s ) * (height / 2 - 3) + height / 2;

	context.strokeStyle = 'rgba(' + this.color + ',1.0)';
	context.fillStyle = 'rgba(' + this.color + ',1.0)';
	context.beginPath();
	context.arc( Math.round(this.x), y, 3, 0, 2 * Math.PI, false );
	context.closePath();
	context.fill();

	this.s += 0.03;
	if (this.s > (2 * Math.PI))
		this.s -= 2 * Math.PI;

	this.x = this.x + this.speed;
}
};

function compatibility()
{
	var self = this;
	var content = $('<div/>',{'class':'content'});
	var table = $('<table/>',{cellpadding:0,cellspacing:0});
	var close = $('<div/>',{'class':'close',text:'close',click:function(){self.close();}});
	var supports = utils.supports;
	var elements =
	[
		{label:'Canvas',value:supports.multimedia.canvas ? 'yes' : 'no'},
		{label:'WebGL',value:supports.multimedia.webgl ? 'yes' : 'no'},
		{label:'WebSockets',value:supports.multimedia.websocket ? 'yes' : 'no'},
		{label:'Audio',value:supports.multimedia.audio ? 'yes' : 'no'},
		{label:'Video',value:supports.multimedia.video ? 'yes' : 'no'},
		{label:'Local Storage',value:supports.storage.localstorage ? 'yes' : 'no'},
		{label:'File System',value:supports.storage.filesystem ? 'yes' : 'no'},
		{label:'Web Application',value:supports.app.chrome ? 'Chrome' : supports.app.mozilla ? 'Mozilla' : supports.app.ie ? 'Internet Explorer' : 'no'}
	];

	for (var i = 0; i != elements.length; ++i)
	{
		var el = elements[i];
		table.append($('<tr/>').append($('<td/>',{'class':'name',text:el.label}),$('<td/>',{'class':'value',text:el.value})));
	}

	this.dialog = $('<div/>',{'class':'dialog'});
	this.dialog.append($('<div/>',{'class':'title',text:'Compatibility'}),content.append(table),close);
	$('body').append(this.dialog);
	this.resize();
	$(window).resize(function(){self.resize();});
	$('div#compatibility').click(function(){self.show();});
	return this;
}

compatibility.prototype =
{
resize: function()
{
	var wnd = $(window);
	var y = (wnd.height() - this.dialog.height()) / 2;
	var x = (wnd.width() - this.dialog.width()) / 2;
	this.dialog.css({top:y,left:x});
},
show: function()
{
	this.dialog.addClass('visible');
},
close: function()
{
	this.dialog.removeClass('visible');
}
};