var actualw, actualh;

var init = function(ctx) {
	ctx.save();
	ctx.translate(0,0);
	ctx.scale(actualw/500, actualh/500);
	ctx.strokeStyle = 'rgba(0,0,0,0)';
	ctx.lineCap = 'butt';
	ctx.lineJoin = 'miter';
	ctx.miterLimit = 4;
	ctx.save();
}

var kolben = function(ctx) {	
	// Kolben
	ctx.fillStyle = "#d6dde0";
	ctx.beginPath();
	ctx.moveTo(156.07,55.99);
	ctx.bezierCurveTo(159.79,52.1,165.66,49.95,170.89,51.91);
	ctx.bezierCurveTo(178.64,54.19,183.16,63.67,179.73,71.09);
	ctx.bezierCurveTo(220.29,111.91,261.12,152.47,301.74,193.23);
	ctx.bezierCurveTo(303.58,195.39,306.53,195.73,309.06,196.65);
	ctx.bezierCurveTo(352.84,210.91,396.64,225.11,440.41,239.4);
	ctx.bezierCurveTo(450.11,242.99,460.29,248.03,465.78,257.21);
	ctx.bezierCurveTo(468.82,262.08,467.74,268.69,463.5,272.49);
	ctx.bezierCurveTo(402.69,333.33,341.85,394.14,281.03,454.97);
	ctx.bezierCurveTo(278.61,457.38,275.49,459.36,271.96,459.33);
	ctx.bezierCurveTo(266.39,459.47,261.68,455.77,258.1,451.87);
	ctx.bezierCurveTo(252.28,445.3,248.5,437.18,245.84,428.88);
	ctx.bezierCurveTo(231.85,387.9,217.85,346.91,203.88,305.92);
	ctx.bezierCurveTo(203.29,303.82,201.61,302.34,200.14,300.85);
	ctx.bezierCurveTo(158.62,259.41,117.21,217.86,75.67,176.45);
	ctx.bezierCurveTo(72.02,177.67,68.1,179.03,64.21,177.82);
	ctx.bezierCurveTo(58.28,176.19,53.49,170.34,53.89,164.05);
	ctx.bezierCurveTo(53.67,160.01,55.72,156.29,58.53,153.54);
	ctx.bezierCurveTo(91.02,121,123.56,88.51,156.07,55.99);
	ctx.closePath();
	ctx.fill();
	ctx.stroke();
	ctx.restore();
	ctx.save();
}

var kreis = function(ctx,x,y,r){
	ctx.beginPath();
	ctx.arc(x, y, r, 0, Math.PI*2, true); 
	ctx.closePath();	
}

var blaseinluft = function(ctx,x,y,n){
	ctx.restore();
	ctx.save();
	ctx.fillStyle = "#dc043a";
	kreis(ctx,x,y,b_rad[n]);
	ctx.fill();
	ctx.stroke();
	ctx.restore();
	ctx.save();
}
var blaseinwasser = function(ctx,x,y,r){
	ctx.restore();
	ctx.save();
	ctx.fillStyle = "#d6dde0";
	kreis(ctx,x,y,r); 
	ctx.fill();
	ctx.stroke();
	ctx.restore();
	ctx.save();
}

var fluessigkeitmask = function(ctx){
	// Fluessigkeit
	ctx.fillStyle = "#d6dde0";
	ctx.beginPath();
	ctx.moveTo(150.18,245.01);
	ctx.bezierCurveTo(245.79,244.98,341.41,245.02,437.02,244.99);
	ctx.bezierCurveTo(440.03,245.05,443.29,244.53,445.99,246.2);
	ctx.bezierCurveTo(452.49,249.48,459.52,253.4,462.66,260.33);
	ctx.bezierCurveTo(464.09,263.21,463.47,266.84,461.1,269.03);
	ctx.bezierCurveTo(399.74,330.37,338.42,391.76,277.02,453.07);
	ctx.bezierCurveTo(273.84,456.46,268.45,455.48,265.18,452.75);
	ctx.bezierCurveTo(257.07,446.5,252.88,436.63,249.7,427.2);
	ctx.bezierCurveTo(235.39,385.48,221.35,343.65,206.89,302);
	ctx.bezierCurveTo(188.26,282.76,169,264.08,150.18,245.01);
	ctx.closePath();
	ctx.fill();
	ctx.clip();
}
var fluessigkeitundkolben = function(ctx){
	kolben(ctx);
	fluessigkeitmask(ctx);
	
	ctx.fillStyle = "#dc043a";
	ctx.fillRect(0,o,500,500);
}
var blasen = function(ctx){
	blaseinluft(ctx, 90, 67, 14);
	blaseinluft(ctx, 35, 87, 15);
	blaseinluft(ctx, 169, 112, 12);
	blaseinluft(ctx, 104, 134, 13);
	blaseinluft(ctx, 224, 175, 11);
	blaseinluft(ctx, 158, 176, 10);
	blaseinluft(ctx, 191, 227, 9);
	
	blaseinwasser(ctx, 227, 276, b_rad[7]);
	blaseinwasser(ctx, 292, 283, b_rad[8]);
	blaseinwasser(ctx, 347, 287, b_rad[6]);
	blaseinwasser(ctx, 407, 283, b_rad[4]);
	blaseinwasser(ctx, 246, 323, b_rad[5]);
	blaseinwasser(ctx, 297, 341, b_rad[3]);
	blaseinwasser(ctx, 347, 339, b_rad[2]);
	blaseinwasser(ctx, 272, 403, b_rad[1]);
}
var draw = function(ctx) {
	document.getElementById('logocanvas').width = document.getElementById('logocanvas').width;
	init(ctx);
	fluessigkeitundkolben(ctx);
	blasen(ctx);
};

var i;
var zoom = 1;
var x = 0;
var o = 500;
var b_on = 0;
var b_rad = [-1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var b_maxrad = [-1,6,6,8,8,7,8,6,6,8,8,8,8,8,8,8];

var zoom = function(ctx){
	$("#logocanvas").animate({width:"300px", height:"300px"}, "slow", function(){
			$("#gf").fadeIn(2000, function(){
					$("#skip").fadeOut(2000);
					$("#more").fadeIn(2000);
				});
		});
}

var bubble = function(ctx){;
	if(b_on > 15){
		window.clearInterval(i);
		i = window.setTimeout("zoom(ctx)", 15);
		return;
	}
	b_rad[b_on] += 0.25;
	if(b_rad[b_on] >= b_maxrad[b_on]) b_on++
	draw(ctx);
}

var fillliquid = function(ctx){
	x++;
	o = 1/(0.5*(x/10000)) + 150;
	if(o < 220){
		window.clearInterval(i);
		i = window.setInterval("bubble(ctx)", 15);
	}
	draw(ctx);
}

var skip = function(ctx){
	window.clearInterval(i);
	o = 200;
	b_rad = b_maxrad;
	draw(ctx);
	$("#logocanvas").animate({width:"300px", height:"300px"}, 50, function(){
			$("#gf").fadeIn(50, function(){
					$("#more").fadeIn(50);
					$("#skip").fadeOut(50);
				});
		});
}

$(document).ready(function(){
	var canvas = document.getElementById('logocanvas');
	if (canvas.getContext){
		ctx = canvas.getContext("2d");
		actualw = $("#logocanvas").width();
		actualh = $("#logocanvas").height();
		t = ((window.innerHeight-actualw)/2);
		l = ((window.innerWidth-actualh)/2);
		$("#logo").css("top", t+"px");
		$("#logo").css("left", l+"px");
		$("#gf").css("top", (t+30)+"px");
		$("#gf").css("left", (l+250)+"px");
		$("#more").css("top", (t+300)+"px");
		$("#more").css("left", ((window.innerWidth-$("#more").width())/2)+"px");
		i = window.setInterval("fillliquid(ctx)", 10);
		
	} else {
		// Bild-Fallback
	}
});