/**
 * @author Ben Gazzard [28/02/2008] - Site Object
 */
var fluidic = {
	domready: function(){
		if(Browser.Engine.trident){
			var excanvas = new Asset.javascript('js/excanvas.js',{
				'id':'excanvas',
				onComplete:function(){
					fluidic.display();
				}
			});
		}
		fluidic.display();
	},
	display: function(){
		var gradientBg = new GradientBackground(document.body,{
			canvasId: 'background',
			width: window.getSize().x,
			height: window.getSize().y,
			startColor: '#CCCCCC',
			endColor:'#FFFFFF'		
		});
		var container = new SiteContainer($('container'), {
			vAlign:'center',
			hAlign:'center',
			width:850,
			height:600		
		});
	}
}
window.addEvent('domready', fluidic.domready);


/**
 * @author Ben Gazzard [28/02/2008] - Site Classes
 */
var SiteContainer = new Class({
	Implements: Events,
	Implements: Options,
	options:{
		vAlign:'',
		hAlign:'',
		width:0,
		height:0	
	},
	initialize: function(ele, options){
		this.setOptions(options);
		this.ele = ele;
		window.addEvent('resize', this.position.bind(this));
		this.position();
	},
	position: function(){
		this.ele.set({
			'styles':{
				'position':'absolute',
				'width': this.options.width,
				'height': this.options.height,
				'top': this.top(),
				'left': this.left()
			}
		});
	},
	top: function(){
		switch(this.options.vAlign) {
			case 'top':
				return 0;
				break;
			case 'center':
				return (window.getSize().y / 2) - (this.options.height / 2);
				break;
			case 'bottom':
				return window.getSize().y - this.options.height;
				break;
		}		
	},
	left: function(){
		switch(this.options.hAlign) {
			case 'left':
				return 0;
				break;
			case 'center':
				return (window.getSize().x / 2) - (this.options.width / 2);
				break;
			case 'bottom':
				return window.getSize().x - this.options.width;
				break;
		}
	}
});

var Canvas = new Class({
	Implements: Options,
	options:{
		canvasId:''
	},
    initialize: function(options){
		this.setOptions(options)
		this.eleCanvas = new Element('canvas',{
			'id': this.options.canvasId
		});
		this.ctx = this.eleCanvas.getContext('2d');	
    },
	rect: function(width, height, startColor, endColor){
		this.rectGradient = this.ctx.createLinearGradient(0, 0, 0, height);
		this.rectGradient.addColorStop(0, startColor);
		this.rectGradient.addColorStop(1, endColor);
		this.ctx.fillStyle = this.rectGradient;
		this.ctx.fillRect(0, 0, width, height);
	},
	roundedRect: function(x, y, width, height, radius, r, g, b, a){
		this.ctx.fillStyle = 'rgba(' + r +',' + g + ',' + b + ',' + a + ')';
		this.ctx.beginPath();
		this.ctx.moveTo(x, y + radius);
		this.ctx.lineTo(x, y + height - radius);
		this.ctx.quadraticCurveTo(x, y + height, x + radius, y + height);
		this.ctx.lineTo(x+ width - radius, y + height);
		this.ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
		this.ctx.lineTo(x + width, y + radius);
		this.ctx.quadraticCurveTo(x + width, y, x + width - radius, y);
		this.ctx.lineTo(x + radius, y);
		this.ctx.quadraticCurveTo(x, y, x, y + radius);
		this.ctx.fill();
	}
});

var GradientBackground = new Class({
    Extends: Canvas,
	Implements: Events,
	Implements: Options,
	options: {
		canvasId:'',
		width:'',
		height:'',
		startColor:'',
		endColor:''
	},
    initialize: function(ele, options){
        this.setOptions(options)
		this.parent(options);
		this.setSize();
		if(ele.get('tag')=='body'){
			window.addEvent('resize', this.setSize.bind(this));	
		}
		this.eleCanvas.inject(ele,this.options.inject);
    },
	setSize: function(){
		this.eleCanvas.set({
			'width': window.getSize().x,
			'height': window.getSize().y
		});
		this.rect(this.options.width, this.options.height, this.options.startColor, this.options.endColor);
	}
});

var RoundedRect = new Class({
    Extends: Canvas,
	Implements: Events,
	Implements: Options,
	options: {
		canvasId:'',
		width:'',
		height:'',
		color:'',
		radius:'',
		borderWidth:'',
		borderColor:''
	},
    initialize: function(ele, options){
        this.setOptions(options)
		this.parent(options);
		this.setSize();
		this.eleCanvas.inject(ele,this.options.inject);
		this.color = new Color(this.options.color);
    },
	setSize: function(){
		this.eleCanvas.set({
			'width': this.options.width,
			'height': this.options.height
		});
		this.draw();
	}
});