function HBox(x, y, width, height, fillStyle, id) {
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	this.fillStyle = fillStyle; //[51,51,51,1];
	this.id = id;
}
HBox.prototype.draw = function(ctx) {
	ctx.fillStyle = "rgba(" + this.fillStyle.join(',') + ")";
	ctx.beginPath();
	ctx.rect(this.x, this.y, this.width, this.height);
	ctx.fill();
};
HBox.prototype.addToPath = function(ctx) {
	ctx.rect(this.x, this.y, this.width, this.height);
};
HBox.prototype.hitTest = function(x, y) {
	return (x >= this.x && x <= (this.x + this.width) && y >= this.y && y <= (this.y + this.height));
};


function HSystem() {
	var self = this;
	var repaintSystem = function(){ self.repaint(); };
	var setOpacity = function(obj, opacity) {
		obj.style.filter = (opacity >= 100 ? null : "alpha(opacity:" + opacity + ")"); // IE/Win
		opacity /= 100;
		obj.style.KHTMLOpacity = opacity; // Safari<1.2, Konqueror
		obj.style.MozOpacity = opacity; // Older Mozilla and Firefox
		obj.style.opacity = opacity; // Safari 1.2, newer Firefox and Mozilla, CSS3
	};
	
	this.complete = false;

	this.el = document.getElementById('canvas');
	this.context = this.el.getContext("2d");
	this.interval = null; // handle for the animation interval
	this.boxes = [
		new HBox(960, 350, 80, 80, [255,255,255,0.8]),
		new HBox(720, 546, 80, 80, [255,255,255,0.8]),
		new HBox(300, -80, 80, 80, [255,255,255,0.8]),
		new HBox(-80, 400, 80, 80, [255,255,255,0.8]),
		new HBox(150, -80, 80, 80, [255,255,255,0.8]),
		new HBox(-80, 350, 80, 80, [255,255,255,0.8]),
		new HBox(960, 0, 80, 80, [255,255,255,0.8]),
		new HBox(150, 546, 80, 80, [255,255,255,0.8]),
		new HBox(-80, 200, 80, 80, [255,255,255,0.8]),
		new HBox(550, -80, 80, 80, [255,255,255,0.8]),
		new HBox(960, 0, 80, 80, [255,255,255,0.8]),
		new HBox(750, 546, 80, 80, [255,255,255,0.8])
	];
	
	/* Phase 1: Boxes move in to form the title */
	Animator.addAnimations([{ 
			obj: this.boxes[0], 
			properties: ['x', 'y'], 
			to: [0, 130],
			duration: 1000,
			transition: 'easeInSine'
		}, {
			obj: this.boxes[1], 
			properties: ['x', 'y'], 
			to: [80, 130],
			duration: 1000,
			transition: 'easeInSine'
		}, {
			obj: this.boxes[2], 
			properties: ['x', 'y'], 
			to: [160, 130],
			duration: 1000,
			transition: 'easeInSine'
		}, {
			obj: this.boxes[3], 
			properties: ['x', 'y'], 
			to: [240, 130],
			duration: 1000,
			transition: 'easeInSine'
		}, {
			obj: this.boxes[4], 
			properties: ['x', 'y'], 
			to: [320, 130],
			duration: 1000,
			transition: 'easeInSine'
		}, {
			obj: this.boxes[5], 
			properties: ['x', 'y'], 
			to: [400, 130],
			duration: 1000,
			transition: 'easeInSine'
		}, {
			obj: this.boxes[6], 
			properties: ['x', 'y'], 
			to: [480, 130],
			duration: 1000,
			transition: 'easeInSine'
		}, {
			obj: this.boxes[7], 
			properties: ['x', 'y'], 
			to: [560, 130],
			duration: 1000,
			transition: 'easeInSine'
		}, {
			obj: this.boxes[8], 
			properties: ['x', 'y'], 
			to: [640, 130],
			duration: 1000,
			transition: 'easeInSine'
		}, {
			obj: this.boxes[9], 
			properties: ['x', 'y'], 
			to: [720, 130],
			duration: 1000,
			transition: 'easeInSine'
		}, {
			obj: this.boxes[10], 
			properties: ['x', 'y'], 
			to: [800, 130],
			duration: 1000,
			transition: 'easeInSine'
		}, {
			obj: this.boxes[11], 
			properties: ['x', 'y'], 
			to: [880, 130],
			duration: 1000,
			transition: 'easeInSine'
		}
	], repaintSystem, function() {
		// Phase 2: Fade in the title
		Animator.addAnimations([{
				obj: WSDOM.Element.get('banner-1'), 
				setter: setOpacity,
				from: 0,
				to: 100,
				transition: 'easeInCirc',
				duration: 1500
			}, { 
				obj: WSDOM.Element.get('banner-2'), 
				setter: setOpacity,
				from: 0,
				to: 100,
				transition: 'easeInCirc',
				duration: 1000, 
				delay: 750
			}, { 
				obj: WSDOM.Element.get('banner-3'), 
				setter: setOpacity,
				from: 0,
				to: 100,
				transition: 'easeInCirc',
				duration: 1000, 
				delay: 1250
			}, { 
				obj: WSDOM.Element.get('banner-4'), 
				setter: setOpacity,
				from: 0,
				to: 100,
				transition: 'easeInCirc',
				duration: 1000, 
				delay: 1750
			}
		], null, function() {
			setTimeout(function() {
				// Phase 3: Fade out the title, Fade in the buttons
				self.boxes.push(
					new HBox( 40, 150, 240, 240, [255,255,255,0]),
					new HBox(310, 150, 240, 240, [255,255,255,0])
				);

				var buttons = WSDOM.Element.get('buttons');
				buttons.style.display = 'block';
				Animator.addAnimations([{
						obj: WSDOM.Element.get('banner-1'), 
						setter: setOpacity,
						from: 100,
						to: 0,
						transition: 'easeInCirc',
						duration: 750
					}, { 
						obj: WSDOM.Element.get('banner-2'), 
						setter: setOpacity,
						from: 100,
						to: 0,
						transition: 'easeInCirc',
						duration: 750
					}, { 
						obj: WSDOM.Element.get('banner-3'), 
						setter: setOpacity,
						from: 100,
						to: 0,
						transition: 'easeInCirc',
						duration: 750
					}, { 
						obj: WSDOM.Element.get('banner-4'), 
						setter: setOpacity,
						from: 100,
						to: 0,
						transition: 'easeInCirc',
						duration: 750
					}, {
						obj: self.boxes[0], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[1], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[2], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[3], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[4], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[5], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[6], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[7], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[8], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[9], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[10], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[11], 
						property: 'fillStyle', 
						to: [255,255,255,0],
						duration: 1500,
						transition: 'easeInCirc'

					}, {
						obj: buttons,
						setter: setOpacity,
						from: 0,
						to: 100,
						transition: 'easeInCirc',
						duration: 1000
					}, {
						obj: self.boxes[12], 
						property: 'fillStyle', 
						to: [255,255,255,0.8],
						duration: 1000,
						transition: 'easeInCirc'
					}, {
						obj: self.boxes[13], 
						property: 'fillStyle', 
						to: [255,255,255,0.8],
						duration: 1000,
						transition: 'easeInCirc'
					}
				], repaintSystem);
			}, 3500);
		});
	});
}
HSystem.prototype.clear = function() {
	this.context.clearRect(0, 0, 960, 547);
};
HSystem.prototype.repaint = function() {
	this.clear();
	//this.context.fillStyle = "rgba(255,255,255,0.8)";
	//this.context.beginPath();
	for(var i = 0, len = this.boxes.length; i < len; i++) {
		//this.boxes[i].addToPath(this.context);
		this.boxes[i].draw(this.context);
	}
	//this.context.fill();
};

var system = null;
function startAnimation() {
	system = new HSystem();
}

WSDOM.Events.add(window, 'load', startAnimation);