var redBox = new Class({
	Implements: [Events, Options],
	options: {
		triggerId: '',
		duration: 1000,
		durationShort: 500,
		fadeId: 'fadeOverlay-',
		fadeClass: 'fadeOverlay',
		fadeOpacity: 0.7,
		boxId: '',
		boxIdInner: '',
		closeId: '',
		boxWidth: '600px',
		boxHeight: '400px',
		boxMargin: '-300px'
	},
	initialize: function(element, options) {
		this.options.triggerId = element;
		this.setOptions(options);
		this.fireEvent('onInit');
		this.setupElements();
		this.setupTweens();
		this.setupEvents();
		
	},
	
	setupElements: function() {
		var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
		var string_length = 8;
		for (var i=0; i<string_length; i++) {
			var rnum = Math.floor(Math.random() * chars.length);
			this.options.fadeId += chars.substring(rnum,rnum+1);
		}

		//create div that will be used as a faded background;
		var fadedBackground = new Element('div', {id: this.options.fadeId}).inject($(document.body));
		$(this.options.fadeId).addClass(this.options.fadeClass);

	},	
	setupTweens: function() {	
	
		this.options.fader = new Fx.Tween(this.options.fadeId, {
			property: 'opacity',
			duration: this.options.durationShort,
			transition: Fx.Transitions.Quart.easeInOut
		});
		this.options.openerWidth = new Fx.Tween(this.options.boxId, {
			property: 'width',
			duration: this.options.duration,
			transition: Fx.Transitions.Quart.easeInOut
		});
		this.options.openerHeight = new Fx.Tween(this.options.boxId, {
			property: 'height',
			duration: this.options.duration,
			transition: Fx.Transitions.Quart.easeInOut
		});
		this.options.openerMarginLeft = new Fx.Tween(this.options.boxId, {
			property: 'margin-left',
			duration: this.options.duration,
			transition: Fx.Transitions.Quart.easeInOut
		});
		this.options.openerOpacity = new Fx.Tween(this.options.boxId, {
			property: 'opacity',
			duration: this.options.duration,
			transition: Fx.Transitions.Quart.easeInOut
		});
		this.options.openerInnerOpacity = new Fx.Tween(this.options.boxIdInner, {
			property: 'opacity',
			duration: 500,
			transition: Fx.Transitions.Quart.easeInOut
		});
		
		//setup the trasition for the popup box
		
		
	},
	setupEvents: function() {
		$(this.options.triggerId).addEvent('click',function(e){
			this.openBox();
		}.bindWithEvent(this));
	
		$(this.options.fadeId).addEvent('click',function(e){
			this.closeBox();
		}.bindWithEvent(this));
		
		$(this.options.closeId).addEvent('click',function(e){
			this.closeBox();
		}.bindWithEvent(this));
		
		$(this.options.closeIdSumbit).addEvent('click',function(e){
			this.closeBox();
		}.bindWithEvent(this));
	},
	
	openBox: function() {
		$(this.options.fadeId).style.left = 0;
		this.options.fader.start(0,this.options.fadeOpacity);
		$(this.options.boxId).style.left = 0;
		this.options.openerOpacity.start(0,1);
		//this.options.openerWidth.start(0,this.options.boxWidth););
		//$(this.options.boxId).style.width = "100%";

		//this.options.openerMarginLeft.start(0,this.options.boxMargin);
		//this.options.openerHeight.start(0,this.options.boxHeight);
		this.options.openerInnerOpacity.start.pass([0,1], this.options.openerInnerOpacity).delay(this.options.duration);
	},
	closeBox: function() {
		this.options.openerInnerOpacity.start(1,0);
		this.options.fader.start(this.options.fadeOpacity,0);
		this.options.openerOpacity.start(1,0);
		//this.options.openerWidth.start(this.options.boxWidth,0);
		//this.options.openerMarginLeft.start(this.options.boxMargin,0);
		//this.options.openerHeight.start(this.options.boxHeight,0);
	}
	
});