Event.observe(window, 'load', function() {
	setupCanvas();
});


var SkyCanvas;
var skyContainer;

function stopPlaneAnimation() {
	SkyCanvas.stop();
	skyContainer.hide();
}

function startPlaneAnimation() {
	skyContainer.show();
	SkyCanvas.play();
}

function setupCanvas() {
	skyContainer = $("sky");
	SkyCanvas = new Canvas(skyContainer, 1072, 200);
	SkyCanvas.frameDuration = 60;
	SkyCanvas.stop();
	this.canvas = SkyCanvas;	

	this.image = Object.loadImage(templateDirectory + "/images/aj_plane.png");
	this.imageNode = new ImageNode(this.image);


	this.scene = new CanvasNode();


	var s = this.scene;

	var rt = 0;
	var previousRt = 0;


	var a = [1000, -40];
	var b = [300, 160];
	var c = [80, 160];
	var d = [0, -200];
	var cps = [a,b,c,d];

	this.imageNode.addFrameListener(function (t, dt) {
		previousRt = rt;
		rt = t / 35000 % 1;

		if (previousRt > rt) {
			stopPlaneAnimation()
			setTimeout("startPlaneAnimation()", 30000 + Math.random() * 10000);
		}

		var p = Curves.cubicLengthPointAngle(cps[0], cps[1], cps[2], cps[3], rt, 3);
		var point = p.point;
		var angle = p.angle;

		this.x = point[0];
		this.y = point[1];
		this.rotation = angle + Math.PI;
	});


	var debug = false;

	var i = 0;
	var focused = false;

	if (debug) {
		cps.forEach(function (p) {
			var cp = new Rectangle(10, 10, {
				"centered": true,
				"fill": "rgba(240,30,0,0.5)",
				"x": p[0],
				"y": p[1],
				"zIndex": 1}
					);
			cp.index = i;
			cp.addEventListener("mousedown",
					function (ev) {
						if (ev.canvasTarget != this)
							return;
						if (focused)
							focused.fill = "rgba(240,30,0,0.9)";
						focused = this;
						this.fill = "rgba(240,30,0,0.7)";
					},
					false);
			s.append(cp);
			i++;
		});
		var path = new Path(
				[
					["moveTo" ,a],
					["bezierCurveTo", [b, c, d].flatten()]
				], {
			"stroke": "rgba(255, 255, 30, 0.8)",
			"zIndex": -1});
		var poly = new Polygon([a, b, c, d].flatten(), {
			"closePath": false,
			"stroke": "rgba(40, 30, 0, 0.3)",
			"zIndex": 0.5});
		this.canvas.addEventListener("mouseup",
				function () {
					if (focused) {
						focused.fill = "rgba(240, 30, 0, 0.7)";
					}
					focused = false;
				},
				false);
		this.canvas.addEventListener("mousemove",
				function () {
					if (focused && this.root.mouseX != undefined) {
						cps[focused.index] = [this.root.mouseX,this.root.mouseY];
						poly.segments[focused.index * 2] = this.root.mouseX;
						poly.segments[focused.index * 2 + 1] = this.root.mouseY;
						if (focused.index == 0) {
							path.segments[0][1] = cps[focused.index];
						} else {
							path.segments[1][1][(focused.index - 1) * 2] = this.root.mouseX;
							path.segments[1][1][(focused.index - 1) * 2 + 1] = this.root.mouseY;
						}
						focused.x = this.root.mouseX;
						focused.y = this.root.mouseY;
					}
				},
				false);
		this.canvas.addEventListener("mousedown",
				function (ev) {
					ev.preventDefault();
				},
				false);

		this.scene.append(path, poly);
	}


	this.scene.append(this.imageNode);


	SkyCanvas.append(this.scene);
	
	stopPlaneAnimation();
	setTimeout("startPlaneAnimation()", 5000);
	
	var bannerLink = new Element('a', { 'class': 'bannerLink', href: '/' }).update(" ");
	skyContainer.appendChild(bannerLink);
}