/**
 * A3non Sandbox - Overlay
 * 
 * @author Andi Dittrich <andi.dittrich@a3non.org>
 * @url http://www.a3non.org
 * @license Creative Commons BY-NC, Creative Commons Namensnennung-Keine kommerzielle Nutzung 3.0 Deutschland Lizenz, 
 * @license http://creativecommons.org/licenses/by-nc/3.0/de/
 * @version 1.0
 */

/**
 * Overlay
 */
Sandbox.UI.Overlay = new Class({
	Implements: [Options, Events],
	
	options: {
			startOpacity: 0,
			content: null,
			duration: 1500,
			seperate: false,
			
			styles: {
				position: 'fixed',
				left: '0px',
				top: '0px',
				width: '100%',
				height: '100%',
				overflow: 'hidden',
				zIndex: 10001,
				display: 'none',
				opacity: 0.8,
				backgroundColor: '#000000'
			}
	},
	
	container: null,
	content: null,
	seperateContentContainer: null,
	overlay: null,
	fx_in: null,
	fx_inc: null,
	isRendered: false,
	

	initialize: function(options){
		this.setOptions(options);
	},
	
	render: function(){
		var THIS = this;
		this.isRendered = true;
	
		// main container transparent
		this.container = new Element('div', {
			'id': 'OverlayContainer',
			'styles': THIS.options.styles		
		}).inject($(document.body), 'top');

		if (this.options.seperate){
			this.seperateContentContainer = new Element('div', {
				'id': 'OverlayContainerSeperate',
				'styles': {
					position: 'fixed',
					left: '0px',
					top: '0px',
					width: '100%',
					height: '100%',
					zIndex: 10002				
				}		
			}).inject($(document.body), 'top');
			this.seperateContentContainer.grab(this.options.content);
		}else{
			// otherwise grab it into root container
			this.container.grab(this.options.content);
		}
						
		// add effect
		this.fx_in = new Fx.Morph(this.container, {
			duration: this.options.duration,
			onStart: function(){
				THIS.fx_out.cancel();
				THIS.container.setStyle('opacity', THIS.options.startOpacity);
				THIS.container.show();
				if (THIS.seperateContentContainer != null) {
					THIS.seperateContentContainer.show();
				}
			},
			onComplete: function(){
				THIS.fireEvent('showComplete');
			}
		});
		this.fx_out = new Fx.Morph(this.container, {
			duration: this.options.duration,
			onStart: function(){
				THIS.fx_in.cancel();
				THIS.container.show();
			},
			onComplete: function(){
				THIS.container.hide();
				THIS.fireEvent('hideComplete');
				if (THIS.seperateContentContainer != null) {
					THIS.seperateContentContainer.hide();
				}
			}
		});
		// add position handler
		window.addEvent('resize', function(){ 
			THIS.container.setStyles({
				left: THIS.options.styles.left,
				top: THIS.options.styles.top,
				width: THIS.options.styles.width,
				height: THIS.options.styles.height
			});
			
			if (THIS.seperateContentContainer != null){
				THIS.seperateContentContainer.setStyles({
					left: '0px',
					top: '0px',
					width: '100%',
					height: '100%'
				});
			}
		});
	},
	
	show: function(){
		if (!this.isRendered){
			this.render();
		}
		this.fx_in.start({
			'opacity': [this.options.startOpacity, this.options.styles.opacity]
		});
	},
	
	hide: function(){
		if (!this.isRendered){
			this.render();
		}
		this.fx_out.start({
			'opacity': [this.options.styles.opacity, this.options.startOpacity]
		});
	},
	
	getContainer: function(){
		return this.container;
	}
	
});

/**
 * Extenden Overlayer - display loading events
 */
Sandbox.UI.Overlay.Loading = new Class({
	Extends: Sandbox.UI.Overlay,
	
	options: {
			startOpacity: 0,
			content: null,
			contentOpacity: 1,
			duration: 500,
			contentDuration: 50,
			image: 'images/ajax-loader.gif',
			contentEffectEnabled: false,

			styles: {
				position: 'fixed',
				left: '0px',
				top: '100%',
				width: '100%',
				height: '50px',
				marginTop: '-50px',
				overflow: 'hidden',
				zIndex: 10001,
				display: 'none',
				opacity: 0.9,
				backgroundColor: '#000000'
			}
	},
	
	initialize: function(options){
		this.parent(options);
		
		// display loading message
		var loader = new Element('img',{
			src: this.options.image,
			styles: {
				margin: 'auto',
				marginTop: '5px'
			}
		});
		
		var status = new Element('div', {
			styles: {
				'float': 'left',
				'color': '#c0c0c0',
				'fontSize': '12px',
				'fontFamily': 'Arial',
				'padding': '15px 0px 0px 10px'
			},
			text: MooTools.lang.get('GLOBAL', 'loading') + ' '				
		});
		
		status.grab(new Element('span', {
			text: this.options.url,
			styles: {
				'color': '#1aa5fe',
				'fontSize': '12px',
				'textStyle': 'italic'
			}
		}));
		
		var container = new Element('div');
		
		container.grab(status);
		container.grab(loader);
		
		this.options.content = container;
		this.render();
	}
});

/**
 * Sandbox OverlayWindow
 */

Sandbox.UI.Overlay.Window = new Class({
	Implements: Options,
	
	options: {
		structID: 'overlayWindow'
	},
	
	window: null,
	overlay: null,
	
	initialize: function(content, options){
		var THIS = this;
		this.setOptions(options);
		
		// create window
		this.window = $(this.options.structID).clone();
		this.window.hide();
		
		// add content to window
		this.window.getElement('.windowcontent').grab(content);
		
		// create overlayer
		this.overlay = new Sandbox.UI.Overlay({
			content: THIS.window,
			duration: 500,
			seperate: true,
			'styles': {
				'opacity': '0.8'
			}
		});
		
		// add close action
		this.window.getElement('.close').addEvent('click',  function(){
			this.hide();			
			return false;
		}.bind(this));
		
		// show window after overlayer is displayed
		this.overlay.addEvent('showComplete', function(){
			THIS.window.reveal();
		});

	},
	
	show: function(){
		this.overlay.show();
	},
	
	hide: function(){
		var fx = new Fx.Reveal(this.window);
		fx.addEvent('complete', function(){
			this.overlay.hide();
		}.bind(this));
		fx.dissolve();
	}
});