var Plex = {
	UI: {
		zIndex:10000
	}
}

var Fly_Box = function (settings) {
	
	if(!settings) {
		settings = {};
	}
	
	var self = this;
	self.settings = {
		width:600,
		height:600,
		springOffset:75,
		shadeOpacity:0.75,
		moveEffect:true,
		fadeEffect:true
	}
	
	
	for(i in settings)
	self.setting[i]=settings[i];
	
	self.currentElement = null;
	
	self.hotKeys = {
		27 : function(){
			self.close();
		},
		'test': 123
	}
	
	this.init = function()
	{
		self.contentDiv.fx = new Fx.Morph(self.contentDiv, {
			duration: 250,
			wait: false,
			transition: Fx.Transitions.Quad.easeOut
		});
		
		self.colorShade.fx = new Fx.Morph(self.colorShade, {
			duration: 250,
			wait: false,
			transition: Fx.Transitions.Quad.easeOut
		});
		
		document.body.appendChild(self.contentDiv);
		document.body.appendChild(self.colorShade);
		
		document.addEvent('keyup', self.runHotKeys);
	}
	
	this.contentDiv = new Element('div',{
		'class':'Fly_Box',
		styles: {
			'opacity':0
		}
	})
	
	this.colorShade = new Element('div',{
		'class': 'Fly_Box_Color_Shade',
		'styles': {
			'opacity':0
		}
	})
	
	this.loadElement= function(element) {
		
		if(!element.oldParent) {
			element.oldParent = element.parentNode;
		}
		
		if(self.currentElement!=null) {
			self.currentElement.oldParent.appendChild(self.currentElement);
			self.currentElement.style.display='none';
		}		
		
		self.contentDiv.empty();
		self.contentDiv.appendChild(element);

		if(element.style.display=='none')
		element.style.display='';
		
		var width = element.offsetWidth;
		var height = element.offsetHeight;
		
		self.currentElement = element;
		
		self.open(width,height);
	}
	
	this.open = function(width,height)
	{		
		this.settings.lastOnKeyPress = document.body.onkeypress;
		//document.body.onkeypress = self.runHotKeys;
		
		self.colorShade.style.zIndex = Plex.UI.zIndex++;
		self.contentDiv.style.zIndex = Plex.UI.zIndex++;
		
//		console.log(width);
//		console.log(height);
		
		
//		if(width)
//		{
//			self.settings.lastWidth = width;
//			self.settings.lastHeight = height;
//		}
//		else
//		{
//			width = self.settings.lastWidth;
//			height = self.settings.lastHeight;
//		}
		
		
		self.contentDiv.set({
			'styles':{
				'width': width,
				'height': height+40
			}
		})
		
		self.settings.leftMargin = -(width/2);
		self.settings.topMargin = -(height/2);
		
		if(self.settings.moveEffect && self.settings.fadeEffect)
		{
			self.contentDiv.fx.start({
				'opacity':1,
				'margin-top': [self.settings.topMargin-self.settings.springOffset,self.settings.topMargin],
				'margin-left': [self.settings.leftMargin-self.settings.springOffset,self.settings.leftMargin]
			});
			
			
			self.colorShade.fx.start({
				'opacity':self.settings.shadeOpacity
			})
		}
		else if(self.settings.moveEffect)
		{
			self.contentDiv.set({
				'styles':{				
					'opacity':1
				}
			});
			self.contentDiv.fx.start({
				'margin-top': [self.settings.topMargin-self.settings.springOffset,self.settings.topMargin],
				'margin-left': [self.settings.leftMargin-self.settings.springOffset,self.settings.leftMargin]
			})
			
			self.colorShade.set({
				style:{
					'opacity':self.settings.shadeOpacity
				}
			})
		}
		else if(self.settings.fadeEffect)
		{
			self.contentDiv.set({
				'styles':{
					'margin-top': self.settings.topMargin,
					'margin-left': self.settings.leftMargin
				}
			});
			
			self.contentDiv.fx.start({
				'opacity':1				
			})
			
			
			self.colorShade.fx.start({
				'opacity':self.settings.shadeOpacity
			})
		}
		else
		{
			self.contentDiv.set({
				'styles':{
					'margin-top': self.settings.topMargin,
					'margin-left': self.settings.leftMargin,
					'opacity':1
				}
			});
			
			self.colorShade.set({
				style:{
					'opacity':self.settings.shadeOpacity
				}
			})
		}	
	}
	
	this.runHotKeys = function(e) {
		if(self.hotKeys[e.code]) {
			self.hotKeys[e.code].apply(self);
		}
		else if(self.hotKeys[String.fromCharCode(e.charCode)]) {
			self.hotKeys[String.fromCharCode(e.charCode)].apply(self);
		}
		
		e.stopPropagation();
	}
	
	this.close = function(onClose)
	{	
		
		document.body.onkeypress = this.settings.lastOnKeyPress;
		document.onkeyPress = function(){}	
				
		var runAfter = function(){
			if(onClose)
			onClose();
		}		
				
		if(self.settings.moveEffect && self.settings.fadeEffect)
		{
			self.contentDiv.fx.start({
				'opacity':0,
				'margin-top': self.settings.topMargin-self.settings.springOffset,
				'margin-left': self.settings.leftMargin-self.settings.springOffset
			}).chain(runAfter)
			
			
			self.colorShade.fx.start({
				'opacity':0
			})
		}
		else if(self.settings.moveEffect)
		{
			self.contentDiv.fx.start({
				'margin-top': self.settings.topMargin-self.settings.springOffset,
				'margin-left': self.settings.leftMargin-self.settings.springOffset
			}).chain(runAfter)
			
			self.colorShade.set({
				'styles':{
					'opacity':0
				}
			})
		}
		else if(self.settings.fadeEffect)
		{
			self.contentDiv.fx.start({
				'opacity':0
			}).chain(runAfter)
			
			
			self.colorShade.fx.start({
				'opacity':0
			})
		}
		else 
		{
			self.contentDiv.set(
			{
				'styles':{
					'opacity':0
				}
			})
			
			self.colorShade.set({
				'styles':{
					'opacity':0
				}
			})
			
			
			runAfter();
		}	
	}
	
	this.loadURL = function(URL){
		self.contentDiv.empty();
		
		iFrame = new Element('iframe',{
			'src':URL,
			'frameborder':0,
			'styles': {
				'width': '100%',
				'height': '100%'
			}
		}).injectInside(self.contentDiv);
	}
	
	this.loadImage = function(src){
		self.contentDiv.empty();
		var preLoader = new Image();
		
		
		preLoader.onload=function(){
			var image = new Element('img',{
				'src':src,
				'border':0,
				'styles': {
					'width': preLoader.width,
					'height': preLoader.height
				}
			}).injectInside(self.contentDiv);

			self.resizeBox(preLoader.width,preLoader.height);
			preLoader.onload=function(){};
		}
		
		preLoader.src = src;
	}
	
	this.init();
}