var MultiBox = new Class({

	getOptions: function(){
		return {
			contentColor: '#FFF',
			initialWidth: 250,
			initialHeight: 250,
			container: document.body,
			contentClass: false
		};
	},
	
	initialize: function(options){
		this.setOptions(this.getOptions(), options);
		
		
		this.openClosePos = {};
		this.contentObj = {};
		this.contentClone = {};
		
		this.opened = false;
				
		this.overlay = new Overlay({container: this.options.container, onClick:this.close.bind(this)});
		
		this.container = new Element('div').addClass('MultiBoxContainer').injectInside(this.options.container);
		
		this.box = new Element('div').addClass('MultiBoxContent').injectInside(this.container);
		
		this.closeButton = new Element('div').addClass('MultiBoxClose').injectInside(this.container).addEvent('click', this.close.bind(this));
		
		this.containerEffects = new Fx.Morph(this.container, {duration: 400, transition: Fx.Transitions.sineInOut});
		
				
		this.open();
		
		
	},
	
	
	setContent: function(){
					
		$$('.overlay_inner')[0].setStyles({
			'opacity':0.9
		});
					
		this.content = $('page_container_ani');
		
		this.temp = this.content.clone();
	
		this.contentClone = this.temp;
		
		this.contentObj = {};
		this.contentObj.width = 1024;
		this.contentObj.height = 768;
		this.contentObj.xH = 0;
	},
	
	open: function(){
				
		if(!this.opened){
			this.opened = true;
			
			
			this.overlay.show();
			
			
			//this.container.setStyles(this.getOpenClosePos());
			this.container.setStyles({
				opacity: 0,
				display: 'block'
			});
			
			
			var top = ((window.getCoordinates().height/2)-(this.options.initialHeight/2));
			
			this.container.setStyles({
				width: this.options.initialWidth,
				height: this.options.initialHeight,
				top: top,
				left: ((window.getCoordinates().width/2)-(this.options.initialWidth/2))
			});
			
			this.containerEffects.start({				
				opacity: [0, 1]
			});
						
			this.load();
		}
	},
	
	load: function(){
		this.box.addClass('MultiBoxLoading');
		this.setContent();
		this.resize();
	},
	
	
	close: function(){		
		this.hideContent();
		this.containerEffects.cancel();
		this.zoomOut.bind(this).delay(100);
		this.overlay.hide();
	},
	
	
	resize: function(){
						
		var top = ((window.getCoordinates().height / 2) - ((Number(this.contentObj.height) + this.contentObj.xH) / 2) + window.getScrollTop());
				
		var left = ((window.getCoordinates().width / 2) - (this.contentObj.width / 2));
		
		if (top < 20) {
			top = 20;
		}
		if (left < 0) {
			left = 0;
		}
					
		this.containerEffects.cancel();
		/*this.containerEffects.start({
			'width': this.contentObj.width,
			'height': Number(this.contentObj.height) + this.contentObj.xH,
			'top': top,
			'left': left,
			'opacity': 1
		});*/
		
		this.container.setStyles({
			'width': this.contentObj.width,
			'height': Number(this.contentObj.height) + this.contentObj.xH,
			'top': top,
			'left': left
		});
		
		this.containerEffects.start({
			'opacity': 1
		});
		
		
		this.timer = this.showContent.bind(this).delay(300);
	},
	
	removeContent: function(){
		if($('MultiBoxContainer')){
			//$('MultiBoxContentContainer').empty();
			$('MultiBoxContainer').destroy();		
		}
		this.container.destroy();
	},
	
	getOpenClosePos: function(){
	
		//var top = ((window.getCoordinates().height/2)-(this.options.initialHeight/2)-this.container.getStyle('border').toInt());
			
		this.openClosePos = {
			width: this.options.initialWidth,
			height: this.options.initialHeight,
			//top: top,
			//left: ((window.getCoordinates().width/2)-(this.options.initialWidth/2)-this.container.getStyle('border').toInt())
			top: window.getScrollTop(),
			left:0
		};
		
		return this.openClosePos;
	},
	
	showContent: function(){
		this.box.removeClass('MultiBoxLoading');
				
		this.contentContainer = new Element('div').setProperties({id: 'MultiBoxContentContainer'}).setStyles({
			opacity: 0, 
			width: this.contentObj.width+'px',
			height: (Number(this.contentObj.height)+this.contentObj.xH)+'px'
		}).injectInside(this.box);
				
		var clone = this.contentClone;
		clone.setStyle('display','block').injectInside(this.contentContainer);
					
		
		this.contentEffects = new Fx.Morph(this.contentContainer, {duration: 500, transition: Fx.Transitions.linear});
		this.contentEffects.start({
			opacity: 1
		});
		
		$$('.sprachlinks').addEvent('click',function(elem){
		
		this.test = elem.target.rel;
				
		var myEffect = new Fx.Morph($$('.overlay_inner')[1], {
			duration: 'long', 
			transition: Fx.Transitions.Sine.easeOut,
			onComplete: function(){
	
				if(this.test != 0)
				{
					this.close();
					window.location.href = '/home/?L='+this.test;
				}
				else
				{
					this.close();
				}
				
			}.bind(this)	
		});
		
		myEffect.start({
    		'width': [0]
			}); 
		}.bind(this));
											
	},
	
	hideContent: function(){
		this.box.addClass('MultiBoxLoading');
		if($('OverlayContainer')){
			this.contentEffects.start({
				opacity: 0
			});
		}
		//this.removeContent.bind(this).delay(500);
	},
	
	reset: function(){
		this.container.setStyles({
			'opacity': 0,
			'display': 'none'
		});
		
		this.removeContent();
		this.opened = false;
	},
	
	zoomOut: function(){
		this.containerEffects.start({
			width: this.openClosePos.width,
			height: this.openClosePos.height,
			/*top: this.openClosePos.top,
			left: this.openClosePos.left,*/
			opacity: 0
		});
		this.reset.bind(this).delay(500);
	}

});

MultiBox.implement(new Options);
MultiBox.implement(new Events);