/*
	Filename: virtual_base.js
	
	Author: Riccardo Degni, <http://www.riccardodegni.it/>
	
	License: GPL (General Public License)
	
	Contains: Class Virtual.Base
	
	Filedescription:  Contains the Virtual.Base Class
	
	[Summary]
		Virtual.Base ::: Wrapper Class to create Virtual.Box and Virtual.Ajax
	[/Summary]
*/

/*
	Class: Virtual.Base
	Description: Wrapper Class to create Virtual.Box and Virtual.Ajax
	
	Extends: Class Virtual
	
	[Options]
		className : the class name of the virtual box
		easing : the transition of the virtual box. You can choose one value from 'elastic' (default), 'bounce' and 'normal'
		duration : the duration in ms of start effect
		position : the position of the virtual box. You can choose one value from 'top', 'center' (default) or 'bottom'. If the mode is set to 'horizontal', these values are horizontal, if it's set to 'vertical' are vertical.
		mode : the mode how the virtual box appears. 'horizontal' (horizontally) or 'vertical' (vertically)
		opacify: 'darken' or 'lighten' opacify
	[/Options]
	
	[Example]
		> // Virtual.Box
		> var virtualbox = new Virtual.Box('Virtual Box', {
		>		className: 'box',
		>		mode: 'horizontal',
		>		position: 'top'
		> });
		> // Virtual.Ajax
		> var virtualajax = new Virtual.Ajax('page.php', {
		>		className: 'box',
		>		mode: 'vertical',
		>		closeClass : 'closeBox'
		> });
	[/Example]
*/

var Virtual = {};

Virtual.Base = new Class({
						 
	options: {
		className: '',
		easing: 'elastic',
		duration: 1600,
		position: 'center',
		mode: 'vertical',
		opacify: 'darken'
	},
	
	initialize: function(text, options) {
		this.text = text;
		this.setOptions(options);
		this.box = new Element('div', {
			'id': 'virtualBox2.0',
			'class': this.options.className,
			'styles': {
				'position': 'absolute',
				'z-index': 1000
			}				   
		});
		this.createOverlay();
		
		switch(this.options.easing) {
			case 'elastic': this.transition = Fx.Transitions.Elastic.easeOut; break;
			case 'bounce': this.transition = Fx.Transitions.Bounce.easeOut; break;
			case 'normal': this.transition = Fx.Transitions.Sine.easeInOut; break;
		};
		switch(this.options.position) {
			case 'top': this.pos = 20; break;
			case 'center': this.pos = 50; break;
			case 'bottom': (this.options.mode == 'vertical') ? this.pos = 75 : this.pos = 80; break;
		};
		this.settings = {duration: this.options.duration, transition: this.transition, wait:false, unit: '%'};
		this.fxTop = new Fx.Style(this.box, 'top', this.settings);
		this.fxLeft = new Fx.Style(this.box, 'left', this.settings);
		this.mechanize();
		if(this.options.initialize) this.options.initialize.call(this);
	},
	
	createOverlay: function() {
		this.overlay = new Element('div', {
			'id': 'overlay',
			'styles': {
				'position': 'absolute',
				'top': '0px',
				'left': '0px',
				'width': '100%',
				'height': window.getScrollHeight(),
				'background-color': (this.options.opacify == 'darken') ? '#333333' : '#FFFFFF',
				'opacity': '0.8',
				'z-index': 900
			}
		});
	},
	
	createPage: function() {
		this.page = new Element('div', {
			'id': 'virtualBox2.0page',
			'styles': {
				'position': 'absolute',
				'top': window.getScrollTop(),
				'left': '0px',
				'width': window.getWidth() + 'px',
				'height': window.getHeight() + 'px',
				'z-index': 900
			}
		});
	},
	
	mechanize: function() {
		this.box.addEvent('click', this.removeElements.bind(this));
		this.box.setHTML(this.text);
	},
	
	appendElements: function() {
		this.box.injectInside(this.page);
		this.page.injectTop($E('body'));
		this.overlay.injectTop($E('body'));
	},
	
	customize: function() {
		
		if($('virtualBox2.0')) return;
		
		switch(this.options.mode) {
			case 'vertical':
				this.box.setStyles({'top': '-20%', 'left': '50%'});
				break;
			case 'horizontal':
				this.box.setStyles({'top': '40%', 'left': '-20%'});
				break;
		}
		
		this.createPage();
		
		if(!window.gecko) this.appendElements();
 
		this.box.setStyles({
			'margin-left': - this.box.getStyle('width').toInt()/2,
			'margin-top': - this.box.getStyle('height').toInt()/2
		});
 
 		if(window.gecko) this.appendElements();
		
		this.marginY = this.box.getStyle('height').toInt()/2;
		this.marginX = this.box.getStyle('width').toInt()/2;
		
		this.fxTop.setOptions(this.settings);
		this.fxLeft.setOptions(this.settings);
		
		(this.options.mode == 'vertical') ? this.fxTop.start(-20, this.pos) : this.fxLeft.start(-20, this.pos);
	},
	
	removeElements: function() {
		var opt = {duration:800, transition:Fx.Transitions.linear};
		if(this.options.mode == 'vertical') {
			this.fxTop.setOptions(opt);
			this.fxTop.start(-this.marginY*4).chain(function() {
				this.page.remove();
				this.overlay.remove();															
				document.location = "index.asp";
			}.bind(this));
		}
		else if(this.options.mode == 'horizontal') {
			this.fxLeft.setOptions(opt);
			this.fxLeft.start(-this.marginX*4).chain(function() {
				this.page.remove();
				this.overlay.remove();			
				document.location = "index.asp";
			}.bind(this));
		};
		//document.location = "index.asp";
	}
						 
});

Virtual.Base.implement(new Options);


/*
	Filename: virtual_box.js
	
	Author: Riccardo Degni, <http://www.riccardodegni.it/>
	
	License: GPL (General Public License)
	
	Contains: Class Virtual.Box
	
	Requires: virtual_base.js
	
	Filedescription:  Contains the Virtual.Box Class
	
	[Summary]
		Virtual.Box ::: Custom Class to create virtual boxes
	[/Summary]
*/

/*
	Class: Virtual.Box
	Description:  Custom Class to create virtual boxes. Allows you to create easily virtual boxes, that are special boxes appear on an overlay which cover the page. This means the virtual boxes can contain special or important information. /n You can remove the virtual box from the page by clicking on it. 
	
	Extends: Class Virtual.Base
	
	Constructor: new Virtual.Box (text, options)
	
	[Properties] 
		text - the text that virtual box shows
		options - optional. the virtual box options
	[/Properties]
	
	[Options]
		Virtual.Base options : all the Virtual.Base options
	[/Options]
	
	[Methods]
		start -- shows the virtual box
		setText -- sets the text of the virtual box
	[/Methods]
	
	Method: start
	Description: shows the virtual box
	[Example]  
		> var virtualbox = new Virtual.Box('Virtual Box', {
		>		className: 'box',
		>		mode: 'horizontal',
		>		position: 'top'
		> });
		> // shows the virtual box
		> virtualbox.start();
	[/Example]
	
	Method: setText
	Description: sets the text of the virtual box
	[Example]  
		> virtualbox.setText('The Virtual Box');
	[/Example]
*/

Virtual.Box = Virtual.Base.extend({
	
	initialize: function(text, options) {
		this.parent(text, options);
	},
	
	start: function() {
		this.customize();	
	},
	
	setText: function(text) {
		this.box.setHTML(text);
		return this;
	}
						   
});