var siteBox = new Class({
	
	Implements: [Options, Events],
	options: {
		size: {x: 450, y: 350}, // size when expanded
		sizeLoading: {x: 200, y: 150}, // start size
		closable: true,
		closeBtn: true,
		zIndex: 65555,
		overlayOpacity: 0.7,
		overlayId: 'sbox-overlay',
		updateOverlayOnResize: true,
		url: null,
		iframeId: 'sbox-content',
		windowId: 'sbox-window'
	},
	
	initialize: function(options) {
		this.setOptions(options);
	},
	
	show: function() {
		this.showOverlay();
		this.showWindow();
	},

	overlay: function() {
		// Return the overlay element if one exists, if not make it and return it.
		return $(this.options.overlayId) || new Element('div', {id: this.options.overlayId}).inject(document.body,'top');
	},
	
	window: function() {
		// Return the overlay element if one exists, if not make it and return it.
		return $(this.options.windowId) || new Element('div', {id: this.options.windowId}).inject(document.body,'top');
	},	
	
	showWindow: function() {
		this.window().morph({
			'min-height': [0,this.options.size.y],
			'min-width': [0,this.options.size.x],
			'opacity': 1,
			'visibility': 'visible',
			'display': 'block',
			'zIndex': this.options.zIndex + 1
		});
		this.window().set('load', {evalScripts: true});
		this.window().load(this.options.url);
		this.positionWindow();
	},
	
	positionWindow: function() {
		this.window().setStyles({
			top: ((window.getScrollSize().y / 2) - (this.options.size.y / 2)),
			left: ((window.getScrollSize().x / 2) - (this.options.size.x / 2))
		})
	},
	
	showOverlay: function() {
		// Make an emty object
		this.bound = this.bound || {};
		
		// Morph the overlay to visible
		this.overlay().morph({
			display: 'block',
			visibility: 'visible',
			opacity: this.options.overlayOpacity,
			zIndex: this.options.zIndex
		});
		
		this.resizeOverlay(); // Resize the overlay, else we wont see it
		
		// event isn't bound yet and we want to resize the overlay on a resize event
		// then bind the resize event to the resizeOverlay function
		if(!this.bound.resize && this.options.updateOverlayOnResize) {
			this.bound.resize = this.resizeOverlay.bind(this);
			window.addEvent('resize', this.bound.resize);
		}
	},
	
	resizeOverlay: function(){
		if(this.overlay()) {
			this.overlay().setStyles({
				width:(window.getScrollSize().x),
				height:(window.getScrollSize().y)
			});
		}
	},
	
	close: function() {
		this.window().morph({
			'opacity': 0
		});
		
		this.overlay().morph({
			opacity: 0
		});
		
		this.window().dispose.delay(500);
		this.overlay().dispose.delay(500);
	}
});